Configure related posts 🔗.

README.md

@@ -14,7 +14,6 @@ Adapted from [tailwind-astro-starting-blog](https://github.com/wanoo21/tailwind-
 - Refactor apps and talks pages to use the same code.
 - For post titles, try to use the cover image as a dimmed background for the title.
 - Restore OG meta data.
-- Configure related posts.
 - Restore the estimated reading time feature.
 - Implement a service worker strategy.
 - Use local avatar instead of gravatar.

src/consts.ts

@@ -120,7 +120,7 @@ export const POST_METADATA = {
   showDate: true, // Show date in blog post, TODO: Add support for hiding date
   showSummary: false, // Show summary in blog post
   showAuthors: true, // Show authors in blog post, TODO: Add support for hiding authors
-  showRelatedPosts: false, // Show related posts in blog post
+  showRelatedPosts: true, // Show related posts in blog post
   showTableOfContents: false, // Show table of contents in blog post
   showShareButtons: 'none', // Show share buttons in blog post, options: top, bottom, both, none
   showComments: true,

src/content/blog/augmented-reality-computer-vision.md

@@ -3,6 +3,7 @@ title: 'Augmented reality & computer vision'
 date: '2017-02-15'
 description: 'I prototyped a simple augmented reality experiment using computer vision in JavaScript.'
 cover: '@/assets/covers/augmented-reality-computer-vision.jpg'
+related: ['experimenting-with-vr', 'landscapes-in-virtual-reality']
 ---
 
 > **tl;dr:** Media capture, object detection and WebGL can be combined to hack a simple augmented reality experience. See my demo called [we are all Saints](https://gmarty.github.io/all-saints-ar/).

src/content/blog/cross-browser-generator-functions.md

@@ -2,6 +2,7 @@
 title: 'Cross browser generator functions'
 date: '2013-10-28'
 description: 'Presentation of a cross browser way to allow generator functions in Firefox and Chrome.'
+related: ['polyfilling-generators', 'generating-generator-functions']
 ---
 
 ## A quick word on generators

src/content/blog/experimenting-with-vr.md

@@ -3,6 +3,7 @@ title: 'Experimenting with VR'
 date: '2016-12-07'
 description: "Feedback on a series of experimentation about VR that I've done while on holiday."
 cover: '@/assets/covers/experimenting-with-vr.jpg'
+related: ['augmented-reality-computer-vision', 'landscapes-in-virtual-reality']
 ---
 
 I just finished a short series of [experimentations about virtual reality called VR Diary](https://gmarty.github.io/VR-diary/). Here's a brief summary of why and how.

src/content/blog/follow-up-on-navigator-languages.md

@@ -2,6 +2,7 @@
 title: 'Follow-up on navigator.languages'
 date: '2014-09-09'
 description: 'navigator.languages started to get implemented in browsers.'
+related: ['the-problem-of-user-language-lists-in-javascript']
 ---
 
 `navigator.languages` recently made its way to the stable versions of browsers: Firefox 32, Chrome 37 and Opera 24!

src/content/blog/generating-generator-functions.md

@@ -2,6 +2,7 @@
 title: 'Generating generator functions'
 date: '2013-11-01'
 description: 'Use JavaScript to generate functions in general and generator functions in particular.'
+related: ['polyfilling-generators', 'cross-browser-generator-functions']
 ---
 
 Apparently, there is no native way to generate generator functions in JavaScript. So we have to use a workaround.

src/content/blog/how-to-organise-a-meetup.md

@@ -3,6 +3,7 @@ title: 'How to organise a meetup?'
 date: '2017-03-17'
 description: 'A few tips based on my experience about how to organise a meetup.'
 cover: '@/assets/covers/how-to-organise-a-meetup.jpg'
+related: ['mozilla-iot-meetup-london-october-2016']
 ---
 
 Organising a meetup is a great way to connect with like-minded people and exchange on topics you're passionate about. In this post I gathered some tips based on my experience organisation meetups in the last few years.

src/content/blog/japanese-keyboard-for-firefox-os.md

@@ -3,6 +3,7 @@ title: 'Japanese keyboard for Firefox OS'
 date: '2015-06-29'
 description: 'There is not yet any good solution to input Japanese on Firefox OS'
 cover: '@/assets/covers/japanese-keyboard-for-firefox-os.png'
+related: ['welsh-keyboard-for-firefox-os']
 ---
 
 > **tl;dr:** You can't efficiently type in Japanese on a Firefox OS device, unless you buy a fx0 device or you build Gaia yourself and are very patient!

src/content/blog/landscapes-in-virtual-reality.md

@@ -3,6 +3,7 @@ title: 'Landscapes in Virtual Reality'
 date: '2016-09-23'
 description: 'How to draw landscapes for virtual reality applications.'
 cover: '@/assets/covers/landscapes-in-virtual-reality.jpg'
+related: ['augmented-reality-computer-vision', 'experimenting-with-vr']
 ---
 
 Lately I experimented with virtual reality (VR) using [Google Cardboard](https://vr.google.com/cardboard/), my mobile phone and the amazing [A-Frame](https://aframe.io/) library.

src/content/blog/mozilla-iot-meetup-london-october-2016.md

@@ -3,6 +3,7 @@ title: 'Mozilla IOT Meetup London October 2016'
 date: '2016-10-14'
 description: 'A brief report on the first Mozilla IOT meetup in London.'
 cover: '@/assets/covers/mozilla-iot-meetup-london-october-2016.jpg'
+related: ['how-to-organise-a-meetup']
 ---
 
 On Wednesday 12, October (2 days ago) the first [Mozilla IOT London meetup](https://www.meetup.com/Mozilla-IOT/) took place at the Mozilla Common Space near London Bridge.

src/content/blog/polyfilling-generators.md

@@ -2,6 +2,7 @@
 title: 'Polyfilling generators'
 date: '2013-11-05'
 description: 'Exploring ES6 generators polyfills gives valuable insights about the internal mechanisms used by them.'
+related: ['generating-generator-functions', 'cross-browser-generator-functions']
 ---
 
 I blogged a bit about ES6 generators lately. I think they are a great improvement to JavaScript and I can't wait to get them available in all environments.

src/content/blog/the-problem-of-user-language-lists-in-javascript.md

@@ -2,6 +2,7 @@
 title: 'The problem of user language lists in JavaScript'
 date: '2014-01-28'
 description: 'The list of languages configured in the browser is never made available to JavaScript!'
+related: ['follow-up-on-navigator-languages']
 ---
 
 <div>[Edit: I wrote a followup post to this one at [Follow-up on navigator.languages](/posts/follow-up-on-navigator-languages/)]</div>

src/content/blog/welsh-keyboard-for-firefox-os.md

@@ -3,6 +3,7 @@ title: 'Welsh keyboard for Firefox OS'
 date: '2015-07-22'
 description: 'Word suggestion for Welsh landed in Firefox OS. Please help us testing it.'
 cover: '@/assets/covers/welsh-keyboard-for-firefox-os.webp'
+related: ['japanese-keyboard-for-firefox-os']
 ---
 
 I recently worked on a way to automatise the [creation of dictionaries for word suggestions when typing in Firefox OS](https://github.com/gmarty/wordlist-generator) (More on that one day, hopefully). As a test case, I generated a Welsh keyboard, as it is one of the few languages I know a little that didn't have a keyboard in Firefox OS ([Japanese keyboard](/posts/japanese-keyboard-for-firefox-os/) is another exception though). Typing on a mobile is hard enough, so word suggestions and autocorrect are keys for a better experience.

src/content/config.ts

@@ -34,7 +34,6 @@ const blog = defineCollection({
       postLayout: z
         .enum(['simple', 'column'])
         .default(POST_METADATA.defaultLayout as 'simple' | 'column'),
-      // Add related posts
       related: z.array(reference('blog')).default([]),
     }),
 })

src/layouts/PostLayout.astro

@@ -12,6 +12,7 @@ import PostCover from '../components/PostCover.astro'
 import DetailsSummary from '../components/DetailsSummary.astro'
 import SocialShareButtons from '../components/social-icons/SocialShareButtons.astro'
 import Comments from '../components/Comments.astro'
+import { sortBlogPosts } from '@/functions'
 import { POST_METADATA } from '@/consts'
 import { useTranslations } from '@/i18n'
 
@@ -28,7 +29,9 @@ const authors: CollectionEntry<'authors'>[] = await getEntries(
   post.data.authors
 )
 const tags: CollectionEntry<'tags'>[] = await getEntries(post.data.tags)
-const related: CollectionEntry<'blog'>[] = await getEntries(post.data.related)
+const related: CollectionEntry<'blog'>[] = await getEntries(
+  post.data.related
+).then(sortBlogPosts)
 
 const articleOgDetails = {
   publishedTime: post.data.date,
@@ -69,7 +72,7 @@ const { Content, headings } = await post.render()
           </div>
           {
             POST_METADATA.showCover && post.data.cover && (
-              <div class="space-y-1 pb-10 text-center dark:border-gray-700">
+              <div class="space-y-1 pb-10 text-center">
                 <PostCover {post} />
               </div>
             )
@@ -86,7 +89,7 @@ const { Content, headings } = await post.render()
           class="grid-rows-[auto_1fr] divide-y divide-gray-300 dark:divide-gray-600 pb-8 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0"
         >
           <dl
-            class="pb-10 pt-6 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700"
+            class="pb-10 pt-6 xl:border-b xl:border-gray-300 xl:pt-11 xl:dark:border-gray-600"
           >
             <dt class="sr-only">{t('layouts.postLayout.authors')}</dt>
             <dd>
@@ -151,7 +154,7 @@ const { Content, headings } = await post.render()
             {
               POST_METADATA.showTableOfContents && headings.length > 0 && (
                 <DetailsSummary
-                  class="border border-gray-100 dark:border-gray-600 rounded mt-4 max-w-none"
+                  class="border border-gray-300 dark:border-gray-600 rounded mt-4 max-w-none"
                   title={t('layouts.postLayout.tableOfContents')}
                 >
                   <ul class="space-y-2 list-none mt-0 ps-0">

src/layouts/SimplePostLayout.astro

@@ -10,6 +10,7 @@ import PostCover from '../components/PostCover.astro'
 import DetailsSummary from '../components/DetailsSummary.astro'
 import SocialShareButtons from '../components/social-icons/SocialShareButtons.astro'
 import Comments from '../components/Comments.astro'
+import { sortBlogPosts } from '@/functions'
 import { POST_METADATA } from '@/consts'
 import { useTranslations } from '@/i18n'
 
@@ -26,7 +27,9 @@ const authors: CollectionEntry<'authors'>[] = await getEntries(
   post.data.authors
 )
 const tags: CollectionEntry<'tags'>[] = await getEntries(post.data.tags)
-const related: CollectionEntry<'blog'>[] = await getEntries(post.data.related)
+const related: CollectionEntry<'blog'>[] = await getEntries(
+  post.data.related
+).then(sortBlogPosts)
 
 const articleOgDetails = {
   publishedTime: post.data.date,
@@ -51,7 +54,7 @@ const { Content, headings } = await post.render()
     <ScrollTopAndComments client:only="solid-js" />
     <article>
       <header>
-        <div class="space-y-1 pb-10 text-center dark:border-gray-700">
+        <div class="space-y-1 pb-10 text-center dark:border-gray-600">
           <dl>
             <dt class="sr-only">{t('layouts.postLayout.publishedOn')}</dt>
             <dd
@@ -64,14 +67,14 @@ const { Content, headings } = await post.render()
         </div>
         {
           POST_METADATA.showCover && post.data.cover && (
-            <div class="space-y-1 pb-10 text-center dark:border-gray-700">
+            <div class="space-y-1 pb-10 text-center">
               <PostCover {post} />
             </div>
           )
         }
         {
           POST_METADATA.showSummary && (
-            <div class="pb-10 text-center border-b border-gray-200 text-gray-900 dark:text-gray-100">
+            <div class="pb-0 text-center text-gray-900 dark:text-gray-100">
               <p>{post.data.description}</p>
             </div>
           )
@@ -101,7 +104,7 @@ const { Content, headings } = await post.render()
         {
           POST_METADATA.showTableOfContents && headings.length > 0 && (
             <DetailsSummary
-              class="border border-gray-100 dark:border-gray-600 rounded mt-4 max-w-none"
+              class="border border-gray-300 dark:border-gray-600 rounded mt-4 max-w-none"
               title={t('layouts.postLayout.tableOfContents')}
             >
               <ul class="space-y-2 list-none mt-0 ps-0">