From 9863552ad6b92fbd69c7d883a728b7ca9a1bd7bc Mon Sep 17 00:00:00 2001
From: Yuri Sizov <yuris@humnom.net>
Date: Wed, 25 Oct 2023 17:58:01 +0200
Subject: [PATCH] Add a download card for use in articles

---
 _includes/articles/download_card.html         |  65 +++++++++
 .../outdated_notice.html}                     |   0
 _includes/articles/prerelease_notice.html     |   5 +
 _layouts/article.html                         |   7 +-
 _plugins/make_download.rb                     |  33 ++++-
 _plugins/outdated_article_threshold.rb        |   2 +-
 assets/css/article-cards.css                  | 135 ++++++++++++++++++
 assets/css/main.css                           |  27 ++--
 .../_article/dev-snapshot-godot-4-2-beta-1.md |  10 +-
 .../_article/dev-snapshot-godot-4-2-beta-2.md |  10 +-
 .../_article/dev-snapshot-godot-4-2-beta-3.md |  10 +-
 pages/community/community.html                |   5 -
 12 files changed, 255 insertions(+), 54 deletions(-)
 create mode 100644 _includes/articles/download_card.html
 rename _includes/{outdated_article_notice.html => articles/outdated_notice.html} (100%)
 create mode 100644 _includes/articles/prerelease_notice.html
 create mode 100644 assets/css/article-cards.css

diff --git a/_includes/articles/download_card.html b/_includes/articles/download_card.html
new file mode 100644
index 0000000000..c70fc35944
--- /dev/null
+++ b/_includes/articles/download_card.html
@@ -0,0 +1,65 @@
+{% assign release_version = include.version | make_release_version: include.release %}
+{% if include.page %}
+	{% assign release_article = page %}
+{% else %}
+	{% assign release_article = site.article | find: "url", release_version.release_notes %}
+{% endif %}
+
+<div class="card card-download">
+	<a class="card-download-link" href="/download/archive/{{ release_version.name }}-{{ release_version.flavor }}">
+		Download Godot {{ release_version.name }} {{ release_version.flavor }}
+	</a>
+
+	<div class="card-download-details">
+		{% unless release_article == empty %}
+			<img class="lightbox-ignore" src="{{ release_article.image }}" />
+		{% endunless %}
+
+		<div class="card-download-platforms">
+			{% assign download_primary = release_version | get_download_primary: false %}
+			{% for primary in download_primary %}
+				{% comment %}
+					When iterating over a hash, you get an array. 0-th item is the key, and
+					1-st item is the value.
+				{% endcomment %}
+
+				{% if primary[0] == "linux" or primary[0] == "macos" or primary[0] == "windows" %}
+					{% assign platform_info = site.data.download_platforms | find: "name", primary[1] %}
+
+					<div class="download-platform">
+						<img width="24" height="24" src="/assets/images/platforms/{{ primary[0] | split: "_" | join: "-" }}.svg" title="{{ platform_info.title }}" alt="{{ platform_info.title }}" class="lightbox-ignore" />
+						{{ platform_info.title }}
+					</div>
+
+					<a href="{{ release_version | make_download: primary[1], false, "github_builds" }}" class="btn btn-download btn-download-primary">
+						<div class="download-title">
+							Standard
+						</div>
+					</a>
+
+					{% assign mono_download = release_version | make_download: primary[1], true, "github_builds" %}
+					{% if mono_download == "#" %}
+						<div></div>
+					{% else %}
+						{% assign has_mono = true %}
+						<a href="{{ mono_download }}" class="btn btn-download btn-download-primary btn-download-primary--mono">
+							<div class="download-title">
+								.NET
+							</div>
+						</a>
+					{% endif %}
+				{% endif %}
+			{% endfor %}
+		</div>
+	</div>
+
+	<div class="card-download-sublinks">
+		<a class="card-download-other" href="/download/archive/{{ release_version.name }}-{{ release_version.flavor }}">
+			Export templates and other downloads
+		</a>
+		<a class="card-download-donate" href="/donate">
+			Make a Donation
+		</a>
+	</div>
+
+</div>
diff --git a/_includes/outdated_article_notice.html b/_includes/articles/outdated_notice.html
similarity index 100%
rename from _includes/outdated_article_notice.html
rename to _includes/articles/outdated_notice.html
diff --git a/_includes/articles/prerelease_notice.html b/_includes/articles/prerelease_notice.html
new file mode 100644
index 0000000000..6aa0a12244
--- /dev/null
+++ b/_includes/articles/prerelease_notice.html
@@ -0,0 +1,5 @@
+<div class="card card-warning">
+	<p>
+	While engine maintainers try their best to ensure that each beta release is stable, this is by definition <strong>a pre-release piece of software</strong>. Be sure to make frequent backups, or use a version control system such as Git, to preserve your projects in a case of corruption or data loss.
+	</p>
+</div>
diff --git a/_layouts/article.html b/_layouts/article.html
index 36d83bbf17..027cc9c66c 100644
--- a/_layouts/article.html
+++ b/_layouts/article.html
@@ -188,7 +188,7 @@ layout: default
 				</div>
 			</div>
 
