content/issue 75 final content and site review (#127)

CONTRIBUTING.md

@@ -35,6 +35,17 @@ Where `issue-xxx` is the corresponding issue in the GreenwoodJS project.
 
 General changes to the website can be made by submitting a PR directly to the main branch. This includes typos, style changes, and general enhancements to the website as a whole.
 
+### Link Checker
+
+There is a **npm** script that you can run that will check all relative links and hashes (except for blog pages) to check that links aren't broken. Running the command will build the site for production automatically and generate a report.
+
+```sh
+$ npm run lint:links
+#...
+
+✅ all links checked successfully and no broken links found
+```
+
 ## Development
 
 ### Styling

link-checker.js

@@ -0,0 +1,65 @@
+import graph from "./public/graph.json" with { type: "json" };
+import { parse } from "node-html-parser";
+import fs from "fs/promises";
+
+const report = {};
+
+for (const page of graph) {
+  const { outputHref, route } = page;
+  const html = await fs.readFile(new URL(outputHref), "utf-8");
+  const root = parse(html);
+  const links = root.querySelectorAll("a");
+
+  links.forEach((link) => {
+    if (!route.startsWith("/blog/") && link.getAttribute("href").startsWith("/")) {
+      const linkUrl = new URL(`https://www.greenwoodjs.dev${link.getAttribute("href")}`);
+      const { pathname, hash } = linkUrl;
+      const matchingRoute = graph.find((page) => page.route === pathname);
+
+      if (!matchingRoute) {
+        if (!report[route]) {
+          report[route] = {
+            violations: [],
+          };
+        }
+
+        report[route].violations.push({
+          link: pathname,
+        });
+      }
+
+      if (matchingRoute && hash !== "") {
+        const { tableOfContents } = matchingRoute.data;
+        const match = tableOfContents.find((toc) => toc.slug === hash.replace("#", ""));
+
+        if (!match) {
+          if (!report[route]) {
+            report[route] = {
+              violations: [],
+            };
+          }
+
+          report[route].violations.push({
+            hash,
+          });
+        }
+      }
+    }
+  });
+}
+
+if (Object.keys(report).length === 0) {
+  console.log("✅ all links checked successfully and no broken links found");
+} else {
+  for (const r of Object.keys(report)) {
+    console.log("---------------------------------");
+    console.log(`🚨 reporting violations for route ${r}...`);
+    report[r].violations.forEach((violation, idx) => {
+      if (violation.link) {
+        console.error(`${idx + 1}) Could not find matching route for href => ${violation.link}`);
+      } else if (violation.hash) {
+        console.error(`${idx + 1}) Could not find matching heading for hash => ${violation.hash}`);
+      }
+    });
+  }
+}

package.json

@@ -28,6 +28,7 @@
     "lint:ls": "ls-lint",
     "lint:js": "eslint",
     "lint:css": "stylelint \"./src/**/*.css\"",
+    "lint:links": "npm run build && node ./link-checker.js",
     "format": "prettier . --write",
     "format:check": "prettier . --check",
     "prepare": "husky install"
@@ -67,6 +68,7 @@
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
     "lit": "^3.1.2",
+    "node-html-parser": "^6.1.13",
     "prettier": "^3.2.5",
     "rehype-autolink-headings": "^4.0.0",
     "rehype-slug": "^3.0.0",

src/components/edit-on-github/edit-on-github.module.css

@@ -7,7 +7,7 @@
 .container a:active,
 .container a:focus,
 .container a:visited {
-  padding: calc(var(--size-1) + var(--size-2));
+  padding: calc(var(--size-1) + var(--size-1));
   border-radius: var(--size-px-2);
   background-color: var(--color-prism-bg);
   color: var(--color-accent);
@@ -18,3 +18,12 @@
 .container a:hover {
   text-decoration: underline;
 }
+
+@media (min-width: 1200px) {
+  .container a,
+  .container a:active,
+  .container a:focus,
+  .container a:visited {
+    padding: calc(var(--size-1) + var(--size-2));
+  }
+}

src/components/run-anywhere/run-anywhere.js

@@ -17,7 +17,7 @@ export default class RunAnywhere extends HTMLElement {
     this.innerHTML = `
       <div class="${styles.container}">
         <h3 class="${styles.heading}">Run anywhere the web can run</h3>
-        <p class="${styles.subHeading}">Greenwood helps you take your application <a href="/guides/deploy/">to production</a> by embracing platforms that embrace web standards.</p>
+        <p class="${styles.subHeading}">Greenwood helps you take your application <a href="/guides/hosting/">to production</a> by embracing platforms that embrace web standards.</p>
 
         <div class="${styles.platformsContainer}">
           ${platforms

src/components/table-of-contents/table-of-contents.module.css

@@ -23,10 +23,10 @@
 .compactMenuPopover {
   top: 150px;
   width: auto;
-  min-height: 150px;
+  min-height: 250px;
   margin: 0 var(--size-2);
   border: 1px solid var(--color-gray);
-  box-shadow: var(--shadow-2);
+  box-shadow: var(--shadow-4);
   padding: var(--size-2);
 }
 

src/pages/blog/release/v0-27-0.md

@@ -72,7 +72,7 @@ So that is what we did! From this release forward, all CSS minification and bund
 
 ### Build Capacity
 
-The last highlight we would like to feature from this release was the introduction of thread pooling for static builds that rely on SSR based page generation, like when using the [`prerender` configuration option](/docs/configuration/#prerender). In adopting this [SSG benchmark](https://github.com/thescientist13/bench-framework-markdown), it was clear that without some work, Greenwood would not be able to build thousands of pages in this way, let alone quickly.
+The last highlight we would like to feature from this release was the introduction of thread pooling for static builds that rely on SSR based page generation, like when using the [`prerender` configuration option](/docs/reference/configuration/#prerender). In adopting this [SSG benchmark](https://github.com/thescientist13/bench-framework-markdown), it was clear that without some work, Greenwood would not be able to build thousands of pages in this way, let alone quickly.
 
 So under the hood, Greenwood now introduces thread pooling to avoid crashing NodeJS through the spawning of too many Worker threads, based on our [_Getting Started_ repo](https://github.com/ProjectEvergreen/greenwood-getting-started). While it might not be the fastest, at least Greenwood will now be able handle the [thousands of pages](https://github.com/thescientist13/bench-framework-markdown) you may throw at it! 😅
 

src/pages/blog/state-of-greenwood-2022.md

@@ -154,7 +154,7 @@ And Greenwood will statically generate this
 
 ### Interpolate Frontmatter
 
-When setting the [`interpolateFrontmatter`](/docs/configuration/#interpolate-frontmatter) flag in your _greenwood.config.js_, frontmatter in your markdown will be available in your HTML or markdown similar to how variable interpolation works in JavaScript. Great for `<meta>` tags!
+When setting the [`interpolateFrontmatter`](/docs/reference/configuration/#interpolate-frontmatter) flag in your _greenwood.config.js_, frontmatter in your markdown will be available in your HTML or markdown similar to how variable interpolation works in JavaScript. Great for `<meta>` tags!
 
 #### How It Works