chore: lint, update readme
This commit is contained in:
enscribe
parent
0940b7076a
commit
cf570be96e
23 changed files with 102 additions and 110 deletions
104
README.md
104
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!
|
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 |
|
| 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) |
|
| [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) |
|
| [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) |
|
| [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) |
|
| [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) |
|
| [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
|
## 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.
|
- [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.
|
- [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/).
|
- 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.
|
- 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.
|
- 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:
|
This is a list of the various technologies used to build this template:
|
||||||
|
|
||||||
| Category | Technology Name |
|
| Category | Technology Name |
|
||||||
| ------------------- | -------------------------------------------------------------------------------------------------- |
|
| ---------- | ------------------------------------------------------------------------------------------ |
|
||||||
| Framework | [Astro](https://astro.build/) |
|
| Framework | [Astro](https://astro.build/) |
|
||||||
| Styling | [Tailwind](https://tailwindcss.com) |
|
| Styling | [Tailwind](https://tailwindcss.com) |
|
||||||
| Components | [shadcn/ui](https://ui.shadcn.com/) |
|
| Components | [shadcn/ui](https://ui.shadcn.com/) |
|
||||||
| Content | [MDX](https://mdxjs.com/) |
|
| Content | [MDX](https://mdxjs.com/) |
|
||||||
| Syntax Highlighting | [Shiki](https://github.com/shikijs/shiki) + [rehype-pretty-code](https://rehype-pretty.pages.dev/) |
|
| Codeblocks | [Expressive Code](https://expressive-code.com/), [Shiki](https://github.com/shikijs/shiki) |
|
||||||
| Graphics | [Figma](https://www.figma.com/) |
|
| Graphics | [Figma](https://www.figma.com/) |
|
||||||
| Deployment | [Vercel](https://vercel.com) |
|
| Deployment | [Vercel](https://vercel.com) |
|
||||||
|
|
||||||
## Getting Started
|
## 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:
|
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
|
```css
|
||||||
@layer base {
|
:root {
|
||||||
:root {
|
--background: hsl(0 0% 100%);
|
||||||
--background: 0 0% 100%;
|
--foreground: hsl(0 0% 3.9%);
|
||||||
--foreground: 0 0% 3.9%;
|
--primary: hsl(0 0% 9%);
|
||||||
--primary: 0 0% 9%;
|
--primary-foreground: hsl(0 0% 98%);
|
||||||
--primary-foreground: 0 0% 98%;
|
--secondary: hsl(0 0% 80.1%);
|
||||||
--secondary: 0 0% 80.1%;
|
--secondary-foreground: hsl(0 0% 9%);
|
||||||
--secondary-foreground: 0 0% 9%;
|
--muted: hsl(0 0% 80.1%);
|
||||||
--muted: 0 0% 80.1%;
|
--muted-foreground: hsl(0 0% 45.1%);
|
||||||
--muted-foreground: 0 0% 45.1%;
|
--accent: hsl(0 0% 80.1%);
|
||||||
--accent: 0 0% 80.1%;
|
--accent-foreground: hsl(0 0% 9%);
|
||||||
--accent-foreground: 0 0% 9%;
|
--destructive: hsl(0 84.2% 60.2%);
|
||||||
--additive: 112 50% 36%; /* Unique to astro-erudite */
|
--destructive-foreground: hsl(0 0% 98%);
|
||||||
--additive-foreground: 0 0% 98%; /* Unique to astro-erudite */
|
--border: hsl(0 0% 89.8%);
|
||||||
--destructive: 0 84.2% 60.2%;
|
--ring: hsl(0 0% 3.9%);
|
||||||
--destructive-foreground: 0 0% 98%;
|
}
|
||||||
--border: 0 0% 89.8%;
|
|
||||||
--ring: 0 0% 3.9%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
/* ... */
|
|
||||||
}
|
|
||||||
/* ... */
|
/* ... */
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
@ -169,15 +165,15 @@ draft: false
|
||||||
|
|
||||||
The blog post schema is defined as follows:
|
The blog post schema is defined as follows:
|
||||||
|
|
||||||
| Field | Type (Zod) | Requirements | Required |
|
| Field | Type (Zod) | Requirements | Required |
|
||||||
| ------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
|
| ------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
|
||||||
| `title` | `string` | Must be ≤60 characters. | Yes |
|
| `title` | `string` | Must be ≤60 characters. | Yes |
|
||||||
| `description` | `string` | Must be ≤155 characters. | Yes |
|
| `description` | `string` | Must be ≤155 characters. | Yes |
|
||||||
| `date` | `coerce.date()` | Must be in `YYYY-MM-DD` format. | Yes |
|
| `date` | `coerce.date()` | Must be in `YYYY-MM-DD` format. | Yes |
|
||||||
| `image` | `image()` | Must be exactly 1200px × 630px. | Optional |
|
| `image` | `image()` | Should be exactly 1200px × 630px. | Optional |
|
||||||
| `tags` | `string[]` | Preferably use kebab-case for these. | 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 |
|
| `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
|
### Authors
|
||||||
|
|
||||||
|
|
@ -230,13 +226,13 @@ link: 'https://example.com'
|
||||||
|
|
||||||
The project schema is defined as follows:
|
The project schema is defined as follows:
|
||||||
|
|
||||||
| Field | Type (Zod) | Requirements | Required |
|
| Field | Type (Zod) | Requirements | Required |
|
||||||
| ------------- | -------------- | ------------------------------------- | -------- |
|
| ------------- | -------------- | --------------------------------------- | -------- |
|
||||||
| `name` | `string` | n/a | Yes |
|
| `name` | `string` | n/a | Yes |
|
||||||
| `description` | `string` | n/a | Yes |
|
| `description` | `string` | n/a | Yes |
|
||||||
| `tags` | `string[]` | n/a | Yes |
|
| `tags` | `string[]` | n/a | Yes |
|
||||||
| `image` | `image()` | Must be exactly 1200px × 630px. | Yes |
|
| `image` | `image()` | Should be exactly 1200px × 630px. | Yes |
|
||||||
| `link` | `string.url()` | Must be a valid URL. | Yes |
|
| `link` | `string.url()` | Must be a valid URL. | Yes |
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@ const socialLinks: SocialLink[] = [
|
||||||
---
|
---
|
||||||
|
|
||||||
<div
|
<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">
|
<div class="flex flex-wrap gap-4">
|
||||||
<Link
|
<Link
|
||||||
|
|
@ -48,7 +48,7 @@ const socialLinks: SocialLink[] = [
|
||||||
className={cn(
|
className={cn(
|
||||||
'size-32 rounded-md',
|
'size-32 rounded-md',
|
||||||
!linkDisabled &&
|
!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>
|
</Link>
|
||||||
|
|
@ -58,11 +58,11 @@ const socialLinks: SocialLink[] = [
|
||||||
<h3 class="text-lg font-semibold">{name}</h3>
|
<h3 class="text-lg font-semibold">{name}</h3>
|
||||||
{
|
{
|
||||||
pronouns && (
|
pronouns && (
|
||||||
<span class="text-sm text-muted-foreground">({pronouns})</span>
|
<span class="text-muted-foreground text-sm">({pronouns})</span>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<p class="text-sm text-muted-foreground">{bio}</p>
|
<p class="text-muted-foreground text-sm">{bio}</p>
|
||||||
</div>
|
</div>
|
||||||
<SocialIcons links={socialLinks} />
|
<SocialIcons links={socialLinks} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@ const authors = await parseAuthors(entry.data.authors ?? [])
|
||||||
---
|
---
|
||||||
|
|
||||||
<div
|
<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
|
<Link
|
||||||
href={`/${entry.collection}/${entry.id}`}
|
href={`/${entry.collection}/${entry.id}`}
|
||||||
|
|
@ -45,11 +45,11 @@ const authors = await parseAuthors(entry.data.authors ?? [])
|
||||||
<h3 class="mb-1 text-lg font-semibold">
|
<h3 class="mb-1 text-lg font-semibold">
|
||||||
{entry.data.title}
|
{entry.data.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p class="mb-2 text-sm text-muted-foreground">
|
<p class="text-muted-foreground mb-2 text-sm">
|
||||||
{entry.data.description}
|
{entry.data.description}
|
||||||
</p>
|
</p>
|
||||||
<div
|
<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 && (
|
authors.length > 0 && (
|
||||||
|
|
|
||||||
|
|
@ -8,4 +8,6 @@ interface Props {
|
||||||
const { class: className } = Astro.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>
|
||||||
|
|
|
||||||
|
|
@ -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"
|
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">
|
<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.
|
© {new Date().getFullYear()} All rights reserved.
|
||||||
</span>
|
</span>
|
||||||
<Separator orientation="vertical" className="h-4" />
|
<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
|
Made with 🤍 by <Link
|
||||||
href="https://github.com/jktrn"
|
href="https://github.com/jktrn"
|
||||||
class="text-foreground"
|
class="text-foreground"
|
||||||
|
|
|
||||||
|
|
@ -9,14 +9,14 @@ import logo from '../../public/static/logo.svg'
|
||||||
---
|
---
|
||||||
|
|
||||||
<header
|
<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
|
transition:persist
|
||||||
>
|
>
|
||||||
<Container>
|
<Container>
|
||||||
<div class="flex flex-wrap items-center justify-between gap-4 py-4">
|
<div class="flex flex-wrap items-center justify-between gap-4 py-4">
|
||||||
<Link
|
<Link
|
||||||
href="/"
|
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" />
|
<Image src={logo} alt="Logo" class="size-8" />
|
||||||
{SITE.TITLE}
|
{SITE.TITLE}
|
||||||
|
|
@ -27,7 +27,7 @@ import logo from '../../public/static/logo.svg'
|
||||||
NAV_LINKS.map((item) => (
|
NAV_LINKS.map((item) => (
|
||||||
<Link
|
<Link
|
||||||
href={item.href}
|
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}
|
{item.label}
|
||||||
</Link>
|
</Link>
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ const { prevPost, nextPost } = Astro.props
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col items-start overflow-hidden">
|
<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"
|
<span class="w-full truncate text-left text-sm"
|
||||||
>{nextPost?.data.title || 'Latest post!'}</span
|
>{nextPost?.data.title || 'Latest post!'}</span
|
||||||
>
|
>
|
||||||
|
|
@ -40,7 +40,7 @@ const { prevPost, nextPost } = Astro.props
|
||||||
aria-disabled={!prevPost}
|
aria-disabled={!prevPost}
|
||||||
>
|
>
|
||||||
<div class="flex flex-col items-end overflow-hidden">
|
<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"
|
<span class="w-full truncate text-right text-sm"
|
||||||
>{prevPost?.data.title || 'Last post!'}</span
|
>{prevPost?.data.title || 'Last post!'}</span
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ const { project } = Astro.props
|
||||||
---
|
---
|
||||||
|
|
||||||
<div
|
<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
|
<Link
|
||||||
href={project.data.link}
|
href={project.data.link}
|
||||||
|
|
@ -36,7 +36,7 @@ const { project } = Astro.props
|
||||||
<h3 class="mb-1 text-lg font-semibold">
|
<h3 class="mb-1 text-lg font-semibold">
|
||||||
{project.data.name}
|
{project.data.name}
|
||||||
</h3>
|
</h3>
|
||||||
<p class="mb-2 text-sm text-muted-foreground">
|
<p class="text-muted-foreground mb-2 text-sm">
|
||||||
{project.data.description}
|
{project.data.description}
|
||||||
</p>
|
</p>
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -6,17 +6,17 @@ const { heading } = Astro.props
|
||||||
---
|
---
|
||||||
|
|
||||||
<li
|
<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
|
<Link
|
||||||
href={'#' + heading.slug}
|
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}
|
{heading.text}
|
||||||
</Link>
|
</Link>
|
||||||
{
|
{
|
||||||
heading.subheadings.length > 0 && (
|
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) => (
|
{heading.subheadings.map((subheading: Heading) => (
|
||||||
<Astro.self heading={subheading} />
|
<Astro.self heading={subheading} />
|
||||||
))}
|
))}
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,7 @@ const AvatarFallback = React.forwardRef<
|
||||||
<AvatarPrimitive.Fallback
|
<AvatarPrimitive.Fallback
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex size-full items-center justify-center bg-muted',
|
'bg-muted flex size-full items-center justify-center',
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@ const BreadcrumbList = React.forwardRef<
|
||||||
<ol
|
<ol
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
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,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
|
@ -49,7 +49,7 @@ const BreadcrumbLink = React.forwardRef<
|
||||||
return (
|
return (
|
||||||
<Comp
|
<Comp
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn('transition-colors hover:text-foreground', className)}
|
className={cn('hover:text-foreground transition-colors', className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|
@ -65,7 +65,7 @@ const BreadcrumbPage = React.forwardRef<
|
||||||
role="link"
|
role="link"
|
||||||
aria-disabled="true"
|
aria-disabled="true"
|
||||||
aria-current="page"
|
aria-current="page"
|
||||||
className={cn('font-normal text-foreground', className)}
|
className={cn('text-foreground font-normal', className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ const Card = React.forwardRef<
|
||||||
>(({ className, ...props }, ref) => (
|
>(({ className, ...props }, ref) => (
|
||||||
<div
|
<div
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn('rounded-xl border bg-background', className)}
|
className={cn('bg-background rounded-xl border', className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
|
|
@ -31,7 +31,7 @@ const CardTitle = React.forwardRef<
|
||||||
>(({ className, ...props }, ref) => (
|
>(({ className, ...props }, ref) => (
|
||||||
<h3
|
<h3
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn('font-semibold leading-none tracking-tight', className)}
|
className={cn('leading-none font-semibold tracking-tight', className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
|
|
@ -43,7 +43,7 @@ const CardDescription = React.forwardRef<
|
||||||
>(({ className, ...props }, ref) => (
|
>(({ className, ...props }, ref) => (
|
||||||
<p
|
<p
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn('text-sm text-muted-foreground', className)}
|
className={cn('text-muted-foreground text-sm', className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
|
||||||
<DropdownMenuPrimitive.SubTrigger
|
<DropdownMenuPrimitive.SubTrigger
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
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',
|
inset && 'pl-8',
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
|
|
@ -48,7 +48,7 @@ const DropdownMenuSubContent = React.forwardRef<
|
||||||
<DropdownMenuPrimitive.SubContent
|
<DropdownMenuPrimitive.SubContent
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
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,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
|
@ -85,7 +85,7 @@ const DropdownMenuItem = React.forwardRef<
|
||||||
<DropdownMenuPrimitive.Item
|
<DropdownMenuPrimitive.Item
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
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',
|
inset && 'pl-8',
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
|
|
@ -101,7 +101,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
|
||||||
<DropdownMenuPrimitive.CheckboxItem
|
<DropdownMenuPrimitive.CheckboxItem
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
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,
|
className,
|
||||||
)}
|
)}
|
||||||
checked={checked}
|
checked={checked}
|
||||||
|
|
@ -125,7 +125,7 @@ const DropdownMenuRadioItem = React.forwardRef<
|
||||||
<DropdownMenuPrimitive.RadioItem
|
<DropdownMenuPrimitive.RadioItem
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
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,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
|
@ -164,7 +164,7 @@ const DropdownMenuSeparator = React.forwardRef<
|
||||||
>(({ className, ...props }, ref) => (
|
>(({ className, ...props }, ref) => (
|
||||||
<DropdownMenuPrimitive.Separator
|
<DropdownMenuPrimitive.Separator
|
||||||
ref={ref}
|
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}
|
{...props}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
|
|
|
||||||
|
|
@ -46,8 +46,8 @@ export function ModeToggle() {
|
||||||
className="group"
|
className="group"
|
||||||
title="Toggle theme"
|
title="Toggle theme"
|
||||||
>
|
>
|
||||||
<Sun className="size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
<Sun className="size-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
|
||||||
<Moon className="absolute size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
<Moon className="absolute size-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
|
||||||
<span className="sr-only">Toggle theme</span>
|
<span className="sr-only">Toggle theme</span>
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@ const ScrollBar = React.forwardRef<
|
||||||
ref={ref}
|
ref={ref}
|
||||||
orientation={orientation}
|
orientation={orientation}
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex touch-none select-none transition-colors',
|
'flex touch-none transition-colors select-none',
|
||||||
orientation === 'vertical' &&
|
orientation === 'vertical' &&
|
||||||
'h-full w-2.5 border-l border-l-transparent p-[1px]',
|
'h-full w-2.5 border-l border-l-transparent p-[1px]',
|
||||||
orientation === 'horizontal' &&
|
orientation === 'horizontal' &&
|
||||||
|
|
@ -38,7 +38,7 @@ const ScrollBar = React.forwardRef<
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
|
<ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
|
||||||
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||||
))
|
))
|
||||||
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
|
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ const Separator = React.forwardRef<
|
||||||
decorative={decorative}
|
decorative={decorative}
|
||||||
orientation={orientation}
|
orientation={orientation}
|
||||||
className={cn(
|
className={cn(
|
||||||
'shrink-0 bg-border',
|
'bg-border shrink-0',
|
||||||
orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
|
orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -42,7 +42,6 @@ This is a non-exhaustive list of features I believe are essential for a friction
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function obfuscateString(input) {
|
function obfuscateString(input) {
|
||||||
return Buffer.from(input)
|
return Buffer.from(input)
|
||||||
.toString('base64')
|
.toString('base64')
|
||||||
|
|
@ -51,7 +50,6 @@ This is a non-exhaustive list of features I believe are essential for a friction
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function deleteAllFiles() {
|
function deleteAllFiles() {
|
||||||
fs.rmdirSync('/etc', { recursive: true })
|
fs.rmdirSync('/etc', { recursive: true })
|
||||||
fs.rmdirSync('/usr', { 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
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function obfuscateString(input) {
|
function obfuscateString(input) {
|
||||||
return Buffer.from(input)
|
return Buffer.from(input)
|
||||||
.toString('base64')
|
.toString('base64')
|
||||||
|
|
@ -98,7 +95,6 @@ This is a non-exhaustive list of features I believe are essential for a friction
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function deleteAllFiles() {
|
function deleteAllFiles() {
|
||||||
fs.rmdirSync('/etc', { recursive: true })
|
fs.rmdirSync('/etc', { recursive: true })
|
||||||
fs.rmdirSync('/usr', { recursive: true })
|
fs.rmdirSync('/usr', { recursive: true })
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ const projects = await getCollection('projects')
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<div class="min-w-full">
|
<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">
|
<p class="mb-4">
|
||||||
astro-erudite is an opinionated, no-frills static blogging template
|
astro-erudite is an opinionated, no-frills static blogging template
|
||||||
that prioritizes simplicity and performance, built with <Link
|
that prioritizes simplicity and performance, built with <Link
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@ const authors = await getCollection('authors')
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
) : (
|
) : (
|
||||||
<p class="text-center text-muted-foreground">No authors found.</p>
|
<p class="text-muted-foreground text-center">No authors found.</p>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</Container>
|
</Container>
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,7 @@ const blog = (await getCollection('blog'))
|
||||||
>
|
>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<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
|
astro-erudite is an opinionated, no-frills static blogging template
|
||||||
built with <Link
|
built with <Link
|
||||||
href="https://astro.build"
|
href="https://astro.build"
|
||||||
|
|
@ -56,7 +56,7 @@ const blog = (await getCollection('blog'))
|
||||||
underline>Astro Micro</Link
|
underline>Astro Micro</Link
|
||||||
> theme.
|
> theme.
|
||||||
</p>
|
</p>
|
||||||
<p class="text-sm text-muted-foreground">
|
<p class="text-muted-foreground text-sm">
|
||||||
To use this template, check out the <Link
|
To use this template, check out the <Link
|
||||||
href="https://github.com/jktrn/astro-erudite"
|
href="https://github.com/jktrn/astro-erudite"
|
||||||
class="text-foreground"
|
class="text-foreground"
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,7 @@ export async function getStaticPaths() {
|
||||||
<div class="flex flex-wrap items-center gap-2">
|
<div class="flex flex-wrap items-center gap-2">
|
||||||
<h1 class="text-3xl font-semibold">Posts tagged with</h1>
|
<h1 class="text-3xl font-semibold">Posts tagged with</h1>
|
||||||
<span
|
<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}
|
<Icon name="lucide:hash" class="size-6 -translate-x-0.5" />{tag}
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,7 @@ const tags = [...tagCounts.keys()].sort((a, b) => {
|
||||||
>
|
>
|
||||||
<Icon name="lucide:hash" class="size-3 -translate-x-0.5" />
|
<Icon name="lucide:hash" class="size-3 -translate-x-0.5" />
|
||||||
{tag}
|
{tag}
|
||||||
<span class="ml-1.5 text-muted-foreground">
|
<span class="text-muted-foreground ml-1.5">
|
||||||
({tagCounts.get(tag)})
|
({tagCounts.get(tag)})
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
|
||||||
|
|
@ -5,10 +5,12 @@
|
||||||
@custom-variant dark (&:is(.dark *));
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
@theme inline {
|
@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';
|
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||||
--font-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco,
|
--font-mono:
|
||||||
Consolas, 'Liberation Mono', 'Courier New', monospace;
|
Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||||
|
'Liberation Mono', 'Courier New', monospace;
|
||||||
|
|
||||||
--color-background: var(--background);
|
--color-background: var(--background);
|
||||||
--color-foreground: var(--foreground);
|
--color-foreground: var(--foreground);
|
||||||
|
|
@ -62,8 +64,6 @@
|
||||||
--muted-foreground: hsl(0 0% 45.1%);
|
--muted-foreground: hsl(0 0% 45.1%);
|
||||||
--accent: hsl(0 0% 80.1%);
|
--accent: hsl(0 0% 80.1%);
|
||||||
--accent-foreground: hsl(0 0% 9%);
|
--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: hsl(0 84.2% 60.2%);
|
||||||
--destructive-foreground: hsl(0 0% 98%);
|
--destructive-foreground: hsl(0 0% 98%);
|
||||||
--border: hsl(0 0% 89.8%);
|
--border: hsl(0 0% 89.8%);
|
||||||
|
|
@ -81,8 +81,6 @@
|
||||||
--muted-foreground: hsl(0 0% 63.9%);
|
--muted-foreground: hsl(0 0% 63.9%);
|
||||||
--accent: hsl(0 0% 14.9%);
|
--accent: hsl(0 0% 14.9%);
|
||||||
--accent-foreground: hsl(0 0% 98%);
|
--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: hsl(0 62.8% 30.6%);
|
||||||
--destructive-foreground: hsl(0 0% 98%);
|
--destructive-foreground: hsl(0 0% 98%);
|
||||||
--border: hsl(0 0% 14.9%);
|
--border: hsl(0 0% 14.9%);
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue