add nix flake and update dependencies

.envrc

@@ -1 +1 @@
-use nix
+use flake

.gitlab-ci.yml

@@ -1,11 +0,0 @@
-pages:
-  stage: deploy
-  image: docker.io/library/alpine:edge
-  script:
-    - apk add nodejs npm python3 git alpine-sdk
-    - npm install --save-dev
-    - npx webpack
-    - mv dist public
-  artifacts:
-    paths:
-      - public

default.nix

@@ -0,0 +1,8 @@
+(import (let
+  lock = builtins.fromJSON (builtins.readFile ./flake.lock);
+in
+  fetchTarball {
+    url = "https://github.com/edolstra/flake-compat/archive/${lock.nodes.flake-compat.locked.rev}.tar.gz";
+    sha256 = lock.nodes.flake-compat.locked.narHash;
+  }) {src = ./.;})
+.defaultNix

flake.lock

@@ -0,0 +1,78 @@
+{
+  "nodes": {
+    "flake-compat": {
+      "flake": false,
+      "locked": {
+        "lastModified": 1673956053,
+        "narHash": "sha256-4gtG9iQuiKITOjNQQeQIpoIB6b16fm+504Ch3sNKLd8=",
+        "owner": "edolstra",
+        "repo": "flake-compat",
+        "rev": "35bb57c0c8d8b62bbfd284272c928ceb64ddbde9",
+        "type": "github"
+      },
+      "original": {
+        "owner": "edolstra",
+        "repo": "flake-compat",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1695644571,
+        "narHash": "sha256-asS9dCCdlt1lPq0DLwkVBbVoEKuEuz+Zi3DG7pR/RxA=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "6500b4580c2a1f3d0f980d32d285739d8e156d92",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-compat": "flake-compat",
+        "nixpkgs": "nixpkgs",
+        "utils": "utils"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    },
+    "utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1694529238,
+        "narHash": "sha256-zsNZZGTGnMOf9YpHKJqMSsa0dXbfmxeoJ7xHlrt+xmY=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "ff7b65b44d01cf9ba6a71320833626af21126384",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,94 @@
+{
+  description = "Our website for describing what foods we like and dislike.";
+
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+    utils.url = "github:numtide/flake-utils";
+    flake-compat = {
+      url = "github:edolstra/flake-compat";
+      flake = false;
+    };
+  };
+
+  outputs = {
+    self,
+    nixpkgs,
+    utils,
+    ...
+  }:
+    {
+      overlays.food-site = final: prev: {
+        food-site = final.mkYarnPackage rec {
+          pname = "food";
+          version = "latest";
+          src = ./.;
+
+          yarnLock = ./yarn.lock;
+          yarnNix = ./yarn.nix;
+          packageJSON = ./package.json;
+
+          doDist = false;
+
+          # required for using system libsass, or else it tries to fetch new node headers
+          yarnPreBuild = ''
+            export npm_config_nodedir=${final.pkgs.nodejs}
+          '';
+
+          pkgConfig = {
+            node-sass = {
+              nativeBuildInputs = with final.pkgs; [pkg-config];
+              buildInputs = with final.pkgs; [libsass python3];
+              postInstall = ''
+                LIBSASS_EXT=auto yarn --offline run build
+                rm build/config.gypi
+              '';
+            };
+          };
+
+          buildPhase = ''
+            runHook preBuild
+
+            yarn run build
+
+            runHook postBuild
+          '';
+
+          installPhase = ''
+            runHook preInstall
+
+            mkdir -p "$out/share/food-site"
+            ${final.rsync}/bin/rsync --recursive deps/food/dist/ "$out/share/food-site"
+
+            runHook postInstall
+          '';
+        };
+      };
+      overlays.default = self.overlays.food-site;
+    }
+    // utils.lib.eachSystem (utils.lib.defaultSystems) (system: let
+      pkgs = import nixpkgs {
+        inherit system;
+        overlays = [self.overlays.default];
+      };
+    in {
+      defaultPackage = self.packages."${system}".food-site;
+      packages.food-site = pkgs.food-site;
+
+      devShell = pkgs.mkShell {
+        LIBSASS_EXT = "auto";
+        npm_config_nodedir = "${pkgs.nodejs}";
+
+        nativeBuildInputs = with pkgs; [
+          nodejs
+
+          nodePackages.yarn
+          yarn2nix
+
+          # So we don't need to manually build libsass
+          pkg-config
+          libsass
+          python3
+        ];
+      };
+    });
+}

package.json

@@ -1,25 +1,28 @@
 {
   "name": "food",
-  "version": "latest",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "webpack"
+  },
   "devDependencies": {
-    "css-loader": "^6.7.1",
+    "css-loader": "^6.8.1",
-    "css-minimizer-webpack-plugin": "^4.0.0",
+    "css-minimizer-webpack-plugin": "^5.0.1",
-    "html-webpack-plugin": "^5.5.0",
+    "html-webpack-plugin": "^5.5.3",
-    "mini-css-extract-plugin": "^2.6.1",
+    "mini-css-extract-plugin": "^2.7.6",
-    "node-sass": "^7.0.1",
+    "node-sass": "^9.0.0",
-    "postcss-loader": "^7.0.1",
+    "postcss-loader": "^7.3.3",
-    "sass-loader": "^13.0.2",
+    "sass-loader": "^13.3.2",
-    "style-loader": "^3.3.1",
+    "style-loader": "^3.3.3",
-    "ts-loader": "^9.3.1",
+    "ts-loader": "^9.4.4",
-    "typescript": "^4.7.4",
+    "typescript": "^5.2.2",
-    "webpack": "^5.74.0",
+    "webpack": "^5.88.2",
-    "webpack-cli": "^4.10.0",
+    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.9.3"
+    "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
-    "@fontsource/comic-neue": "^4.5.8",
+    "@fontsource/comic-neue": "^5.0.8",
-    "@fontsource/opendyslexic": "^4.5.4",
+    "@fontsource/opendyslexic": "^5.0.7",
-    "bootstrap": "^5.2.0",
+    "bootstrap": "^5.3.2",
-    "preact": "^10.10.0"
+    "preact": "^10.18.0"
   }
 }

