Blog: add note for articles that might be outdated (#537)

Provides a custom `site.outdated_article_threshold` variable through
a Jekyll plugin.

_includes/outdated_article_notice.html

@@ -0,0 +1,19 @@
+{% unless page.no_outdated_notice %}
+{% unless page.categories contains "release" or page.categories contains "pre-release" or page.categories contains "showcase" %}
+{% comment %}
+`site.outdated_article_threshold` is generated by `_plugins/outdated_article_threshold.rb`.
+{% endcomment %}
+{% if page.date < site.outdated_article_threshold %}
+	<div class="card card-warning base-padding">
+		<p>
+		{% if page.outdated_notice_text %}
+			{{ page.outdated_notice_text }}
+		{% else %}
+			This article is from <strong>{{ page.date | date: "%B %Y" }}</strong>, some of its contents might be outdated and no longer accurate.<br><br>
+			You can find up-to-date information about the engine in the <a href="https://docs.godotengine.org/en/stable/">official documentation</a>.
+		{% endif %}
+		</p>
+	</div>
+{% endif %}
+{% endunless %}
+{% endunless %}

_layouts/article.html

@@ -136,6 +136,8 @@ layout: default
 				</div>
 			</div>
 
+			{% include outdated_article_notice.html %}
+
 			{{ content }}
 		</div>
 	</article>

_plugins/outdated_article_threshold.rb

@@ -0,0 +1,10 @@
+AVERAGE_SECONDS_PER_MONTH = 2628000
+
+# Add a custom `site.outdated_article_threshold` variable.
+# We use `site.time` that holds the build time as a base, but since you can't do math in
+# the template language we can't use it there directly.
+Jekyll::Hooks.register(:site, :after_init) do |site|
+  # Articles that have a date older than this at build time are considered outdated.
+  # see `_includes/outdated_article_notice.html`
+  site.config["outdated_article_threshold"] = site.time - AVERAGE_SECONDS_PER_MONTH * 18
+end

assets/css/main.css

@@ -62,6 +62,9 @@
   --teams-subteams-color: rgba(255, 255, 255, 0.4);
 
   --table-divider-color: rgba(0, 0, 0, 0.1);
+
+  --warning-background-color: #ffedcc;
+  --warning-color: #404040;
 }
 
 .nav-logo.dark-logo {
@@ -132,6 +135,9 @@
     --teams-subteams-color: rgba(0, 0, 0, 0.2);
 
     --table-divider-color: rgba(255, 255, 255, 0.1);
+
+    --warning-background-color: #444033;
+    --warning-color: #ffeeaf;
   }
 
   /* Use logo with white text for dark navbar. */
@@ -792,6 +798,11 @@ p.small {
   background-color: var(--card-footer-color);
 }
 
+.card-warning {
+  background: var(--warning-background-color);
+  color: var(--warning-color);
+}
+
 a.card {
   text-decoration: none;
   display: flex;