feat: homepage (#1563)

* feat: githooks, check before push

* feat: homepage

.devcontainer/devcontainer.json

@@ -11,6 +11,7 @@
 		"TACHI_EMAIL_SECURE": "false"
 	},
 	"postAttachCommand": "./dev/bootstrap.sh",
+	"forwardPorts": [3001, 3002],
 	"updateRemoteUserUID": true,
 	"containerUser": "tachi",
 	"customizations": {

.github/workflows/docs.yml

@@ -66,4 +66,4 @@ jobs:
       - name: Deploy docs
         env:
           TACHI_HOST: ${{ secrets.TACHI_HOST }}
-        run: rsync --recursive --compress --delete --progress ./site/. "ci@${TACHI_HOST}:tachi-docs"
+        run: rsync --recursive --compress --delete --progress ./site/. "ci@${TACHI_HOST}:/srv/tachi-docs/"

.github/workflows/homepage.yml

@@ -5,7 +5,7 @@ on:
     branches:
       - "main"
     paths:
-      - "homepage/**"
+      - "typescript/homepage/**"
       - ".github/workflows/homepage.yml"
   workflow_dispatch:
 
@@ -44,4 +44,4 @@ jobs:
       - name: Deploy
         env:
           TACHI_HOST: ${{ secrets.TACHI_HOST }}
-        run: rsync --recursive --compress --delete --progress ./homepage/dist/. "ci@${TACHI_HOST}:tachi"
+        run: rsync --recursive --compress --delete --progress ./typescript/homepage/dist/. "ci@${TACHI_HOST}:/srv/tachi-static/homepage/"

Justfile-apps

@@ -43,3 +43,6 @@ client:
 
 seeds-webui:
 	cd typescript/seeds-webui && bun vite
+
+homepage:
+	cd typescript/homepage && bun vite

bun.lock

@@ -268,6 +268,15 @@
         "typescript": "catalog:",
       },
     },
+    "typescript/homepage": {
+      "name": "tachi-homepage",
+      "version": "0.1.0",
+      "devDependencies": {
+        "eslint-config-tachi": "workspace:*",
+        "prettier": "catalog:",
+        "vite": "catalog:",
+      },
+    },
     "typescript/rg-stats": {
       "name": "rg-stats",
       "version": "1.2.1",
@@ -2726,6 +2735,8 @@
 
     "tachi-github-bot": ["tachi-github-bot@workspace:typescript/github-bot"],
 
+    "tachi-homepage": ["tachi-homepage@workspace:typescript/homepage"],
+
     "tachi-seeds-scripts": ["tachi-seeds-scripts@workspace:typescript/seeds-scripts"],
 
     "tachi-seeds-webui": ["tachi-seeds-webui@workspace:typescript/seeds-webui"],

docker-compose-dev.yml

@@ -138,6 +138,7 @@ services:
       - "8080:8080" # server
       - "3000:3000" # client
       - "3001:3001" # docs
+      - "3002:3002" # homepage
       - "3100:3100" # seeds
       - "9779:9779" # metrics
     volumes:

homepage/build.mjs

@@ -1,47 +0,0 @@
-import { copyFileSync, existsSync, mkdirSync, watch, writeFileSync } from "node:fs";
-import { resolve } from "node:path";
-import sass from "node-sass";
-
-const sourceDirectory = resolve(".", "src");
-const outDirectory = resolve(".", "dist");
-
-const styleSheetInput = resolve(sourceDirectory, "style.scss");
-const htmlInput = resolve(sourceDirectory, "index.html");
-
-const styleSheetOutput = resolve(outDirectory, "style.css");
-const htmlOutput = resolve(outDirectory, "index.html");
-
-const compile = () => {
-	console.time("Compiled site");
-	if (!existsSync(outDirectory)) {
-		mkdirSync(outDirectory);
-	}
-
-	const result = sass.renderSync({
-		file: styleSheetInput,
-	});
-	writeFileSync(styleSheetOutput, result.css);
-
-	copyFileSync(htmlInput, htmlOutput);
-
-	console.timeEnd("Compiled site");
-};
-
-const debounce = 100; // Watch debounce time in MS
-let lastCompileTime = Date.now();
-(() => {
-	if (process.argv.includes("--watch")) {
-		console.info("Enabling Watcher...");
-
-		watch(sourceDirectory, (event, filename) => {
-			if (event === "change" && Date.now() - lastCompileTime > debounce) {
-				console.info(`${filename} ${event}`);
-
-				compile();
-				lastCompileTime = Date.now();
-			}
-		});
-	}
-
-	compile();
-})();

typescript/homepage/.gitignore

@@ -5,6 +5,5 @@
 # Node Specific
 node_modules
 
-# Built file
-dist/index.html
-dist/style.css
+# Vite build output
+dist/

typescript/homepage/package.json

@@ -3,18 +3,17 @@
 	"version": "0.1.0",
 	"description": "",
 	"scripts": {
-		"build": "node build.mjs",
+		"build": "vite build",
+		"typecheck": "tsgo --noEmit",
 		"lint": "eslint .",
-		"lint-fix": "eslint . --fix",
-		"watch": "node build.mjs --watch"
+		"lint-fix": "eslint . --fix"
 	},
 	"keywords": [],
 	"author": "",
 	"license": "ISC",
 	"devDependencies": {
 		"eslint-config-tachi": "workspace:*",
-		"node-sass": "catalog:",
-		"prettier": "catalog:"
+		"vite": "catalog:"
 	},
 	"engines": {
 		"bun": ">=1.2.0"

typescript/homepage/src/style.css

@@ -1,8 +1,8 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
 
 * {
-	// This makes sizing make so much more sense to me
-	// The only downside I see is margins dont "collapse" into each-other
+	/* This makes sizing make so much more sense to me */
+	/* The only downside I see is margins dont "collapse" into each-other */
 	box-sizing: border-box;
 }
 
@@ -10,22 +10,22 @@ h1,
 h2,
 p,
 ul {
-	// Funky behaviour relating to box-sizing: border-box.
-	// Remove margin-top from elements to prevent them from "double spacing" each-other
+	/* Funky behaviour relating to box-sizing: border-box. */
+	/* Remove margin-top from elements to prevent them from "double spacing" each-other */
 	margin-top: unset;
 }
 
 html {
-	// We could do theme switching but ¯\_(ツ)_/¯
-	// We'd need to do an filter: invert() on the main logo png in light mode (or have a black-logo.png)
+	/* We could do theme switching but ¯\_(ツ)_/¯ */
+	/* We'd need to do an filter: invert() on the main logo png in light mode (or have a black-logo.png) */
 	--background-colour: #131313;
 	--body-colour: #f7f7f7;
 	--bokutachi-colour: #527acc;
 	--kamaitachi-colour: #e61c6e;
 
-	// This really only exists to stop me from making uneven spacing
-	// Crazy how consistent spacing makes a site feel 100x more professional
-	// There are smarter ways to do this but this works great for this set size
+	/* This really only exists to stop me from making uneven spacing */
+	/* Crazy how consistent spacing makes a site feel 100x more professional */
+	/* There are smarter ways to do this but this works great for this set size */
 	--curviness: 4px;
 	--sm-padding: calc(var(--curviness) * 2) calc(var(--curviness) * 3);
 	--md-padding: calc(var(--curviness) * 4) calc(var(--curviness) * 6);

typescript/homepage/vite.config.mjs

@@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	build: {
+		emptyOutDir: true,
+		outDir: "../dist",
+	},
+	root: "src",
+	server: {
+		port: 3002,
+	},
+});