Initial commit

_frontend/dist/assets/index.37324337.js

@@ -0,0 +1 @@
+const l=function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))r(e);new MutationObserver(e=>{for(const i of e)if(i.type==="childList")for(const n of i.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&r(n)}).observe(document,{childList:!0,subtree:!0});function s(e){const i={};return e.integrity&&(i.integrity=e.integrity),e.referrerpolicy&&(i.referrerPolicy=e.referrerpolicy),e.crossorigin==="use-credentials"?i.credentials="include":e.crossorigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function r(e){if(e.ep)return;e.ep=!0;const i=s(e);fetch(e.href,i)}};l();async function f(){(await fetch("/api/status")).ok&&console.log("Server online")}f();

_frontend/dist/assets/index.9acd5e50.css

@@ -0,0 +1 @@
+*,*:before,*:after{box-sizing:border-box}body{margin:0;width:100%;min-height:100vh;font-family:Inter,Segoe UI,Helvetica,Arial,sans-serif;font-size:16px}h1{margin:0;font-size:56.32212978px;line-height:1.5}h2{margin:0;font-size:42.347466px;line-height:1.5}h3{margin:0;font-size:31.8402px;line-height:1.5}h4{margin:0;font-size:23.94px;line-height:1.5}h5{margin:0;font-size:18px;line-height:1.5}

_frontend/dist/index.html

@@ -0,0 +1,18 @@
+<!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">
+    <title>Homepage</title>
+
+    
+  <script type="module" crossorigin src="/assets/index.37324337.js"></script>
+  <link rel="stylesheet" href="/assets/index.9acd5e50.css">
+</head>
+<body>
+    <h1>Homepage</h1>
+
+    
+</body>
+</html>

_frontend/index.html

@@ -0,0 +1,15 @@
+<!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">
+    <title>Homepage</title>
+
+    <link rel="stylesheet" href="/styles/main.scss">
+</head>
+<body>
+    <main></main>
+    <script type="module" src="/src/home.jsx"></script>
+</body>
+</html>

_frontend/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "frontend",
+    "version": "1.0.0",
+    "description": "Javascript frontend for this Golang server built using ViteJS",
+    "main": "index.js",
+    "type": "module",
+    "scripts": {
+        "dev": "node server.js",
+        "build": "vite build",
+        "start": "vite preview"
+    },
+    "license": "MIT",
+    "devDependencies": {
+        "@preact/preset-vite": "^2.3.0",
+        "express": "^4.18.1",
+        "fast-glob": "^3.2.11",
+        "mime-types": "^2.1.35",
+        "sass": "^1.53.0",
+        "vite": "^2.9.13"
+    },
+    "dependencies": {
+        "preact": "^10.8.2"
+    }
+}

_frontend/server.js

@@ -0,0 +1,33 @@
+import { dirname, resolve } from 'path'
+import express from 'express'
+import { createServer as createViteServer } from 'vite'
+import { fileURLToPath } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+async function createServer(customHtmlRoutes) {
+    const app = express()
+
+    // In middleware mode, if you want to use Vite's own HTML serving logic
+    // use `'html'` as the `middlewareMode` (ref https://vitejs.dev/config/#server-middlewaremode)
+    const vite = await createViteServer({
+        server: { middlewareMode: 'html' },
+    })
+
+    for (const [route, file] of Object.entries(customHtmlRoutes)) {
+        app.get(route, (req, res) => {
+            const filePath = resolve(__dirname, file)
+            console.log(`Custom Route: %s`, req.url)
+
+            return res.sendFile(filePath)
+        })
+    }
+
+    app.use(vite.middlewares)
+
+    app.listen(3000)
+}
+
+createServer({
+    '/': './index.html',
+})

_frontend/src/home.jsx

@@ -0,0 +1,9 @@
+import { render } from 'preact'
+
+const App = () => (
+    <>
+        <h1>Homepage</h1>
+    </>
+)
+
+render(<App />, document.querySelector('main'))

_frontend/styles/main.scss

@@ -0,0 +1,43 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+
+    width: 100%;
+    min-height: 100vh;
+
+    font-family: 'Inter', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
+    font-size: 16px;
+}
+
+// Headings
+
+$base-font-size: 18px;
+$heading-scale: 1.33;
+
+@function pow($number, $exponent) {
+    $value: 1;
+
+    @if $exponent > 0 {
+        @for $i from 1 through $exponent {
+            $value: $value * $number;
+        }
+    }
+
+    @return $value;
+}
+
+@for $i from 1 through 5 {
+    h#{$i} {
+        margin: 0;
+
+        $factor: pow($heading-scale, 5 - $i);
+        font-size: $base-font-size * $factor;
+
+        line-height: 1.5;
+    }
+}

_frontend/vite.config.js

@@ -0,0 +1,18 @@
+import glob from 'fast-glob'
+import { defineConfig } from 'vite'
+
+import preact from '@preact/preset-vite'
+
+export default defineConfig({
+    build: {
+        rollupOptions: {
+            input: glob.sync('*.html'),
+        },
+    },
+    server: {
+        proxy: {
+            '/api': 'http://127.0.0.1:4000/',
+        },
+    },
+    plugins: [preact()],
+})