download: Updating layout of download pages

content/learn/download.md

@@ -3,5 +3,5 @@ title: "Download"
 date: 2022-08-15T11:02:05+02:00
 description: "Download GRASS GIS"
 weight: 1
-layout: "os"
+layout: "download"
 ---

data/grass.json

@@ -10,5 +10,14 @@
  "preview_version":"8.4.0",
  "preview_version_short":"8.4",
  "preview_version_underscore": "8_4",
- "preview_version_nodots":"84"
+ "preview_version_nodots":"84",
+ "install": {
+ "mac_ports": { 
+ "id": "mac_ports",
+ "title": "MacPorts",
+ "code": "sudo port install grass",
+ "url": "https://ports.macports.org/port/grass/"
+ }
+ }
+
 }

themes/grass/assets/css/style.css

@@ -1431,3 +1431,51 @@ code{
  object-fit: cover;
  /* border: 4px solid var(--grass-color-dark); */
 }
+
+.download-card {
+ max-width: 600px; /* Sets a max-width for the card */
+ box-shadow: 0 4px 6px rgba(0,0,0,.1); /* Adds a subtle shadow to the card */
+ border: none; /* Removes the default card border */
+}
+.download-btn {
+ background-color: var(--grass-color);
+ border: none; /* Removes the border */
+ padding: .75rem 1.5rem; /* Larger padding for the button */
+ font-size: 1rem; /* Larger font size */
+ color: var(--white-color); /* White text color */
+}
+.download-btn:hover {
+ color: var(--white-color) !important;
+ background-color: var(--grass-color-alt); /* Darker blue on hover */
+}
+
+.support-btn {
+ background-color: hsl(334, 89%, 59%);
+ border: none; /* Removes the border */
+ padding: .75rem 1.5rem; /* Larger padding for the button */
+ font-size: 1rem; /* Larger font size */
+ color: var(--white-color); /* White text color */
+}
+.support-btn:hover, .support-btn:focus {
+ color: var(--white-color) !important;
+ background-color: hsla(334, 89%, 59%, 0.5); /* Darker blue on hover */
+}
+
+.code-container {
+ position: relative;
+ background-color: #777;
+}
+.btn-clipboard {
+ position: absolute;
+ top: .5rem;
+ right: .5rem;
+ z-index: 10;
+ display: block;
+ padding: .25rem .5rem;
+ font-size: 75%;
+ color: #ffffff;
+ cursor: pointer;
+ background-color: transparent;
+ border: 0;
+ border-radius: .25rem;
+}

themes/grass/assets/js/script.js

@@ -61,4 +61,57 @@
  $(this).html($(this).html() == 'View more' ? 'View less' : 'View more');
  e.preventDefault();
  });
+
+ function detectOSFromUserAgent() {
+ return new Promise((resolve) => {
+ const userAgent = window.navigator.userAgent;
+
+ if (userAgent.includes("Win")) resolve("Windows");
+ else if (userAgent.includes("Mac")) resolve("macOS");
+ else if (userAgent.includes("Linux")) resolve("Linux");
+ else if (userAgent.includes("Android")) resolve("Android");
+ else if (userAgent.includes("like Mac") && /iPhone|iPad|iPod/.test(userAgent)) resolve("iOS");
+ else resolve("Unknown OS");
+ });
+ }
+
+ $(document).ready(function() {
+ // Detect the user's OS and update the download button text
+ (async () => {
+ const os = await detectOSFromUserAgent();
+ const button = $(".grass-os-download-button");
+ console.log(os);
+ // Add text and data based on the user's OS
+ switch (os) {
+ case "Windows":
+ button.text("Download for Windows");
+ button.data("os", "windows");
+ $('#downloadTab a[href="#windows"]').tab('show');
+ if (window.location.pathname === "/learn/download/") {
+ history.replaceState(null, null, "#windows");
+ }
+ break;
+ case "macOS":
+ button.text("Download for macOS");
+ button.data("os", "mac");
+ $('#downloadTab a[href="#mac"]').tab('show');
+ if (window.location.pathname === "/learn/download/") {
+ history.replaceState(null, null, "#mac");
+ }
+ break;
+ case "Linux":
+ button.text("Download for Linux");
+ button.data("os", "linux");
+ if (window.location.pathname === "/learn/download/") {
+ history.replaceState(null, null, "#linux");
+ }
+ break;
+ default:
+ button.text("Download");
+ button.data("os", "unknown");
+ break;
+ }
+ })(jQuery);
+ });
+
 })(jQuery);

themes/grass/layouts/learn/download.html

