From 6f6500307fafce300ab4f4b7c16500a59541ee21 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Thu, 22 Sep 2022 11:00:21 +0700 Subject: [PATCH] feat: Cache github response --- .gitignore | 1 + contents/_data/github.js | 29 ++++++++++++++++------- contents/_includes/layouts/base.njk | 14 +++++------ contents/_includes/layouts/post.njk | 2 +- contents/index.njk | 2 +- package.json | 2 +- styles/patterns/_overlay-play-button.scss | 2 +- 7 files changed, 33 insertions(+), 19 deletions(-) diff --git a/.gitignore b/.gitignore index 8d50cfd..f459e3d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +.cache .netlify _site node_modules diff --git a/contents/_data/github.js b/contents/_data/github.js index d834660..c0ed939 100644 --- a/contents/_data/github.js +++ b/contents/_data/github.js @@ -1,11 +1,24 @@ -const fetch = require('node-fetch'); +const EleventyFetch = require("@11ty/eleventy-fetch") + +async function fetchGitHubStars(repos) { + let json = await EleventyFetch(`https://api.github.com/repos/${repos}`, { + duration: '1d', + type: 'json' + }); + + return { + stargazers: json.stargazers_count, + }; +} module.exports = async function() { - return fetch('https://api.github.com/repos/phuocng/csslayout') - .then(res => res.json()) - .then(json => { - return { - stargazers: json.stargazers_count - }; - }); + return { + 'oneloc': await fetchGitHubStars('phuocng/1loc'), + 'crossbrowser': await fetchGitHubStars('phuocng/cross-browser'), + 'csslayout': await fetchGitHubStars('phuocng/csslayout'), + 'frontendtips': await fetchGitHubStars('phuocng/frontend-tips'), + 'htmldom': await fetchGitHubStars('phuocng/html-dom'), + 'thisvsthat': await fetchGitHubStars('phuocng/this-vs-that'), + 'reactpdfviewer': await fetchGitHubStars('react-pdf-viewer/react-pdf-viewer'), + }; }; diff --git a/contents/_includes/layouts/base.njk b/contents/_includes/layouts/base.njk index e22f82d..dca5669 100644 --- a/contents/_includes/layouts/base.njk +++ b/contents/_includes/layouts/base.njk @@ -30,18 +30,18 @@
  • BlurPage
  • Form Validation
  • IntersectionObserver Examples
    • -
  • React PDF Viewer
    • +
  • React PDF Viewer ● {{ github.reactpdfviewer.stargazers }}★
    • Learning resources
    diff --git a/contents/_includes/layouts/post.njk b/contents/_includes/layouts/post.njk index a0a15c9..aae51ba 100644 --- a/contents/_includes/layouts/post.njk +++ b/contents/_includes/layouts/post.njk @@ -9,7 +9,7 @@ layout: layouts/base.njk
    /css-layout
    - GitHub {{ github.stargazers }}★ + GitHub {{ github.csslayout.stargazers }}★
    {% include "css-scan.njk" %} diff --git a/contents/index.njk b/contents/index.njk index 45fbcad..65b53db 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -7,7 +7,7 @@ eleventyExcludeFromCollections: true

    A collection of popular layouts and patterns made with CSS

    - Star me on GitHub · {{ github.stargazers }}★ + Star me on GitHub ● {{ github.csslayout.stargazers }}★
    {% include "css-scan.njk" %} diff --git a/package.json b/package.json index 10cff14..ae08ddc 100644 --- a/package.json +++ b/package.json @@ -32,9 +32,9 @@ "watch:sass": "sass styles/index.scss _site/styles/index.min.css --no-source-map --style compressed --watch" }, "devDependencies": { + "@11ty/eleventy-fetch": "^3.0.0", "@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0", "html-minifier": "^4.0.0", - "node-fetch": "^2.6.7", "prettier": "^2.7.1", "sass": "^1.54.8" }, diff --git a/styles/patterns/_overlay-play-button.scss b/styles/patterns/_overlay-play-button.scss index 97dee82..e102cff 100644 --- a/styles/patterns/_overlay-play-button.scss +++ b/styles/patterns/_overlay-play-button.scss @@ -23,7 +23,7 @@ justify-content: center; /* Add a dark background */ - background-color: rgba(0, 0, 0, 0.25); + background-color: #4b5563; } .overlay-play-button__play {