wip: added global layout, added posts route
This commit is contained in:
parent
1a480b3cf9
commit
a42f827cf7
1
frontend/.gitignore
vendored
1
frontend/.gitignore
vendored
@ -7,5 +7,6 @@
|
||||
|
||||
# Fresh build directory
|
||||
_fresh/
|
||||
|
||||
# npm dependencies
|
||||
node_modules/
|
||||
|
||||
3
frontend/components/Footer.tsx
Normal file
3
frontend/components/Footer.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export default function Footer() {
|
||||
return <div>THIS IS A FOOTER</div>;
|
||||
}
|
||||
3
frontend/components/Header.tsx
Normal file
3
frontend/components/Header.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export default function Header() {
|
||||
return <div>THIS IS THE HEADER</div>;
|
||||
}
|
||||
@ -22,11 +22,15 @@
|
||||
],
|
||||
"imports": {
|
||||
"$fresh/": "https://deno.land/x/fresh@1.6.8/",
|
||||
"preact": "https://esm.sh/preact@10.19.6",
|
||||
"preact/": "https://esm.sh/preact@10.19.6/",
|
||||
"$std/": "https://deno.land/std@0.216.0/",
|
||||
"@preact-hooks/fetch": "jsr:@preact-hooks/fetch@^0.0.4",
|
||||
"@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
|
||||
"@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": {
|
||||
"jsx": "react-jsx",
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
import { defineConfig } from "$fresh/server.ts";
|
||||
import tailwind from "$fresh/plugins/tailwind.ts";
|
||||
|
||||
export default defineConfig({});
|
||||
export default defineConfig({
|
||||
plugins: [tailwind()],
|
||||
});
|
||||
|
||||
@ -4,9 +4,10 @@
|
||||
|
||||
import * as $_404 from "./routes/_404.tsx";
|
||||
import * as $_app from "./routes/_app.tsx";
|
||||
import * as $api_joke from "./routes/api/joke.ts";
|
||||
import * as $greet_name_ from "./routes/greet/[name].tsx";
|
||||
import * as $_layout from "./routes/_layout.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 { type Manifest } from "$fresh/server.ts";
|
||||
|
||||
@ -14,9 +15,10 @@ const manifest = {
|
||||
routes: {
|
||||
"./routes/_404.tsx": $_404,
|
||||
"./routes/_app.tsx": $_app,
|
||||
"./routes/api/joke.ts": $api_joke,
|
||||
"./routes/greet/[name].tsx": $greet_name_,
|
||||
"./routes/_layout.tsx": $_layout,
|
||||
"./routes/index.tsx": $index,
|
||||
"./routes/posts/[id].tsx": $posts_id_,
|
||||
"./routes/posts/index.tsx": $posts_index,
|
||||
},
|
||||
islands: {
|
||||
"./islands/Counter.tsx": $Counter,
|
||||
|
||||
18
frontend/routes/_layout.tsx
Normal file
18
frontend/routes/_layout.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -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);
|
||||
};
|
||||
@ -1,5 +0,0 @@
|
||||
import { PageProps } from "$fresh/server.ts";
|
||||
|
||||
export default function Greet(props: PageProps) {
|
||||
return <div>Hello {props.params.name}</div>;
|
||||
}
|
||||
@ -1,11 +1,8 @@
|
||||
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">
|
||||
<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"
|
||||
@ -13,13 +10,17 @@ export default function Home() {
|
||||
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} />
|
||||
<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>
|
||||
</body>
|
||||
);
|
||||
}
|
||||
|
||||
3
frontend/routes/posts/[id].tsx
Normal file
3
frontend/routes/posts/[id].tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export default function PostIdentifier() {
|
||||
return null;
|
||||
}
|
||||
52
frontend/routes/posts/index.tsx
Normal file
52
frontend/routes/posts/index.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -1,129 +1,3 @@
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::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;
|
||||
}
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
5
frontend/tailwind.config.ts
Normal file
5
frontend/tailwind.config.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { type Config } from "tailwindcss";
|
||||
|
||||
export default {
|
||||
content: ["{routes,islands,components}/**/*.{ts,tsx}"],
|
||||
} satisfies Config;
|
||||
Loading…
Reference in New Issue
Block a user