New design

.gitignore

@@ -1 +1,2 @@
 /result
+/output/

Makefile

@@ -0,0 +1,86 @@
+out = output
+
+default: all
+
+
+# -- HTML and other static stuff (just copy)
+
+all: \
+  $(out)/index.html \
+  $(out)/jquery.min.js \
+  $(out)/index.js \
+  $(out)/netlify.toml
+
+$(out)/index.html: index.html
+	mkdir -p $(out)
+	cp index.html $(out)/index.html
+
+$(out)/index.js: index.js
+	mkdir -p $(out)
+	cp index.js $(out)/index.js
+
+$(out)/jquery.min.js: jquery.min.js
+	mkdir -p $(out)
+	cp jquery.min.js $(out)/jquery.min.js
+
+$(out)/netlify.toml: netlify.toml
+	mkdir -p $(out)
+	cp netlify.toml $(out)/netlify.toml
+
+
+# -- CSS (convert via less)
+
+STYLES_LESS := $(wildcard styles/*.less) $(wildcard styles/**/*.less)
+STYLES_FONTS := $(wildcard styles/common-styles/fonts/*)
+
+all: \
+	$(out)/styles/fonts/*.ttf \
+	$(out)/index.css
+
+$(out)/styles/fonts/%.ttf: $(STYLES_FONTS)
+	rm -rf $(out)/fonts
+	mkdir -p $(out)/fonts
+	cp styles/common-styles/fonts/*.ttf $(out)/fonts
+
+$(out)/index.css: $(STYLES_LESS)
+	mkdir -p $(out)/
+	lessc \
+		--verbose \
+		--math=always \
+		--source-map=$(out)/index.css.map \
+		styles/index.less $(out)/index.css
+
+# -- Images
+
+all: \
+	$(out)/logo.png \
+	$(out)/favicon.png \
+	$(out)/favicon.ico \
+	$(out)/robots.txt
+
+$(out)/logo.png: images/logo.png
+	mkdir -p $(out)
+	cp images/logo.png $(out)/logo.png
+
+$(out)/favicon.png: images/nixos-logo-only-hires.png
+	mkdir -p $(out)
+	convert \
+		-resize 16x16 \
+		-background none \
+		-gravity center \
+		-extent 16x16 \
+		images/nixos-logo-only-hires.png $(out)/favicon.png
+
+$(out)/favicon.ico: $(out)/favicon.png
+	mkdir -p $(out)
+	convert \
+		-resize x16 \
+		-gravity center \
+		-crop 16x16+0+0 \
+		-flatten -colors 256 \
+		-background transparent \
+		$(out)/favicon.png $(out)/favicon.ico
+
+$(out)/robots.txt: $(HTML)
+	mkdir -p $(out)
+	echo "User-agent: *" > $(out)/robots.txt

flake.nix

@@ -1,38 +1,73 @@
 {
   description = "The status.nixos.org website.";
 
-  inputs.nixpkgs = { url = "nixpkgs/nixos-unstable"; };
+  inputs.nixpkgs.url = "nixpkgs/nixos-unstable";
+  inputs.nixos-common-styles.url = "github:NixOS/nixos-common-styles";
 
   outputs =
     { self
     , nixpkgs 
+    , nixos-common-styles
     }:
     let
       system = "x86_64-linux";
+
       pkgs = import nixpkgs { inherit system; };
 
+      mkPyScript = dependencies: name:
+        let
+          pythonEnv = pkgs.python3.buildEnv.override {
+            extraLibs = dependencies;
+          };
+        in
+          pkgs.writeShellScriptBin name ''exec "${pythonEnv}/bin/python" "${toString ./.}/scripts/${name}.py" "$@"'';
+
+      serve =
+        mkPyScript (with pkgs.python3Packages; [ click livereload ]) "serve";
+
     in rec {
 
       defaultPackage."${system}" = packages."${system}".status-nixos-org;
 
       checks."${system}".build = defaultPackage."${system}";
 
       packages."${system}".status-nixos-org = pkgs.stdenv.mkDerivation {
-        name = "nixos-homepage-${self.lastModifiedDate}";
+        name = "nixos-status-${self.lastModifiedDate}";
 
         src = self;
 
+        preferLocalBuild = true;
         enableParallelBuilding = true;
 
+        buildInputs = with pkgs; [
+          imagemagick
+          nodePackages.less
+          serve
+        ];
+
+        preBuild = ''
+          rm -f styles/common-styles
+          ln -s ${nixos-common-styles.packages."${system}".commonStyles} styles/common-styles
+        '';
+
         installPhase = ''
           mkdir $out
-          cp index.html \
-             status.css \
-             status.js \
-             netlify.toml \
-               $out/
+          cp -R output/* $out/
         '';
-      };
 
+        shellHook = ''
+          rm -f styles/common-styles
+          ln -s ${nixos-common-styles.packages."${system}".commonStyles} styles/common-styles
+          echo ""
+          echo "  To start developing run:"
+          echo "      serve"
+          echo ""
+          echo "  and go to the following URL in your browser:"
+          echo "      https://127.0.0.1:8000/"
+          echo ""
+          echo "  It will rebuild the website on each change."
+          echo ""
+        '';
+      };
   };
 }