diff --git a/README.md b/README.md index 7ef1b91..b54094c 100644 --- a/README.md +++ b/README.md @@ -1 +1,9 @@ -# erudite +![Showcase Card](/public/static/twitter-card.png) + +
+ +## astro-erudite + +astro-erudite is an opinionated, no-frills static blogging template built with [Astro](https://astro.build/) and [Tailwind](https://tailwindcss.com/). Extraordinarily loosely based on the [Astro Micro](https://astro-micro.vercel.app/) theme by [trevortylerlee](https://github.com/trevortylerlee). + +
diff --git a/public/1200x630.png b/public/1200x630.png deleted file mode 100644 index 8a51790..0000000 Binary files a/public/1200x630.png and /dev/null differ diff --git a/public/512x512.png b/public/512x512.png deleted file mode 100644 index 8e507ea..0000000 Binary files a/public/512x512.png and /dev/null differ diff --git a/public/favicons/android-chrome-192x192.png b/public/favicons/android-chrome-192x192.png new file mode 100644 index 0000000..937f34e Binary files /dev/null and b/public/favicons/android-chrome-192x192.png differ diff --git a/public/favicons/android-chrome-512x512.png b/public/favicons/android-chrome-512x512.png new file mode 100644 index 0000000..773f633 Binary files /dev/null and b/public/favicons/android-chrome-512x512.png differ diff --git a/public/favicons/apple-touch-icon.png b/public/favicons/apple-touch-icon.png new file mode 100644 index 0000000..37b821f Binary files /dev/null and b/public/favicons/apple-touch-icon.png differ diff --git a/public/favicons/browserconfig.xml b/public/favicons/browserconfig.xml new file mode 100644 index 0000000..d469e48 --- /dev/null +++ b/public/favicons/browserconfig.xml @@ -0,0 +1,9 @@ + + + + + + #da532c + + + diff --git a/public/favicons/favicon-16x16.png b/public/favicons/favicon-16x16.png new file mode 100644 index 0000000..99e32d6 Binary files /dev/null and b/public/favicons/favicon-16x16.png differ diff --git a/public/favicons/favicon-32x32.png b/public/favicons/favicon-32x32.png new file mode 100644 index 0000000..17155a5 Binary files /dev/null and b/public/favicons/favicon-32x32.png differ diff --git a/public/favicons/favicon.ico b/public/favicons/favicon.ico new file mode 100644 index 0000000..58bde96 Binary files /dev/null and b/public/favicons/favicon.ico differ diff --git a/public/favicons/mstile-150x150.png b/public/favicons/mstile-150x150.png new file mode 100644 index 0000000..6dce28c Binary files /dev/null and b/public/favicons/mstile-150x150.png differ diff --git a/public/favicons/safari-pinned-tab.svg b/public/favicons/safari-pinned-tab.svg new file mode 100644 index 0000000..459b1e1 --- /dev/null +++ b/public/favicons/safari-pinned-tab.svg @@ -0,0 +1,18 @@ + + + + +Created by potrace 1.14, written by Peter Selinger 2001-2017 + + + + + diff --git a/public/favicons/site.webmanifest b/public/favicons/site.webmanifest new file mode 100644 index 0000000..9278c4a --- /dev/null +++ b/public/favicons/site.webmanifest @@ -0,0 +1,19 @@ +{ + "name": "", + "short_name": "", + "icons": [ + { + "src": "/favicons/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/favicons/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#121212", + "background_color": "#121212", + "display": "standalone" +} diff --git a/public/static/1200x630.png b/public/static/1200x630.png new file mode 100644 index 0000000..8ae2688 Binary files /dev/null and b/public/static/1200x630.png differ diff --git a/public/static/512x512.png b/public/static/512x512.png new file mode 100644 index 0000000..21022ef Binary files /dev/null and b/public/static/512x512.png differ diff --git a/public/static/logo.png b/public/static/logo.png new file mode 100644 index 0000000..64c7588 Binary files /dev/null and b/public/static/logo.png differ diff --git a/public/static/logo.svg b/public/static/logo.svg new file mode 100644 index 0000000..e43bd0f --- /dev/null +++ b/public/static/logo.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/twitter-card.png b/public/static/twitter-card.png new file mode 100644 index 0000000..2e2f6fe Binary files /dev/null and b/public/static/twitter-card.png differ diff --git a/src/components/AuthorCard.astro b/src/components/AuthorCard.astro index e5eb8c7..91c83b2 100644 --- a/src/components/AuthorCard.astro +++ b/src/components/AuthorCard.astro @@ -1,7 +1,7 @@ --- import type { CollectionEntry } from 'astro:content' -import { Image } from 'astro:assets' import Link from '@components/Link.astro' +import AvatarComponent from '@/components/ui/avatar' type Props = { author: CollectionEntry<'authors'> @@ -15,12 +15,12 @@ const { name, avatar, bio } = author.data class="rounded-xl border p-4 transition-colors duration-300 ease-in-out hover:bg-secondary/50" > - {`Avatar

