feat: build and deploy to GitHub Pages (#12)

* ci: build and deploy to GitHub Pages * fix: mkdir * fix: token permissions * feat: add static page * feat: add repository page * fix: workflow * fix: page * fix: deploy * fix: deploy * fix: cp verbose * fix: no demo * fix: demo links on personal site * fix: linking * fix: remove branches from workflow * 1.6.0 * fix: ci
sapachev · Feb 8, 2023 · 16143f6 · 16143f6
1 parent 0688cc0
commit 16143f6
Show file tree

Hide file tree

Showing 10 changed files with 211 additions and 9 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -0,0 +1,56 @@
+name: Build and Deploy
+
+on:
+  push:
+    branches: ["main"]
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: write
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Prepare Artifacts Directory
+        run: |
+          mkdir -p ./artifacts/packages
+          mkdir -p ./artifacts/assets
+
+      - name: Build GitHub Project Page
+        run: |
+          cp ./pages/index.html ./artifacts
+          cp -rv ./pages/assets ./artifacts
+          npm run build:pages
+
+      - name: Build Package (en)
+        run: |
+          LOCALE=en npm run build
+          zip -rqj ./artifacts/packages/error-pages-en.latest.zip ./dist/
+
+      - name: Upload artifacts
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: "artifacts"
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -25,6 +25,7 @@ jobs:
 
       - name: Install Dependencies
         run: npm ci
+
       - name: Check
         run: npm run check
 

diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 node_modules/
 dist/
-.nyc_output/
-coverage/
+coverage/
+artifacts/
+.nyc_output/
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ Lightweight tool to create static HTTP Error Pages in minimalistic adaptive and
 * Accessibility (a11y)
 * Built-in web server config generator (Nginx)
 
-![Screenshot](https://sapachev.com/share/error-pages/screenshot.png?3)
+![Screenshot](https://sapachev.github.io/error-pages/assets/screenshot.png?1)
 
 # Demo
 
@@ -29,6 +29,11 @@ Lightweight tool to create static HTTP Error Pages in minimalistic adaptive and
 * [504 Gateway Timeout](https://sapachev.com/error-pages/gateway-timeout)
 
 
+# Precompiled Packages
+
+If you want to get already precompiled packages, then you can download latest versions from [official website]|(https://sapachev.github.io/error-pages/#precompiled-packages).
+
+
 # How to use
 
 Requirements: installed Node.js 11+

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,19 +1,18 @@
 {
   "name": "error-pages",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Lightweight tool to create static HTTP Error Pages in minimalistic adaptive and accessible design with customization and localization support",
   "main": "index.ts",
   "scripts": {
     "build": "npx ts-node index.ts",
-    "build:ci": "npx ts-node index.ts --read-only",
+    "build:pages": "npx tailwind -c ./pages/tailwind.config.js -i ./pages/main.twnd.css -o ./artifacts/assets/main.css -m",
     "build:tailwind": "npx tailwindcss -i $INPUT -o $OUTPUT -m",
     "lint": "eslint .",
     "prettier": "prettier --check --ignore-unknown .",
     "prettier:fix": "prettier --write --ignore-unknown .",
     "test": "mocha -r ts-node/register 'test/**/*.ts'",
-    "check": "npm run build:ci && npm run lint && npm run coverage:lcov",
+    "check": "npm run build && npm run lint && npm run coverage:lcov",
     "coverage:html": "nyc --reporter=html npm run test",
-    "coverage:json": "nyc --reporter=json-summary npm run test",
     "coverage:lcov": "nyc --reporter=lcov npm run test"
   },
   "author": "Pavel Sapachev",

diff --git a/pages/assets/screenshot.png b/pages/assets/screenshot.png
diff --git a/pages/index.html b/pages/index.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>The Error Pages</title>
+
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="author" content="Pavel Sapachev" />
+
+    <link href="./assets/main.css" rel="stylesheet" type="text/css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@400;600&display=swap" rel="stylesheet" />
+
+    <script>
+      (async () => {
+        // Personal Token to page Debug
+        const token = "";
+        const params = token
+          ? {
+              headers: new Headers({
+                Authorization: `token ${token}`,
+              }),
+            }
+          : {};
+
+        Promise.all([
+          fetch("https://api.github.com/repos/sapachev/error-pages/contents/package.json", params).then(async (response) => {
+            if (response?.ok) {
+              const package = await response.json();
+              const version = JSON.parse(window.atob(package.content)).version;
+              document.getElementById("version").innerText = version;
+            }
+          }),
+          fetch("https://api.github.com/repos/sapachev/error-pages/contents/src/", params).then(async (response) => {
+            if (response?.ok) {
+              const srcLocales = await response.json();
+              const pkgName = "error-pages-XX.latest.zip";
+
+              let list = "";
+              for (let file of srcLocales) {
+                const localePkgName = pkgName.replace("XX", file.name);
+                list += `<li><a href="./packages/${localePkgName}" title="Download Package for the '${file.name}' locale" rel="nofollow">${file.name}</a></li>`;
+              }
+              document.getElementById("list").innerHTML = list;
+            } else {
+              document.getElementById("list").innerText = `Unable to load packages list due to the error "${response.status}"`;
+            }
+          }),
+        ]);
+      })();
+    </script>
+  </head>
+
+  <body class="container mx-auto px-4 py-8 text-slate-700 sm:w-max">
+    <h1>The Error Pages</h1>
+    <p class="mt-4">
+      Lightweight tool to create static HTTP Error Pages in minimalistic adaptive and accessible design with customization and localization
+      support.
+    </p>
+
+    <div class="mt-2">
+      Latest version: <span id="version" class="font-bold">x.x.x</span> (<a href="https://github.com/sapachev/error-pages" target="_blank"
+        >visit GitHub Repository</a
+      >)
+    </div>
+    <div class="mt-2 flex items-center">
+      Status:
+      <img
+        class="ml-2 inline"
+        src="https://github.com/sapachev/error-pages/actions/workflows/build.yml/badge.svg"
+        alt="Build and Deploy status badge"
+      />
+    </div>
+
+    <img class="xs:w-fit mt-8 -mb-8" src="./assets/screenshot.png" alt="Preview of Error 404" />
+
+    <h2>Main Features<a id="main-features"></a></h2>
+    <ul class="list-inside list-disc px-4">
+      <li>Static pages with simple and responsive design</li>
+      <li>Lightweight and fast running</li>
+      <li>Extensibility</li>
+      <li>Customization</li>
+      <li>Localization (i18n)</li>
+      <li>Accessibility (a11y)</li>
+      <li>Built-in web server config generator (Nginx)</li>
+    </ul>
+
+    <h2>Demo<a id="demo"></a></h2>
+    <ul class="list-inside list-disc px-4">
+      <li><a href="https://sapachev.com/error-pages/bad-request" target="_blank" rel="nofollow">400 Bad Request</a></li>
+      <li><a href="https://sapachev.com/error-pages/unauthorized" target="_blank" rel="nofollow">401 Unauthorized</a></li>
+      <li><a href="https://sapachev.com/error-pages/forbidden" target="_blank" rel="nofollow">403 Forbidden</a></li>
+      <li><a href="https://sapachev.com/error-pages/not-found" target="_blank" rel="nofollow">404 Not Found</a></li>
+      <li><a href="https://sapachev.com/error-pages/gone" target="_blank" rel="nofollow">410 Gone</a></li>
+      <li><a href="https://sapachev.com/error-pages/internal-server-error" target="_blank" rel="nofollow">500 Internal Server Error</a></li>
+      <li><a href="https://sapachev.com/error-pages/bad-gateway" target="_blank" rel="nofollow">502 Bad Gateway</a></li>
+      <li><a href="https://sapachev.com/error-pages/service-unavailable" target="_blank" rel="nofollow">503 Service Unavailable</a></li>
+      <li><a href="https://sapachev.com/error-pages/gateway-timeout" target="_blank" rel="nofollow">504 Gateway Timeout</a></li>
+    </ul>
+
+    <h2>Precompiled Packages<a id="precompiled-packages"></a></h2>
+    <p>If you don't want to build pages by yourself, you can download one of automatically created packages with the latest version:</p>
+    <ul id="list" class="list-inside list-disc px-4">
+      <p>Wait please to load packages list...</p>
+      <noscript>Unable to load packages list due to disabled JavaScript</noscript>
+    </ul>
+  </body>
+</html>
diff --git a/pages/main.twnd.css b/pages/main.twnd.css
@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+  font-family: "Noto Sans Display", sans-serif;
+}
+
+a {
+  @apply text-sky-700 hover:underline;
+}
diff --git a/pages/tailwind.config.js b/pages/tailwind.config.js
@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+/* eslint-disable */
+
+const plugin = require("tailwindcss/plugin");
+
+module.exports = {
+  content: [`./pages/**/*.html`],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    plugin(function ({ addBase, theme }) {
+      addBase({
+        h1: { fontSize: theme("fontSize.2xl"), fontWeight: "bold" },
+        h2: { fontSize: theme("fontSize.lg"), fontWeight: "bold", marginTop: "2rem" },
+      });
+    }),
+  ],
+};