adjust /api/projects to allow custom number of results (max 24)

api/projects.js

@@ -2,8 +2,8 @@ import * as Sentry from "@sentry/node";
 import { graphql } from "@octokit/graphql";
 
 Sentry.init({
-  dsn: process.env.SENTRY_DSN ?? "",
+  dsn: process.env.SENTRY_DSN || "",
-  environment: process.env.NODE_ENV ?? process.env.VERCEL_ENV ?? "",
+  environment: process.env.NODE_ENV || process.env.VERCEL_ENV || "",
 });
 
 export default async (req, res) => {
@@ -16,13 +16,19 @@ export default async (req, res) => {
       throw new Error("GitHub API credentials aren't set.");
     }
 
+    // allow custom limit, max. 24 results
+    let limit = 24;
+    if (req.query.limit && req.query.limit > 0 && req.query.limit < limit) {
+      limit = req.query.limit;
+    }
+
     let result;
     if (typeof req.query.top !== "undefined") {
       // get most popular repos (/projects/?top)
-      result = await fetchRepos("STARGAZERS");
+      result = await fetchRepos("STARGAZERS", limit);
     } else {
       // default to latest repos
-      result = await fetchRepos("PUSHED_AT");
+      result = await fetchRepos("PUSHED_AT", limit);
     }
 
     // let Vercel edge and browser cache results for 15 mins
@@ -44,7 +50,7 @@ export default async (req, res) => {
   }
 };
 