{name}

diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro index 593054d..66f25f0 100644 --- a/src/components/BlogCard.astro +++ b/src/components/BlogCard.astro @@ -4,6 +4,7 @@ import { formatDate, readingTime, parseAuthors } from '@lib/utils' import { Image } from 'astro:assets' import { Badge } from '@/components/ui/badge' import { Separator } from '@/components/ui/separator' +import AvatarComponent from '@/components/ui/avatar' import Link from './Link.astro' type Props = { @@ -54,12 +55,12 @@ const authors = await parseAuthors(entry.data.authors ?? []) <> {authors.map((author) => (
- {author.name} {author.name}
diff --git a/src/components/Head.astro b/src/components/Head.astro index d36f91c..aa3788b 100644 --- a/src/components/Head.astro +++ b/src/components/Head.astro @@ -15,7 +15,7 @@ interface Props { const canonicalURL = new URL(Astro.url.pathname, Astro.site) -const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props +const { title, description, image = '/static/twitter-card.png' } = Astro.props --- @@ -28,6 +28,30 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props + + + + + + + + + + diff --git a/src/components/Header.astro b/src/components/Header.astro index e9a4fbd..d80e275 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -3,6 +3,8 @@ import Container from '@components/Container.astro' import Link from '@components/Link.astro' import { SITE } from '@consts' import { ModeToggle } from '@/components/ui/mode-toggle' +import { Image } from 'astro:assets' +import logo from '../../public/static/logo.svg' const items = [ { href: '/blog', label: 'blog' }, @@ -16,11 +18,12 @@ const items = [ transition:persist > -
+
+ Logo {SITE.TITLE}
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx index c30ed20..038f424 100644 --- a/src/components/ui/avatar.tsx +++ b/src/components/ui/avatar.tsx @@ -10,7 +10,7 @@ const Avatar = React.forwardRef< = ({ + src, + alt, + fallback, + className, +}) => { + return ( + + + {fallback} + + ) +} + +export default AvatarComponent diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx index 9f9afa2..bba7457 100644 --- a/src/components/ui/badge.tsx +++ b/src/components/ui/badge.tsx @@ -5,7 +5,7 @@ import * as React from 'react' import { cn } from '@/lib/utils' const badgeVariants = cva( - 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', + 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs transition-colors focus:outline-none focus:ring focus:ring-ring', { variants: { variant: { diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx index c4e9825..5bde691 100644 --- a/src/components/ui/card.tsx +++ b/src/components/ui/card.tsx @@ -8,7 +8,7 @@ const Card = React.forwardRef< >(({ className, ...props }, ref) => (
)) diff --git a/src/components/ui/mode-toggle.tsx b/src/components/ui/mode-toggle.tsx index 4efbe28..f11e2b7 100644 --- a/src/components/ui/mode-toggle.tsx +++ b/src/components/ui/mode-toggle.tsx @@ -41,7 +41,7 @@ export function ModeToggle() { Toggle theme - + setThemeState('theme-light')}> Light diff --git a/src/content/blog/2022.mdx b/src/content/blog/2022.mdx index 3f7c938..4bfeb48 100644 --- a/src/content/blog/2022.mdx +++ b/src/content/blog/2022.mdx @@ -3,7 +3,7 @@ title: '2022 Post' description: 'This a dummy post written in the year 2022.' date: '2022-01-01' tags: ['dummy', 'placeholder'] -image: '/1200x630.png' +image: '/static/1200x630.png' --- This is a dummy post written in the year 2022. diff --git a/src/content/blog/2023.mdx b/src/content/blog/2023.mdx index eda353b..41e3845 100644 --- a/src/content/blog/2023.mdx +++ b/src/content/blog/2023.mdx @@ -3,7 +3,7 @@ title: '2023 Post' description: 'This a dummy post written in the year 2023.' date: '2023-01-01' tags: ['dummy', 'placeholder'] -image: '/1200x630.png' +image: '/static/1200x630.png' authors: ['enscribe'] --- diff --git a/src/content/blog/2024.mdx b/src/content/blog/2024.mdx index 2b78ab0..feb461d 100644 --- a/src/content/blog/2024.mdx +++ b/src/content/blog/2024.mdx @@ -3,7 +3,7 @@ title: '2024 Post' description: 'This a dummy post written in the year 2024 (with multiple authors).' date: '2024-01-01' tags: ['dummy', 'placeholder'] -image: '/1200x630.png' +image: '/static/1200x630.png' authors: ['enscribe', 'jktrn'] --- diff --git a/src/content/blog/the-state-of-static-blogs.mdx b/src/content/blog/the-state-of-static-blogs.mdx index 31ac3b1..1e19fc9 100644 --- a/src/content/blog/the-state-of-static-blogs.mdx +++ b/src/content/blog/the-state-of-static-blogs.mdx @@ -3,7 +3,7 @@ title: 'The State of Static Blogs in 2024' description: 'There should not be a single reason why you would need a command palette search bar to find a blog post on your own site.' date: '2024-07-25' tags: ['webdev', 'opinion'] -image: '/1200x630.png' +image: '/static/1200x630.png' authors: ['enscribe'] --- @@ -19,7 +19,7 @@ astro-erudite is written in Astro, a framework hyperoptimized for static content This is a non-exhaustive list of features I believe are essential for a frictionless developer experience: -- [shadcn/ui](https://ui.shadcn.com) is a pretty controversial component library. I love it. I don't care much for the components themselves as they are literally [Radix](https://www.radix-ui.com/) primitive wrappers. However, the best part is arguably its take on [theming](https://ui.shadcn.com/docs/theming), which introduces a convention involving CSS colors such as `background` and `foreground` into your Tailwind configuration so that styling is a breeze. These classes also automatically adapt to the user's selected theme, and as such you don't need to worry about adding an equivalent `dark:` style to all of your theming. shadcn/ui turns `"bg-neutral-50 text-neutral-900 dark:bg-neutral-900 dark:text-neutral-50"` into `"bg-background text-foreground"`, both more semantic and easier to blanket edit (if you wanted to change all your blues in your site to indigos, you would need to go around every single class and change it rather than editing a single CSS variable). Other utiliy colors such as `secondary`, `muted`, `accent`, and `destructive` also exist and are very self-explanatory in name (and also have an equivalent `-foreground` class, e.g. `secondary-foreground`, which you can apply to text on top of these colors). +- [shadcn/ui](https://ui.shadcn.com) is a pretty controversial component library. I love it. I don't care much for the components themselves as they are literally [Radix](https://www.radix-ui.com/) primitive wrappers. However, the best part is arguably its take on [theming](https://ui.shadcn.com/docs/theming), which introduces a convention involving CSS colors such as `background` and `foreground` into your Tailwind configuration so that styling is a breeze. These classes also automatically adapt to the user's selected theme, and as such you don't need to worry about adding an equivalent `dark:` style to all of your theming. shadcn/ui turns `"bg-stone-50 text-stone-900 dark:bg-stone-900 dark:text-stone-50"` into `"bg-background text-foreground"`, both more semantic and easier to blanket edit (if you wanted to change all your blues in your site to indigos, you would need to go around every single class and change it rather than editing a single CSS variable). Other utiliy colors such as `secondary`, `muted`, `accent`, and `destructive` also exist and are very self-explanatory in name (and also have an equivalent `-foreground` class, e.g. `secondary-foreground`, which you can apply to text on top of these colors). - [Tailwind Typography](https://github.com/tailwindlabs/tailwindcss-typography) is a plugin that automatically styles any content surrounded by an `
{:html}` tag in a way which makes it readable and blog-post-friendly. It does this via a `prose` class which you can wrap anything with to style the interior content. This is especially useful for HTML you don't control, e.g. a post rendered from Markdown. Although your control over the rendering is a bit less fine-grained, you're also already using Tailwind so this right has long been forsaken. - [Shiki](https://github.com/shikijs/shiki) is a syntax highlighter for code blocks. Although Astro code blocks utilize Shiki under the hood, I've actually disabled the default code blocks in this template so that they don't collide with my preferred library [rehype-pretty-code](https://rehype-pretty.pages.dev), which is _also_ powered by Shiki but allows for line numbers, line highlighting, inline code snytax highlighting, and a transformers API for advanced customization such as manual `diff` visualization and line blurring. This library does not ship with any CSS, and it's up to you to style the code blocks and code block titles as you see fit. I've provided styles in `src/styles/global.css` within the `@layer components{:css}` directive if you wish to fiddle with them. The following code block is an example of how to style code blocks using rehype-pretty-code, and was generated with the following Markdown code: @@ -115,5 +115,5 @@ Within the blog itself (as in the layout, appearance, and navigation) are featur - You really don't need a comments section via [Giscus](https://giscus.app). This opens up a can of worms involving the ability to spam comments and the necessity to moderate them. If you want organic discussion about your blog posts to happen, then share on social media and let people discuss there. - Speaking of sharing on social media, let's get rid of the share buttons. Please inform me of a single time you have used a share button on a blog post. - You really don't need a CMS unless you have thousands of posts and/or are willing to navigate through a clunky management interface. Markdown and folders is really all you need, which you can organize to your preference via folder or file naming conventions. -- If you have literally anything involving an `.env` file in a blog post, please reconsider what you are doing. +- If you have literally anything involving an `.env` file in a blogging site, please think about what you are doing very carefully. - Please do not override the browser's Ctrl + K functionality to open up a command palette. There should not be a single reason why a user would use a small context menu to browse your blog over the `/blog` route. Most of the time, command palettes on sites do nothing more than regurgitate shortcuts that are already on the same page you're hiding with the palette's modal. diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index cb9dd1a..6bb7ed7 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -7,23 +7,30 @@ import { SITE } from '@consts' type Props = { title: string description: string + image?: string } -const { title, description } = Astro.props +const { title, description, image } = Astro.props --- - + - -
-
- -
-