From d4e157f1fa94a12e1446c2f164a5bd5fa01f6aae Mon Sep 17 00:00:00 2001 From: Caleb Braaten Date: Wed, 31 Jan 2024 03:49:08 -0800 Subject: [PATCH] Scafold Primary Page Routing and JSX --- bun.lockb | Bin 15028 -> 16114 bytes package.json | 1 + src/app.tsx | 8 ++++++ src/frontend/components/Header.tsx | 15 +++++++++++ src/frontend/index.tsx | 20 +++++++++++++- src/frontend/pages/blog.tsx | 8 ++++++ src/frontend/pages/home.tsx | 8 ++++++ src/frontend/pages/projects.tsx | 8 ++++++ src/frontend/{ => public}/htmx.min.js | 0 src/frontend/public/styles.css | 37 ++++++++++++++++++++++++++ src/index.tsx | 17 +++++++----- 11 files changed, 114 insertions(+), 8 deletions(-) create mode 100644 src/app.tsx create mode 100644 src/frontend/components/Header.tsx create mode 100644 src/frontend/pages/blog.tsx create mode 100644 src/frontend/pages/home.tsx create mode 100644 src/frontend/pages/projects.tsx rename src/frontend/{ => public}/htmx.min.js (100%) create mode 100644 src/frontend/public/styles.css diff --git a/bun.lockb b/bun.lockb index c44786ec17a6294fe4d284c961ca3dafb0f422a3..193645b60eeb79dc81e5f0f4aea82a3d133a8d4b 100755 GIT binary patch delta 3184 zcmd^Bdr(~E6~FiHF6>>{@P=I$5|Ute?gGnW3582k#K?++)8YnVs61A(aRb;T3QPhx zhDJNlNptKU7N*c>99l{0NN6fzQ%J@p7F%qi6O%@3OgfpAXtlKoX%qW9clSnT+B(y} z{f5JD&*MAyob$cTp>3b;*yG5W8FF1ZcC@kF?Eb+;Y5pHGck61`H&mDBx9mPyEf&AH zyG0Syk^OzoiUBD*$OQk(f-vay_Xd2;f-nV<8TFy_GffshRbfb4IV ziCz}(v6$X5yIg+?TgYsQFQc=vOwYo}io_ckaQj|#3Iz_CZ zC5ZOYT79LwCI5edIH^%bWd=q39rYS2Zwd(1bL6L_cEP=g_9@DwRx2QL)QYtsl zbeJOTFwix?0RxqVE3y?O=g)+3Sn{_+oEoGw97fk*@(F|-A7V4Q)JW5^BF{m{)sWakS|(GONs($~>N6?w zc2u6H>(yLmWV!|+FC%{eLU<`PQD1~2k%^`w6!9c2MN~@02r7$Iq+27XFS3m4QuPMZ z00li8ndC$5c|WM*s}MEk4JNQXcDyog4C5o_T|Pd`TWU4(?5GsbsZysK;ui9TvB^f=+K0d0uhm1Rz?}uRnzE8T z^n}e!PbIs>Tj*VIr732ru(`zydeY_*GwB2T&zfADk|fetO8I16>Z>w-kZFB(uvT5! zl#o%GC*1fvI9SRj?aL=eznP(yg_dzBn;bQ@)iC7Hxu%>Fr^dgtKs})pP8X1pRc{rW z@*SlPR5uN}Xx#GJLrZ(J(nT*F&MFiip}%BVZI8o%Tb1bBpO~0Gx-VW5n+hEH4lK$D zt;n_(Pe9KPcY2I&D*M@vwUP*>qX4e8<|pd?;SUR*e&A7_>4dIOn4_)P)`9=+S!;W= zS06KrF%g?UYpiY``|#>}74Hs3i%LbBnu^vUX&r(jIvqWTO%Sx+=&zRFFD+JI-Un}m z$iM)1V>+729+aNZk&ePMg+rRkSa(ZQr#eoeiLe#bw%NGS(4#ahHs@9m*|6wt`uQR#<1};p6 z0k>+{o`d(~&F!PTYUMKD4Fa7FAt8Nw(p=jfC0G(&BlsXW5NYA+L=JmE~1OuM2LgErGm1cXPL|m1do`$>F?yX?2j# zvxgLR-f9Jo?)JWp&Ni>TwYhb(myK;-u(17tv18j(bm^*S?%$zNH>n+m0K%1%QO^Cw Fe*?6hhH?M^ delta 2562 zcmcgudu&r>6#wpRxAtzkW3X4d?!B=`x3#-vkFspHgb-v_79Uv(OCWS(Ku3i^nPE{_ zV?ZTAksM<{As7q@QzBy^7#;ylj36kI5CJ8IL?SE@!5Ec9z~52bI87 z;B4q|Kpi*%*c<5yhJy=xd%~fC5d8F5;)(ADvi>hXE=ae={jQ3HLwYwWE(wO00&hUT znJ)=O>K28Ai&1r~@>BT2nI8e-FS-vO?C_LAXQYnNdf6*U#S}96q+_(#A4< zv1DDjh|MN!nrOt-ETvM&;*(!6)38OC51VNW@UxkmR$X}x2gBCM97Nfg;9?==i%B#F zm6~KBbf{SAuC-YSfqN31Oe2aD$rCHH%Xr7n>`wW9a_e3phE{|Af zI7L_f!Y0=yb69znm7J-%yv|B}sk-tBj+D*Kq(Sz(mBz5yg7f1D=9rh23iYMw@;QZu z({w4FZl?L<=_%w?b@{~<>Qh@vP`_Y;FFyC!8jlj~Q*-H#Ja7YU1t{~wE<_n#I$IyIxgL<3oVI+CfFHNAqoB(|Z?kc#6RGk~3)j2A?p6iz~=`y&gT$S2vekq$a*aCD3+--2V zG}RuU*K8_nxBDeK-2~^gt28^$FF9yyUVv_ZyAQ5_+8qJflBd!>hhHk9d*Eg{RGOFX zmr7`Fet`Z2rxy67GMZZupgs929S1j=l)?bbDNskBFHDt24;CF&Ql92k!CGBOX-=Q( z!Nd6Ct;wMA&0+9+5+>8CsH3KowmCC~xNqt}E)d=!e#BzEfp;&~<+!l1ZsuOW)rxgJ z-vGSU{6LCK5cj4N#GQ{vRMzfI8mMs(ac10}TvQPVmi(H=GUkTmtXa-cIXY*-*>HxODQBDw;ycSTgtKNDe>bu; zc+Qry4# zS(@MIs&{EZL};YW-nbERWEH)Bse0*;t#4;SuDLW9-m-0w;FP1~6HSMlTbE6hC78K1 zoXsv;Q)hP^fE;y3cTA4f)~xUC&XV-DV)k7h^PF$Y!8^7K_ioL+y%V0NKnl-SWNL6l z9giwx#1#dmo2Bym&VAL=OCT;HOcD*=7p6ZSs6Gz2f#X8soKX z@%e=>z1mmKdR&Soj6r&9VOQtX){`?J@p7Jcvgx+l-ee5mg3@bcCzaAqA#Z{lXJm}z zE@|8MGymAp4@u(m5VW=4mj8Iu9t-u?+nS7_+~NLgr~S<5S@6&hk8OP4udqsKMwA2Y+C~)CO%b4un&KW-6{@af0vb2^fZ4hF&h0-*ee8Wl= zny1Ma;G5lDuU8yu!@rQP1}|g8zyH;i!5w`ULjOoG?BCFA`r}QFUkS?c)-T4MdFLpC zH@ZAch`ygME>^vpe$r-4x`WxkKQj*J?AlkizE67~Q;Vli26TD!%1%7CxJuD=-o~@i q>huQ-64N3-@vAMRb-=3^YqX%&M&Ef#=&si>S~g{^JQ`?v*ZMb4xzc<9 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}` );