atridad/atridotdad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Posts working

Browse Source
This commit is contained in:
Atridad Lahiji
2025-05-18 11:30:19 -06:00
parent 6ceb4918f7
commit 066c1b4115
11 changed files with 832 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
astro.config.mjs
View File

@ -9,15 +9,19 @@ import node from '@astrojs/node';
import icon from 'astro-icon'; import icon from 'astro-icon';
import mdx from '@astrojs/mdx';
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
vite: { vite: {
plugins: [tailwindcss()] plugins: [tailwindcss()]
}, },
integrations: [preact(), icon()], integrations: [preact(), icon(), mdx()],
adapter: node({ adapter: node({
mode: 'standalone' mode: 'standalone'
}) }),
}); });

2
package.json
View File

@ -9,9 +9,11 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astrojs/mdx": "^4.2.6",
"@astrojs/node": "^9.2.1", "@astrojs/node": "^9.2.1",
"@astrojs/preact": "^4.0.11", "@astrojs/preact": "^4.0.11",
"@preact/signals": "^2.0.4", "@preact/signals": "^2.0.4",
"@tailwindcss/typography": "^0.5.16",
"@tailwindcss/vite": "^4.1.7", "@tailwindcss/vite": "^4.1.7",
"astro": "^5.7.13", "astro": "^5.7.13",
"astro-icon": "^1.1.5", "astro-icon": "^1.1.5",

732
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

48
src/components/PostCard.astro Normal file
View File

@ -0,0 +1,48 @@
---
import type { CollectionEntry } from 'astro:content';
export interface Props {
post: CollectionEntry<'blog'>;
}
const { post } = Astro.props;
const { title, description: blurb, pubDate } = post.data;
const { slug } = post;
---
<div class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink">
<div class="card-body p-4 sm:p-6">
<h2 class="card-title text-base-100 justify-center text-center break-words h-14 min-h-14 max-h-14 overflow-hidden">
{title}
</h2>
<p class="text-center text-base-100 break-words h-20 min-h-20 max-h-20 overflow-hidden text-ellipsis">
{blurb || 'No description available.'}
</p>
<div class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm sm:text-base">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>
{new Date(pubDate).toLocaleDateString("en-us", {
month: "long",
day: "numeric",
year: "numeric",
})}
</span>
</div>
<div class="card-actions justify-end mt-4">
<a
href={`/blog/${slug}`}
class="btn btn-circle btn-sm sm:btn-md btn-primary text-accent"
aria-label={`Read more about ${title}`}
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-lg">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
</svg>
</a>
</div>
</div>
</div>

12
src/content/blog/welcome.md Normal file
View File

@ -0,0 +1,12 @@
---
title: "Welcome"
description: "Welcome to my website! :)"
pubDate: "2024-10-20"
tags: ["meta"]
---
Welcome to my site! This is a place for me to share my thoughts and updates on
my projects. I hope you find something interesting here.
Feel free to reach out if you have any questions or comments. I'd love to hear
from you! I can be reached by email at [me@atri.dad](mailto:me@atri.dad).

16
src/content/config.ts Normal file
View File

@ -0,0 +1,16 @@
import { defineCollection, z } from 'astro:content';
const blogCollection = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
description: z.string(),
pubDate: z.coerce.date(),
updatedDate: z.coerce.date().optional(),
tags: z.array(z.string()).default([]),
}),
});
export const collections = {
'blog': blogCollection,
};

7
src/layouts/Layout.astro
View File

