wymiller/my-website-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: added global layout, added posts route

Browse Source
This commit is contained in:
Wyatt J. Miller
2024-10-10 16:16:55 -04:00
parent 1a480b3cf9
commit a42f827cf7
14 changed files with 126 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/routes/_layout.tsx Normal file
View File

@ -0,0 +1,18 @@
import { LayoutProps } from "$fresh/server.ts";
import Footer from "../components/Footer.tsx";
import Header from "../components/Header.tsx";
export default function Layout(props: LayoutProps) {
return (
<html lang="en-us">
<head>
<title>Wyatt J Miller | Home</title>
<meta name="description" content="Wyatt J. Miller" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<Header />
<props.Component />
<Footer />
</html>
);
}

21
frontend/routes/api/joke.ts
View File

@ -1,21 +0,0 @@
import { FreshContext } from "$fresh/server.ts";
// Jokes courtesy of https://punsandoneliners.com/randomness/programmer-jokes/
const JOKES = [
"Why do Java developers often wear glasses? They can't C#.",
"A SQL query walks into a bar, goes up to two tables and says “can I join you?”",
"Wasn't hard to crack Forrest Gump's password. 1forrest1.",
"I love pressing the F5 key. It's refreshing.",
"Called IT support and a chap from Australia came to fix my network connection. I asked “Do you come from a LAN down under?”",
"There are 10 types of people in the world. Those who understand binary and those who don't.",
"Why are assembly programmers often wet? They work below C level.",
"My favourite computer based band is the Black IPs.",
"What programme do you use to predict the music tastes of former US presidential candidates? An Al Gore Rhythm.",
"An SEO expert walked into a bar, pub, inn, tavern, hostelry, public house.",
];
export const handler = (_req: Request, _ctx: FreshContext): Response => {
const randomIndex = Math.floor(Math.random() * JOKES.length);
const body = JOKES[randomIndex];
return new Response(body);
};

5
frontend/routes/greet/[name].tsx
View File

@ -1,5 +0,0 @@
import { PageProps } from "$fresh/server.ts";
export default function Greet(props: PageProps) {
return <div>Hello {props.params.name}</div>;
}

41
frontend/routes/index.tsx
View File

@ -1,25 +1,26 @@
import { useSignal } from "@preact/signals";
import Counter from "../islands/Counter.tsx";
export default function Home() {
const count = useSignal(3);
return (
<div class="px-4 py-8 mx-auto bg-[#86efac]">
<div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
<img
class="my-6"
src="/logo.svg"
width="128"
height="128"
alt="the Fresh logo: a sliced lemon dripping with juice"
/>
<h1 class="text-4xl font-bold">Welcome to Fresh</h1>
<p class="my-4">
Try updating this message in the
<code class="mx-2">./routes/index.tsx</code> file, and refresh.
</p>
<Counter count={count} />
<body>
<div class="min-w-screen flex flex-col items-center justify-between bg-gray-100 dark:bg-gray-700 sm:min-h-screen">
<div class="sm:mt-14 sm:mb-14 mt-12 mb-4 flex flex-col items-center gap-y-5 gap-x-10 md:flex-row">
<img
class="my-6"
src="/logo.svg"
width="128"
height="128"
alt="the Fresh logo: a sliced lemon dripping with juice"
/>
<div class="space-y-2 text-center md:text-left">
<h1 class="text-2xl text-white font-bold sm:text-4xl">
Heya! I'm Wyatt Miller
</h1>
<h2 class="text-md font-medium text-cyan-700 dark:text-cyan-200 sm:text-xl">
Thanks for checking out this corner of the Internet!
</h2>
</div>
</div>
{/** about me stuff */}
</div>
</div>
</body>
);
}

3
frontend/routes/posts/[id].tsx Normal file
View File

@ -0,0 +1,3 @@
export default function PostIdentifier() {
return null;
}

52
frontend/routes/posts/index.tsx Normal file
View File

@ -0,0 +1,52 @@
export default function Posts() {
return (
<div class="min-w-screen flex flex-col items-center justify-between bg-gray-100 dark:bg-gray-700 sm:min-h-screen">
<div class="space-y-2 text-center md:text-left">
<h1 class="text-2xl text-white font-bold sm:text-4xl">Blog posts</h1>
<h2 class="text-md font-medium text-cyan-700 dark:text-cyan-200 sm:text-xl">
A lot of them!
</h2>
</div>
<div class="h-screen bg-gray-700 flex items-center justify-center">
<div class="flex bg-gray-700 space-x-4">
<div class="p-6 bg-gray-700 rounded-lg shadow-md">
<h2 class="text-grey-900 text-lg font-bold mb-2">Blog Post 1</h2>
<p>Written by Wyatt Miller</p>
<p>
Lorem ipsum odor amet, consectetuer adipiscing elit. Senectus
aliquet fusce habitant sem integer lectus curae quisque. Tincidunt
vitae adipiscing justo et nulla. Faucibus imperdiet turpis maximus
nam natoque suscipit platea. Feugiat imperdiet malesuada enim diam
primis. Vitae sollicitudin molestie cubilia tempus nunc dignissim
adipiscing.
</p>
</div>
<div class="p-6 bg-gray-700 rounded-lg shadow-md">
<h2 class="text-grey-900 text-lg font-bold mb-2">Blog Post 2</h2>
<p>Written by Wyatt Miller</p>
<p>
Lorem ipsum odor amet, consectetuer adipiscing elit. Senectus
aliquet fusce habitant sem integer lectus curae quisque. Tincidunt
vitae adipiscing justo et nulla. Faucibus imperdiet turpis maximus
nam natoque suscipit platea. Feugiat imperdiet malesuada enim diam
primis. Vitae sollicitudin molestie cubilia tempus nunc dignissim
adipiscing.
</p>
</div>
<div class="p-6 bg-gray-700 rounded-lg shadow-md">
<h2 class="text-grey-900 text-lg font-bold mb-2">Blog Post 3</h2>
<p>Written by Wyatt Miller</p>
<p>
Lorem ipsum odor amet, consectetuer adipiscing elit. Senectus
aliquet fusce habitant sem integer lectus curae quisque. Tincidunt
vitae adipiscing justo et nulla. Faucibus imperdiet turpis maximus
nam natoque suscipit platea. Feugiat imperdiet malesuada enim diam
primis. Vitae sollicitudin molestie cubilia tempus nunc dignissim
adipiscing.
</p>
</div>
</div>
</div>
</div>
);
}