Caleb/Blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Scafold Primary Page Routing and JSX

Browse Source
This commit is contained in:
Caleb Braaten 2024-01-31 03:49:08 -08:00
parent e6cdf3a977
commit d4e157f1fa
11 changed files with 114 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

1
package.json
View File

@ -7,6 +7,7 @@
}, },
"dependencies": { "dependencies": {
"@elysiajs/html": "^0.8.0", "@elysiajs/html": "^0.8.0",
"@elysiajs/static": "^0.8.1",
"elysia": "latest" "elysia": "latest"
}, },
"devDependencies": { "devDependencies": {

8
src/app.tsx Normal file
View File

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

15
src/frontend/components/Header.tsx Normal file
View File

@ -0,0 +1,15 @@
export function Header() {
return (
<div>
<header>
<span>Caleb Braaten</span>
<nav>
<a href="/">Home</a>
<a href="/blog">Blog</a>
<a href="/projects">Projects</a>
</nav>
</header>
<hr />
</div>
)
}

20
src/frontend/index.tsx
View File

@ -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 ( return (
<html lang="en"> <html lang="en">
<head> <head>
@ -6,8 +11,11 @@ export function Index() {
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="./htmx.min.js"></script> <script defer src="./htmx.min.js"></script>
<title>Caleb's Blog</title> <title>Caleb's Blog</title>
<link rel="stylesheet" href="./styles.css" />
</head> </head>
<body> <body>
<Header />
{page(path)}
<h1>Hello</h1> <h1>Hello</h1>
<button hx-get="/content/post">Click Me</button> <button hx-get="/content/post">Click Me</button>
</body> </body>
@ -15,3 +23,13 @@ export function Index() {
) )
} }
function page(path: string) {
switch (path) {
case '/':
return <Home />
case '/blog':
return <Blog />
case '/projects':
return <Projects />
}
}

8
src/frontend/pages/blog.tsx Normal file
View File

@ -0,0 +1,8 @@
export function Blog(){
return (
<div>
<h1>Blog</h1>
<p>And a post</p>
</div>
)
}

8
src/frontend/pages/home.tsx Normal file
View File

@ -0,0 +1,8 @@
export function Home(){
return (
<div>
<h1>Home</h1>
<p>Welcome to my blog</p>
</div>
)
}

8
src/frontend/pages/projects.tsx Normal file
View File

@ -0,0 +1,8 @@
export function Projects(){
return (
<div>
<h1>Projects</h1>
<p>Maybe pull from Gitea at some point</p>
</div>
)
}

0
src/frontend/htmx.min.js → src/frontend/public/htmx.min.js vendored
View File

37
src/frontend/public/styles.css Normal file
View File

@ -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%;
}

17
src/index.tsx
View File

@ -1,17 +1,20 @@
import { Elysia } from "elysia"; import { Elysia } from "elysia";
import { html } from "@elysiajs/html"; 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(html())
.use(staticPlugin({
assets: './src/frontend/public',
prefix: '/'
}))
.use(app)
.onRequest(({ request }) => { .onRequest(({ request }) => {
console.log(`Request ${request.method} ${request.url}`); 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); .listen(3000);
console.log( console.log(
`🦊 Elysia is running at ${app.server?.hostname}:${app.server?.port}` `🦊 Elysia is running at ${index.server?.hostname}:${index.server?.port}`
); );