feat: rewrite to mastercss (#9)

* wip: cleanup code and start the mastercss rewrite

remove a bunch of old files and switch the home page to mastercss. Other pages will be converted soon:tm:

* wip: second iteration of mastercss rewrite

* wip: clean up a lot of things and adjust sizing of some elements

* feat: new blog post + refactor i18n AGAIN

* fix: fix some code linting and other issues

* chore: force updated deps

* chore: update more deps

* fix: fix mastercss issues

* fix: fix various issues and update deps

* fix: optimise icons and fix butter chicken css

* test: disable mastercss and see webperf results

* fix: reenable mastercss and fix some image opt

* styling: adjust some responsive styling

* styling: move font loading directly to root layout

* styling: move fonts back into a css file

* styling: fix styling on the wobbler post

* styling: fix various styling issues and use more semantic html

* chore: remove languagePicker.svelte

* feat: light mode

* chore: update deps

.envrc

@@ -1 +1 @@
-use flake
+use flake . --impure

eslint.config.js

@@ -1,7 +1,7 @@
 import js from '@eslint/js';
+import masterCssPlugin from '@master/eslint-plugin-css'
 import typescriptPlugin from '@typescript-eslint/eslint-plugin';
 import typescriptParser from '@typescript-eslint/parser';
-import unocssPlugin from '@unocss/eslint-plugin';
 import prettier from 'eslint-config-prettier';
 import perfectionistNatural from 'eslint-plugin-perfectionist/configs/recommended-natural';
 import prettierPlugin from 'eslint-plugin-prettier';
@@ -10,7 +10,7 @@ import svelteParser from 'svelte-eslint-parser';
 
 /** @type {import("eslint").Linter.RulesRecord} */
 const defaultRules = {
-	...typescriptPlugin.configs.recommended.rules,
+	...typescriptPlugin.configs.recommended?.rules,
 	'arrow-body-style': 'off',
 	'no-undef': 'off',
 	'prefer-arrow-callback': 'off'
@@ -25,10 +25,9 @@ export default [
 	},
 	js.configs.recommended,
 	{
-		plugins: {
-			'@unocss': unocssPlugin
-		},
-		rules: unocssPlugin.configs.recommended.rules
+		files: ['**/*.ts', '**/*.svelte'],
+		plugins: masterCssPlugin.configs.flat.plugins,
+		rules: masterCssPlugin.configs.flat.rules
 	},
 	{
 		files: ['**/*.js', '**/*.cjs']

flake.nix

@@ -1,39 +1,37 @@
 {
   inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
-  inputs.napalm.url = "github:nix-community/napalm";
   inputs.flake-utils.url = "github:numtide/flake-utils";
-  inputs.treefmt-nix.url = "github:numtide/treefmt-nix";
-  inputs.napalm.inputs.nixpkgs.follows = "nixpkgs";
 
   outputs = {
     self,
     nixpkgs,
-    napalm,
     flake-utils,
-    treefmt-nix,
   }:
     flake-utils.lib.eachDefaultSystem (system: let
       pkgs = nixpkgs.legacyPackages.${system};
-      treefmtEval = treefmt-nix.lib.evalModule pkgs ./treefmt.nix;
     in {
-      formatter = treefmtEval.config.build.wrapper;
-
-      packages = rec {
-        website = napalm.legacyPackages."${system}".buildPackage ./. {};
-        default = website;
-      };
-
-      apps = rec {
-        website = flake-utils.lib.mkApp {drv = self.packages.${system}.website;};
-        default = website;
-      };
-
-      checks = {
-        formatting = treefmtEval.config.build.check self;
-      };
-
-      devShells.default = pkgs.mkShell {
-        nativeBuildInputs = with pkgs; [nil nodejs alejandra nodePackages.svelte-language-server nodePackages.typescript-language-server marksman];
+      devShells.default = pkgs.mkShell rec {
+        LD_LIBRARY_PATH = "${pkgs.stdenv.cc.cc.lib}/lib";
+        nativeBuildInputs = with pkgs; [
+          nil
+          nodejs
+          alejandra
+          (nodePackages.svelte-language-server.overrideAttrs (old: let
+            runtimeLibs = lib.makeLibraryPath [
+              stdenv.cc.cc.lib
+            ];
+          in {
+              nativeBuildInputs = [
+                autoPatchelfHook
+                makeWrapper
+              ];
+              buildInptus = runtimeLibs;
+              preFixup = ''
+                wrapProgram "$out/bin/svelteserver" --prefix LD_LIBRARY_PATH : ${runtimeLibs}
+              '';
+            }
+          ))
+          nodePackages.typescript-language-server marksman pkgs.stdenv.cc.cc.lib];
       };
     });
 }

master.css.ts

@@ -0,0 +1,84 @@
+import type { Config } from '@master/css';
+
+export default {
+	animations: {},
+	functions: {},
+	modes: {
+		dark: 'media',
+		light: 'media'
+	},
+	queries: {},
+	rules: {},
+	selectors: {},
+	styles: {},
+	variables: {
+		// surfaces
+		base: {
+			'@light': 'oklch(90% 0.03 284)',
+			'@dark': 'oklch(13% 0.03 284)'
+		},
+		surface: {
+			'@light': 'oklch(85% 0.05 284)',
+			'@dark': 'oklch(15% 0.05 284)'
+		},
+		overlay: {
+			'@light': 'oklch(95% 0.05 284)',
+			'@dark': 'oklch(20% 0.05 284)'
+		},
+		// accents
+		blue: { 
+			'@light': 'oklch(77% 0.2 240)',
+			'@dark': 'oklch(77% 0.2 240)' 
+		},
+		green: { 
+			'@light': 'oklch(0.77 0.2 152)',
+			'@dark': 'oklch(0.77 0.2 152)'
+	  },
+		mauve: { 
+			'@light': 'oklch(0.77 0.2 284)',
+			'@dark': 'oklch(0.77 0.2 284)'
+		},
+		orange: {
+			'@light': 'oklch(0.77 0.2 83)',
+			'@dark': 'oklch(0.77 0.2 83)'
+		},
+		primary: {
+			'@light': 'oklch(65% 0.2 284)',
+			'@dark': 'oklch(35% 0.2 284)'
+		},
+		red: { 
+			'@light': 'oklch(0.62 0.2 27)',
+			'@dark': 'oklch(0.62 0.2 27)'
+		},
+		secondary: { 
+			'@light': 'oklch(60% 0.2 240)',
+			'@dark': 'oklch(77% 0.2 240)'
+		},
+		subtle: { 
+			'@light': 'oklch(0.3 0.04 284)',
+			'@dark': 'oklch(0.3 0.04 284)'
+		},
+		teal: {
+			'@light': 'oklch(0.77 0.2 190)',
+			'@dark': 'oklch(0.77 0.2 190)'
+		},
+		text: {
+			base: {
+				'@light': 'oklch(20% 0.03 284)',
+				'@dark': 'oklch(88% 0.03 284)'
+			},
+			surface: {
+				'@light': 'oklch(18% 0.05 284)',
+				'@dark': 'oklch(90% 0.05 284)'
+			},
+			overlay: {
+				'@light': 'oklch(15% 0.07 284)',
+				'@dark': 'oklch(94% 0.07 284)'
+			},
+			primary: {
+				'@light': 'oklch(55% 0.3 284)',
+				'@dark': 'oklch(77% 0.2 284)'
+			},
+		}
+	}
+} satisfies Config;

mdsvex.config.js

@@ -4,9 +4,9 @@ import rehypeSlug from 'rehype-slug';
 import remarkAbbr from 'remark-abbr';
 import remarkGithub from 'remark-github';
 import remarkCallouts from "@portaljs/remark-callouts";
-import { codeToHtml } from 'shikiji';
+import { codeToHtml } from 'shiki';
 
-import mochaTheme from './mocha.json' assert { type: 'json' };
+import syntaxDark from './syntax-dark.json' assert { type: 'json' };
 
 /**
  * @param {string} code
@@ -20,14 +20,16 @@ async function highlighter(code, lang = '') {
 	 */
 	const escape_svelty = (str) =>
 		str
-			.replace(/[{}`]/g, (c) => ({ '`': '`', '{': '{', '}': '}' })[c])
-			.replace(/\\([trn])/g, '\$1');
+			.replace(/{/g, '{')
+			.replace(/}/g, '}')
+			.replace(/`/g, '`')
+			.replace(/\\([trn])/g, ' ')
 
 	const html = await codeToHtml(code, {
 		lang,
 		themes: {
-			dark: mochaTheme,
-      light: 'github-light'
+			dark: syntaxDark,
+			light: 'github-light'
 		}
 	});