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
Download Patch File Download Diff File Expand all files Collapse all files

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