Initial commit

.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "daily"

.github/workflows/publish.yml

@@ -0,0 +1,40 @@
+name: Release Image
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  push-image:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 'Checkout GitHub Action'
+        uses: actions/checkout@main
+
+      - name: 'Login to Registry'
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: 'Extract metadata (tags, labels) for Docker'
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          context: git
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=semver,pattern={{version}}
+            type=semver,pattern=v{{major}}
+      - name: 'Build and push Docker image'
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.gitignore

@@ -0,0 +1,7 @@
+.parcel-cache
+.idea
+.DS_Store
+*.iml
+dist
+node_modules
+*~lock~

Dockerfile

@@ -0,0 +1,30 @@
+# Use an official Node.js runtime as the base image
+FROM node:20 as build
+LABEL org.opencontainers.image.source="https://github.com/Capy-IT/WebTemplate"
+
+# Set the working directory in the container
+WORKDIR /usr/src/app
+
+# Copy package.json and package-lock.json to the container
+COPY package.json ./
+COPY yarn.lock ./
+
+# Install app dependencies
+RUN yarn install
+
+# Copy the rest of the application files to the container
+COPY assets/ ./assets
+COPY src/ ./src
+
+RUN yarn build
+
+
+FROM alpine as run
+
+RUN apk update \
+    && apk add lighttpd \
+    && rm -rf /var/cache/apk/*
+
+COPY --from=build /usr/src/app/dist /var/www/localhost/htdocs
+
+CMD ["lighttpd","-D","-f","/etc/lighttpd/lighttpd.conf"]

README.md

@@ -0,0 +1,2 @@
+# WebTemplate
+

assets/css/components/navbar.module.css

@@ -0,0 +1,24 @@
+.navbar {
+    display: flex;
+    align-items: center;
+    background-color: #77c6fa;
+    box-shadow: 0 0 20px 4px rgb(0, 0, 0);
+    margin-bottom: 2em;
+    padding-left: 0.5em;
+    justify-content: space-between;
+    height: 8vh;
+}
+
+.navbar .title {
+    font-size: 200%;
+    color: rgb(255, 255, 255);
+}
+
+.navbar .logo {
+    max-height: 6vh;
+}
+
+
+.navbar .logo2 {
+    max-height: 8vh;
+}

assets/css/main.css

@@ -0,0 +1,17 @@
+html {
+    font-family: "REM", sans-serif;
+    background-color: #313131ff;
+}
+
+:root{
+}
+
+/* latin */
+@font-face {
+    font-family: 'REM';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(../fonts/REM.ttf);
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

assets/css/pages/home.module.css

@@ -0,0 +1,22 @@
+.page{
+
+}
+
+.view {
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+    font-size: 4em;
+    margin: 1em 1em 20px;
+}
+
+.view:active {
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
+}
+
+.views {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}

assets/css/pages/login.module.css

@@ -0,0 +1,14 @@
+.loginForm {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    align-items: center;
+    color: white;
+}
+
+.page{
+}
+
+.loginForm form{
+    display: contents;
+}

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "webtemplate",
+  "version": "0.0.1",
+  "license": "",
+  "dependencies": {
+    "@types/mithril": "^2.0.2",
+    "@types/node": "^20.4.8",
+    "brotli": "^1.3.3",
+    "hyperscript-helpers": "^3.0.3",
+    "mithril": "^2.2.2",
+    "normalize.css": "~8.0.1",
+    "typescript": "~5.3.3"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "parcel src/index.html --lazy",
+    "build": "parcel build src/index.html"
+  },
+  "browser": {
+    "fs": false
+  },
+  "devDependencies": {
+    "parcel": "^2.11.0",
+    "prettier": "^3.2.4",
+    "typescript-plugin-css-modules": "^5.0.2"
+  }
+}

src/API/wrapper.ts

@@ -0,0 +1,30 @@
+import * as m from "mithril";
+
+const handlers = {
+    500: (err: any) => console.error(err.code, err.response)
+}
+
+const request = (method: string) => (url: string, options?: any) =>
+    m.request({
+        method,
+        url: window.location.origin + "/api" + url,
+        withCredentials: true,
+        config: (xhr) => {
+            xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+        },
+        extract: function (xhr) {
+            return {status: xhr.status, body: xhr.responseText};
+        },
+        ...options
+    })
+        .catch(err => {
+            if (err.code in handlers) handlers[err.code](err)
+            else throw err
+        })
+
+export default {
+    get: request('GET'),
+    put: request('PUT'),
+    post: request('POST'),
+    delete: request('DELETE')
+}

