some ci fixes

.drone.yml

@@ -1,15 +0,0 @@
-
-kind: pipeline
-type: docker
-
-steps:
-  - name: Build frontend dockerfile
-    image: docker
-    commands:
-      - docker build -t web-frontend -f frontend/Dockerfile frontend
-
-  - name: Build backend dockerfile
-    image: docker
-    commands:
-      - docker build -t web-backend -f backend/Dockerfile backend
-

.gitea/workflows/build.yaml

@@ -0,0 +1,34 @@
+on:
+  pull_request:
+    branches:
+      - main
+
+name: Build and docker image
+
+jobs:
+  build:
+    name: Build
+    runs-on: k8s
+    steps:
+
+    - name: Install prerequisites
+      run: |
+        sudo apt-get update
+        sudo apt-get install -y xz-utils unzip
+
+    - uses: https://gitea.com/actions/checkout@v4
+
+    - name: Docker login
+      uses: docker/login-action@v3
+      with:
+        registry: docker.io
+        username: ${{ secrets.docker_username }}
+        password: ${{ secrets.docker_password }}
+
+
+    - name: Build
+      uses: https://github.com/docker/build-push-action@v2
+      with:
+        context: frontend
+        tags: ${{ secrets.docker_registry }}/frontend:latest
+        push: true

frontend/Dockerfile

@@ -1,35 +1,22 @@
 FROM docker.io/oven/bun as base
-WORKDIR /usr/src/app
 
 # install dependencies into temp directory
 FROM base AS install
-RUN mkdir -p /temp/dev
-COPY package.json bun.lockb /temp/dev/
-RUN cd /temp/dev && bun install --frozen-lockfile
-
-# install with --production (exclude devDependencies)
-RUN mkdir -p /temp/prod
-COPY package.json bun.lockb /temp/prod/
-RUN cd /temp/prod && bun install --frozen-lockfile --production
-
-# copy node_modules from temp directory
-# then copy all (non-ignored) project files into the image
-FROM base AS prerelease
-COPY --from=install /temp/dev/node_modules node_modules
-COPY . .
-
-# [optional] tests & build
-ENV NODE_ENV=production
-RUN bun test
-RUN bun run build
+WORKDIR /modules
+COPY package.json bun.lockb ./
+COPY src ./src
+RUN bun install --frozen-lockfile --production
+RUN bun run tailwind:build
 
 # copy production dependencies and source code into final image
 FROM base AS release
-COPY --from=install /temp/prod/node_modules node_modules
-COPY --from=prerelease /usr/src/app/index.ts .
-COPY --from=prerelease /usr/src/app/package.json .
+WORKDIR /app
+
+COPY --from=install /modules/node_modules ./node_modules
+COPY --from=install /modules/public ./public
+COPY  src ./src
 
 # run the app
 USER bun
 EXPOSE 3000/tcp
-ENTRYPOINT [ "bun", "run", "index.ts" ]
+ENTRYPOINT [ "bun", "run", "src/index.tsx" ]

frontend/package.json

@@ -4,9 +4,9 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "bun run tailwind:dev | bun run elxsia:dev",
-    "elxsia:dev": "bun --watch src/index.ts",
+    "elxsia:dev": "bun --watch src/index.tsx",
     "build": "bun run tailwind:build",
-    "start": "bun run src/index.ts",
+    "start": "bun run src/index.tsx",
     "tailwind:build": "bunx tailwindcss -i ./src/style.css -o ./public/style.css --minify",
     "tailwind:dev": "bunx tailwindcss -i ./src/style.css -o ./public/style.css --watch"
   },
@@ -17,7 +17,8 @@
   },
   "devDependencies": {
     "bun-types": "latest",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "typed-html": "^3.0.1"
   },
   "module": "src/index.js"
 }

frontend/public/style.css

@@ -543,3 +543,64 @@ video {
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
+
+.flex {
+  display: flex;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.w-screen {
+  width: 100vw;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.hover\:bg-blue-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+}

frontend/src/index.tsx

@@ -1,28 +1,32 @@
 import { Elysia } from "elysia";
 import { html } from "@elysiajs/html";
 import { staticPlugin } from "@elysiajs/static";
+
 // import { autoroutes } from "elysia-autoroutes";
 // import { Store } from "./store";
 // // @ts-ignore
 // import data from "../package.json";
 
+import { HomeLayout } from "./layout";
+import { Landing } from "./landing";
+
 export const server = new Elysia()
   .use(html())
   .use(staticPlugin())
-  .get("/public/htmx.js", () =>
-    Bun.file("node_modules/htmx.org/dist/htmx.min.js"),
-  )
+  // .get("/public/htmx.js", () =>
+  //   Bun.file("node_modules/htmx.org/dist/htmx.min.js"),
+  // )
   // .state("store", new Store())
   // .state("version", data.version)
   .onError(({ code, error }) => {
     console.error(code, error);
   })
-  .get("/", () => "Hello World")
+  .get("/", ({html}) => html(<HomeLayout><Landing></Landing></HomeLayout>))
+  .post("/clicked", ()=> <div>Hello?</div>)
 
   .listen(Bun.env["PORT"] ?? 3000);
 
 
-
 console.log(
   `app is running at ${server.server?.hostname}:${server.server?.port}`,
 );

frontend/src/landing.tsx

@@ -0,0 +1,10 @@
+import * as elements from "typed-html";
+
+const Landing = ({ children }: elements.Children) => `
+    <button hx-post="/clicked" hx-swap="outerHTML" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+        Click me
+    </button>
+    ${children}
+`;
+
+export { Landing }

frontend/src/layout.tsx

@@ -0,0 +1,15 @@
+import * as elements from "typed-html";
+
+const HomeLayout = ({ children }: elements.Children) => `
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <script src="https://unpkg.com/htmx.org@1.9.5"></script>
+        <link href="/public/style.css" rel="stylesheet" type="text/css" />
+        <title>BETH STACK</title>
+    </head>
+    <body class="h-screen w-screen flex flex-col gap-3 items-center justify-center">
+        ${children}
+    </body>
+`;
+
+export { HomeLayout }

frontend/tailwind.config.ts

@@ -1,7 +1,7 @@
 import type { Config } from 'tailwindcss'
 
 export default {
-  content: [],
+  content: ["./src/**/*.{html,tsx}"],
   theme: {
     extend: {},
   },

frontend/tsconfig.json

@@ -1,5 +1,9 @@
 {
   "compilerOptions": {
+
+    "jsx": "react",
+    "jsxFactory": "Html.createElement",
+    "jsxFragmentFactory": "Html.Fragment",
     /* Visit https://aka.ms/tsconfig to read more about this file */
 
     /* Projects */