diff --git a/.drone.yml b/.drone.yml
deleted file mode 100644
index c8ea9c8..0000000
--- a/.drone.yml
+++ /dev/null
@@ -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
-
diff --git a/.gitea/workflows/build.yaml b/.gitea/workflows/build.yaml
new file mode 100644
index 0000000..0068602
--- /dev/null
+++ b/.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
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index c297f79..a644168 100644
--- a/frontend/Dockerfile
+++ b/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" ]
diff --git a/frontend/bun.lockb b/frontend/bun.lockb
index 69d3396..8dd2be8 100755
Binary files a/frontend/bun.lockb and b/frontend/bun.lockb differ
diff --git a/frontend/package.json b/frontend/package.json
index ac60c22..1096ef8 100644
--- a/frontend/package.json
+++ b/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"
}
diff --git a/frontend/public/style.css b/frontend/public/style.css
index 68c2624..1359831 100644
--- a/frontend/public/style.css
+++ b/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));
}
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index e28bacd..a26a644 100644
--- a/frontend/src/index.tsx
+++ b/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);
diff --git a/frontend/src/landing.tsx b/frontend/src/landing.tsx
new file mode 100644
index 0000000..136c1ad
--- /dev/null
+++ b/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 }
diff --git a/frontend/src/layout.tsx b/frontend/src/layout.tsx
index 76d4023..9bb4afe 100644
--- a/frontend/src/layout.tsx
+++ b/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>
`;