Website modifications (#95)

* Added published date to display in user's local timezone. * Added reading time, as well as total words of the post. * Added pagination feature. Each page has 5 posts. * Removed prepend published date in post names, even if you create posts by `$ cobalt new`, so blog post is now `blog/initial-test`. * Implement the local_date_string function into the downloads page as well so that update release times are shown in the correct timezone, this will need testing and maybe fixing after merge. --------- Co-authored-by: Sam Tupy <[email protected]>
samtupy · Sep 9, 2024 · aece4ab · aece4ab
1 parent ba2ad1e
commit aece4ab
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 13 deletions.
diff --git a/web/_cobalt.yml b/web/_cobalt.yml
@@ -22,3 +22,6 @@ posts:
  dir: blog
  rss: blog.xml
  jsonfeed: blog.json
+ publish_date_in_filename: false
+ default:
+  permalink: /{{parent}}/{{name}}
diff --git a/web/src/_includes/header.liquid b/web/src/_includes/header.liquid
@@ -5,7 +5,10 @@
 {% if page.published_date -%}
 <title>{{ page.title }} &ndash; {{ collections.posts.title }}</title>
 {%- else -%}
-<title>{{ page.title }} &ndash; {{ site.title }}</title>
+{% capture page_title %}
+{{ page.title}}{% if paginator and paginator.index > 1 %} (page {{ paginator.index }}){%endif%} &ndash; {{ site.title }}
+{% endcapture %}
+<title>{{ page_title }}</title>
 {%- endif %}
 <style>
 details summary
@@ -17,6 +20,7 @@ details summary > *
 display: inline;
 }
 </style>
+<script src = "/js/functions.js"></script>
 </head>
 <body>
 <a href="#content-anchor">Skip to content</a>

diff --git a/web/src/_layouts/post.liquid b/web/src/_layouts/post.liquid
@@ -1,6 +1,18 @@
 {% include "header.liquid" %}
 <h1>{{ page.title }}</h1>
-<p> on {{ page.published_date | date: "%A, %B %d %Y at %r" }} </p>
+<p>Published on <script>document.write(local_datetime_string("{{ page.published_date}}"));</script></p>
+{% assign reading_wpm = 200 %}
+{% assign word_count = page.content | split: " " | size %}
+{% assign reading_time = word_count | divided_by: reading_wpm %}
+{% case reading_time %}
+{% when 0 %}
+{% assign phrase = "less than a minute." %}
+{% when 1 %}
+{% assign phrase = "about a minute." %}
+{% else %}
+{% assign phrase = " minutes." | prepend: reading_time | prepend: "about " %}
+{% endcase %}
+<p>Contains {{ word_count }} words, with an estimated reading time of {{ phrase }}</p>
 
 {{ page.content }}
 

diff --git a/web/src/blog.md b/web/src/blog.md
@@ -1,19 +1,54 @@
 ---
 layout: default.liquid
-title: Blog
+title: The NVGT blog
+description: The NVGT blog is where developers and contributors to the engine can post helpful tips about it's use, news and updates, insites about development, or anything else that doesn't fit very well in the documentation or in other areas of this site. It is a very minamilistic blogging setup using a static site generator and is meant for informational purposes only.
 permalink: /blog
+pagination:
+  include: All
+  per_page: 5
+  permalink_suffix: "./{{num}}/"
+  order: Desc
+  sort_by: ["published_date"]
 ---
+# {{ page.title }}
+{{ page.description }}
 
-# {{ collections.posts.title }}
-{{ collections.posts.description }}
-
-[RSS](/{{ collections.posts.rss }})
+[RSS](/blog.xml)
 
 ## posts
-{% for post in collections.posts.pages %}
-### [{{ post.title }}](/{{ post.permalink }})
-on {{ post.published_date | date: "%A, %B %d %Y at %r" }}
+{% for post in paginator.pages %}
+{% assign posttitle = post.title %}
+{% if post.description and post.description != "" %}
+{% assign posttitle = posttitle | append: " (" | append: post.description | append: ")" %}
+{% endif %}
+### [{{posttitle}}](/{{post.permalink}})
+Published on <script>document.write(local_datetime_string("{{ post.published_date}}"));</script>
+
+{{post.excerpt | strip_html}}
+
+{%endfor%}
+
+{%if paginator.previous_index or paginator.next_index%}
+<nav aria-label="Pagination">
+
+## Pagination
+{{paginator.index}} / {{paginator.total_indexes}}
+
+{%if paginator.previous_index%}
+[Previous page](/{{paginator.previous_index_permalink}})
+{%endif%}
+
+{%if paginator.next_index%}
+[Next page](/{{paginator.next_index_permalink}})
+{%endif%}
+
+{%if paginator.previous_index%}
+[First page](/{{paginator.first_index_permalink}})
+{%endif%}
 
-{{ post.excerpt | strip_html }}
+{%if paginator.next_index%}
+[Last page](/{{paginator.last_index_permalink}})
+{%endif%}
 
-{% endfor %}
+</nav>
+{%endif%}
diff --git a/...024-06-03-48-hours-post-launch-updates.md → web/src/blog/48-hours-post-launch-updates.md b/...024-06-03-48-hours-post-launch-updates.md → web/src/blog/48-hours-post-launch-updates.md
diff --git a/web/src/blog/2024-04-10-initial-test.md → web/src/blog/initial-test.md b/web/src/blog/2024-04-10-initial-test.md → web/src/blog/initial-test.md
diff --git a/web/src/blog/2024-05-31-slowly-going-live.md → web/src/blog/slowly-going-live.md b/web/src/blog/2024-05-31-slowly-going-live.md → web/src/blog/slowly-going-live.md
diff --git a/web/src/downloads/index.lphp b/web/src/downloads/index.lphp
@@ -23,7 +23,7 @@ function size2string($bytes) {
 // This function prints the information for a given version, again still a bit hacky.
 function echo_version($ver) {
 	echo "<h3>" . $ver . "</h3>\n";
-	echo "<p>Released on " . date("l, F jS, Y \a\\t h:i:s A", filemtime("nvgt_" . $ver . ".exe")) . " UTC.</p>\n";
+	echo "<p>Released on <script>document.write(local_datetime_string(" . (filemtime("nvgt_" . $ver . ".exe")) * 1000) . "));</script>.</p>\n";
 	$files = glob("nvgt_" . $ver . "*");
 	echo "<ul>\n";
 	foreach($files as $file) {

diff --git a/web/src/js/functions.js b/web/src/js/functions.js
@@ -0,0 +1,24 @@
+function normalize_iso_datetime(dateString) {
+	// Convert date string into a valid ISO format (inserting colon in the timezone)
+	const validDateString = dateString.replace(/([+-]\d{2})(\d{2})$/, '$1:$2');
+	return validDateString;
+}
+function local_datetime_string(date_input) {
+	var r=new Date(date_input);
+	if (!r) r = new Date(normalize_iso_datetime(date_input));
+	const options = {
+		weekday: "long", 
+		month: "long", 
+		day: "numeric",
+		year: "numeric"
+	};
+	const toptions = {
+		hour: "numeric",
+		minute: "numeric",
+		second: "numeric",
+		hour12: true,
+		timeZoneName: "short"
+	};
+	var final = r.toLocaleDateString("EN-US", options) + " at " + r.toLocaleTimeString("EN-US", toptions);
+	return final;
+}