src/auth/authHandler.ts

@@ -0,0 +1,15 @@
+import api from "../API/wrapper";
+import * as m from "mithril";
+
+export async function processLogin(e: Event) {
+    e.preventDefault();
+    const result = await api.post("/login", {
+        body: {
+            username: e.target[0].value,
+            password: e.target[1].value,
+        }
+    })
+    if (result['body'] == "logged_in") {
+        m.route.set("/");
+    }
+}

src/auth/authState.ts

@@ -0,0 +1,39 @@
+import api from "../API/wrapper";
+import * as m from "mithril";
+
+enum Scope {
+    None = 0,
+    READ = 1 << 1,
+    EDIT = 1 << 2,
+    ADMIN= (1 << 3),
+    SUPERUSER = (1 << 3) -1
+}
+
+const AuthState = {
+    authenticated: false,
+    scope: 0,
+    async check() {
+        const result = await api.get("/checklogin")
+        if (result == null || result['body'] != "logged_in") {
+            m.route.set("/login");
+            this.authenticated = false
+        }else{
+            this.authenticated = true
+        }
+        return this.authenticated
+    },
+    canRead() {
+        return (this.scope & Scope.READ) === Scope.READ
+    },
+    canEdit() {
+        return (this.scope & Scope.EDIT) === Scope.EDIT
+    },
+    canAdmin() {
+        return (this.scope & Scope.ADMIN) === Scope.ADMIN
+    },
+    isSuperUser() {
+        return (this.scope & Scope.SUPERUSER) === Scope.SUPERUSER
+    }
+}
+
+export default AuthState

src/components/Navbar.ts

@@ -0,0 +1,16 @@
+import * as m from "mithril";
+import css from "/assets/css/components/navbar.module.css";
+
+const {div, a, img} = require("hyperscript-helpers")(m);
+
+
+const Navbar: m.Component = {
+    view() {
+        return div("." + css.navbar, [
+            a({href: "#!/"}, /**img("." + css.logo, {src: require('/assets/img/icon.png')})*/),
+            /**img("." + css.logo2, {src: require('/assets/img/...')}),*/
+        ]);
+    },
+};
+
+export default Navbar;

src/components/PageTemplate.ts

@@ -0,0 +1,29 @@
+import * as m from "mithril";
+import AuthState from "../auth/authState";
+import Navbar from "./Navbar";
+
+const {div} = require("hyperscript-helpers")(m);
+
+interface  Attrs {
+    login: boolean
+    css?: string
+}
+
+const PageTemplate: m.Component<Attrs> = {
+    async oninit(vnode: m.Vnode<Attrs>) {
+        if (vnode.attrs.login == true) {
+            await AuthState.check()
+        }
+    },
+    view(vnode: m.Vnode<Attrs>) {
+        if (vnode.attrs.login == true) {
+            return !AuthState.authenticated
+                ? null
+                : div('.'+(vnode.attrs.css ?? ""), [m(Navbar), vnode.children])
+        } else {
+            return div('.'+(vnode.attrs.css ?? ""), [m(Navbar), vnode.children])
+        }
+    }
+}
+
+export default PageTemplate;

src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+    <link href="./favicon.ico" rel="icon"/>
+    <title>Template</title>
+</head>
+<body>
+<div id="content"></div>
+<script src="./main.ts" type="module"></script>
+</body>
+</html>

src/main.ts

@@ -0,0 +1,12 @@
+import * as m from "mithril";
+import HomeView from "./pages/Home";
+import LoginView from "./pages/Login"
+import "../assets/css/main.css";
+
+require("normalize.css");
+
+const el = document.getElementById("content");
+m.route(el, "/home", {
+    "/home": HomeView,
+    "/login": LoginView,
+});

src/pages/Home.ts

@@ -0,0 +1,15 @@
+import * as m from "mithril";
+import PageTemplate from "../components/PageTemplate";
+import style from "/assets/css/pages/home.module.css";
+
+const {div} = require("hyperscript-helpers")(m);
+
+const page: m.Component = {
+    view() {
+        return m(PageTemplate, {css: style.page, login: true}, [
+            div("." + style.views, [
+            ]),
+        ]);
+    }
+};
+export default page;