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

1
frontend/.gitignore vendored
View File

@ -7,5 +7,6 @@
# Fresh build directory # Fresh build directory
_fresh/ _fresh/
# npm dependencies # npm dependencies
node_modules/ node_modules/

3
frontend/components/Footer.tsx Normal file
View File

@ -0,0 +1,3 @@
export default function Footer() {
return <div>THIS IS A FOOTER</div>;
}

3
frontend/components/Header.tsx Normal file
View File

@ -0,0 +1,3 @@
export default function Header() {
return <div>THIS IS THE HEADER</div>;
}

10
frontend/deno.json
View File

@ -22,11 +22,15 @@
], ],
"imports": { "imports": {
"$fresh/": "https://deno.land/x/fresh@1.6.8/", "$fresh/": "https://deno.land/x/fresh@1.6.8/",
"preact": "https://esm.sh/preact@10.19.6", "$std/": "https://deno.land/std@0.216.0/",
"preact/": "https://esm.sh/preact@10.19.6/", "@preact-hooks/fetch": "jsr:@preact-hooks/fetch@^0.0.4",
"@preact/signals": "https://esm.sh/*@preact/signals@1.2.2", "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
"@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1", "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
"$std/": "https://deno.land/std@0.216.0/" "preact": "https://esm.sh/preact@10.19.6",
"preact/": "https://esm.sh/preact@10.19.6/",
"tailwindcss": "npm:tailwindcss@3.4.1",
"tailwindcss/": "npm:/tailwindcss@3.4.1/",
"tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js"
}, },
"compilerOptions": { "compilerOptions": {
"jsx": "react-jsx", "jsx": "react-jsx",

5
frontend/fresh.config.ts
View File

@ -1,3 +1,6 @@
import { defineConfig } from "$fresh/server.ts"; import { defineConfig } from "$fresh/server.ts";
import tailwind from "$fresh/plugins/tailwind.ts";
export default defineConfig({}); export default defineConfig({
plugins: [tailwind()],
});

10
frontend/fresh.gen.ts
View File

@ -4,9 +4,10 @@
import * as $_404 from "./routes/_404.tsx"; import * as $_404 from "./routes/_404.tsx";
import * as $_app from "./routes/_app.tsx"; import * as $_app from "./routes/_app.tsx";
import * as $api_joke from "./routes/api/joke.ts"; import * as $_layout from "./routes/_layout.tsx";
import * as $greet_name_ from "./routes/greet/[name].tsx";
import * as $index from "./routes/index.tsx"; import * as $index from "./routes/index.tsx";
import * as $posts_id_ from "./routes/posts/[id].tsx";
import * as $posts_index from "./routes/posts/index.tsx";
import * as $Counter from "./islands/Counter.tsx"; import * as $Counter from "./islands/Counter.tsx";
import { type Manifest } from "$fresh/server.ts"; import { type Manifest } from "$fresh/server.ts";
@ -14,9 +15,10 @@ const manifest = {
routes: { routes: {
"./routes/_404.tsx": $_404, "./routes/_404.tsx": $_404,
"./routes/_app.tsx": $_app, "./routes/_app.tsx": $_app,
"./routes/api/joke.ts": $api_joke, "./routes/_layout.tsx": $_layout,
"./routes/greet/[name].tsx": $greet_name_,
"./routes/index.tsx": $index, "./routes/index.tsx": $index,
"./routes/posts/[id].tsx": $posts_id_,
"./routes/posts/index.tsx": $posts_index,
}, },
islands: { islands: {
"./islands/Counter.tsx": $Counter, "./islands/Counter.tsx": $Counter,

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

25
frontend/routes/index.tsx
View File

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

132
frontend/static/styles.css
View File

@ -1,129 +1,3 @@
@tailwind base;
*, @tailwind components;
*::before, @tailwind utilities;
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
button {
color: inherit;
}
button, [role="button"] {
cursor: pointer;
}
code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
font-size: 1em;
}
img,
svg {
display: block;
}
img,
video {
max-width: 100%;
height: auto;
}
html {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.transition-colors {
transition-property: background-color, border-color, color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.my-6 {
margin-bottom: 1.5rem;
margin-top: 1.5rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.my-4 {
margin-bottom: 1rem;
margin-top: 1rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.py-8 {
padding-bottom: 2rem;
padding-top: 2rem;
}
.bg-\[\#86efac\] {
background-color: #86efac;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.py-6 {
padding-bottom: 1.5rem;
padding-top: 1.5rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.py-1 {
padding-bottom: 0.25rem;
padding-top: 0.25rem;
}
.border-gray-500 {
border-color: #6b7280;
}
.bg-white {
background-color: #fff;
}
.flex {
display: flex;
}
.gap-8 {
grid-gap: 2rem;
gap: 2rem;
}
.font-bold {
font-weight: 700;
}
.max-w-screen-md {
max-width: 768px;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.border-2 {
border-width: 2px;
}
.rounded {
border-radius: 0.25rem;
}
.hover\:bg-gray-200:hover {
background-color: #e5e7eb;
}
.tabular-nums {
font-variant-numeric: tabular-nums;
}

5
frontend/tailwind.config.ts Normal file
View File

@ -0,0 +1,5 @@
import { type Config } from "tailwindcss";
export default {
content: ["{routes,islands,components}/**/*.{ts,tsx}"],
} satisfies Config;