diff --git a/bun.lock b/bun.lock index c60915b..621e324 100644 --- a/bun.lock +++ b/bun.lock @@ -9,7 +9,7 @@ "elysia": "^1.4.11", }, "devDependencies": { - "bun-types": "^1.3.0", + "@types/bun": "^1.3.0", }, }, }, @@ -30,6 +30,8 @@ "@tokenizer/token": ["@tokenizer/token@0.3.0", "", {}, "sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A=="], + "@types/bun": ["@types/bun@1.3.0", "", { "dependencies": { "bun-types": "1.3.0" } }, "sha512-+lAGCYjXjip2qY375xX/scJeVRmZ5cY0wyHYyCYxNcdEXrQ4AOe3gACgd4iQ8ksOslJtW4VNxBJ8llUwc3a6AA=="], + "@types/node": ["@types/node@24.7.2", "", { "dependencies": { "undici-types": "~7.14.0" } }, "sha512-/NbVmcGTP+lj5oa4yiYxxeBjRivKQ5Ns1eSZeB99ExsEQ6rX5XYU1Zy/gGxY/ilqtD4Etx9mKyrPxZRetiahhA=="], "@types/react": ["@types/react@19.2.2", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA=="], diff --git a/index.tsx b/index.tsx new file mode 100644 index 0000000..3ef1dbb --- /dev/null +++ b/index.tsx @@ -0,0 +1,28 @@ +import { Elysia } from "elysia"; +import { html } from "@elysiajs/html"; +import { staticPlugin } from "@elysiajs/static"; + +import { AppShell } from "./src/frontend/AppShell"; +import { app } from "./src/backend"; + +const index = new Elysia() + .use(html()) + .onRequest(({ request }) => { + console.log(`Request ${request.method} ${request.url}`); + }) + .onAfterHandle(({ request, responseValue }) => { + if (request.headers.get("hx-request") === "true") { + return responseValue; // Return the
element if the request is an HTMX request + } + return AppShell(responseValue); // Return the
element wrapped by the AppShell + }) + .use(staticPlugin({ + assets: './src/public', + prefix: '/public' + })) + .use(app) + .listen(3000); + +console.log( + `🦊 Elysia is running at ${index.server?.hostname}:${index.server?.port}` +); diff --git a/package.json b/package.json index 81359d8..044cb42 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "1.0.50", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "dev": "bun run --watch src/index.tsx" + "dev": "bun run --watch ./index.tsx" }, "dependencies": { "@elysiajs/html": "1.4.0", @@ -11,7 +11,7 @@ "elysia": "^1.4.11" }, "devDependencies": { - "bun-types": "^1.3.0" + "@types/bun": "^1.3.0" }, "module": "src/index.js" } \ No newline at end of file diff --git a/src/app.tsx b/src/app.tsx deleted file mode 100644 index c748ef6..0000000 --- a/src/app.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Elysia } from "elysia"; -import { Index, selectPage } from "./frontend"; - -export const app = new Elysia() - .get("/", (context) => isHTMXResponse( context, "/")) - .get("/blog", (context) => isHTMXResponse( context, "/blog")) - .get("/projects", (context) => isHTMXResponse( context, "/projects")) - .get("/content/post", () => "I'm from the server") - -function isHTMXResponse ( context: any, path: string) { - if (context.headers["hx-request"] === "true") { - return selectPage(path); - } - return Index(path); -} diff --git a/src/backend/index.tsx b/src/backend/index.tsx new file mode 100644 index 0000000..5e50416 --- /dev/null +++ b/src/backend/index.tsx @@ -0,0 +1,22 @@ +import { Html } from "@elysiajs/html"; +import { Elysia, NotFoundError } from "elysia"; + +import { Home } from "../frontend/home"; +import { Blog } from "../frontend/blog"; +import { NotFound } from "../frontend/not-found"; + + +export const app = new Elysia() + .onError(({ error }) => { + if(error instanceof NotFoundError) { + return ; + } + return error; + }) + .get("/", () => { return }) + .get("/:path", ({ path }) => { + if(path === "/blog") { + return ; + } + throw new NotFoundError(); + }) diff --git a/src/frontend/AppShell.tsx b/src/frontend/AppShell.tsx new file mode 100644 index 0000000..a16a6ef --- /dev/null +++ b/src/frontend/AppShell.tsx @@ -0,0 +1,44 @@ +import { Html } from "@elysiajs/html"; + +const styles = Bun.file("./src/public/styles.css").text(); +const headScript = Bun.file("./src/public/head.js").text(); +const onLoadScript = Bun.file("./src/public/onLoad.js").text(); + +export function AppShell(responseValue: any) { + return ( + + + Caleb's Blog + + + + + + + {responseValue} + + + + ) +} diff --git a/src/frontend/blog.tsx b/src/frontend/blog.tsx new file mode 100644 index 0000000..2d175af --- /dev/null +++ b/src/frontend/blog.tsx @@ -0,0 +1,9 @@ +import { Html } from "@elysiajs/html"; + +export function Blog() { + return ( +
+

Blog

+
+ ) +} \ No newline at end of file diff --git a/src/frontend/components/Header.tsx b/src/frontend/components/Header.tsx deleted file mode 100644 index c8630e8..0000000 --- a/src/frontend/components/Header.tsx +++ /dev/null @@ -1,15 +0,0 @@ -export function Header() { - return ( -
-
- Caleb Braaten - -
-
-
- ) -} \ No newline at end of file diff --git a/src/frontend/components/icons.tsx b/src/frontend/components/icons.tsx deleted file mode 100644 index 0b773f7..0000000 --- a/src/frontend/components/icons.tsx +++ /dev/null @@ -1,60 +0,0 @@ -export function GithubIcon(props: any) { - return ( - - - - - ) - } - -export function LinkedinIcon(props: any) { - return ( - - - - - - ) - } - -export function XIcon(props: any) { - return ( - - - - ) - } \ No newline at end of file diff --git a/src/frontend/home.tsx b/src/frontend/home.tsx new file mode 100644 index 0000000..7459953 --- /dev/null +++ b/src/frontend/home.tsx @@ -0,0 +1,9 @@ +import { Html } from "@elysiajs/html"; + +export function Home() { + return ( +
+

Home

+
+ ) +} \ No newline at end of file diff --git a/src/frontend/index.tsx b/src/frontend/index.tsx deleted file mode 100644 index 1c19ea0..0000000 --- a/src/frontend/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -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 ( - - - - - - Caleb's Blog - - - -
-
- {selectPage(path)} -
- - - ) -} - -export function selectPage(path: string) { - switch (path) { - case '/': - return - case '/blog': - return - case '/projects': - return - } -} diff --git a/src/frontend/not-found.tsx b/src/frontend/not-found.tsx new file mode 100644 index 0000000..7f5a3d6 --- /dev/null +++ b/src/frontend/not-found.tsx @@ -0,0 +1,9 @@ +import { Html } from "@elysiajs/html"; + +export function NotFound() { + return ( +
+

404 Not Found

+
+ ) +} \ No newline at end of file diff --git a/src/frontend/pages/blog.tsx b/src/frontend/pages/blog.tsx deleted file mode 100644 index 7111fd5..0000000 --- a/src/frontend/pages/blog.tsx +++ /dev/null @@ -1,50 +0,0 @@ -export function Blog(){ - return ( -
-
-
-

Blog Post Title

-
Posted on January 1, 2024
-

Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!

- Read More -
- -
-

Another Blog Post Title

-
Posted on December 1, 2023
-

Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.

- Read More -
- -
-

The First Blog Post

-
Posted on November 1, 2023
-

Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.

- Read More -
-
- -
- ) -} diff --git a/src/frontend/pages/home.tsx b/src/frontend/pages/home.tsx deleted file mode 100644 index bbb2233..0000000 --- a/src/frontend/pages/home.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { GithubIcon, LinkedinIcon, XIcon } from "../components/icons" - -export function Home(){ - return ( -
-
-

Most Recent Blog Post Title

-
Posted on January 1, 2024
-

Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!

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

This Site

-

Project 1 description

- Git Repo -
-
- -

Home Server

-

Project 1 description

- Git Repo -
-
- ) -} diff --git a/src/index.tsx b/src/index.tsx deleted file mode 100644 index 6b03254..0000000 --- a/src/index.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Elysia } from "elysia"; -import { html } from "@elysiajs/html"; -import { staticPlugin } from "@elysiajs/static"; -import { app } from "./app"; - -const index = new Elysia() - .use(html()) - .use(staticPlugin({ - assets: './src/frontend/public', - prefix: '/' - })) - .use(app) - .onRequest(({ request }) => { - console.log(`Request ${request.method} ${request.url}`); - }) - .listen(3000); - -console.log( - `🦊 Elysia is running at ${index.server?.hostname}:${index.server?.port}` -); diff --git a/src/public/head.js b/src/public/head.js new file mode 100644 index 0000000..e69de29 diff --git a/src/frontend/public/htmx.min.js b/src/public/htmx.min.js similarity index 100% rename from src/frontend/public/htmx.min.js rename to src/public/htmx.min.js diff --git a/src/public/onLoad.js b/src/public/onLoad.js new file mode 100644 index 0000000..e69de29 diff --git a/src/frontend/public/styles.css b/src/public/styles.css similarity index 100% rename from src/frontend/public/styles.css rename to src/public/styles.css diff --git a/tsconfig.json b/tsconfig.json index a3e7a24..6497e01 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,11 +13,11 @@ /* Language and Environment */ "target": "ES2021", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ - "jsx": "react", /* Specify what JSX code is generated. */ + "jsx": "react", /* Specify what JSX code is generated. */ // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ - "jsxFactory": "Html.createElement", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ - "jsxFragmentFactory": "Html.Fragment", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ + "jsxFactory": "Html.createElement", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ + "jsxFragmentFactory": "Html.Fragment", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */