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

@@ -10,13 +10,13 @@ RUN bun run tailwind:build
 
 # copy production dependencies and source code into final image
 FROM base AS release
-WORKDIR /usr/src/app
+WORKDIR /app
 
-COPY --from=install /modules/node_modules node_modules
-COPY --from=install /modules/public public
-COPY  src .
+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.tsx" ]
+ENTRYPOINT [ "bun", "run", "src/index.tsx" ]

frontend/package.json

@@ -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

@@ -544,10 +544,6 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
-.mb-5 {
-  margin-bottom: 1.25rem;
-}
-
 .flex {
   display: flex;
 }
@@ -572,39 +568,39 @@ video {
   justify-content: center;
 }
 
-.gap-2 {
-  gap: 0.5rem;
-}
-
 .gap-3 {
   gap: 0.75rem;
 }
 
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
+.rounded {
+  border-radius: 0.25rem;
 }
 
-.font-semibold {
-  font-weight: 600;
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
-.text-lime-500 {
+.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(132 204 22 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-neutral-500 {
-  --tw-text-opacity: 1;
-  color: rgb(115 115 115 / var(--tw-text-opacity));
-}
-
-.text-sky-500 {
-  --tw-text-opacity: 1;
-  color: rgb(14 165 233 / var(--tw-text-opacity));
-}
-
-.text-violet-500 {
-  --tw-text-opacity: 1;
-  color: rgb(139 92 246 / 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,25 +1,28 @@
 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("/", ({html}) => html(<HomeLayout><div>hello world</div></HomeLayout>))
+  .get("/", ({html}) => html(<HomeLayout><Landing></Landing></HomeLayout>))
+  .post("/clicked", ()=> <div>Hello?</div>)
 
   .listen(Bun.env["PORT"] ?? 3000);
 

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

@@ -1,4 +1,5 @@
-import { html } from "@elysiajs/html";
+import * as elements from "typed-html";
+
 const HomeLayout = ({ children }: elements.Children) => `
     <head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -7,13 +8,6 @@ const HomeLayout = ({ children }: elements.Children) => `
         <title>BETH STACK</title>
     </head>
     <body class="h-screen w-screen flex flex-col gap-3 items-center justify-center">
-        <span class='text-xl font-semibold'>BETH STACK</span>
-        <div class='flex flex-col items-center justify-center  gap-2 mb-5'>
-            <span class='text-neutral-500 font-semibold'>Bun 1.0</span>
-            <span class='text-violet-500 font-semibold'>Elysia</span>
-            <span class='text-lime-500 font-semibold'>Turso</span>
-            <span class='text-sky-500 font-semibold'>Htmx</span>
-        </div>
         ${children}
     </body>
 `;