-const fetchRepos = async (sort) => {
+const fetchRepos = async (sort, limit) => {
   // https://docs.github.com/en/graphql/reference/objects#repository
   const { user } = await graphql(
     `
@@ -78,7 +84,7 @@ const fetchRepos = async (sort) => {
     `,
     {
       username: "jakejarvis",
-      limit: 16,
+      limit: parseInt(limit),
       sort: sort,
       headers: {
         authorization: `token ${process.env.GH_PUBLIC_TOKEN}`,

api/tracks.js

@@ -17,8 +17,8 @@ const NOW_PLAYING_ENDPOINT = `https://api.spotify.com/v1/me/player/currently-pla
 const TOP_TRACKS_ENDPOINT = `https://api.spotify.com/v1/me/top/tracks?time_range=long_term&limit=10`;
 
 Sentry.init({
-  dsn: process.env.SENTRY_DSN ?? "",
+  dsn: process.env.SENTRY_DSN || "",
-  environment: process.env.NODE_ENV ?? process.env.VERCEL_ENV ?? "",
+  environment: process.env.NODE_ENV || process.env.VERCEL_ENV || "",
 });
 
 export default async (req, res) => {

assets/js/src/counter.js

@@ -1,7 +1,10 @@
 import fetch from "cross-fetch";
-import urlParse from "url-parse";
 import numeral from "numeral";
 import canonicalUrl from "get-canonical-url";
+import urlParse from "url-parse";
+
+// API endpoint
+const HITS_ENDPOINT = "/api/hits/";
 
 // don't continue if there isn't a span#meta-hits element on this page
 const wrapper = document.getElementById("meta-hits");
@@ -24,29 +27,24 @@ if (wrapper && canonical) {
   // get path and strip beginning and ending forward slash
   const slug = urlParse(canonical).pathname.replace(/^\/|\/$/g, "");
 
-  fetch(`/api/hits/?slug=${encodeURIComponent(slug)}`)
+  fetch(`${HITS_ENDPOINT}?slug=${encodeURIComponent(slug)}`)
     .then((response) => response.json())
     .then((data) => {
-      if (data.hits) {
+      // pretty number and units
-        // pretty number and units
+      const hitsComma = numeral(data.hits).format("0,0");
-        const hitsComma = numeral(data.hits).format("0,0");
+      const hitsPlural = data.hits === 1 ? "view" : "views";
-        const hitsPlural = data.hits === 1 ? "hit" : "hits";
+      wrapper.title = `${hitsComma} ${hitsPlural}`;
-        wrapper.title = hitsComma + " " + hitsPlural;
 
-        // finally inject the hits...
+      // finally inject the hits...
-        const counter = document.getElementById("meta-hits-counter");
+      const counter = document.getElementById("meta-hits-counter");
-        if (counter) {
+      if (counter) {
-          counter.appendChild(document.createTextNode(hitsComma));
+        counter.appendChild(document.createTextNode(hitsComma));
-        }
+      }
 
-        // ...and hide the loading spinner
+      // ...and hide the loading spinner
-        const spinner = document.getElementById("meta-hits-loading");
+      const spinner = document.getElementById("meta-hits-loading");
-        if (spinner) {
+      if (spinner) {
-          spinner.style.display = "none";
+        spinner.style.display = "none";
-        }
-      } else {
-        // something went horribly wrong, initiate coverup
-        wrapper.style.display = "none";
       }
     })
     .catch(() => {

assets/js/src/projects.js

@@ -6,10 +6,12 @@ import numeral from "numeral";
 import { format, formatDistanceToNowStrict, parseJSON } from "date-fns";
 import twemoji from "twemoji";
 
+// API endpoint (sort by stars, limit to 12)
+const PROJECTS_ENDPOINT = "/api/projects/?top&limit=12";
+
 // don't continue if there isn't a span#meta-hits element on this page
 // TODO: be better.
 const wrapper = document.getElementById("github-cards");
-const spinner = document.getElementById("loading-spinner");
 
 if (wrapper) {
   // this is a total sh*tshow, but safer than setting one big string via innerHTML :)
@@ -69,7 +71,7 @@ if (wrapper) {
     </div>
   `;
 
-  fetch("/api/projects/?top")
+  fetch(PROJECTS_ENDPOINT)
     .then((response) => response.json())
     .then((data) => {
       data.forEach((repo) => {
@@ -80,6 +82,7 @@ if (wrapper) {
       });
 
       // we're done, hide the loading spinner
+      const spinner = document.getElementById("loading-spinner");
       if (spinner) {
         spinner.style.display = "none";
       }

package.json

@@ -68,7 +68,7 @@
     "clean-css": "^5.2.1",
     "copy-webpack-plugin": "^9.0.1",
     "core-js": "^3.18.2",
-    "css-loader": "^6.3.0",
+    "css-loader": "^6.4.0",
     "css-minimizer-webpack-plugin": "^3.1.1",
     "del": "^6.0.0",
     "dotenv": "^10.0.0",
@@ -86,7 +86,7 @@
     "gulp-html-minifier-terser": "^6.0.1",
     "gulp-imagemin": "^8.0.0",
     "hugo-extended": "0.86.1",
-    "lint-staged": "^11.2.0",
+    "lint-staged": "^11.2.1",
     "markdownlint-cli": "~0.29.0",
     "mini-css-extract-plugin": "^2.4.2",
     "npm-run-all": "^4.1.5",

webpack.config.js

@@ -232,7 +232,7 @@ export default {
       watch: true,
     },
     host: "0.0.0.0", // weird docker bind behavior
-    port: process.env.PORT ?? 1337,
+    port: process.env.PORT || 1337,
     compress: true,
     liveReload: true,
     setupExitSignals: false, // prevent dangling server when started via gulp

yarn.lock

@@ -2853,10 +2853,10 @@ css-declaration-sorter@^6.0.3:
   dependencies:
     timsort "^0.3.0"
 
-css-loader@^6.3.0:
+css-loader@^6.4.0:
-  version "6.3.0"
+  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.3.0.tgz#334d3500ff0a0c14cfbd4b0670088dbb5b5c1530"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.4.0.tgz#01c57ea776024e18ca193428dcad3ff6b42a0130"
-  integrity sha512-9NGvHOR+L6ps13Ilw/b216++Q8q+5RpJcVufCdW9S/9iCzs4KBDNa8qnA/n3FK/sSfWmH35PAIK/cfPi7LOSUg==
+  integrity sha512-Dlt6qfsxI/w1vU0r8qDd4BtMPxWqJeY5qQU7SmmZfvbpe6Xl18McO4GhyaMLns24Y2VNPiZwJPQ8JSbg4qvQLw==
   dependencies:
     icss-utils "^5.1.0"
     postcss "^8.2.15"
@@ -3475,9 +3475,9 @@ ee-first@1.1.1:
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
 electron-to-chromium@^1.3.857:
-  version "1.3.863"
+  version "1.3.864"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.863.tgz#74d0e6474f2bd87eb3688b8a35abc0c7a7fd1183"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.864.tgz#6a993bcc196a2b8b3df84d28d5d4dd912393885f"
-  integrity sha512-C+dLP4xM1DCqvEUjtqCGhd6DJGnXq1t03QR2ZxEWUQPkaXxDlzPUyWsSh17LHLQBEfmBCRfTbA3LpjiVikWsxg==
+  integrity sha512-v4rbad8GO6/yVI92WOeU9Wgxc4NA0n4f6P1FvZTY+jyY7JHEhw3bduYu60v3Q1h81Cg6eo4ApZrFPuycwd5hGw==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -6202,10 +6202,10 @@ linkify-it@^3.0.1:
   dependencies:
     uc.micro "^1.0.1"
 
-lint-staged@^11.2.0:
+lint-staged@^11.2.1:
-  version "11.2.0"
+  version "11.2.1"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-11.2.0.tgz#6b9774a74b3eb4bef5c59fb6475bff84d6853008"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-11.2.1.tgz#e49104cb4eb01ef36742531385be2efe2b85ed94"
-  integrity sha512-0KIcRuO4HQS2Su7qWtjrfTXgSklvyIb9Fk9qVWRZkGHa5S81Vj6WBbs+ogQBvHUwLJYq1eQ4R+H82GSak4OM7w==
+  integrity sha512-p56vAvBwABYSThvncT1Vuq0u6A8ZS56oC+eURfoavqyhBPJv+RGAmIU2kEYQOO19LPQVHQJ56eoBq/ARPlBoVQ==
   dependencies:
     cli-truncate "2.1.0"
     colorette "^1.4.0"
@@ -6889,9 +6889,9 @@ nanocolors@^0.1.12:
   integrity sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ==
 
 nanocolors@^0.2.6:
-  version "0.2.12"
+  version "0.2.13"
-  resolved "https://registry.yarnpkg.com/nanocolors/-/nanocolors-0.2.12.tgz#4d05932e70116078673ea4cc6699a1c56cc77777"
+  resolved "https://registry.yarnpkg.com/nanocolors/-/nanocolors-0.2.13.tgz#dfd1ed0bfab05e9fe540eb6874525f0a1684099b"
-  integrity sha512-SFNdALvzW+rVlzqexid6epYdt8H9Zol7xDoQarioEFcFN0JHo4CYNztAxmtfgGTVRCmFlEOqqhBpoFGKqSAMug==
+  integrity sha512-0n3mSAQLPpGLV9ORXT5+C/D4mwew7Ebws69Hx4E2sgz2ZA5+32Q80B9tL8PbL7XHnRDiAxH/pnrUJ9a4fkTNTA==
 
 nanoid@^3.1.28:
   version "3.1.29"