More website fixes (#672)

* Fix incorrect sizing of recent blog post images

* Fix broken hash navigation on page load with code examples

The code replacement modifies height, which means
the anchor navigation is at the wrong place.
Renavigate after code has loaded.

* Update browserlist

* Yarn workaround in github action

See actions/setup-node#488
for reference.

* eslint-check -> eslint, remove website test (we don't have them)

.github/workflows/website-checks.yml

@@ -4,7 +4,7 @@ on:
     paths:
       - webhookdb-website/**
   push:
-    branches: [main]
+    branches: [ main ]
     paths:
       - webhookdb-website/**
 jobs:
@@ -22,9 +22,20 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 16.13
-          cache: 'yarn'
+          # cache: 'yarn' # Can't do this. See https://github.com/actions/setup-node/issues/488
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+        shell: bash
+        working-directory: webhookdb-website
+      - name: Restore yarn cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: yarn-cache-folder-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            yarn-cache-folder-
       - run: yarn install
       - run: yarn run prettier-check
       - run: yarn run sort-imports-check
-      - run: yarn run eslint-check
-      - run: CI=true yarn run test
+      - run: yarn run eslint

webhookdb-website/Makefile

@@ -13,9 +13,6 @@ run-network: check-version
 build: check-version
 	yarn build
 
-test: check-version
-	yarn run test
-
 prettier: check-version
 	yarn run prettier
 sort-imports:
@@ -26,7 +23,7 @@ eslint: check-version
 lint: eslint
 lint-fix:
 	yarn run eslint-fix
-check: prettier sort-imports eslint test
+check: prettier sort-imports eslint
 
 markdown-%: ## Convert the named blog post to HTML and write to stdout.
 	@$(shell yarn bin remark) --use remark-frontmatter --use remark-html blog/$(*)/index.md

webhookdb-website/package.json

@@ -65,5 +65,6 @@
     "import-sort-parser-babylon": "^6.0.0",
     "import-sort-style-module": "^6.0.0",
     "prettier": "^2.3.0"
-  }
+  },
+  "browserslist": [">0.25%", "not dead"]
 }

webhookdb-website/src/modules/throttledRequestIdleCallback.js

@@ -0,0 +1,10 @@
+/**
+ * Invoke requestIdleCallback(cb) after a timeout has elapsed.
+ * @param cb
+ * @param timeout
+ */
+export default function throttledRequestIdleCallback(cb, timeout) {
+  window.setTimeout(() => {
+    requestIdleCallback(cb);
+  }, timeout);
+}

webhookdb-website/src/pages/blog.js

@@ -37,7 +37,13 @@ export default function Blog() {
     `
   );
 
-  const showAll = false; // new URL(window.location).searchParams.get("showAll");
+  const [showAll, setShowAll] = React.useState(false);
+  React.useEffect(() => {
+    if (window !== undefined) {
+      setShowAll(Boolean(new URL(window.location).searchParams.get("showAll")));
+    }
+  }, []);
+
   const posts = data.allMarkdownRemark.edges.filter((edge) => {
     if (showAll) {
       return true;

webhookdb-website/src/templates/blogPost.js

@@ -86,7 +86,7 @@ export default function BlogPost({ data }) {
                           src={`/content/blog/thumbnail/${blog.image}`}
                           alt={blog.imageAlt}
                           height="200px"
-                          className="rounded-lg"
+                          style={{ objectFit: "cover" }}
                         ></CardImg>
                       </RLink>
                       <Card.Body>

webhookdb-website/src/templates/docsPage.js

@@ -9,6 +9,7 @@ import React from "react";
 import Seo from "../components/Seo";
 import TableOfContents from "../components/TableOfContents";
 import { graphql } from "gatsby";
+import throttledRequestIdleCallback from "../modules/throttledRequestIdleCallback";
 
 export const query = graphql`
   query ($path: String!) {
@@ -32,18 +33,45 @@ export default function DocsPage({ data }) {
   const { frontmatter, html } = markdownRemark;
   const { mdx } = data;
 
-  async function getSyntax() {
+  /**
+   * When the page loads, load deckdeckgo to replace the static code blocks
+   * with pretty ones. This changes the height of the page,
+   * so once all the elements are done loading,
+   * we need to re-navigate to the hash to find the right scroll position.
+   * @returns {Promise<void>}
+   */
+  async function loadCodeFormattingAndRenavigate() {
     try {
       const deckdeckgoLoader = require("@deckdeckgo/highlight-code/dist/loader");
-
-      deckdeckgoLoader.defineCustomElements(window);
+      await deckdeckgoLoader.defineCustomElements(window);
     } catch (err) {
-      console.error(err);
+      console.error("Failed to load code highlighting:", err);
+      return;
+    }
+    const hash = window.location.hash || "";
+    if (hash.length < 2) {
+      // No need to navigate for empty hash or #
+      return;
     }
+    const codeBlocks = [...document.querySelectorAll("deckgo-highlight-code")];
+    // Poll until all code blocks are hydrated, then navigate to scroll into view.
+    const renavigateWhenHydrated = () => {
+      const allHydrated = codeBlocks.every((node) =>
+        node.className.includes("hydrated")
+      );
+      if (allHydrated) {
+        window.requestIdleCallback(() => {
+          window.location.href = window.location.hash;
+        });
+      } else {
+        throttledRequestIdleCallback(renavigateWhenHydrated, 100);
+      }
+    };
+    throttledRequestIdleCallback(renavigateWhenHydrated, 100);
   }
 
   React.useEffect(() => {
-    getSyntax();
+    loadCodeFormattingAndRenavigate().then(() => null);
   }, []);
 
   return (

webhookdb-website/yarn.lock

@@ -3398,9 +3398,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001335, caniuse-lite@^1.0.30001358:
-  version "1.0.30001358"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001358.tgz#473d35dabf5e448b463095cab7924e96ccfb8c00"
-  integrity sha512-hvp8PSRymk85R20bsDra7ZTCpSVGN/PAz9pSAjPSjKC+rNmnUk5vCRgJwiTT/O4feQ/yu/drvZYpKxxhbFuChw==
+  version "1.0.30001469"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001469.tgz"
+  integrity sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g==
 
 ccount@^1.0.0:
   version "1.1.0"