Merge pull request #10 from ubiquity/feat/pwa

Feat/pwa

.github/workflows/conventional-commits.yml

@@ -8,5 +8,5 @@ jobs:
     name: Conventional Commits
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ubiquity/action-conventional-commits@master

build/esbuild-build.ts

@@ -1,41 +1,34 @@
 import * as dotenv from "dotenv";
 import esbuild from "esbuild";
 import { invertColors } from "./plugins/invert-colors";
-const typescriptEntries = [
-  "src/home/home.ts",
-  // "src/login/login.ts",
-  // "src/authenticated/authenticated.ts"
-];
+import { pwaManifest } from "./plugins/pwa-manifest";
+const typescriptEntries = ["src/home/home.ts", "src/progressive-web-app.ts"];
 const cssEntries = ["static/style/style.css"];
-const entries = [...typescriptEntries, ...cssEntries];
+const entries = [...typescriptEntries, ...cssEntries, "static/manifest.json", "static/favicon.svg", "static/icon-512x512.png"];
 
 export const esBuildContext: esbuild.BuildOptions = {
   define: createEnvDefines(["SUPABASE_URL", "SUPABASE_KEY"]),
-  plugins: [invertColors],
+  plugins: [invertColors, pwaManifest],
   sourcemap: true,
   entryPoints: entries,
   bundle: true,
   minify: false,
   loader: {
-    ".png": "dataurl",
-    ".woff": "dataurl",
-    ".woff2": "dataurl",
-    ".eot": "dataurl",
-    ".ttf": "dataurl",
-    ".svg": "dataurl",
+    ".png": "file",
+    ".woff": "file",
+    ".woff2": "file",
+    ".eot": "file",
+    ".ttf": "file",
+    ".svg": "file",
+    ".json": "file",
   },
   outdir: "static/dist",
 };
 
 esbuild
   .build(esBuildContext)
