feat(app): Add webpage generator

AnandChowdhary · Aug 31, 2023 · 1c42ab6 · 1c42ab6
1 parent 3fa566a
commit 1c42ab6
Show file tree

Hide file tree

Showing 6 changed files with 355 additions and 0 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,18 @@
+name: CI
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: cd scripts
+      - run: npm install
+      - run: npm run build
+      - name: Deploy
+        uses: JamesIves/[email protected]
+        with:
+          branch: gh-pages
+          folder: dist
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+dist
+scripts/node_modules
diff --git a/scripts/generate.mjs b/scripts/generate.mjs
@@ -0,0 +1,40 @@
+import { promises as fs } from "fs";
+import hljs from "highlight.js";
+import { Marked } from "marked";
+import { gfmHeadingId } from "marked-gfm-heading-id";
+import { markedHighlight } from "marked-highlight";
+import { markedSmartypants } from "marked-smartypants";
+
+const marked = new Marked(
+  gfmHeadingId(),
+  markedSmartypants(),
+  markedHighlight({
+    langPrefix: "hljs language-",
+    highlight(code, lang) {
+      const language = hljs.getLanguage(lang) ? lang : "plaintext";
+      return hljs.highlight(code, { language }).value;
+    },
+  })
+);
+
+(async () => {
+  const template = await fs.readFile("../template.html", "utf-8");
+  let markdown = await fs.readFile("../README.md", "utf-8");
+  // Remove first line
+  markdown = markdown.substring(markdown.indexOf("\n") + 1);
+  // Remove license section
+  const licenseLine = "## 📄 License";
+  markdown = markdown.substring(0, markdown.indexOf(licenseLine));
+  // Replace "- [x] " with "✅ "
+  markdown = markdown.replaceAll("- [x] ", "- ");
+
+  const html = marked.parse(markdown, { gfm: true });
+  const output = template.replace("<!-- content -->", html);
+  await fs.mkdir("../dist", { recursive: true });
+  await fs.writeFile("../dist/index.html", output);
+})()
+  .then(() => console.log("Completed!"))
+  .catch((error) => {
+    console.error(error);
+    process.exit(1);
+  });
diff --git a/scripts/package-lock.json b/scripts/package-lock.json
diff --git a/scripts/package.json b/scripts/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "deliverabilityguide.com-scripts",
+  "type": "module",
+  "version": "0.0.0",
+  "main": "index.mjs",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Anand Chowdhary <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "highlight.js": "^11.8.0",
+    "marked": "^7.0.5",
+    "marked-gfm-heading-id": "^3.0.6",
+    "marked-highlight": "^2.0.4",
+    "marked-smartypants": "^1.1.0"
+  }
+}
diff --git a/template.html b/template.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Deliverability Guide by FirstQuadrant</title>
+    <meta
+      name="description"
+      content="Never end in spam with the world's most comprehensive email deliverability checklist, brought to you by your friends at FirstQuadrant."
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="canonical" href="https://deliverabilityguide.com" />
+    <style>
+      @media (prefers-reduced-motion: no-preference) {
+        html {
+          scroll-behavior: smooth;
+        }
+      }
+      body {
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+          Roboto, Ubuntu, "Helvetica Neue", sans-serif;
+        max-width: 40rem;
+        margin: 0 auto;
+        padding: 1rem;
+        line-height: 1.5;
+      }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-weight: 600;
+        line-height: 1.25;
+      }
+      h2 {
+        margin-top: 6rem;
+      }
+      a {
+        color: #000;
+        font-weight: 600;
+        border-radius: 0.25rem;
+      }
+      a:focus {
+        outline: 0.2rem solid #666;
+        color: #000;
+      }
+      header {
+        text-align: center;
+        margin: 6rem auto;
+      }
+      footer {
+        margin: 6rem auto 0;
+        text-align: center;
+        font-size: 0.8rem;
+        max-width: 30rem;
+        color: #666;
+      }
+      footer a {
+        color: #666;
+      }
+      footer a:hover {
+        color: #000;
+      }
+      ul li {
+        margin-top: 0.5rem;
+      }
+      pre {
+        background: #eee;
+        padding: 1rem;
+        border-radius: 0.25rem;
+        margin: 2rem 0;
+        overflow-x: auto;
+      }
+      .icon {
+        font-size: 6rem;
+      }
+      header h1 {
+        margin: 0.25rem 0;
+      }
+      header p {
+        color: #666;
+      }
+      header p:first-of-type {
+        margin-top: 0;
+        margin-bottom: 0.25rem;
+      }
+      header p:last-child {
+        margin-top: 0.5rem;
+      }
+      @media screen and (prefers-color-scheme: dark) {
+        body {
+          background: #000;
+          color: #fff;
+        }
+        a {
+          color: #fff;
+        }
+        a:focus {
+          outline: 0.2rem solid #fff;
+          color: #fff;
+        }
+        footer {
+          color: #aaa;
+        }
+        footer a {
+          color: #aaa;
+        }
+        footer a:hover {
+          color: #fff;
+        }
+        pre {
+          background: #222;
+        }
+        header p {
+          color: #aaa;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <div aria-hidden="true" class="icon">📧</div>
+      <p>The open source email</p>
+      <h1>Deliverability Guide</h1>
+      <p>by FirstQuadrant</p>
+    </header>
+    <main>
+      <!-- content -->
+    </main>
+    <footer>
+      <p>
+        This work is licensed under a
+        <a
+          href="https://github.com/firstquadrant-ai/deliverabilityguide.com/blob/main/LICENSE"
+          >Creative Commons Attribution Share Alike 4.0 International</a
+        >
+        by <a href="https://anandchowdhary.com">Anand Chowdhary</a> and
+        <a href="https://firstquadrant.ai">FirstQuadrant</a>.
+      </p>
+      <p>
+        This page is open source on
+        <a href="https://github.com/firstquadrant-ai/deliverabilityguide.com"
+          >GitHub</a
+        >
+        as a living document. Make a contribution!
+      </p>
+    </footer>
+  </body>
+</html>