Package using nix

.github/workflows/build.yaml

@@ -0,0 +1,41 @@
+name: Build and deploy
+
+on:
+  push:
+  pull_request:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: DeterminateSystems/nix-installer-action@main
+      - uses: DeterminateSystems/magic-nix-cache-action@main
+
+      - name: Build project
+        run: nix build .#doffycup-github-pages
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: ./result/www
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+    needs: build
+    if: github.event_name == 'push' && github.ref == 'refs/heads/master'
+
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.gitignore

@@ -3,3 +3,6 @@ node_modules
 dist
 dist-ssr
 *.local
+.direnv
+result
+.envrc

README.md

@@ -1,4 +1,3 @@
-# doffycup
+# Doffycup
 
 To see how the project looks like and how it works see the presentation here: https://youtu.be/h536BEVIe1U?t=296
-

build.js

@@ -0,0 +1,49 @@
+import * as esbuild from "esbuild";
+import { htmlPlugin } from "@craftamap/esbuild-plugin-html";
+import * as fs from "fs";
+
+const serve = process.env.ESBUILD_SERVE === "1";
+const baseurl = process.env.ESBUILD_BASEURL || "";
+
+console.log(`Building with baseurl ${baseurl}`);
+
+const entryPoints = ["src/main.tsx"];
+
+const ctx = await esbuild.context({
+  entryPoints,
+  minify: !serve,
+  bundle: true,
+  metafile: true,
+  sourcemap: true,
+  outdir: "dist",
+  format: "esm",
+  target: ["es2020"],
+  assetNames: "assets/[name]",
+  loader: { ".png": "file" },
+  define: {
+    "process.env.BASEURL": JSON.stringify(baseurl),
+  },
+  plugins: [
+    htmlPlugin({
+      files: [
+        {
+          entryPoints,
+          filename: "index.html",
+          favicon: "src/favicon.ico",
+          htmlTemplate: "src/index.html",
+          scriptLoading: "module",
+        },
+      ],
+    }),
+  ],
+  publicPath: baseurl,
+});
+
+if (serve) {
+  const { port, host } = await ctx.serve({ servedir: "dist" });
+  console.log(`Serving on ${host}:${port}`);
+} else {
+  await ctx.rebuild();
+  await ctx.dispose();
+  console.log(`Project bundled successfully`);
+}

flake.nix

@@ -0,0 +1,60 @@
+{
+  description = "Doffycup";
+  inputs.flake-utils.url = "github:numtide/flake-utils";
+
+  outputs = { nixpkgs, flake-utils, ... }:
+    flake-utils.lib.eachDefaultSystem (system:
+      let
+        pkgs = nixpkgs.legacyPackages.${system};
+        nodejs = pkgs.nodejs_18;
+      in
+      rec {
+        packages.doffycup = pkgs.buildNpmPackage {
+          name = "doffycup";
+
+          buildInputs = [ nodejs pkgs.gzip ];
+
+          src = pkgs.lib.cleanSource ./.;
+          npmDepsHash = builtins.readFile ./npm-deps-hash;
+
+          ESBUILD_BASEURL = "";
+
+          postBuild = ''
+            # Github pages requires an additional 404.html file
+            cp dist/{index,404}.html
+
+            # -k = keeps the original files in place
+            # -r = recursive
+            # -9 = best compression
+            gzip -kr9 dist
+          '';
+
+          installPhase = ''
+            mkdir $out
+            cp -r dist $out/www
+          '';
+        };
+
+        # Github pages deploys to a subfolder
+        packages.doffycup-github-pages = packages.doffycup.overrideAttrs {
+          ESBUILD_BASEURL = "/doffycup";
+        };
+
+        packages.default = packages.doffycup;
+
+        devShells.default = pkgs.mkShell {
+          packages = [ nodejs ];
+        };
+
+        apps.compute-npm-dep-hash = {
+          type = "app";
+          program = pkgs.lib.getExe (pkgs.writeShellApplication {
+            name = "generate-layout-previes";
+            runtimeInputs = [ pkgs.prefetch-npm-deps ];
+            text = "prefetch-npm-deps ./package-lock.json > ./npm-deps-hash";
+          });
+        };
+      }
+    );
+}
+

npm-deps-hash

@@ -0,0 +1 @@
+sha256-KuC12heZGyrrba49L4PUnoWwnZpEpOEx8q+wDpDaFr4=