Posts
This commit is contained in:
@ -1,6 +1,7 @@
|
||||
// routes/_layout.tsx
|
||||
import { PageProps } from "$fresh/server.ts";
|
||||
import { Head } from "$fresh/runtime.ts";
|
||||
import { LuBook, LuBriefcase, LuHouse } from "@preact-icons/lu";
|
||||
|
||||
export default function Layout({ Component, url }: PageProps) {
|
||||
const currentPath = url.pathname;
|
||||
@ -11,32 +12,19 @@ export default function Layout({ Component, url }: PageProps) {
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>Fresh App</title>
|
||||
<title>Atridad Lahiji</title>
|
||||
</Head>
|
||||
<body class="flex flex-col min-h-screen">
|
||||
<main class="flex-grow flex flex-col gap-2 items-center justify-center">
|
||||
<main class="flex-grow flex flex-col gap-4 items-center justify-center">
|
||||
<Component />
|
||||
</main>
|
||||
|
||||
<div class="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-20">
|
||||
<ul class="menu menu-horizontal bg-base-200 rounded-box p-2 shadow-lg">
|
||||
<ul class="menu menu-horizontal bg-base-200 rounded-box p-2 shadow-lg gap-2">
|
||||
<li>
|
||||
<a href="/" class={currentPath === "/" ? "menu-active" : ""}>
|
||||
<div class="tooltip" data-tip="Home">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
|
||||
/>
|
||||
</svg>
|
||||
<LuHouse class="text-xl" />
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
@ -46,20 +34,7 @@ export default function Layout({ Component, url }: PageProps) {
|
||||
class={currentPath.startsWith("/posts") ? "menu-active" : ""}
|
||||
>
|
||||
<div class="tooltip" data-tip="Posts">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v12a2 2 0 002 2zm0 0l1.406 1.406A2 2 0 0122 22a2 2 0 01-2-2v0zm-9.5-8h4m-2 2v-4"
|
||||
/>
|
||||
</svg>
|
||||
<LuBook class="text-xl" />
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
@ -69,20 +44,7 @@ export default function Layout({ Component, url }: PageProps) {
|
||||
class={currentPath.startsWith("/projects") ? "menu-active" : ""}
|
||||
>
|
||||
<div class="tooltip" data-tip="Projects">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.206.129.4.259.598.37"
|
||||
/>
|
||||
</svg>
|
||||
<LuBriefcase class="text-xl" />
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import SocialLinks from "../components/SocialLinks.tsx";
|
||||
import TechLinks from "../components/TechLinks.tsx";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
@ -14,7 +15,13 @@ export default function Home() {
|
||||
Atridad Lahiji
|
||||
</h1>
|
||||
|
||||
<h2 class="text-2xl font-bold">Places I Exist:</h2>
|
||||
|
||||
<SocialLinks />
|
||||
|
||||
<h2 class="text-2xl font-bold">Stuff I Use:</h2>
|
||||
|
||||
<TechLinks />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
83
routes/post/[slug].tsx
Normal file
83
routes/post/[slug].tsx
Normal file
@ -0,0 +1,83 @@
|
||||
import { CSS, render } from "@deno/gfm";
|
||||
import { Head } from "$fresh/runtime.ts";
|
||||
import { Handlers, PageProps } from "$fresh/server.ts";
|
||||
|
||||
import { getPost, Post } from "../../lib/posts.ts";
|
||||
import { LuClock } from "@preact-icons/lu";
|
||||
|
||||
export const handler: Handlers<Post> = {
|
||||
async GET(_req, ctx) {
|
||||
try {
|
||||
const post = await getPost(ctx.params.slug);
|
||||
return post.publishedAt ? ctx.render(post) : ctx.renderNotFound();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return ctx.renderNotFound();
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default function PostPage(props: PageProps<Post>) {
|
||||
const post = props.data;
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<style dangerouslySetInnerHTML={{ __html: CSS }} />
|
||||
</Head>
|
||||
<div class="min-h-screen p-4 md:p-8">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="p-4 md:p-8">
|
||||
{/* Header section */}
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-primary mb-6">
|
||||
{post.title}
|
||||
</h1>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-4 mb-6">
|
||||
{/* Date with clock icon */}
|
||||
<div class="flex items-center flex-row gap-2 text-base-content opacity-75">
|
||||
<LuClock />
|
||||
<time>
|
||||
{post.publishedAt!.toLocaleDateString("en-us", {
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
})}
|
||||
</time>
|
||||
</div>
|
||||
|
||||
{/* Back button */}
|
||||
<a href="/posts" class="btn btn-outline btn-primary btn-sm">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 mr-1"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M11 17l-5-5m0 0l5-5m-5 5h12"
|
||||
/>
|
||||
</svg>
|
||||
Back
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Divider line */}
|
||||
<div class="divider"></div>
|
||||
|
||||
{/* Content section */}
|
||||
<div
|
||||
class="max-w-none prose"
|
||||
data-color-mode="dark"
|
||||
data-dark-theme="dark"
|
||||
dangerouslySetInnerHTML={{ __html: render(post.content) }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,6 +1,24 @@
|
||||
// import { useSignal } from "@preact/signals";
|
||||
// import Counter from "../islands/Counter.tsx";
|
||||
import { Handlers, PageProps } from "$fresh/server.ts";
|
||||
import { getPosts, Post } from "../lib/posts.ts";
|
||||
import PostCard from "../components/PostCard.tsx";
|
||||
|
||||
export default function Home() {
|
||||
return <h1>Posts Page</h1>;
|
||||
export const handler: Handlers<Post[]> = {
|
||||
async GET(_req, ctx) {
|
||||
const posts = await getPosts();
|
||||
return ctx.render(posts);
|
||||
},
|
||||
};
|
||||
|
||||
export default function PostsPage(props: PageProps<Post[]>) {
|
||||
const posts = props.data;
|
||||
return (
|
||||
<div class="min-h-screen p-4 sm:p-8">
|
||||
<h1 class="text-3xl sm:text-4xl font-bold text-accent mb-6 sm:mb-8 text-center">
|
||||
Posts
|
||||
</h1>
|
||||
<div class="flex flex-row flex-wrap justify-center gap-4 sm:gap-6 max-w-6xl mx-auto">
|
||||
{posts.map((post) => <PostCard key={post.slug} post={post} />)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
// import { useSignal } from "@preact/signals";
|
||||
// import Counter from "../islands/Counter.tsx";
|
||||
|
||||
export default function Home() {
|
||||
export default function Projects() {
|
||||
return <h1>Projects Page</h1>;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user