-			{% include outdated_article_notice.html %}
+			{% include articles/outdated_notice.html %}
 
 			<div class="article-body">
 				{{ content }}
@@ -198,6 +198,7 @@ layout: default
 </div>
 
 <link rel="stylesheet" href="/assets/css/anchor-link.css?1">
+<link rel="stylesheet" href="/assets/css/article-cards.css">
 <script src="/assets/js/anchor-link.js"></script>
 <script>
 	document.addEventListener('DOMContentLoaded', () => {
@@ -206,6 +207,10 @@ layout: default
 
 		// Add lightbox elements in blog articles for Tobii.
 		document.querySelectorAll('.article-cover img, .article-body img').forEach((articleImg) => {
+			if (articleImg.classList.contains('lightbox-ignore')) {
+				return;
+			}
+
 			const lightbox = document.createElement('a');
 			lightbox.href = articleImg.src;
 			lightbox.classList.add('lightbox');
diff --git a/_plugins/make_download.rb b/_plugins/make_download.rb
index 1ed222f55c..7de1aa6bf7 100644
--- a/_plugins/make_download.rb
+++ b/_plugins/make_download.rb
@@ -108,14 +108,35 @@ module MakeDownloadFilter
   end
 
   def make_release_version(input, release)
-    if release.nil?
-      return input
+    site_data = @context.registers[:site].data
+
+    version_data = input
+    # Input can be a version string, e.g. 4.1. Try to match it against version data.
+    if input.is_a? String
+      version_data = site_data["versions"].find { |item| item["name"] == input }
+    end
+    if version_data.nil?
+      return nil
     end
 
-    new_version = input.dup
-    new_version["flavor"] = release["name"]
-    new_version["release_date"] = release["release_date"]
-    new_version["release_notes"] = release["release_notes"]
+    release_data = release
+    # Release name can be a string as well. Try to match it with the current version flavor
+    # or with one of previous releases.
+    if release.is_a? String
+      if version_data["flavor"] == release
+        release_data = nil
+      elsif version_data.key?("releases")
+        release_data = version_data["releases"].find { |item| item["name"] == release }
+      end
+    end
+    if release_data.nil?
+      return version_data
+    end
+
+    new_version = version_data.dup
+    new_version["flavor"] = release_data["name"]
+    new_version["release_date"] = release_data["release_date"]
+    new_version["release_notes"] = release_data["release_notes"]
 
     return new_version
   end
diff --git a/_plugins/outdated_article_threshold.rb b/_plugins/outdated_article_threshold.rb
index c4b67921cb..dc8f044c1e 100644
--- a/_plugins/outdated_article_threshold.rb
+++ b/_plugins/outdated_article_threshold.rb
@@ -2,7 +2,7 @@
 # Articles that have a date older than this at build time
 # are considered outdated.
 #
-# See also `_includes/outdated_article_notice.html`.
+# See also `_includes/articles/outdated_notice.html`.
 
 AVERAGE_SECONDS_PER_MONTH = 2628000
 OUTDATED_THRESHOLD_IN_MONTHS = 18
diff --git a/assets/css/article-cards.css b/assets/css/article-cards.css
new file mode 100644
index 0000000000..ea2e3602f0
--- /dev/null
+++ b/assets/css/article-cards.css
@@ -0,0 +1,135 @@
+.card-warning {
+	background: var(--warning-background-color);
+	border-radius: 4px 4px;
+	color: var(--warning-color);
+	font-size: 90%;
+	padding: 0 12px;
+}
+
+.card-download {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 16px;
+	background: var(--head-background-color);
+	border-radius: 4px 4px;
+	padding: 10px 16px;
+}
+
+.card-download-link {
+	color: var(--dark-color-text-title);
+	font-size: 135%;
+	font-weight: 700;
+	text-decoration-color: var(--dark-color-text);
+}
+
+.card-download-sublinks {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	gap: 12px;
+	width: 100%;
+}
+@media (max-width: 768px) {
+	.card-download-sublinks {
+		flex-direction: column;
+		width: auto;
+	}
+}
+
+.card-download-sublinks .card-download-other,
+.card-download-sublinks .card-download-donate {
+	color: var(--dark-color-text-hl);
+	font-size: 95%;
+	text-decoration-color: var(--dark-color-text);
+	text-decoration-thickness: 1px;
+}
+.card-download-sublinks .card-download-donate {
+	color: var(--fund-color-faint);
+	font-weight: 600;
+	text-decoration-color: var(--fund-color-faint);
+}
+
+.card-download-details {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: flex-start;
+	gap: 12px;
+	width: 100%;
+}
+@media (max-width: 768px) {
+	.card-download-details {
+		flex-direction: column;
+		align-items: center;
+		gap: 20px;
+	}
+}
+
+.card-download-details img, article .content .card-download-details img {
+	background-color: transparent;
+	display: inline-block;
+	margin: 0;
+	max-width: 200px;
+}
+@media (max-width: 768px) {
+	.card-download-details img, article .content .card-download-details img {
+		max-height: 220px;
+		max-width: inherit;
+	}
+}
+
+.card-download-platforms {
+	display: flex;
+	flex-direction: row;
+	gap: 4px;
+}
+
+.card-download-platforms {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	gap: 8px;
+}
+
+.card-download-platforms .download-platform {
+	color: var(--primary-color-text-title);
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	font-weight: 700;
+}
+
+.download-platform img {
+	filter: invert(100%);
+}
+
+.card-download-platforms .btn-download-primary {
+	margin-bottom: 0;
+	text-align: left;
+}
+
+.card-download-platforms .btn-download-primary.btn-download-primary--mono {
+	background-color: var(--download-mono-background-color);
+	-webkit-backdrop-filter: blur(4px);
+	backdrop-filter: blur(4px);
+}
+.card-download-platforms .btn-download-primary.btn-download-primary--mono .download-title {
+	color: #f7f7f7;
+}
+.card-download-platforms .btn-download-primary.btn-download-primary--mono .download-hint {
+	background-color: var(--primary-color-subdued);
+	color: var(--text-color);
+}
+
+.card-download-platforms .btn.btn-download-primary .download-title {
+	font-size: 18px;
+	line-height: 24px;
+	padding: 10px 16px;
+	white-space: nowrap;
+}
+@media (max-width: 900px) {
+	.card-download-platforms .btn.btn-download-primary .download-title {
+		line-height: 28px;
+		padding: 12px 20px;
+	}
+}
diff --git a/assets/css/main.css b/assets/css/main.css
index 3e3e8cd0ea..44fa7a7b71 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -37,6 +37,7 @@
 
   --fund-color: #ef6767;
   --fund-color-hl: #e53e3e;
+  --fund-color-faint: #ff9d9d;
 
   --base-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
   --more-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
@@ -69,6 +70,7 @@
   --download-table-color: rgba(160, 160, 160, 0.05);
   --platform-note-background-color: rgb(48 86 210 / 9%);
   --platform-code-background-color: #e5ebf1;
+  --download-mono-background-color: rgb(43 58 76 / 82%);
 
   --feature-heading-color: #2d76ad;
   --feature-note-color: #e53e3e;
@@ -128,6 +130,7 @@
 
     --fund-color: #ef6767;
     --fund-color-hl: #e53e3e;
+    --fund-color-faint: #ef6767;
 
     --base-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
     --more-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
@@ -157,6 +160,7 @@
     --download-table-color: rgba(0, 0, 0, 0.2);
     --platform-note-background-color: rgb(255 255 255 / 9%);
     --platform-code-background-color: #282b2e;
+    --download-mono-background-color: rgb(132 151 174 / 68%);
 
     --feature-heading-color: #57b3f8;
     --feature-note-color: #ef6767;
@@ -815,26 +819,15 @@ p.small {
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.1);
 }
 
+a.card {
+  display: block;
+  text-decoration: none;
+}
+
 .card .footer {
   background-color: var(--card-footer-color);
 }
 
-.card-warning {
-  background: var(--warning-background-color);
-  border-radius: 4px 4px;
-  color: var(--warning-color);
-  font-size: 90%;
-  padding: 0 12px;
-}
-
-a.card {
-  text-decoration: none;
-  display: flex;
-}
-.steam-download:hover {
-  color: hsla(0, 0%, 100%);
-}
-
 .tabs {
   display: flex;
   align-items: flex-end;
@@ -1474,4 +1467,4 @@ section.sponsors .grid {
 
 .sponsor-empty:hover {
   background-color: #8484841c;
-}
\ No newline at end of file
+}
diff --git a/collections/_article/dev-snapshot-godot-4-2-beta-1.md b/collections/_article/dev-snapshot-godot-4-2-beta-1.md
index 43aa7dcb0e..72e2eb7c43 100644
--- a/collections/_article/dev-snapshot-godot-4-2-beta-1.md
+++ b/collections/_article/dev-snapshot-godot-4-2-beta-1.md
@@ -352,9 +352,7 @@ On top of that, a significant contribution by [konczg](https://github.com/konczg
 
 ## Downloads
 
-The downloads for this pre-release build can be found in our GitHub repository:
-
-* [**Download Godot 4.2 beta 1**](https://github.com/godotengine/godot-builds/releases/tag/4.2-beta1).
+{% include articles/download_card.html version="4.2" release="beta1" article=page %}
 
 **Standard build** includes support for GDScript and GDExtension.
 
@@ -362,11 +360,7 @@ The downloads for this pre-release build can be found in our GitHub repository:
 - .NET build requires [.NET SDK 6.0](https://dotnet.microsoft.com/en-us/download/dotnet/6.0) or [7.0](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) installed in a standard location.
 - To export to Android, .NET 7.0 or later is required. To export to iOS, .NET 8.0 is required. Make sure to set the target framework in the `.csproj` file.
 
-<div class="card card-warning">
-	<p>
-	While engine maintainers try their best to ensure that each beta release is stable, this is by definition <strong>a pre-release piece of software</strong>. Be sure to make frequent backups, or use a version control system such as Git, to preserve your projects in a case of corruption or data loss.
-	</p>
-</div>
+{% include articles/prerelease_notice.html %}
 
 ## Known issues
 
diff --git a/collections/_article/dev-snapshot-godot-4-2-beta-2.md b/collections/_article/dev-snapshot-godot-4-2-beta-2.md
index 98fa505a90..3fa6bd32c6 100644
--- a/collections/_article/dev-snapshot-godot-4-2-beta-2.md
+++ b/collections/_article/dev-snapshot-godot-4-2-beta-2.md
@@ -90,9 +90,7 @@ This release is built from commit [`f8818f85e`](https://github.com/godotengine/g
 
 ## Downloads
 
-The downloads for this pre-release build can be found in our GitHub repository:
-
-* [**Download Godot 4.2 beta 2**](https://github.com/godotengine/godot-builds/releases/tag/4.2-beta2).
+{% include articles/download_card.html version="4.2" release="beta2" article=page %}
 
 **Standard build** includes support for GDScript and GDExtension.
 
@@ -100,11 +98,7 @@ The downloads for this pre-release build can be found in our GitHub repository:
 - .NET build requires [.NET SDK 6.0](https://dotnet.microsoft.com/en-us/download/dotnet/6.0) or [7.0](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) installed in a standard location.
 - To export to Android, .NET 7.0 or later is required. To export to iOS, .NET 8.0 is required. Make sure to set the target framework in the `.csproj` file.
 
-<div class="card card-warning">
-	<p>
-	While engine maintainers try their best to ensure that each beta release is stable, this is by definition <strong>a pre-release piece of software</strong>. Be sure to make frequent backups, or use a version control system such as Git, to preserve your projects in a case of corruption or data loss.
-	</p>
-</div>
+{% include articles/prerelease_notice.html %}
 
 ## Known issues
 
diff --git a/collections/_article/dev-snapshot-godot-4-2-beta-3.md b/collections/_article/dev-snapshot-godot-4-2-beta-3.md
index 602606cc8f..fcdb25c3ff 100644
--- a/collections/_article/dev-snapshot-godot-4-2-beta-3.md
+++ b/collections/_article/dev-snapshot-godot-4-2-beta-3.md
@@ -96,9 +96,7 @@ This release is built from commit [`e8d57afae`](https://github.com/godotengine/g
 
 ## Downloads
 
-The downloads for this pre-release build can be found in our GitHub repository:
-
-* [**Download Godot 4.2 beta 3**](https://github.com/godotengine/godot-builds/releases/tag/4.2-beta3).
+{% include articles/download_card.html version="4.2" release="beta3" article=page %}
 
 **Standard build** includes support for GDScript and GDExtension.
 
@@ -107,11 +105,7 @@ The downloads for this pre-release build can be found in our GitHub repository:
   - [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) should also be supported, but keep in mind this version of the .NET SDK is still in preview. Give it a try and let us know if you find any bugs.
 - To export to Android, .NET 7.0 or later is required. To export to iOS, .NET 8.0 is required. Make sure to set the target framework in the `.csproj` file.
 
-<div class="card card-warning">
-	<p>
-	While engine maintainers try their best to ensure that each beta release is stable, this is by definition <strong>a pre-release piece of software</strong>. Be sure to make frequent backups, or use a version control system such as Git, to preserve your projects in a case of corruption or data loss.
-	</p>
-</div>
+{% include articles/prerelease_notice.html %}
 
 ## Known issues
 
diff --git a/pages/community/community.html b/pages/community/community.html
index 4ba220d6d2..1abfb07e8d 100644
--- a/pages/community/community.html
+++ b/pages/community/community.html
@@ -10,11 +10,6 @@ layout: default
 		height: 100%;
 	}
 
-	a.card {
-		display: block;
-		text-decoration: none;
-	}
-
 	.card img {
 		width: 100%;
 		height: auto;