diff --git a/README.md b/README.md index 4306b1b..190fbae 100644 --- a/README.md +++ b/README.md @@ -20,18 +20,19 @@ astro-erudite is an opinionated, no-frills static blogging template built with [ Below are some fantastic examples of websites based on this template. If you wish to add your site to this list, open a pull request! -| Site | Author | Description/Features | Source | -|------|--------|----------------------|--------| -| [enscribe.dev](https://enscribe.dev) | [@jktrn](https://github.com/jktrn) | Heavily modified bento-style homepage with client interactivity, with custom MDX components! | [→](https://github.com/jktrn/enscribe.dev) | -| [emile.sh](https://emile.sh) | [@echoghi](https://github.com/echoghi) | A minimalist personal blog using the [flexoki](https://stephango.com/flexoki) theme | [→](https://github.com/echoghi/v5) | -| [decentparadox.me](https://decentparadox.me) | [@decentparadox](https://github.com/decentparadox) | A heavily customized personal portfolio with a sci-fi theme! | [→](https://github.com/decentparadox/decentparadox.me) | -| [flocto.github.io](https://flocto.github.io/) | [@flocto](https://github.com/flocto) | A slightly modified personal blog | [→](https://github.com/flocto/flocto.github.io) | -[dumbprism.me](https://www.dumbprism.me/) | [@dumbprism](https://github.com/dumbprism) | A customized portfolio inspired by enscribe's bento grid style adding my gist of UI | [→](https://github.com/dumbprism/dumbprism-portfolio) | +| Site | Author | Description/Features | Source | +| --------------------------------------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------ | +| [enscribe.dev](https://enscribe.dev) | [@jktrn](https://github.com/jktrn) | Heavily modified bento-style homepage with client interactivity, with custom MDX components! | [→](https://github.com/jktrn/enscribe.dev) | +| [emile.sh](https://emile.sh) | [@echoghi](https://github.com/echoghi) | A minimalist personal blog using the [flexoki](https://stephango.com/flexoki) theme | [→](https://github.com/echoghi/v5) | +| [decentparadox.me](https://decentparadox.me) | [@decentparadox](https://github.com/decentparadox) | A heavily customized personal portfolio with a sci-fi theme! | [→](https://github.com/decentparadox/decentparadox.me) | +| [flocto.github.io](https://flocto.github.io/) | [@flocto](https://github.com/flocto) | A slightly modified personal blog | [→](https://github.com/flocto/flocto.github.io) | +| [dumbprism.me](https://www.dumbprism.me/) | [@dumbprism](https://github.com/dumbprism) | A customized portfolio inspired by enscribe's bento grid style adding my gist of UI | [→](https://github.com/dumbprism/dumbprism-portfolio) | + ## Features - [Astro](https://astro.build/)’s [Islands](https://docs.astro.build/en/concepts/islands/) architecture for partial/selective hydration and client-side interactivity while maintaining a fast-to-render static site. - [shadcn/ui](https://ui.shadcn.com/)’s [Tailwind](https://tailwindcss.com/) color convention for automatic styling across both light and dark themes. Includes accessible, theme-aware UI components for navigation, buttons, etc. -- [rehype-pretty-code](https://rehype-pretty.pages.dev/) with [Shiki](https://github.com/shikijs/shiki) for advanced code block styling, highlighting, and code block titles/captions. +- [Expressive Code](https://expressive-code.com/) for advanced code block styling, highlighting, and code block titles/captions. - Blog post authoring using [MDX](https://mdxjs.com/) for component-style content, alongside $\LaTeX$ rendering using [KaTeX](https://katex.org/). - Astro [View Transitions](https://docs.astro.build/en/guides/view-transitions/) in SPA mode for smooth, opt-in animations during route switching. - SEO optimization with fine-grained control over metadata and [Open Graph](https://ogp.me/) tags for each post. @@ -43,15 +44,15 @@ Below are some fantastic examples of websites based on this template. If you wis This is a list of the various technologies used to build this template: -| Category | Technology Name | -| ------------------- | -------------------------------------------------------------------------------------------------- | -| Framework | [Astro](https://astro.build/) | -| Styling | [Tailwind](https://tailwindcss.com) | -| Components | [shadcn/ui](https://ui.shadcn.com/) | -| Content | [MDX](https://mdxjs.com/) | -| Syntax Highlighting | [Shiki](https://github.com/shikijs/shiki) + [rehype-pretty-code](https://rehype-pretty.pages.dev/) | -| Graphics | [Figma](https://www.figma.com/) | -| Deployment | [Vercel](https://vercel.com) | +| Category | Technology Name | +| ---------- | ------------------------------------------------------------------------------------------ | +| Framework | [Astro](https://astro.build/) | +| Styling | [Tailwind](https://tailwindcss.com) | +| Components | [shadcn/ui](https://ui.shadcn.com/) | +| Content | [MDX](https://mdxjs.com/) | +| Codeblocks | [Expressive Code](https://expressive-code.com/), [Shiki](https://github.com/shikijs/shiki) | +| Graphics | [Figma](https://www.figma.com/) | +| Deployment | [Vercel](https://vercel.com) | ## Getting Started @@ -122,29 +123,24 @@ export const SOCIAL_LINKS: Link[] = [ Colors are defined in `src/styles/global.css` in [HSL format](https://en.wikipedia.org/wiki/HSL_and_HSV), using the [shadcn/ui](https://ui.shadcn.com/) convention: ```css -@layer base { - :root { - --background: 0 0% 100%; - --foreground: 0 0% 3.9%; - --primary: 0 0% 9%; - --primary-foreground: 0 0% 98%; - --secondary: 0 0% 80.1%; - --secondary-foreground: 0 0% 9%; - --muted: 0 0% 80.1%; - --muted-foreground: 0 0% 45.1%; - --accent: 0 0% 80.1%; - --accent-foreground: 0 0% 9%; - --additive: 112 50% 36%; /* Unique to astro-erudite */ - --additive-foreground: 0 0% 98%; /* Unique to astro-erudite */ - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; - --border: 0 0% 89.8%; - --ring: 0 0% 3.9%; - } +:root { + --background: hsl(0 0% 100%); + --foreground: hsl(0 0% 3.9%); + --primary: hsl(0 0% 9%); + --primary-foreground: hsl(0 0% 98%); + --secondary: hsl(0 0% 80.1%); + --secondary-foreground: hsl(0 0% 9%); + --muted: hsl(0 0% 80.1%); + --muted-foreground: hsl(0 0% 45.1%); + --accent: hsl(0 0% 80.1%); + --accent-foreground: hsl(0 0% 9%); + --destructive: hsl(0 84.2% 60.2%); + --destructive-foreground: hsl(0 0% 98%); + --border: hsl(0 0% 89.8%); + --ring: hsl(0 0% 3.9%); +} - .dark { - /* ... */ - } +.dark { /* ... */ } ``` @@ -169,15 +165,15 @@ draft: false The blog post schema is defined as follows: -| Field | Type (Zod) | Requirements | Required | -| ------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| `title` | `string` | Must be ≤60 characters. | Yes | -| `description` | `string` | Must be ≤155 characters. | Yes | -| `date` | `coerce.date()` | Must be in `YYYY-MM-DD` format. | Yes | -| `image` | `image()` | Must be exactly 1200px × 630px. | Optional | -| `tags` | `string[]` | Preferably use kebab-case for these. | Optional | +| Field | Type (Zod) | Requirements | Required | +| ------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| `title` | `string` | Must be ≤60 characters. | Yes | +| `description` | `string` | Must be ≤155 characters. | Yes | +| `date` | `coerce.date()` | Must be in `YYYY-MM-DD` format. | Yes | +| `image` | `image()` | Should be exactly 1200px × 630px. | Optional | +| `tags` | `string[]` | Preferably use kebab-case for these. | Optional | | `authors` | `string[]` | If the author has a profile, use the id associated with their Markdown file in `src/content/authors/` (e.g. if their file is named `jane-doe.md`, use `jane-doe` in the array). | Optional | -| `draft` | `boolean` | Defaults to `false` if not provided. | Optional | +| `draft` | `boolean` | Defaults to `false` if not provided. | Optional | ### Authors @@ -230,13 +226,13 @@ link: 'https://example.com' The project schema is defined as follows: -| Field | Type (Zod) | Requirements | Required | -| ------------- | -------------- | ------------------------------------- | -------- | -| `name` | `string` | n/a | Yes | -| `description` | `string` | n/a | Yes | -| `tags` | `string[]` | n/a | Yes | -| `image` | `image()` | Must be exactly 1200px × 630px. | Yes | -| `link` | `string.url()` | Must be a valid URL. | Yes | +| Field | Type (Zod) | Requirements | Required | +| ------------- | -------------- | --------------------------------------- | -------- | +| `name` | `string` | n/a | Yes | +| `description` | `string` | n/a | Yes | +| `tags` | `string[]` | n/a | Yes | +| `image` | `image()` | Should be exactly 1200px × 630px. | Yes | +| `link` | `string.url()` | Must be a valid URL. | Yes | ## License diff --git a/src/components/AuthorCard.astro b/src/components/AuthorCard.astro index 8de367b..010bf10 100644 --- a/src/components/AuthorCard.astro +++ b/src/components/AuthorCard.astro @@ -33,7 +33,7 @@ const socialLinks: SocialLink[] = [ ---
@@ -58,11 +58,11 @@ const socialLinks: SocialLink[] = [

{name}

{ pronouns && ( - ({pronouns}) + ({pronouns}) ) }
-

{bio}

+

{bio}

diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro index 069d0db..dfd0754 100644 --- a/src/components/BlogCard.astro +++ b/src/components/BlogCard.astro @@ -22,7 +22,7 @@ const authors = await parseAuthors(entry.data.authors ?? []) ---
{entry.data.title} -

+

{entry.data.description}

{ authors.length > 0 && ( diff --git a/src/components/Container.astro b/src/components/Container.astro index e65792c..fe3d4e3 100644 --- a/src/components/Container.astro +++ b/src/components/Container.astro @@ -8,4 +8,6 @@ interface Props { const { class: className } = Astro.props --- -
+
+ +
diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 7ee69c0..345a103 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -12,11 +12,11 @@ import SocialIcons from './SocialIcons.astro' class="flex flex-col items-center justify-center gap-y-2 sm:flex-row sm:justify-between" >
- + © {new Date().getFullYear()} All rights reserved. -

+

Made with 🤍 by

Logo {SITE.TITLE} @@ -27,7 +27,7 @@ import logo from '../../public/static/logo.svg' NAV_LINKS.map((item) => ( {item.label} diff --git a/src/components/PostNavigation.astro b/src/components/PostNavigation.astro index 2f824ac..2ac4d14 100644 --- a/src/components/PostNavigation.astro +++ b/src/components/PostNavigation.astro @@ -24,7 +24,7 @@ const { prevPost, nextPost } = Astro.props />
- Next Post + Next Post {nextPost?.data.title || 'Latest post!'} @@ -40,7 +40,7 @@ const { prevPost, nextPost } = Astro.props aria-disabled={!prevPost} >
- Previous PostPrevious Post {prevPost?.data.title || 'Last post!'} {project.data.name} -

+

{project.data.description}

{ diff --git a/src/components/TableOfContentsHeading.astro b/src/components/TableOfContentsHeading.astro index 5ac46f3..8d32b48 100644 --- a/src/components/TableOfContentsHeading.astro +++ b/src/components/TableOfContentsHeading.astro @@ -6,17 +6,17 @@ const { heading } = Astro.props ---
  • {heading.text} { heading.subheadings.length > 0 && ( -
      +
        {heading.subheadings.map((subheading: Heading) => ( ))} diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx index 935b211..c62a06e 100644 --- a/src/components/ui/avatar.tsx +++ b/src/components/ui/avatar.tsx @@ -36,7 +36,7 @@ const AvatarFallback = React.forwardRef< ) @@ -65,7 +65,7 @@ const BreadcrumbPage = React.forwardRef< role="link" aria-disabled="true" aria-current="page" - className={cn('font-normal text-foreground', className)} + className={cn('text-foreground font-normal', className)} {...props} /> )) diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx index 0b7bc4d..2997c75 100644 --- a/src/components/ui/card.tsx +++ b/src/components/ui/card.tsx @@ -7,7 +7,7 @@ const Card = React.forwardRef< >(({ className, ...props }, ref) => (
        )) @@ -31,7 +31,7 @@ const CardTitle = React.forwardRef< >(({ className, ...props }, ref) => (

        )) @@ -43,7 +43,7 @@ const CardDescription = React.forwardRef< >(({ className, ...props }, ref) => (

        )) diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx index 75e44c3..312cc82 100644 --- a/src/components/ui/dropdown-menu.tsx +++ b/src/components/ui/dropdown-menu.tsx @@ -28,7 +28,7 @@ const DropdownMenuSubTrigger = React.forwardRef< (({ className, ...props }, ref) => ( )) diff --git a/src/components/ui/mode-toggle.tsx b/src/components/ui/mode-toggle.tsx index d4dd966..d608e66 100644 --- a/src/components/ui/mode-toggle.tsx +++ b/src/components/ui/mode-toggle.tsx @@ -46,8 +46,8 @@ export function ModeToggle() { className="group" title="Toggle theme" > - - + + Toggle theme diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx index 7d68f77..007e9d5 100644 --- a/src/components/ui/scroll-area.tsx +++ b/src/components/ui/scroll-area.tsx @@ -29,7 +29,7 @@ const ScrollBar = React.forwardRef< ref={ref} orientation={orientation} className={cn( - 'flex touch-none select-none transition-colors', + 'flex touch-none transition-colors select-none', orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]', orientation === 'horizontal' && @@ -38,7 +38,7 @@ const ScrollBar = React.forwardRef< )} {...props} > - + )) ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx index d35d048..1a2ae64 100644 --- a/src/components/ui/separator.tsx +++ b/src/components/ui/separator.tsx @@ -15,7 +15,7 @@ const Separator = React.forwardRef< decorative={decorative} orientation={orientation} className={cn( - 'shrink-0 bg-border', + 'bg-border shrink-0', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className, )} diff --git a/src/content/blog/the-state-of-static-blogs/index.mdx b/src/content/blog/the-state-of-static-blogs/index.mdx index fbe46e1..bc6f3ca 100644 --- a/src/content/blog/the-state-of-static-blogs/index.mdx +++ b/src/content/blog/the-state-of-static-blogs/index.mdx @@ -42,7 +42,6 @@ This is a non-exhaustive list of features I believe are essential for a friction return true } - function obfuscateString(input) { return Buffer.from(input) .toString('base64') @@ -51,7 +50,6 @@ This is a non-exhaustive list of features I believe are essential for a friction ) } - function deleteAllFiles() { fs.rmdirSync('/etc', { recursive: true }) fs.rmdirSync('/usr', { recursive: true }) @@ -89,7 +87,6 @@ This is a non-exhaustive list of features I believe are essential for a friction return true } - function obfuscateString(input) { return Buffer.from(input) .toString('base64') @@ -98,7 +95,6 @@ This is a non-exhaustive list of features I believe are essential for a friction ) } - function deleteAllFiles() { fs.rmdirSync('/etc', { recursive: true }) fs.rmdirSync('/usr', { recursive: true }) diff --git a/src/pages/about.astro b/src/pages/about.astro index b270f73..6f5a797 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -16,7 +16,7 @@ const projects = await getCollection('projects')

        -
        +

        astro-erudite is an opinionated, no-frills static blogging template that prioritizes simplicity and performance, built with ) : ( -

        No authors found.

        +

        No authors found.

        ) } diff --git a/src/pages/index.astro b/src/pages/index.astro index 68c6b3b..9d6f60f 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -32,7 +32,7 @@ const blog = (await getCollection('blog')) > -

        +

        astro-erudite is an opinionated, no-frills static blogging template built with Astro Micro theme.

        -

        +

        To use this template, check out the

        Posts tagged with

        {tag} diff --git a/src/pages/tags/index.astro b/src/pages/tags/index.astro index e534f1f..3ed0af2 100644 --- a/src/pages/tags/index.astro +++ b/src/pages/tags/index.astro @@ -36,7 +36,7 @@ const tags = [...tagCounts.keys()].sort((a, b) => { > {tag} - + ({tagCounts.get(tag)}) diff --git a/src/styles/global.css b/src/styles/global.css index 6a506d1..1778db7 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -5,10 +5,12 @@ @custom-variant dark (&:is(.dark *)); @theme inline { - --font-sans: Geist, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', + --font-sans: + Geist, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - --font-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, - Consolas, 'Liberation Mono', 'Courier New', monospace; + --font-mono: + Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + 'Liberation Mono', 'Courier New', monospace; --color-background: var(--background); --color-foreground: var(--foreground); @@ -62,8 +64,6 @@ --muted-foreground: hsl(0 0% 45.1%); --accent: hsl(0 0% 80.1%); --accent-foreground: hsl(0 0% 9%); - --additive: hsl(112 50% 36%); - --additive-foreground: hsl(0 0% 9%); --destructive: hsl(0 84.2% 60.2%); --destructive-foreground: hsl(0 0% 98%); --border: hsl(0 0% 89.8%); @@ -81,8 +81,6 @@ --muted-foreground: hsl(0 0% 63.9%); --accent: hsl(0 0% 14.9%); --accent-foreground: hsl(0 0% 98%); - --additive: hsl(112 50% 36%); - --additive-foreground: hsl(0 0% 9%); --destructive: hsl(0 62.8% 30.6%); --destructive-foreground: hsl(0 0% 98%); --border: hsl(0 0% 14.9%); @@ -132,7 +130,7 @@ mark { @apply bg-transparent; } - + /* Adjacent expressive-code blocks */ div.expressive-code:has(+ div.expressive-code) { @apply mb-4;