feat: replace xeiaso custom font with 0xProto

drawbu · Sep 3, 2024 · 624b609 · 624b609
1 parent 0f9402d
commit 624b609
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 20 deletions.
diff --git a/flake.nix b/flake.nix
@@ -11,6 +11,31 @@
       let
         pkgs = import inputs.nixpkgs { inherit system; };
 
+        mkWOFF2From =
+          name: pkg: ext:
+          pkgs.stdenvNoCC.mkDerivation {
+            name = "${name}-woff2";
+            nativeBuildInputs = [
+              pkgs.fontforge
+              pkg
+            ];
+            dontInstall = true;
+            unpackPhase = ''
+              WOFF2_DIR="$out/share/fonts/woff2/"
+              mkdir -p "$WOFF2_DIR"
+              for file in ${pkg}/share/fonts/truetype/*.${ext}; do
+              	NAME="$(basename $file .${ext})"
+              	fontforge --lang=ff \
+              		-c 'Open($1); Generate($2);' \
+              		"$file" \
+              		"$WOFF2_DIR/$NAME.woff2" &
+              done
+              wait
+            '';
+          };
+
+        iosevka-comfy-woff2 = mkWOFF2From "iosevka-comfy-fixed" pkgs.iosevka-comfy.comfy-fixed "ttf";
+
         rundev = pkgs.writeShellApplication {
           name = "rundev";
           runtimeInputs = [
@@ -19,15 +44,16 @@
             (pkgs.writeShellApplication {
               name = "buildapp";
               text = ''
-                tailwindcss -i static/style.css -o static/generated.css && \
-                templ generate                                          && \
-                go build                                                && \
-                ./app
+                function buildapp() {
+                  ${self.defaultPackage.${system}.preBuild}
+                  go build
+                }
+                buildapp && ./app
               '';
             })
           ];
           text = ''
-            if [ -z "$1" ]; then
+            if [ $# -eq 0 ]; then
               buildapp
             elif [ "$1" = "--watch" ]; then
               fd | entr -c -r buildapp
@@ -58,6 +84,8 @@
               makeWrapper
             ];
             preBuild = ''
+              install -D ${iosevka-comfy-woff2}/share/fonts/woff2/iosevka-comfy-fixed-regular.woff2 static/
+              install -D ${iosevka-comfy-woff2}/share/fonts/woff2/iosevka-comfy-fixed-bold.woff2    static/
               templ generate
               tailwindcss -i static/style.css -o static/generated.css
             '';

diff --git a/pkg/app/template.templ b/pkg/app/template.templ
@@ -18,7 +18,6 @@ templ (app *Server) Template(body templ.Component) {
 		<head>
 			<title>drawbu</title>
 			<script src="https://unpkg.com/htmx.org@1.9.12"></script>
-			<link rel="stylesheet" href="https://cdn.xeiaso.net/static/pkg/iosevka/family.css"/>
 			<link rel="stylesheet" href="/generated.css"/>
 			<meta name="viewport" content="width=device-width"/>
 			<meta

diff --git a/static/.gitignore b/static/.gitignore
@@ -1 +1,3 @@
+*.woff2
+*.ttf
 generated.css
diff --git a/static/embed.go b/static/embed.go
@@ -3,5 +3,5 @@ package static
 import "embed"
 
 // content holds our static articles
-//go:embed robots.txt generated.css
+//go:embed robots.txt generated.css iosevka-comfy-fixed-bold.woff2 iosevka-comfy-fixed-regular.woff2
 var Files embed.FS
diff --git a/static/style.css b/static/style.css
@@ -2,38 +2,52 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+    font-family: "Iosevka Comfy";
+    font-style: normal;
+    font-weight: 400;
+    src: url("/iosevka-comfy-fixed-regular.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Iosevka Comfy";
+    font-style: normal;
+    font-weight: 700;
+    src: url("/iosevka-comfy-fixed-bold.woff2") format("woff2");
+}
+
 html {
     @apply text-lg
 }
 
 a {
-    @apply text-blue-500 underline;
+    @apply text-blue-500 underline
 }
 
 h1 {
-    @apply text-3xl;
+    @apply text-3xl font-bold
 }
 
 h2 {
-    @apply text-2xl;
+    @apply text-2xl
 }
 
 h3, h4, h5, h6 {
-    @apply text-xl;
+    @apply text-xl
 }
 
 ul {
-    @apply list-inside lg:list-outside;
+    @apply list-inside lg:list-outside
 }
 
 #article pre {
-    @apply p-4 text-sm border-solid border-2 border-black rounded bg-scroll overflow-scroll;
+    @apply p-4 text-sm border-solid border-2 border-black rounded bg-scroll overflow-scroll
 }
 
 #article p > code {
-    @apply bg-gray-200 px-1;
+    @apply bg-gray-200 px-1
 }
 
 #article blockquote > p {
-    @apply ml-4 flex flex-col text-gray-500;
+    @apply ml-4 flex flex-col text-gray-500
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -4,11 +4,11 @@ module.exports = {
   theme: {
     extend: {},
     fontFamily: {
-      body: ['Iosevka Aile Iaso', 'sans-serif'],
-      display: ['Iosevka Aile Iaso', 'sans-serif'],
-      mono: ['Iosevka Aile Iaso', 'sans-serif'],
-      sans: ['Iosevka Aile Iaso', 'sans-serif'],
-      serif: ['Iosevka Aile Iaso', 'sans-serif'],
+      body: ['Iosevka Comfy', 'sans-serif'],
+      display: ['Iosevka Comfy', 'sans-serif'],
+      mono: ['Iosevka Comfy', 'sans-serif'],
+      sans: ['Iosevka Comfy', 'sans-serif'],
+      serif: ['Iosevka Comfy', 'sans-serif'],
     },
 
   },