src/theme.scss

@@ -1,5 +1,5 @@
-@import "../node_modules/@fontsource/comic-neue/latin.css";
+@import "@fontsource/comic-neue/latin.css";
-@import "../node_modules/@fontsource/opendyslexic/latin.css";
+@import "@fontsource/opendyslexic/latin.css";
 
 
 $default-fonts: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -9,36 +9,7 @@ $fonts-opendyslexic: "OpenDyslexic", $default-fonts;
 $font-family-sans-serif: $fonts-comic-sans-neue;
 $font-sans-serif: $fonts-comic-sans-neue;
 
-// Configuration
+@import "bootstrap/scss/bootstrap.scss";
-@import "../node_modules/bootstrap/scss/functions";
-@import "../node_modules/bootstrap/scss/variables";
-@import "../node_modules/bootstrap/scss/maps";
-@import "../node_modules/bootstrap/scss/mixins";
-@import "../node_modules/bootstrap/scss/utilities";
-@import "../node_modules/bootstrap/scss/helpers";
-@import "../node_modules/bootstrap/scss/utilities/api";
-
-// Layout & components
-@import "../node_modules/bootstrap/scss/root";
-@import "../node_modules/bootstrap/scss/reboot";
-@import "../node_modules/bootstrap/scss/type";
-//@import "../node_modules/bootstrap/scss/images";
-@import "../node_modules/bootstrap/scss/containers";
-@import "../node_modules/bootstrap/scss/grid";
-@import "../node_modules/bootstrap/scss/list-group";
-@import "../node_modules/bootstrap/scss/tables";
-@import "../node_modules/bootstrap/scss/forms";
-@import "../node_modules/bootstrap/scss/buttons";
-@import "../node_modules/bootstrap/scss/button-group";
-@import "../node_modules/bootstrap/scss/card";
-
-// Helpers
-@import "../node_modules/bootstrap/scss/helpers";
-
-// Utilities
-@import "../node_modules/bootstrap/scss/utilities/api";
-// scss-docs-end import-stack
-
 
 html {
     position: relative;