![\"Signature\"](\"https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/5abd08ee-bc4d-49f0-9303-3d5d75ef4359/email_signatures.png?t=1742411231\")
\n
+
- = {
+ automation: { bg: 'var(--brand-green)', text: 'var(--brand-forest)', border: 'var(--brand-purple)' },
+ accessibility: { bg: 'var(--brand-cream)', text: 'var(--brand-forest)', border: 'var(--brand-purple)' },
+ wellness: { bg: 'var(--brand-light-purple)', text: 'var(--brand-forest)', border: 'var(--brand-purple)' },
+ creativity: { bg: 'var(--brand-blue)', text: 'var(--brand-forest)', border: 'var(--brand-purple)' },
+ foundations: { bg: 'var(--brand-cream)', text: 'var(--brand-forest)', border: 'var(--brand-purple)' },
+ security: { bg: 'var(--brand-blue)', text: 'var(--brand-forest)', border: 'var(--brand-purple)' },
+ community: { bg: 'var(--brand-light-purple)', text: 'var(--brand-forest)', border: 'var(--brand-purple)' },
+ sustainability: { bg: 'var(--brand-green)', text: 'var(--brand-forest)', border: 'var(--brand-purple)' },
+}
+
+export function TagPill({ tag, className, selected = false, onClick }: TagPillProps) {
+ const key = tag.toLowerCase()
+ const style = TAG_STYLES[key] || { bg: 'var(--brand-forest)', text: 'var(--brand-cream)', border: 'var(--brand-purple)' }
+
+ const pillContent = (
+
+ {tag}
+
+ )
+
+ if (onClick) {
+ return (
+
+ )
+ }
+
+ return (
+
+ {pillContent}
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/blog/TagFilter.tsx b/src/components/blog/TagFilter.tsx
index 66e7b96..02a2f9f 100644
--- a/src/components/blog/TagFilter.tsx
+++ b/src/components/blog/TagFilter.tsx
@@ -1,4 +1,7 @@
import { BlogPost } from '@/lib/mdx'
+import { TagPill } from './Tag'
+import { useSearchParams } from 'next/navigation'
+import { cn } from '@/lib/utils'
interface TagFilterProps {
posts: BlogPost[]
@@ -7,32 +10,49 @@ interface TagFilterProps {
}
export default function TagFilter({ posts, selectedTag, onTagSelect }: TagFilterProps) {
+ const searchParams = useSearchParams()
+ const urlTag = searchParams.get('tag')
+
// Get unique tags from all posts
const allTags = Array.from(new Set(posts.flatMap(post => post.tags))).sort()
+ // If URL has a tag parameter, use that as the selected tag
+ const effectiveSelectedTag = urlTag || selectedTag
+
return (
- Loading...
}>
- Loading blog...
}>
+ - - Blog - -
- - - RSS - +
+
+
)
}
\ No newline at end of file
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 8fc5dfc..f222600 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -1,18 +1,28 @@
import { Metadata } from 'next'
-import { getAllPosts } from '@/lib/mdx'
-import BlogContent from '@/components/blog/BlogContent'
+import { allPosts } from 'contentlayer/generated'
+import { BlogContent } from '@/components/blog/BlogContent'
import { Suspense } from 'react'
+import type { BlogPost } from '@/lib/mdx'
export const metadata: Metadata = {
- title: 'Blog | The Pythoness Programmer',
- description: 'Thoughts on technology, accessibility, and the human experience.',
+ title: 'Blog | Pythoness Programmer',
+ description: 'Technical articles, coding tips, and industry insights from Pythoness Programmer.',
}
-export default async function BlogPage() {
- const posts = await getAllPosts()
+export default function BlogPage() {
+ const posts: BlogPost[] = allPosts.map(post => ({
+ slug: post.slug,
+ title: post.title,
+ date: post.date,
+ description: post.description,
+ author: post.author,
+ tags: post.tags,
+ content: post.body.code,
+ image: post.image
+ })).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
return (
-
+
-
+
+
+ Blog
+
+
+
+
+ RSS Feed
+
+
+
+
+
+
+
+
+
-
+
diff --git a/src/components/blog/PostHeader.tsx b/src/components/blog/PostHeader.tsx
index 9ae1e38..10ac412 100644
--- a/src/components/blog/PostHeader.tsx
+++ b/src/components/blog/PostHeader.tsx
@@ -1,6 +1,6 @@
-import Link from 'next/link'
import { BlogPost } from '@/lib/mdx'
import Image from 'next/image'
+import { TagPill } from './Tag'
interface PostHeaderProps {
post: BlogPost
@@ -24,14 +24,7 @@ export default function PostHeader({ post }: PostHeaderProps) {
{filteredPosts.map((post) => (
-
+
))}
+ + {post.title} + +
+
+
+ â˘
+ {post.author}
+
+ {post.description}
+
+ {post.tags.map((tag) => (
+
+
{post.tags.map((tag) => (
-
+
{post.tags.map((tag) => (
-
- {tag}
-
+
{post.image && (
diff --git a/src/components/blog/PostMetadata.tsx b/src/components/blog/PostMetadata.tsx
new file mode 100644
index 0000000..1fe878e
--- /dev/null
+++ b/src/components/blog/PostMetadata.tsx
@@ -0,0 +1,49 @@
+import { TagList } from './TagList'
+import Image from 'next/image'
+
+type PostMetadataProps = {
+ title: string
+ date: string
+ description: string
+ author: string
+ tags: string[]
+ image?: string
+}
+
+export function PostMetadata({
+ title,
+ date,
+ description,
+ author,
+ tags,
+ image,
+}: PostMetadataProps) {
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/blog/Tag.tsx b/src/components/blog/Tag.tsx
new file mode 100644
index 0000000..7157bc6
--- /dev/null
+++ b/src/components/blog/Tag.tsx
@@ -0,0 +1,72 @@
+import { cn } from '@/lib/utils'
+import Link from 'next/link'
+
+export type TagPillProps = {
+ tag: string
+ className?: string
+ selected?: boolean
+ onClick?: (tag: string) => void
+}
+
+// Brand-aligned color mapping with border (contrast) color using CSS variables
+const TAG_STYLES: Record{title}
+
+
+ â˘
+ {author}
+
+ {image && (
+
+
+ )}
+ {description}
+
{allTags.map((tag) => (
))}
diff --git a/src/components/blog/TagList.tsx b/src/components/blog/TagList.tsx
new file mode 100644
index 0000000..0e8fd71
--- /dev/null
+++ b/src/components/blog/TagList.tsx
@@ -0,0 +1,16 @@
+import { TagPill } from './Tag'
+
+type TagListProps = {
+ tags: string[]
+ className?: string
+}
+
+export function TagList({ tags, className }: TagListProps) {
+ return (
+
+ {tags.map((tag) => (
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/mdx-content.tsx b/src/components/mdx-content.tsx
new file mode 100644
index 0000000..2e7e395
--- /dev/null
+++ b/src/components/mdx-content.tsx
@@ -0,0 +1,10 @@
+import { useMDXComponent } from 'next-contentlayer/hooks'
+
+interface MDXContentProps {
+ code: string
+}
+
+export function MDXContent({ code }: MDXContentProps) {
+ const Component = useMDXComponent(code)
+ return