diff --git a/astro.config.ts b/astro.config.ts index c15ee13..83134be 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -35,8 +35,8 @@ export default defineConfig({ rehypePrettyCode, { theme: { - light: 'vitesse-light', - dark: 'vitesse-dark', + light: 'github-light-high-contrast', + dark: 'github-dark-high-contrast', }, transformers: [ transformerNotationDiff(), diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro index 540d084..593054d 100644 --- a/src/components/BlogCard.astro +++ b/src/components/BlogCard.astro @@ -16,7 +16,7 @@ const { entry } = Astro.props as { const formattedDate = formatDate(entry.data.date) const readTime = readingTime(entry.body) -const authors = await parseAuthors(entry.data.author ?? []) +const authors = await parseAuthors(entry.data.authors ?? []) ---
@@ -46,7 +46,7 @@ const { prevPost, nextPost } = Astro.props
diff --git a/src/components/SocialIcons.astro b/src/components/SocialIcons.astro index 69d84bb..0478796 100644 --- a/src/components/SocialIcons.astro +++ b/src/components/SocialIcons.astro @@ -1,37 +1,59 @@ --- import { Twitter, Github, Linkedin, Mail, Rss } from 'lucide-react' import { SITE } from '@consts' +import { buttonVariants } from '@/components/ui/button' +import Link from '@components/Link.astro' --- diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx index 91b7046..9f9afa2 100644 --- a/src/components/ui/badge.tsx +++ b/src/components/ui/badge.tsx @@ -31,7 +31,7 @@ export interface BadgeProps function Badge({ className, variant, ...props }: BadgeProps) { return (
- + {props.children}
) diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx index 3acf258..8ca168b 100644 --- a/src/components/ui/breadcrumb.tsx +++ b/src/components/ui/breadcrumb.tsx @@ -98,7 +98,7 @@ const BreadcrumbEllipsis = ({ className={cn('flex h-9 w-9 items-center justify-center', className)} {...props} > - + More ) diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx index 42fa28e..f45e187 100644 --- a/src/components/ui/dropdown-menu.tsx +++ b/src/components/ui/dropdown-menu.tsx @@ -36,7 +36,7 @@ const DropdownMenuSubTrigger = React.forwardRef< {...props} > {children} - + )) DropdownMenuSubTrigger.displayName = @@ -110,7 +110,7 @@ const DropdownMenuCheckboxItem = React.forwardRef< > - + {children} @@ -133,7 +133,7 @@ const DropdownMenuRadioItem = React.forwardRef< > - + {children} diff --git a/src/components/ui/mode-toggle.tsx b/src/components/ui/mode-toggle.tsx index 49f10f7..4efbe28 100644 --- a/src/components/ui/mode-toggle.tsx +++ b/src/components/ui/mode-toggle.tsx @@ -1,4 +1,4 @@ -import { Moon, Sun } from 'lucide-react' +import { Laptop, Moon, Sun } from 'lucide-react' import * as React from 'react' import { Button } from '@/components/ui/button' @@ -30,21 +30,29 @@ export function ModeToggle() { return ( - setThemeState('theme-light')}> - Light + + Light setThemeState('dark')}> - Dark + + Dark setThemeState('system')}> - System + + System diff --git a/src/content/blog/2023.mdx b/src/content/blog/2023.mdx index 88191fe..eda353b 100644 --- a/src/content/blog/2023.mdx +++ b/src/content/blog/2023.mdx @@ -4,7 +4,7 @@ description: 'This a dummy post written in the year 2023.' date: '2023-01-01' tags: ['dummy', 'placeholder'] image: '/1200x630.png' -author: ['enscribe'] +authors: ['enscribe'] --- This is a dummy post written in the year 2023. diff --git a/src/content/blog/2024.mdx b/src/content/blog/2024.mdx index ffc8787..2b78ab0 100644 --- a/src/content/blog/2024.mdx +++ b/src/content/blog/2024.mdx @@ -1,10 +1,10 @@ --- title: '2024 Post' -description: 'This a dummy post written in the year 2024.' +description: 'This a dummy post written in the year 2024 (with multiple authors).' date: '2024-01-01' tags: ['dummy', 'placeholder'] image: '/1200x630.png' -author: ['enscribe'] +authors: ['enscribe', 'jktrn'] --- This is a dummy post written in the year 2024. diff --git a/src/content/blog/the-state-of-static-blogs.mdx b/src/content/blog/the-state-of-static-blogs.mdx index ca9108d..31ac3b1 100644 --- a/src/content/blog/the-state-of-static-blogs.mdx +++ b/src/content/blog/the-state-of-static-blogs.mdx @@ -4,7 +4,7 @@ description: 'There should not be a single reason why you would need a command p date: '2024-07-25' tags: ['webdev', 'opinion'] image: '/1200x630.png' -author: ['enscribe', 'jktrn'] +authors: ['enscribe'] --- ## Introduction @@ -15,7 +15,7 @@ I have a lot of opinions about what makes a great blogging template. As a cumula astro-erudite is written in Astro, a framework hyperoptimized for static content such as blogs. Aesthetically, it is also designed to be as boring as possible while still maintaining maximum functionality, as to allow for the freedom of the developer (or the designer they hire) to make their blog uniquely their own. Within the codebase of this template I've included many nuances that, in my opinion (and there will be many, many opinions here), make the developer experience significantly more pleasant. I've also _excluded_ many features that, frankly, you don't need. -### Welcoming some DX features +## Welcoming some DX features This is a non-exhaustive list of features I believe are essential for a frictionless developer experience: @@ -48,7 +48,7 @@ This is a non-exhaustive list of features I believe are essential for a friction - The `cn(){:ts}` function is a utility function which combines [clsx](https://www.npmjs.com/package/clsx) and [tailwind-merge](https://www.npmjs.com/package/tailwind-merge), two packages which allow painless conditional class addition and concatenation: - ```tsx + ```tsx title="src/lib/utils.ts" caption="A utility function for class name concatenation" showLineNumbers import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' @@ -59,7 +59,7 @@ This is a non-exhaustive list of features I believe are essential for a friction This needs to be in every single template. This is an example of it being used in my `{:tsx}` component: - ```astro showLineNumbers title="src/components/Link.astro" caption="A custom Link component with tailwind-merge and clsx" {10-14} + ```astro showLineNumbers title="src/components/Link.astro" caption="A custom Link component with tailwind-merge and clsx" {17-21} --- import { cn } from '@lib/utils' @@ -95,7 +95,7 @@ This is a non-exhaustive list of features I believe are essential for a friction Awesome! -### Welcoming some UX features +## Welcoming some UX features Within the blog itself (as in the layout, appearance, and navigation) are features that I believe are essential for a great user experience: @@ -103,9 +103,11 @@ Within the blog itself (as in the layout, appearance, and navigation) are featur - Theme selectors should be self-explanatory. I've added one on the top right of the header, which is also `sticky` and not `absolute` such that it doesn't ignore the document flow (and thus you won't have to add `mt-20` to the top of every single page). - The table of contents of a post shouldn't be reduced to a `
{:html}` at the start of a blog post on desktop. You'd need to go to the top of the page to navigate through items. I've added a sticky `TableOfContents` component which always hangs out around the unused left side margin of a blog post. I'll still use a collapsible `
{:html}` element for the table of contents on mobile though since obviously a table of contents on the side is unfeasible for small screens. - Every page, except the homepage, will have a `{:tsx}` component which shows you your current location in the site hierarchy. I don't see these often in blog templates even though they are so amazing for both discoverability (SEO and crawling) and user experience (the user always knows how "deep" they are in the site). -- You can specify a post author via frontmatter. If this post author's slug is found within the `Authors` collection, then it will render particular info from that author's frontmatter file, `[author-name].md` (e.g. avatar, link to profile). +- You can specify multiple post authors via frontmatter. If this post author's slug is found within the `Authors` collection, then it will render particular info from that author's frontmatter file, `[author-name].md` (e.g. avatar, link to profile). For example, the previous post (2024 Post) has two authors: "enscribe" and "jktrn", where "enscribe" is the only author with a custom avatar since "jktrn" is unregistered. + - Each author will have their own page, which lists all of their posts. If you're the only author throughout the entire blog then you can simply disregard all aspects regarding both inserting authors and the `Authors` collection. +- Each tag will also have their own page, which lists all of the posts under that tag! -### Foregoing some slop +## Foregoing some slop - Goodbye, [ESLint](https://eslint.org/)! There have been so many occasions where I've had to deal with blogging templates with in-built pre-commit hooks which enforce contrived and arbitrary linting rules that, frankly, I couldn't be bothered with. Obviously, linting is awesome for ensuring consistency and best practice, but that's with shared and large codebases. You're dealing with, at most, your mediocre MDX blog posts and some interior fetching. It's just not worth the hypertension. diff --git a/src/content/config.ts b/src/content/config.ts index 662ec67..75b39b5 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -9,7 +9,7 @@ const blog = defineCollection({ draft: z.boolean().optional(), image: z.string().optional(), tags: z.array(z.string()).optional(), - author: z.array(z.string()).optional(), + authors: z.array(z.string()).optional(), }), }) diff --git a/src/pages/404.astro b/src/pages/404.astro index 4c29591..903ab60 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -22,7 +22,7 @@ import { cn } from '@lib/utils' @@ -37,7 +37,7 @@ import { cn } from '@lib/utils' >

404: Page not found

-

+

Oops! The page you're looking for doesn't exist.

diff --git a/src/pages/about.astro b/src/pages/about.astro index 9550071..12ef8f2 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -20,7 +20,7 @@ import { HomeIcon } from 'lucide-react' @@ -33,7 +33,7 @@ import { HomeIcon } from 'lucide-react'

Some more about us

-

+

{SITE.TITLE} is an opinionated, no-frills static blogging template built with Astro.

diff --git a/src/pages/authors/[...slug].astro b/src/pages/authors/[...slug].astro index d8da1df..bf114c6 100644 --- a/src/pages/authors/[...slug].astro +++ b/src/pages/authors/[...slug].astro @@ -32,12 +32,7 @@ const { author } = Astro.props const allPosts = await getCollection('blog') const authorPosts = allPosts .filter((post) => { - if (typeof post.data.author === 'string') { - return post.data.author === author.data.name && !post.data.draft - } else if (post.data.author && 'slug' in post.data.author) { - return post.data.author.slug === author.slug && !post.data.draft - } - return false + return post.data.authors && post.data.authors.includes(author.slug) }) .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf()) --- @@ -51,7 +46,7 @@ const authorPosts = allPosts diff --git a/src/pages/authors/index.astro b/src/pages/authors/index.astro index 8849758..4864143 100644 --- a/src/pages/authors/index.astro +++ b/src/pages/authors/index.astro @@ -22,7 +22,7 @@ const authors = await getCollection('authors') diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro index dcdb0a3..aa38b3e 100644 --- a/src/pages/blog/[...slug].astro +++ b/src/pages/blog/[...slug].astro @@ -1,5 +1,5 @@ --- -import { type CollectionEntry, getCollection, getEntry } from 'astro:content' +import { type CollectionEntry, getCollection } from 'astro:content' import Layout from '@layouts/Layout.astro' import Container from '@components/Container.astro' import { formatDate, readingTime } from '@lib/utils' @@ -59,7 +59,7 @@ const prevPost = getPrevPost(currentPostSlug) const post = Astro.props const { Content, headings } = await post.render() -const authors = await parseAuthors(post.data.author ?? []) +const authors = await parseAuthors(post.data.authors ?? []) --- @@ -68,7 +68,7 @@ const authors = await parseAuthors(post.data.author ?? []) @@ -147,7 +147,7 @@ const authors = await parseAuthors(post.data.author ?? []) href={`/tags/${tag}`} class={badgeVariants({ variant: 'secondary' })} > - + {tag} )) @@ -162,7 +162,7 @@ const authors = await parseAuthors(post.data.author ?? []) {headings.length > 0 && } -
+
@@ -185,13 +185,21 @@ const authors = await parseAuthors(post.data.author ?? [])