build css ahead of time

kitsune-soc · Nov 26, 2024 · 5589cfd · 5589cfd
1 parent 82fa9c1
commit 5589cfd
Show file tree

Hide file tree

Showing 13 changed files with 137 additions and 76 deletions.
diff --git a/kitsune-fe/tailwind.config.ts b/kitsune-fe/tailwind.config.ts
@@ -1,5 +1,6 @@
 import forms from '@tailwindcss/forms';
 import typography from '@tailwindcss/typography';
+import { extendTheme } from '../kitsune/theme';
 
 import type { Config } from 'tailwindcss';
 
@@ -8,21 +9,7 @@ export default {
 
 	theme: {
 		extend: {
-			colors: {
-				dark: {
-					'1': '#1c1626',
-					'2': '#2b233a',
-					'3': '#042f40'
-				},
-				shade1: {
-					dark: '#ff9e55',
-					light: '#afd7fa'
-				},
-				shade2: {
-					dark: '#935d7e',
-					light: '#d68fbc'
-				}
-			}
+			...extendTheme
 		}
 	},
 

diff --git a/kitsune/assets/app.css b/kitsune/assets/app.css
diff --git a/kitsune/package.json b/kitsune/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "kitsune",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "tailwindcss -i styles/app.css -o assets/app.css --minify",
+    "dev": "tailwindcss -i styles/tailwind.css -o assets/app.css --watch",
+    "fmt": "prettier --write --ignore-unknown --cache ."
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "prettier": "^3.4.1",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "tailwindcss": "^3.4.15"
+  }
+}
diff --git a/kitsune/styles/app.css b/kitsune/styles/app.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/kitsune/tailwind.config.ts b/kitsune/tailwind.config.ts
@@ -0,0 +1,17 @@
+import forms from "@tailwindcss/forms";
+import typography from "@tailwindcss/typography";
+import { extendTheme } from "./theme";
+
+import type { Config } from "tailwindcss";
+
+export default {
+  content: ["./templates/**/*.{html,js,ts}"],
+
+  theme: {
+    extend: {
+      ...extendTheme,
+    },
+  },
+
+  plugins: [typography, forms],
+} as Config;
diff --git a/kitsune/templates/base.html b/kitsune/templates/base.html
@@ -1,24 +1,17 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/public/app.css" />
 
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/public/template.css">
+    {% block head %} {% endblock %}
 
-    {% block head %}
-    {% endblock %}
+    <title>{% block title %} {% endblock %}</title>
+  </head>
 
-    <title>
-        {% block title %}
-        {% endblock %}
-    </title>
-</head>
-
-<body>
-    {% block body %}
-    {% endblock %}
-</body>
-
-</html>
+  <body>
+    {% block body %} {% endblock %}
+  </body>
+</html>
diff --git a/kitsune/templates/fallback-fallback.html b/kitsune/templates/fallback-fallback.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>Welcome to Kitsune!</title>

diff --git a/kitsune/templates/oauth/login.html b/kitsune/templates/oauth/login.html
@@ -1,25 +1,30 @@
-{% extends "../base.html" %}
+{% extends "../base.html" %} {% block title %}OAuth Login{% endblock %} {% block
+body %}
+<p class="header">Kitsune</p>
 
-{% block title %}
-  OAuth Login
-{% endblock %}
-
-{% block body %}
-  <p class="header">Kitsune</p>
+{% for (_level, msg) in flash_messages %}
+<div class="message">{{ msg }}</div>
+{% endfor %}
 
-  {% for (_level, msg) in flash_messages %}
-    <div class="message">
-      {{ msg }}
-    </div>
-  {% endfor %}
-
-  <form method="post">
-    <div>
-      <label class="label" for="username">Username</label><br />
-      <input class="field" type="text" id="username" name="username" value="" /><br />
-      <label class="label" for="password">Password</label><br />
-      <input class="field" type="password" id="password" name="password" value="" /><br /><br />
-    </div>
-    <input class="formButton" type="submit" value="Submit" />
-  </form>
-{% endblock %}
+<form method="post">
+  <div>
+    <label class="label" for="username">Username</label><br />
+    <input
+      class="field"
+      type="text"
+      id="username"
+      name="username"
+      value=""
+    /><br />
+    <label class="label" for="password">Password</label><br />
+    <input
+      class="field"
+      type="password"
+      id="password"
+      name="password"
+      value=""
+    /><br /><br />
+  </div>
+  <input class="formButton" type="submit" value="Submit" />
+</form>
+{% endblock %}
diff --git a/kitsune/templates/oauth/token.html b/kitsune/templates/oauth/token.html
@@ -1,16 +1,9 @@
-{% extends "../base.html" %}
+{% extends "../base.html" %} {% block title %} OAuth Token {% endblock %} {%
+block body %}
+<p class="header">{{domain}}</p>
 
-{% block title %}
-    OAuth Token
+<div class="tokenContainer">
+  <p>Copy & Paste this token into <span class="appName">{{app_name}}</span></p>
+  <code class="token">{{token}}</code>
+</div>
 {% endblock %}
-
-{% block body %}
-    <p class="header">
-        {{domain}}
-    </p>
-
-    <div class="tokenContainer">
-        <p>Copy & Paste this token into <span class="appName">{{app_name}}</span></p>
-        <code class="token">{{token}}</code>
-    </div>
-{% endblock %}
diff --git a/kitsune/theme.ts b/kitsune/theme.ts
@@ -0,0 +1,19 @@
+const extendTheme = {
+  colors: {
+    dark: {
+      "1": "#1c1626",
+      "2": "#2b233a",
+      "3": "#042f40",
+    },
+    shade1: {
+      dark: "#ff9e55",
+      light: "#afd7fa",
+    },
+    shade2: {
+      dark: "#935d7e",
+      light: "#d68fbc",
+    },
+  },
+};
+
+export { extendTheme };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -1,3 +1,4 @@
 packages:
+  - kitsune/
   - kitsune-fe/
   - website/
diff --git a/website/package.json b/website/package.json
@@ -8,7 +8,7 @@
     "build": "astro check && astro build",
     "preview": "astro preview",
     "astro": "astro",
-    "format": "prettier -w . --cache"
+    "fmt": "prettier -w . --cache"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
@@ -23,4 +23,4 @@
     "prettier-plugin-astro": "^0.14.1",
     "sass": "^1.81.0"
   }
-}
+}