@ -1,6 +1,7 @@
--- ---
import NavigationBar from "../components/NavigationBar"; import NavigationBar from "../components/NavigationBar";
const currentPath = Astro.url.pathname; const currentPath = Astro.url.pathname;
import '../styles/global.css';
--- ---
<!doctype html> <!doctype html>
@ -12,15 +13,11 @@ const currentPath = Astro.url.pathname;
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>Atridad Lahiji</title> <title>Atridad Lahiji</title>
</head> </head>
<body>
</body>
<body class="flex flex-col min-h-screen"> <body class="flex flex-col min-h-screen">
<main class="flex-grow flex flex-col gap-4 items-center justify-center"> <main class="flex-grow flex flex-col gap-4 items-center justify-center">
<slot /> <slot />
</main> </main>
<NavigationBar currentPath={currentPath} /> <NavigationBar currentPath={currentPath} />
<!-- <ScrollUpButton /> --> <!-- <ScrollUpButton /> -->
</body> </body>
</html> </html>

75
src/pages/blog/[...slug].astro Normal file
View File

@ -0,0 +1,75 @@
---
import { getCollection, type CollectionEntry } from 'astro:content';
import Layout from '../../layouts/Layout.astro';
export async function getStaticPaths() {
const posts = await getCollection('blog');
return posts.map((post: CollectionEntry<'blog'>) => ({
params: { slug: post.slug },
props: { post },
}));
}
const { post }: { post: CollectionEntry<'blog'> } = Astro.props;
const { Content } = await post.render();
---
<Layout>
<div class="min-h-screen p-4 md:p-8">
<div class="max-w-3xl mx-auto">
<div class="p-4 md:p-8">
<h1 class="text-4xl md:text-5xl font-bold text-primary mb-6">
{post.data.title}
</h1>
<div class="flex flex-wrap items-center gap-4 mb-6">
<div class="flex items-center flex-row gap-2 text-base-content opacity-75">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<time datetime={post.data.pubDate.toISOString()}>
{new Date(post.data.pubDate).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
stroke-linecap="round"
stroke-linejoin="round"
stroke-width={2}
d="M11 17l-5-5m0 0l5-5m-5 5h12"
/>
</svg>
Back
</a>
</div>
{post.data.tags && post.data.tags.length > 0 && (
<div class="flex gap-2 flex-wrap mb-6">
{post.data.tags.map((tag: string) => (
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
{tag}
</span>
))}
</div>
)}
<article class="prose prose-lg dark:prose-invert max-w-none mt-6">
<Content />
</article>
</div>
</div>
</div>
</Layout>

1
src/pages/index.astro
View File

@ -2,7 +2,6 @@
import SocialLinks from '../components/SocialLinks.astro'; import SocialLinks from '../components/SocialLinks.astro';
import TechLinks from '../components/TechLinks.astro'; import TechLinks from '../components/TechLinks.astro';
import Layout from '../layouts/Layout.astro'; import Layout from '../layouts/Layout.astro';
import '../styles/global.css';
--- ---
<Layout> <Layout>

30
src/pages/posts.astro Normal file
View File

@ -0,0 +1,30 @@
---
import Layout from "../layouts/Layout.astro";
import { getCollection, type CollectionEntry } from "astro:content";
import PostCard from "../components/PostCard.astro";
// Get all blog posts from the content collection
const posts = await getCollection("blog");
// Sort posts by date, newest first
const sortedPosts = posts.sort(
(a: CollectionEntry<"blog">, b: CollectionEntry<"blog">) => new Date(b.data.pubDate).valueOf() - new Date(a.data.pubDate).valueOf()
);
---
<Layout>
<div class="min-h-screen p-4 sm:p-8">
<h1 class="text-3xl sm:text-4xl font-bold text-primary 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">
{sortedPosts.map((post: CollectionEntry<"blog">) => (
<PostCard post={post} />
))}
</div>
{sortedPosts.length === 0 && (
<p class="text-center text-gray-500 mt-12">No posts available yet. Check back soon!</p>
)}
</div>
</Layout>

1
src/styles/global.css
View File

@ -1,5 +1,6 @@
@import "tailwindcss"; @import "tailwindcss";
@plugin "daisyui"; @plugin "daisyui";
@plugin "@tailwindcss/typography";
@plugin "daisyui/theme" { @plugin "daisyui/theme" {
name: "chaoticbisexual"; name: "chaoticbisexual";
default: true; default: true;