diff --git a/bun.lockb b/bun.lockb index c44786e..193645b 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 4800418..c8ea6c8 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ }, "dependencies": { "@elysiajs/html": "^0.8.0", + "@elysiajs/static": "^0.8.1", "elysia": "latest" }, "devDependencies": { diff --git a/src/app.tsx b/src/app.tsx new file mode 100644 index 0000000..7201b27 --- /dev/null +++ b/src/app.tsx @@ -0,0 +1,8 @@ +import { Elysia } from "elysia"; +import { Index } from "./frontend"; + +export const app = new Elysia() + .get("/", () => Index("/")) + .get("/blog", () => Index("/blog")) + .get("/projects", () => Index("/projects")) + .get("/content/post", () => "I'm from the server") diff --git a/src/frontend/components/Header.tsx b/src/frontend/components/Header.tsx new file mode 100644 index 0000000..9b8b731 --- /dev/null +++ b/src/frontend/components/Header.tsx @@ -0,0 +1,15 @@ +export function Header() { + return ( +
+
+ Caleb Braaten + +
+
+
+ ) +} \ No newline at end of file diff --git a/src/frontend/index.tsx b/src/frontend/index.tsx index 3a6ec74..64902b1 100644 --- a/src/frontend/index.tsx +++ b/src/frontend/index.tsx @@ -1,4 +1,9 @@ -export function Index() { +import { Header } from "./components/Header"; +import { Home } from "./pages/home"; +import { Blog } from "./pages/blog"; +import { Projects } from "./pages/projects"; + +export function Index(path: string) { return ( @@ -6,8 +11,11 @@ export function Index() { Caleb's Blog + +
+ {page(path)}

Hello

@@ -15,3 +23,13 @@ export function Index() { ) } +function page(path: string) { + switch (path) { + case '/': + return + case '/blog': + return + case '/projects': + return + } +} diff --git a/src/frontend/pages/blog.tsx b/src/frontend/pages/blog.tsx new file mode 100644 index 0000000..a34a0ed --- /dev/null +++ b/src/frontend/pages/blog.tsx @@ -0,0 +1,8 @@ +export function Blog(){ + return ( +
+

Blog

+

And a post

+
+ ) +} diff --git a/src/frontend/pages/home.tsx b/src/frontend/pages/home.tsx new file mode 100644 index 0000000..1619f25 --- /dev/null +++ b/src/frontend/pages/home.tsx @@ -0,0 +1,8 @@ +export function Home(){ + return ( +
+

Home

+

Welcome to my blog

+
+ ) +} diff --git a/src/frontend/pages/projects.tsx b/src/frontend/pages/projects.tsx new file mode 100644 index 0000000..c526dec --- /dev/null +++ b/src/frontend/pages/projects.tsx @@ -0,0 +1,8 @@ +export function Projects(){ + return ( +
+

Projects

+

Maybe pull from Gitea at some point

+
+ ) +} diff --git a/src/frontend/htmx.min.js b/src/frontend/public/htmx.min.js similarity index 100% rename from src/frontend/htmx.min.js rename to src/frontend/public/htmx.min.js diff --git a/src/frontend/public/styles.css b/src/frontend/public/styles.css new file mode 100644 index 0000000..e7c0dc8 --- /dev/null +++ b/src/frontend/public/styles.css @@ -0,0 +1,37 @@ +body, a { + margin: 0px; +} + +header { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin: 15px; + height: 50px; +} + + +header span { + font-size: 30px; + font-weight: bold; +} + +nav { + display: flex; + flex-direction: row; + align-items: center; + text-align: center; + gap: 10px; +} + +nav a { + text-decoration: none; + color: black; + font-size: 20px; +} + +header hr { + margin: 0px; + opacity: 75%; +} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 1e4122a..6b03254 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,17 +1,20 @@ import { Elysia } from "elysia"; import { html } from "@elysiajs/html"; -import { Index } from "./frontend/index"; +import { staticPlugin } from "@elysiajs/static"; +import { app } from "./app"; -const app = new Elysia() +const index = new Elysia() .use(html()) + .use(staticPlugin({ + assets: './src/frontend/public', + prefix: '/' + })) + .use(app) .onRequest(({ request }) => { console.log(`Request ${request.method} ${request.url}`); }) - .get("/", () => Index()) - .get('/htmx.min.js', () => Bun.file("./src/frontend/htmx.min.js")) - .get("/content/post", () => "I'm from the server") .listen(3000); - + console.log( - `🦊 Elysia is running at ${app.server?.hostname}:${app.server?.port}` + `🦊 Elysia is running at ${index.server?.hostname}:${index.server?.port}` );