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 <abbr title="Single Page Application">SPA</abbr> 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 [<abbr title="Hue, Saturation, Lightness">HSL</abbr> 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[] = [
---
<div
- class="overflow-hidden rounded-xl border p-4 transition-colors duration-300 ease-in-out has-[a:hover]:bg-secondary/50"
+ class="has-[a:hover]:bg-secondary/50 overflow-hidden rounded-xl border p-4 transition-colors duration-300 ease-in-out"
>
<div class="flex flex-wrap gap-4">
<Link
@@ -48,7 +48,7 @@ const socialLinks: SocialLink[] = [
className={cn(
'size-32 rounded-md',
!linkDisabled &&
- 'transition-shadow duration-300 hover:cursor-pointer hover:ring-2 hover:ring-primary',
+ 'hover:ring-primary transition-shadow duration-300 hover:cursor-pointer hover:ring-2',
)}
/>
</Link>
@@ -58,11 +58,11 @@ const socialLinks: SocialLink[] = [
<h3 class="text-lg font-semibold">{name}</h3>
{
pronouns && (
- <span class="text-sm text-muted-foreground">({pronouns})</span>
+ <span class="text-muted-foreground text-sm">({pronouns})</span>
)
}
</div>
- <p class="text-sm text-muted-foreground">{bio}</p>
+ <p class="text-muted-foreground text-sm">{bio}</p>
</div>
<SocialIcons links={socialLinks} />
</div>
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 ?? [])
---
<div
- class="not-prose rounded-xl border p-4 transition-colors duration-300 ease-in-out hover:bg-secondary/50"
+ class="not-prose hover:bg-secondary/50 rounded-xl border p-4 transition-colors duration-300 ease-in-out"
>
<Link
href={`/${entry.collection}/${entry.id}`}
@@ -45,11 +45,11 @@ const authors = await parseAuthors(entry.data.authors ?? [])
<h3 class="mb-1 text-lg font-semibold">
{entry.data.title}
</h3>
- <p class="mb-2 text-sm text-muted-foreground">
+ <p class="text-muted-foreground mb-2 text-sm">
{entry.data.description}
</p>
<div
- class="mb-2 flex flex-wrap items-center gap-x-2 text-xs text-muted-foreground"
+ class="text-muted-foreground mb-2 flex flex-wrap items-center gap-x-2 text-xs"
>
{
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
---
-<div class={cn('mx-auto max-w-(--breakpoint-md) px-4', className)}><slot /></div>
+<div class={cn('mx-auto max-w-(--breakpoint-md) px-4', className)}>
+ <slot />
+</div>
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"
>
<div class="flex items-center gap-x-2">
- <span class="text-center text-sm text-muted-foreground">
+ <span class="text-muted-foreground text-center text-sm">
© {new Date().getFullYear()} All rights reserved.
</span>
<Separator orientation="vertical" className="h-4" />
- <p class="text-center text-sm text-muted-foreground">
+ <p class="text-muted-foreground text-center text-sm">
Made with 🤍 by <Link
href="https://github.com/jktrn"
class="text-foreground"
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 181767d..b8c9dcd 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -9,14 +9,14 @@ import logo from '../../public/static/logo.svg'
---
<header
- class="sticky top-0 z-10 bg-background/50 backdrop-blur-md"
+ class="bg-background/50 sticky top-0 z-10 backdrop-blur-md"
transition:persist
>
<Container>
<div class="flex flex-wrap items-center justify-between gap-4 py-4">
<Link
href="/"
- class="flex shrink-0 items-center gap-2 text-xl font-semibold transition-colors duration-300 hover:text-primary"
+ class="hover:text-primary flex shrink-0 items-center gap-2 text-xl font-semibold transition-colors duration-300"
>
<Image src={logo} alt="Logo" class="size-8" />
{SITE.TITLE}
@@ -27,7 +27,7 @@ import logo from '../../public/static/logo.svg'
NAV_LINKS.map((item) => (
<Link
href={item.href}
- class="capitalize text-foreground/60 transition-colors hover:text-foreground/80"
+ class="text-foreground/60 hover:text-foreground/80 capitalize transition-colors"
>
{item.label}
</Link>
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
/>
</div>
<div class="flex flex-col items-start overflow-hidden">
- <span class="text-left text-xs text-muted-foreground">Next Post</span>
+ <span class="text-muted-foreground text-left text-xs">Next Post</span>
<span class="w-full truncate text-left text-sm"
>{nextPost?.data.title || 'Latest post!'}</span
>
@@ -40,7 +40,7 @@ const { prevPost, nextPost } = Astro.props
aria-disabled={!prevPost}
>
<div class="flex flex-col items-end overflow-hidden">
- <span class="text-right text-xs text-muted-foreground">Previous Post</span
+ <span class="text-muted-foreground text-right text-xs">Previous Post</span
>
<span class="w-full truncate text-right text-sm"
>{prevPost?.data.title || 'Last post!'}</span
diff --git a/src/components/ProjectCard.astro b/src/components/ProjectCard.astro
index 57c17f5..2d8ff05 100644
--- a/src/components/ProjectCard.astro
+++ b/src/components/ProjectCard.astro
@@ -12,7 +12,7 @@ const { project } = Astro.props
---
<div
- class="not-prose rounded-xl border p-4 transition-colors duration-300 ease-in-out hover:bg-secondary/50"
+ class="not-prose hover:bg-secondary/50 rounded-xl border p-4 transition-colors duration-300 ease-in-out"
>
<Link
href={project.data.link}
@@ -36,7 +36,7 @@ const { project } = Astro.props
<h3 class="mb-1 text-lg font-semibold">
{project.data.name}
</h3>
- <p class="mb-2 text-sm text-muted-foreground">
+ <p class="text-muted-foreground mb-2 text-sm">
{project.data.description}
</p>
{
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
---
<li
- class="list-inside list-disc px-4 text-sm text-foreground/60 xl:list-none xl:p-0"
+ class="text-foreground/60 list-inside list-disc px-4 text-sm xl:list-none xl:p-0"
>
<Link
href={'#' + heading.slug}
- class="underline decoration-transparent underline-offset-[3px] transition-colors duration-200 hover:decoration-inherit py-1 xl:py-0"
+ class="py-1 underline decoration-transparent underline-offset-[3px] transition-colors duration-200 hover:decoration-inherit xl:py-0"
>
{heading.text}
</Link>
{
heading.subheadings.length > 0 && (
- <ul class="translate-x-3 xl:ml-4 xl:mt-2 xl:flex xl:translate-x-0 xl:flex-col xl:gap-2">
+ <ul class="translate-x-3 xl:mt-2 xl:ml-4 xl:flex xl:translate-x-0 xl:flex-col xl:gap-2">
{heading.subheadings.map((subheading: Heading) => (
<Astro.self heading={subheading} />
))}
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<
<AvatarPrimitive.Fallback
ref={ref}
className={cn(
- 'flex size-full items-center justify-center bg-muted',
+ 'bg-muted flex size-full items-center justify-center',
className,
)}
{...props}
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
index 8e24d00..941424f 100644
--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -18,7 +18,7 @@ const BreadcrumbList = React.forwardRef<
<ol
ref={ref}
className={cn(
- 'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
+ 'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
className,
)}
{...props}
@@ -49,7 +49,7 @@ const BreadcrumbLink = React.forwardRef<
return (
<Comp
ref={ref}
- className={cn('transition-colors hover:text-foreground', className)}
+ className={cn('hover:text-foreground transition-colors', className)}
{...props}
/>
)
@@ -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) => (
<div
ref={ref}
- className={cn('rounded-xl border bg-background', className)}
+ className={cn('bg-background rounded-xl border', className)}
{...props}
/>
))
@@ -31,7 +31,7 @@ const CardTitle = React.forwardRef<
>(({ className, ...props }, ref) => (
<h3
ref={ref}
- className={cn('font-semibold leading-none tracking-tight', className)}
+ className={cn('leading-none font-semibold tracking-tight', className)}
{...props}
/>
))
@@ -43,7 +43,7 @@ const CardDescription = React.forwardRef<
>(({ className, ...props }, ref) => (
<p
ref={ref}
- className={cn('text-sm text-muted-foreground', className)}
+ className={cn('text-muted-foreground text-sm', className)}
{...props}
/>
))
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<
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
- 'flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent',
+ 'focus:bg-accent data-[state=open]:bg-accent flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none',
inset && 'pl-8',
className,
)}
@@ -48,7 +48,7 @@ const DropdownMenuSubContent = React.forwardRef<
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
- 'bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+ 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg',
className,
)}
{...props}
@@ -85,7 +85,7 @@ const DropdownMenuItem = React.forwardRef<
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
- 'relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+ 'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
inset && 'pl-8',
className,
)}
@@ -101,7 +101,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
- 'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+ 'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
className,
)}
checked={checked}
@@ -125,7 +125,7 @@ const DropdownMenuRadioItem = React.forwardRef<
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
- 'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+ 'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
className,
)}
{...props}
@@ -164,7 +164,7 @@ const DropdownMenuSeparator = React.forwardRef<
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Separator
ref={ref}
- className={cn('-mx-1 my-1 h-px bg-muted', className)}
+ className={cn('bg-muted -mx-1 my-1 h-px', className)}
{...props}
/>
))
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"
>
- <Sun className="size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
- <Moon className="absolute size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+ <Sun className="size-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+ <Moon className="absolute size-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
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}
>
- <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+ <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
</ScrollAreaPrimitive.ScrollAreaScrollbar>
))
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')
<section>
<div class="min-w-full">
- <div class="prose prose-neutral mb-8 dark:prose-invert">
+ <div class="prose prose-neutral dark:prose-invert mb-8">
<p class="mb-4">
astro-erudite is an opinionated, no-frills static blogging template
that prioritizes simplicity and performance, built with <Link
diff --git a/src/pages/authors/index.astro b/src/pages/authors/index.astro
index ed1abab..b110c5c 100644
--- a/src/pages/authors/index.astro
+++ b/src/pages/authors/index.astro
@@ -21,7 +21,7 @@ const authors = await getCollection('authors')
))}
</ul>
) : (
- <p class="text-center text-muted-foreground">No authors found.</p>
+ <p class="text-muted-foreground text-center">No authors found.</p>
)
}
</Container>
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'))
>
</CardHeader>
<CardContent>
- <p class="mb-2 text-sm text-muted-foreground">
+ <p class="text-muted-foreground mb-2 text-sm">
astro-erudite is an opinionated, no-frills static blogging template
built with <Link
href="https://astro.build"
@@ -56,7 +56,7 @@ const blog = (await getCollection('blog'))
underline>Astro Micro</Link
> theme.
</p>
- <p class="text-sm text-muted-foreground">
+ <p class="text-muted-foreground text-sm">
To use this template, check out the <Link
href="https://github.com/jktrn/astro-erudite"
class="text-foreground"
diff --git a/src/pages/tags/[...id].astro b/src/pages/tags/[...id].astro
index 860a154..03890d9 100644
--- a/src/pages/tags/[...id].astro
+++ b/src/pages/tags/[...id].astro
@@ -46,7 +46,7 @@ export async function getStaticPaths() {
<div class="flex flex-wrap items-center gap-2">
<h1 class="text-3xl font-semibold">Posts tagged with</h1>
<span
- class="flex items-center gap-x-1 rounded-full bg-secondary px-4 py-2 text-2xl font-semibold"
+ class="bg-secondary flex items-center gap-x-1 rounded-full px-4 py-2 text-2xl font-semibold"
>
<Icon name="lucide:hash" class="size-6 -translate-x-0.5" />{tag}
</span>
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) => {
>
<Icon name="lucide:hash" class="size-3 -translate-x-0.5" />
{tag}
- <span class="ml-1.5 text-muted-foreground">
+ <span class="text-muted-foreground ml-1.5">
({tagCounts.get(tag)})
</span>
</Link>
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;