@@ -0,0 +1,100 @@
+{{ partial "head.html" . }}
+
+{{ "<!-- navigation -->" | safeHTML }}
+<header class="shadow-bottom position-relative">
+ <div class="fixed-top">
+ {{ partial "banner.html" . }}
+ <div class="bg-white">
+ <div class="container bg-white">
+ {{ partial "navigation.html" . }}
+ </div>
+ </div>
+ </div>
+</header>
+{{ "<!-- /navigation -->" | safeHTML }}
+
+<section class="pt-4 bg-gray mt-95">
+ <div class="container">
+ <div class="row">
+ <div class="col-12 text-center">
+ <h2 class="section-title">#Download</h2>
+ </div>
+ </div>
+ </div>
+
+ <!-- Download Tab Sections -->
+ <div class="container download-grass">
+ <ul class="nav nav-tabs" id="downloadTab" role="tablist">
+ <li class="nav-item">
+ <a class="nav-link active" id="linux-tab" data-toggle="tab" href="#linux" role="tab" aria-controls="linux" aria-selected="true">Linux</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" id="mac-tab" data-toggle="tab" href="#mac" role="tab" aria-controls="mac" aria-selected="false">Mac</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" id="windows-tab" data-toggle="tab" href="#windows" role="tab" aria-controls="windows" aria-selected="false">Windows</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" id="windows-tab" data-toggle="tab" href="#docker" role="tab" aria-controls="docker" aria-selected="false">Docker</a>
+ </li>
+ </ul>
+ <div class="tab-content" id="downloadTabContent">
+ <!-- Linux Section -->
+ <div class="tab-pane fade show active" id="linux" role="tabpanel" aria-labelledby="linux-tab">
+ {{ with .Site.GetPage "download" "linux" }}{{ .Content }}{{ end }}
+ </div>
+
+ <!-- Mac Section -->
+ <div class="tab-pane fade" id="mac" role="tabpanel" aria-labelledby="mac-tab">
+ {{ $download_data := dict "os" "Mac" "url" "https://cmbarton.github.io/grass-mac/download/" "version" .Site.Data.grass.current_version }}
+ {{ partial "grass-download.html" $download_data }}
+ {{ partial "code-copy.html" .Site.Data.grass.install.mac_ports }}
+ </div>
+
+ <!-- Windows Section -->
+ <div class="tab-pane fade" id="windows" role="tabpanel" aria-labelledby="windows-tab">
+ {{ $windows_url := printf "/grass%s/binary/mswindows/native/WinGRASS-%s-1-Setup.exe" .Site.Data.grass.current_version_nodots .Site.Data.grass.current_version }}
+ {{ $download_data := dict "os" "Windows" "url" $windows_url "version" .Site.Data.grass.current_version }}
+ {{ partial "grass-download.html" $download_data }}
+ <!-- Add text-center class to center the button -->
+ <!-- <div class="pt-5"> 
+ <p class="text-center">
+ <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#collapseWindowsAdditionalOptions" aria-expanded="false" aria-controls="collapseWindowsAdditionalOptions">
+ Additional Options
+ </button>
+ </p>
+ </div> -->
+ <!-- <div class="container collapse" id="collapseWindowsAdditionalOptions"> -->
+ <div class="container">
+ <div class="row">
+ <div class="col-12">
+ <h3>Additional Options</h3>
+ <div class="row mb-5 text-primary">
+ <div class="col-12">
+ <h4>OSGeo4W</h4>
+ <p>OSGeo4W is an installer for a broad set of open source geospatial software packages including GRASS GIS as well as many other packages (QGIS, GDAL/OGR, and more).</p>
+ <a href="https://download.osgeo.org/osgeo4w/v2/osgeo4w-setup.exe" target="_blank"><i class="fa-solid fa-download"></i> Download OSGeo4W v2</a>
+ </div>
+ </div>
+ <div class="row mb-5 text-primary">
+ <div class="col-12">
+ <h4>QGIS users</h4>
+ <p>In order to have GRASS GIS support (also in QGIS-Processing) you need to install the “qgis*-grass-plugin” packages.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Docker Section -->
+ <div class="tab-pane fade" id="docker" role="tabpanel" aria-labelledby="docker-tab">
+ {{ with .Site.GetPage "download" "docker" }}{{ .Content }}{{ end }}
+ </div>
+
+ </div>
+ </div>
+</section>
+
+
+{{ partial "footer.html" . }}

themes/grass/layouts/partials/code-copy.html

@@ -0,0 +1,23 @@
+<script>
+ $(document).ready(function() {
+ $("#{{ .id }}").on('click', function() {
+ const code = $(this).prev().text();
+ navigator.clipboard.writeText(code).then(() => {
+ alert(code);
+ }).catch(err => {
+ console.error('Error in copying text: ', err);
+ });
+ });
+ });
+</script>
+
+<div>
+ <h3>{{ .title }}</h3>
+
+<div class="code-container m-3 rounded">
+ <pre><code class="language-html">{{ .code }}</code></pre>
+ <button id="{{ .id }}" class="btn btn-primary btn-clipboard">Copy</button>
+</div>
+</div>
+
+

themes/grass/layouts/partials/grass-download.html

@@ -0,0 +1,11 @@
+<div class="grass-download m-5">
+ <h1 class="text-dark pt-2">Download GRASS GIS for {{ .os }}</h1>
+ <p class="card-text">Click the button below to download the latest {{ .os }} version of GRASS GIS.</p>
+ <!-- Replace the href value with the actual download link for the Windows version of GRASS GIS -->
+ <a href="{{ .url }}" 
+ class="btn download-btn" 
+ target="_blank"><i class="fa-solid fa-download"></i> Download GRASS GIS ( {{ .version }} )</a>
+ <a href="https://opencollective.com/grass/contribute" 
+ class="btn support-btn" 
+ target="_blank"><i class="fa-solid fa-heart"></i> Support Us</a>
+</div>