documentation

README.md

@@ -17,6 +17,7 @@
 - [🎉 Features](#-features)
   - [⛵️ Lighthouse score](#️-lighthouse-score)
   - [💍 One data file to rule all pages](#-one-data-file-to-rule-all-pages)
+  - [🐱 GitHub repositories](#-github-repositories)
   - [💅 Theme switcher](#-theme-switcher)
   - [🏆 SEO component](#-seo-component)
   - [📇 Client-side vCard creation](#-client-side-vcard-creation)
@@ -52,6 +53,18 @@ Gatsby automatically creates pages from each item in that file utilizing the [`P
 - [`content/projects.yml`](content/projects.yml)
 - [`src/templates/Project.jsx`](src/templates/Project.jsx)
 
+### 🐱 GitHub repositories
+
+The open source section at the bottom of the front page shows selected GitHub repositories, sourced from GitHub.
+
+On build time, all my public repositories are fetched from GitHub, then filtered against the ones defined in `content/repos.yml`, sorted by the last push date, and provided via the page context of the front page.
+
+If you want to know how, have a look at the respective components:
+
+- [`gatsby-node.js`](gatsby-node.js)
+- [`content/repos.yml`](content/repos.yml)
+- [`src/components/molecules/Repository.jsx`](src/components/molecules/Repository.jsx)
+
 ### 💅 Theme switcher
 
 Includes a theme switcher which allows user to toggle between a light and a dark theme. Switching between them also happens automatically based on user's local sunset and sunrise times. Uses Cloudflare's geo location HTTP header functionality.

gatsby-node.js

@@ -23,6 +23,9 @@ function truncate(n, useWordBoundary) {
   )
 }
 
+//
+// Get GitHub repos
+//
 async function getGithubRepos(data) {
   const allRepos = await axios.get(
     `https://api.github.com/users/${data.user}/repos?per_page=100`
@@ -36,6 +39,9 @@ async function getGithubRepos(data) {
   return repos
 }
 
+//
+// Get GitHub repos once and store for later build stages
+//
 let repos
 
 exports.onPreBootstrap = async () => {
@@ -54,6 +60,22 @@ exports.onPreBootstrap = async () => {
   }
 }
 
+//
+// Add repos to front page's context
+//
+exports.onCreatePage = async ({ page, actions }) => {
+  const { createPage } = actions
+
+  if (page.path === '/')
+    createPage({
+      ...page,
+      context: {
+        ...page.context,
+        repos
+      }
+    })
+}
+
 exports.onCreateNode = ({ node, actions }) => {
   const { createNodeField } = actions
 
@@ -92,20 +114,6 @@ exports.onCreateNode = ({ node, actions }) => {
   }
 }
 
-exports.onCreatePage = async ({ page, actions }) => {
-  const { createPage } = actions
-
-  // Add repos to front page's context
-  if (page.path === '/')
-    createPage({
-      ...page,
-      context: {
-        ...page.context,
-        repos
-      }
-    })
-}
-
 //
 // Create project pages from projects.yml
 //