-  .then(() => {
-    console.log("\tesbuild complete");
-  })
-  .catch((err) => {
-    console.error(err);
-    process.exit(1);
-  });
+  .then(() => console.log("\tesbuild complete"))
+  .catch(console.error);
 
 function createEnvDefines(variableNames: string[]): Record<string, string> {
   const defines: Record<string, string> = {};

build/plugins/pwa-manifest.ts

@@ -0,0 +1,27 @@
+import esbuild from "esbuild";
+import fs from "fs";
+import path from "path";
+import manifest from "../../static/manifest.json";
+
+const DIST = `../../static/dist`;
+
+export const pwaManifest: esbuild.Plugin = {
+  name: "pwa-manifest",
+  setup(build) {
+    build.onEnd(() => {
+      // Update the icon paths
+      manifest.icons.forEach((icon) => {
+        const filename = path.basename(icon.src);
+        const hashedFilename = fs.readdirSync(path.resolve(__dirname, DIST)).find((file) => file.startsWith(filename.split(".")[0]));
+
+        // Update the icon src in the manifest
+        if (hashedFilename) {
+          icon.src = `/${hashedFilename}`;
+        }
+      });
+
+      // Write the updated manifest to the output directory
+      fs.writeFileSync(path.resolve(__dirname, `${DIST}/manifest.json`), JSON.stringify(manifest, null, 2));
+    });
+  },
+};

src/home/fetch-github/fetch-and-display-previews.ts

@@ -30,8 +30,8 @@ export async function fetchAndDisplayPreviewsFromNetwork(sorting?: Sorting, opti
   const fetchedPreviews = await fetchIssuePreviews();
   const cachedTasks = taskManager.getTasks();
   const updatedCachedIssues = verifyGitHubIssueState(cachedTasks, fetchedPreviews);
-  displayGitHubIssues(sorting, options);
   taskManager.syncTasks(updatedCachedIssues);
+  displayGitHubIssues(sorting, options);
   return fetchAvatars();
 }
 

src/home/fetch-github/fetch-issues-full.ts

@@ -5,14 +5,9 @@ import { taskWithFullTest } from "./fetch-and-display-previews";
 import { fetchAvatar } from "./fetch-avatar";
 import { TaskMaybeFull, TaskWithFull } from "./preview-to-full-mapping";
 
-// export const previewToFullMapping = new PreviewToFullMapping().getMapping();
 export const organizationImageCache = new Map<string, Blob | null>();
 
 export async function fetchIssuesFull(taskPreviews: TaskMaybeFull[]): Promise<TaskWithFull[]> {
-  const authToken = getGitHubAccessToken();
-  if (!authToken) {
-    console.warn("No authentication token found");
-  }
   const octokit = new Octokit({ auth: getGitHubAccessToken() });
   const urlPattern = /https:\/\/github\.com\/(?<org>[^/]+)\/(?<repo>[^/]+)\/issues\/(?<issue_number>\d+)/;
 

src/home/fetch-github/fetch-issues-preview.ts

@@ -1,9 +1,9 @@
 import { Octokit } from "@octokit/rest";
 import { getGitHubAccessToken } from "../getters/get-github-access-token";
 import { GitHubIssue } from "../github-types";
-import { TaskNoFull } from "./preview-to-full-mapping";
 import { taskManager } from "../home";
-import { displayPopupMessage } from "../rendering/display-error-modal";
+import { displayPopupMessage } from "../rendering/display-popup-modal";
+import { TaskNoFull } from "./preview-to-full-mapping";
 
 export async function fetchIssuePreviews(): Promise<TaskNoFull[]> {
   const octokit = new Octokit({ auth: getGitHubAccessToken() });
@@ -35,18 +35,11 @@ export async function fetchIssuePreviews(): Promise<TaskNoFull[]> {
   return tasks;
 }
 function automaticLogin(error: unknown) {
-  const resetTime = error.headers["x-ratelimit-reset"];
+  const resetTime = error.response.headers["x-ratelimit-reset"];
   const resetParsed = new Date(resetTime * 1000).toLocaleTimeString();
 
   displayPopupMessage(
     `GitHub API rate limit exceeded.`,
     `You have been rate limited. Please log in to GitHub to increase your GitHub API limits, otherwise you can try again at ${resetParsed}.`
   );
-
-  // const isAuthorized = confirm(
-  //   `You have been rate limited. Please log in to GitHub to increase your GitHub API limits, otherwise you can try again at ${resetParsed}.\n\nDo you want to automatically login?`
-  // );
-  // if (isAuthorized) {
-  //   document.getElementById(`github-login-button`)?.click(); // automatic login
-  // }
 }

src/home/getters/get-github-user.ts

@@ -21,7 +21,6 @@ async function getSessionToken(): Promise<string | null> {
   if (newSessionToken) {
     return newSessionToken;
   }
-  console.error("No session token found");
   return null;
 }
 

src/home/home.ts

@@ -30,4 +30,17 @@ void (async function home() {
   } catch (error) {
     console.error(error);
   }
+
+  if ("serviceWorker" in navigator) {
+    window.addEventListener("load", () => {
+      navigator.serviceWorker.register("/dist/src/progressive-web-app.js").then(
+        (registration) => {
+          console.log("ServiceWorker registration successful with scope: ", registration.scope);
+        },
+        (err) => {
+          console.log("ServiceWorker registration failed: ", err);
+        }
+      );
+    });
+  }
 })();

src/home/rendering/display-error-modal.ts → src/home/rendering/display-popup-modal.ts

@@ -1,6 +1,6 @@
-import { preview, previewBodyInner, titleAnchor, titleHeader } from "../rendering/render-preview-modal";
 import { toolbar } from "../ready-toolbar";
 import { gitHubLoginButton } from "./render-github-login-button";
+import { preview, previewBodyInner, titleAnchor, titleHeader } from "./render-preview-modal";
 export function displayPopupMessage(header: string, message: string, url?: string) {
   titleHeader.textContent = header;
   if (url) {

src/progressive-web-app.ts

@@ -0,0 +1,15 @@
+self.addEventListener("install", (event: InstallEvent) => {
+  event.waitUntil(
+    caches.open("v1").then((cache) => {
+      return cache.addAll(["/", "/dist/src/home/home.js", "/style/style.css", "/style/inverted-style.css", "/favicon.svg"]);
+    })
+  );
+});
+
+self.addEventListener("fetch", (event: FetchEvent) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      return response || fetch(event.request);
+    })
+  );
+});

static/index.html

@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="style/inverted-style.css" />
 
     <link rel="icon" href="favicon.svg" type="image/x-icon" />
+    <link rel="apple-touch-icon" href="/icon-512x512.png" />
     <link rel="canonical" href="https://work.ubq.fi" />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="description" content="View and sort through all of the available work within the DevPool network." />
@@ -20,15 +21,16 @@
     <meta name="twitter:description" content="View and sort through all of the available work within the DevPool network." />
     <meta name="twitter:title" content="DevPool Directory | Ubiquity DAO" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover" />
-
     <meta property="og:description" content="View and sort through all of the available work within the DevPool network." />
     <meta property="og:site_name" content="DevPool Directory | Ubiquity DAO" />
     <meta property="og:title" content="DevPool Directory | Ubiquity DAO" />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://work.ubq.fi" />
     <meta property="twitter:domain" content="work.ubq.fi" />
     <meta property="twitter:url" content="https://work.ubq.fi" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
+    <link rel="manifest" href="/manifest.json" />
   </head>
   <body>
     <background><div id="grid"></div></background>

static/manifest.json

@@ -0,0 +1,22 @@
+{
+  "name": "DevPool Directory | Ubiquity DAO",
+  "short_name": "DevPool Directory",
+  "description": "View and sort through all of the available work within the DevPool network.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#000410",
+  "theme_color": "#000410",
+  "icons": [
+    {
+      "src": "/favicon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

tsconfig.json

@@ -12,7 +12,7 @@
 
     /* Language and Environment */
     "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
-    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    "lib": ["DOM", "ESNext"] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
@@ -39,7 +39,7 @@
     // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
     // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
     // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
-    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    "resolveJsonModule": true /* Enable importing .json files. */,
     // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */