diff --git a/README.md b/README.md index 7e648eb..14361f1 100644 --- a/README.md +++ b/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. diff --git a/gatsby-node.js b/gatsby-node.js index a5dbc8e..fb13b3f 100644 --- a/gatsby-node.js +++ b/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 //