From 4382f7165c6822d040aba85f848abf1a802b4b03 Mon Sep 17 00:00:00 2001 From: jason <123jasont@gmail.com> Date: Wed, 11 Sep 2024 22:54:47 -0700 Subject: [PATCH] feat: copy button --- astro.config.ts | 17 +- package-lock.json | 9 + package.json | 1 + src/components/BlogCard.astro | 6 +- src/components/Container.astro | 12 +- src/components/Link.astro | 2 +- src/components/ui/badge.tsx | 8 +- src/content/blog/2022.mdx | 10 + src/content/blog/2023.mdx | 10 + src/content/blog/2024.mdx | 10 + src/content/blog/blog-post-1.mdx | 113 ------- src/content/blog/blog-post-2.mdx | 113 ------- src/content/blog/blog-post-3.mdx | 113 ------- src/content/blog/blog-post-4.mdx | 312 ------------------ .../blog/the-state-of-static-blogs.mdx | 58 ++++ src/lib/utils.ts | 4 +- src/pages/404.astro | 28 +- src/pages/about.astro | 6 +- src/pages/blog/[...slug].astro | 3 +- src/pages/blog/index.astro | 40 ++- src/pages/index.astro | 31 +- src/styles/global.css | 43 +-- 22 files changed, 197 insertions(+), 752 deletions(-) create mode 100644 src/content/blog/2022.mdx create mode 100644 src/content/blog/2023.mdx create mode 100644 src/content/blog/2024.mdx delete mode 100644 src/content/blog/blog-post-1.mdx delete mode 100644 src/content/blog/blog-post-2.mdx delete mode 100644 src/content/blog/blog-post-3.mdx delete mode 100644 src/content/blog/blog-post-4.mdx create mode 100644 src/content/blog/the-state-of-static-blogs.mdx diff --git a/astro.config.ts b/astro.config.ts index 4ccf0f1..c15ee13 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -3,6 +3,7 @@ import mdx from '@astrojs/mdx' import react from '@astrojs/react' import sitemap from '@astrojs/sitemap' import tailwind from '@astrojs/tailwind' +import { transformerCopyButton } from '@rehype-pretty/transformers' import { transformerMetaHighlight, transformerNotationDiff, @@ -26,13 +27,6 @@ export default defineConfig({ react(), ], markdown: { - // shikiConfig: { - // transformers: [ - // transformerNotationDiff(), - // transformerNotationFocus(), - // transformerMetaHighlight(), - // ], - // }, syntaxHighlight: false, rehypePlugins: [ rehypeHeadingIds, @@ -44,7 +38,14 @@ export default defineConfig({ light: 'vitesse-light', dark: 'vitesse-dark', }, - transformers: [transformerNotationDiff(), transformerMetaHighlight()], + transformers: [ + transformerNotationDiff(), + transformerMetaHighlight(), + transformerCopyButton({ + visibility: 'hover', + feedbackDuration: 1000, + }), + ], }, ], ], diff --git a/package-lock.json b/package-lock.json index 6e267ce..75a6e37 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", + "@rehype-pretty/transformers": "^0.13.2", "@shikijs/transformers": "^1.16.3", "@types/react": "^18.3.5", "@types/react-dom": "^18.3.0", @@ -2344,6 +2345,14 @@ "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz", "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==" }, + "node_modules/@rehype-pretty/transformers": { + "version": "0.13.2", + "resolved": "https://registry.npmjs.org/@rehype-pretty/transformers/-/transformers-0.13.2.tgz", + "integrity": "sha512-p2ciQSwqy5Ip8aNUa9q6rdS/hJZXrxHYYfDVOHvKOsBu3t9HDmQ65YX6r9Qbl19vi160OAxmGF7MIoCRDJrRhg==", + "engines": { + "node": ">=18" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.18.1", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.1.tgz", diff --git a/package.json b/package.json index 9b8aada..e275002 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", + "@rehype-pretty/transformers": "^0.13.2", "@shikijs/transformers": "^1.16.3", "@types/react": "^18.3.5", "@types/react-dom": "^18.3.0", diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro index 089faa0..8e83099 100644 --- a/src/components/BlogCard.astro +++ b/src/components/BlogCard.astro @@ -40,11 +40,11 @@ if ( > { entry.data.image && ( -
+
{entry.data.title}
{ author && ( diff --git a/src/components/Container.astro b/src/components/Container.astro index 1cc48e6..c25fda6 100644 --- a/src/components/Container.astro +++ b/src/components/Container.astro @@ -1,5 +1,11 @@ --- +import { cn } from '@/lib/utils' + +interface Props { + class?: string +} + +const { class: className } = Astro.props +--- ---- - -
+
diff --git a/src/components/Link.astro b/src/components/Link.astro index 6f33fe4..31872dd 100644 --- a/src/components/Link.astro +++ b/src/components/Link.astro @@ -24,7 +24,7 @@ const { target={external ? '_blank' : '_self'} class={cn( 'inline-block transition-colors duration-300 ease-in-out', - underline && 'hover:underline hover:underline-offset-[3px]', + underline && 'underline underline-offset-[3px]', className, )} data-heading={dataHeading} diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx index 85383ec..91b7046 100644 --- a/src/components/ui/badge.tsx +++ b/src/components/ui/badge.tsx @@ -1,10 +1,11 @@ import { cva, type VariantProps } from 'class-variance-authority' +import { Hash } from 'lucide-react' 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 font-semibold 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-2 focus:ring-ring focus:ring-offset-2', { variants: { variant: { @@ -29,7 +30,10 @@ export interface BadgeProps function Badge({ className, variant, ...props }: BadgeProps) { return ( -
+
+ + {props.children} +
) } diff --git a/src/content/blog/2022.mdx b/src/content/blog/2022.mdx new file mode 100644 index 0000000..9786511 --- /dev/null +++ b/src/content/blog/2022.mdx @@ -0,0 +1,10 @@ +--- +title: '2022 Post' +description: 'This a dummy post written in the year 2022.' +date: '2022-01-01' +tags: ['dummy', 'placeholder'] +image: '/1200x630.png' +author: 'enscribe' +--- + +This is a dummy post written in the year 2022. diff --git a/src/content/blog/2023.mdx b/src/content/blog/2023.mdx new file mode 100644 index 0000000..95a34c1 --- /dev/null +++ b/src/content/blog/2023.mdx @@ -0,0 +1,10 @@ +--- +title: '2023 Post' +description: 'This a dummy post written in the year 2023.' +date: '2023-01-01' +tags: ['dummy', 'placeholder'] +image: '/1200x630.png' +author: 'enscribe' +--- + +This is a dummy post written in the year 2023. diff --git a/src/content/blog/2024.mdx b/src/content/blog/2024.mdx new file mode 100644 index 0000000..7107e1c --- /dev/null +++ b/src/content/blog/2024.mdx @@ -0,0 +1,10 @@ +--- +title: '2024 Post' +description: 'This a dummy post written in the year 2024.' +date: '2024-01-01' +tags: ['dummy', 'placeholder'] +image: '/1200x630.png' +author: 'enscribe' +--- + +This is a dummy post written in the year 2024. diff --git a/src/content/blog/blog-post-1.mdx b/src/content/blog/blog-post-1.mdx deleted file mode 100644 index b249487..0000000 --- a/src/content/blog/blog-post-1.mdx +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: 'Blog Post' -description: 'Features, enhancements, and changes.' -date: '2022-07-25' -tags: ['log', 'rss-feed'] -image: '/1200x630.png' -author: 'enscribe' ---- - -## h2 Heading - -### h3 Heading - -#### h4 Heading - -##### h5 Heading - -###### h6 Heading - -## Emphasis - -**This is bold text** - -**This is bold text** - -_This is italic text_ - -_This is italic text_ - -~~Strikethrough~~ - -## Blockquotes - -> Blockquotes can also be nested... -> -> > ...by using additional greater-than signs right next to each other... -> > -> > > ...or with spaces between arrows. - -## Lists - -Unordered - -- Create a list by starting a line with `+`, `-`, or `*` -- Sub-lists are made by indenting 2 spaces: - - Marker character change forces new list start: - - Ac tristique libero volutpat at - * Facilisis in pretium nisl aliquet - - Nulla volutpat aliquam velit -- Very easy! - -Ordered - -1. Lorem ipsum dolor sit amet -2. Consectetur adipiscing elit -3. Integer molestie lorem at massa - -4. You can use sequential numbers... -5. ...or keep all the numbers as `1.` - -Start numbering with offset: - -57. foo -1. bar - -## Code - -Inline `code` - -Indented code - - // Some comments - line 1 of code - line 2 of code - line 3 of code - -Block code "fences" - -``` -Sample text here... -``` - -Syntax highlighting - -```js -var foo = function (bar) { - return bar++ -} - -console.log(foo(5)) -``` - -## Tables - -| Option | Description | -| ------ | ------------------------------------------------------------------------- | -| data | path to data files to supply the data that will be passed into templates. | -| engine | engine to be used for processing templates. Handlebars is the default. | -| ext | extension to be used for dest files. | - -Right aligned columns - -| Option | Description | -| -----: | ------------------------------------------------------------------------: | -| data | path to data files to supply the data that will be passed into templates. | -| engine | engine to be used for processing templates. Handlebars is the default. | -| ext | extension to be used for dest files. | - -## Links - -[link text](http://dev.nodeca.com) - -[link with title](http://nodeca.github.io/pica/demo/ 'title text!') diff --git a/src/content/blog/blog-post-2.mdx b/src/content/blog/blog-post-2.mdx deleted file mode 100644 index e55488d..0000000 --- a/src/content/blog/blog-post-2.mdx +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: 'Blog Post' -description: 'Features, enhancements, and changes.' -date: '2023-07-25' -tags: ['log', 'rss-feed'] -image: '/1200x630.png' -author: 'enscribe' ---- - -## h2 Heading - -### h3 Heading - -#### h4 Heading - -##### h5 Heading - -###### h6 Heading - -## Emphasis - -**This is bold text** - -**This is bold text** - -_This is italic text_ - -_This is italic text_ - -~~Strikethrough~~ - -## Blockquotes - -> Blockquotes can also be nested... -> -> > ...by using additional greater-than signs right next to each other... -> > -> > > ...or with spaces between arrows. - -## Lists - -Unordered - -- Create a list by starting a line with `+`, `-`, or `*` -- Sub-lists are made by indenting 2 spaces: - - Marker character change forces new list start: - - Ac tristique libero volutpat at - * Facilisis in pretium nisl aliquet - - Nulla volutpat aliquam velit -- Very easy! - -Ordered - -1. Lorem ipsum dolor sit amet -2. Consectetur adipiscing elit -3. Integer molestie lorem at massa - -4. You can use sequential numbers... -5. ...or keep all the numbers as `1.` - -Start numbering with offset: - -57. foo -1. bar - -## Code - -Inline `code` - -Indented code - - // Some comments - line 1 of code - line 2 of code - line 3 of code - -Block code "fences" - -``` -Sample text here... -``` - -Syntax highlighting - -```js -var foo = function (bar) { - return bar++ -} - -console.log(foo(5)) -``` - -## Tables - -| Option | Description | -| ------ | ------------------------------------------------------------------------- | -| data | path to data files to supply the data that will be passed into templates. | -| engine | engine to be used for processing templates. Handlebars is the default. | -| ext | extension to be used for dest files. | - -Right aligned columns - -| Option | Description | -| -----: | ------------------------------------------------------------------------: | -| data | path to data files to supply the data that will be passed into templates. | -| engine | engine to be used for processing templates. Handlebars is the default. | -| ext | extension to be used for dest files. | - -## Links - -[link text](http://dev.nodeca.com) - -[link with title](http://nodeca.github.io/pica/demo/ 'title text!') diff --git a/src/content/blog/blog-post-3.mdx b/src/content/blog/blog-post-3.mdx deleted file mode 100644 index d969c31..0000000 --- a/src/content/blog/blog-post-3.mdx +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: 'Blog Post' -description: 'Features, enhancements, and changes.' -date: '2024-07-25' -tags: ['log', 'rss-feed'] -image: '/1200x630.png' -author: 'enscribe' ---- - -## h2 Heading - -### h3 Heading - -#### h4 Heading - -##### h5 Heading - -###### h6 Heading - -## Emphasis - -**This is bold text** - -**This is bold text** - -_This is italic text_ - -_This is italic text_ - -~~Strikethrough~~ - -## Blockquotes - -> Blockquotes can also be nested... -> -> > ...by using additional greater-than signs right next to each other... -> > -> > > ...or with spaces between arrows. - -## Lists - -Unordered - -- Create a list by starting a line with `+`, `-`, or `*` -- Sub-lists are made by indenting 2 spaces: - - Marker character change forces new list start: - - Ac tristique libero volutpat at - * Facilisis in pretium nisl aliquet - - Nulla volutpat aliquam velit -- Very easy! - -Ordered - -1. Lorem ipsum dolor sit amet -2. Consectetur adipiscing elit -3. Integer molestie lorem at massa - -4. You can use sequential numbers... -5. ...or keep all the numbers as `1.` - -Start numbering with offset: - -57. foo -1. bar - -## Code - -Inline `code` - -Indented code - - // Some comments - line 1 of code - line 2 of code - line 3 of code - -Block code "fences" - -``` -Sample text here... -``` - -Syntax highlighting - -```js -var foo = function (bar) { - return bar++ -} - -console.log(foo(5)) -``` - -## Tables - -| Option | Description | -| ------ | ------------------------------------------------------------------------- | -| data | path to data files to supply the data that will be passed into templates. | -| engine | engine to be used for processing templates. Handlebars is the default. | -| ext | extension to be used for dest files. | - -Right aligned columns - -| Option | Description | -| -----: | ------------------------------------------------------------------------: | -| data | path to data files to supply the data that will be passed into templates. | -| engine | engine to be used for processing templates. Handlebars is the default. | -| ext | extension to be used for dest files. | - -## Links - -[link text](http://dev.nodeca.com) - -[link with title](http://nodeca.github.io/pica/demo/ 'title text!') diff --git a/src/content/blog/blog-post-4.mdx b/src/content/blog/blog-post-4.mdx deleted file mode 100644 index 612f6bc..0000000 --- a/src/content/blog/blog-post-4.mdx +++ /dev/null @@ -1,312 +0,0 @@ ---- -title: 'Blog Post' -description: 'Features, enhancements, and changes.' -date: '2024-07-25' -tags: ['log', 'rss-feed'] -image: '/1200x630.png' -author: 'enscribe' ---- - -```elixir title="fib.ex" showLineNumbers /palindrome/ {1-2, 5-8} -defmodule Solution do - @spec is_palindrome(x :: integer) :: boolean - def is_palindrome(x) when x < 0, do: false - def is_palindrome(x), do: do_is_palindrome(x, get_base_10(x, 1)) - - defp do_is_palindrome(x, b10) when b10 > 1, - do: get_first_digit(x, b10) == rem(x, 10) and do_is_palindrome(div(x, 10), div(b10, 100)) - - defp do_is_palindrome(_, _), do: true - - defp get_first_digit(n, b10), do: div(n, b10) |> rem(10) - - defp get_base_10(n, b10) when n >= b10, do: get_base_10(n, b10 * 10) - defp get_base_10(n, b10), do: div(b10, 10) -end -``` - -```tsx showLineNumbers -console.log('Introduction.') -console.log('Subtraction.') // [!code --] -console.log('Addition.') // [!code ++] -console.log('In focus.') -console.log('End.') -``` - -Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro. - -## Headings - -The following HTML `

`—`

` elements represent six levels of section headings. `

` is the highest section level while `

` is the lowest. - -## H2 - -### H3 - -#### H4 - -##### H5 - -###### H6 - -## Paragraph - -Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat. - -Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat. - -## Images - -#### Syntax - -```markdown -![Alt text](./full/or/relative/path/of/image) -``` - -#### Output - -![blog placeholder](/blog-placeholder-about.jpg) - -## Blockquotes - -The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations. - -### Blockquote without attribution - -#### Syntax - -```markdown -> Tiam, ad mint andaepu dandae nostion secatur sequo quae. -> **Note** that you can use _Markdown syntax_ within a blockquote. -``` - -#### Output - -> Tiam, ad mint andaepu dandae nostion secatur sequo quae. -> **Note** that you can use _Markdown syntax_ within a blockquote. - -### Blockquote with attribution - -#### Syntax - -```markdown -> Don't communicate by sharing memory, share memory by communicating. -> — Rob Pike[^1] -``` - -#### Output - -> Don't communicate by sharing memory, share memory by communicating. -> — Rob Pike[^1] - -[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015. - -## Tables - -#### Syntax - -```markdown -| Italics | Bold | Code | -| --------- | -------- | ------ | -| _italics_ | **bold** | `code` | -``` - -#### Output - -| Italics | Bold | Code | -| --------- | -------- | ------ | -| _italics_ | **bold** | `code` | - -## Code Blocks - -#### Syntax - -we can use 3 backticks ``` in new line and write snippet and close with 3 backticks on new line and to highlight language specific syntac, write one word of language name after first 3 backticks, for eg. html, javascript, css, markdown, typescript, txt, bash - -````markdown -```html - - - - - Example HTML5 Document - - -

Test

- - - - - - - Example HTML5 Document - - -

Test

- - - - - - - Example HTML5 Document - - -

Test

- - - - - - - Example HTML5 Document - - -

Test

- - - - - - - Example HTML5 Document - - -

Test

- - -``` -```` - -Output - -```html - - - - - Example HTML5 Document - - -

Test

- - -``` - -## List Types - -### Ordered List - -#### Syntax - -```markdown -1. First item -2. Second item -3. Third item -``` - -#### Output - -1. First item -2. Second item -3. Third item - -### Unordered List - -#### Syntax - -```markdown -- List item -- Another item -- And another item -``` - -#### Output - -- List item -- Another item -- And another item - -### Nested list - -#### Syntax - -```markdown -- Fruit - - Apple - - Orange - - Banana -- Dairy - - Milk - - Cheese -``` - -#### Output - -- Fruit - - Apple - - Orange - - Banana -- Dairy - - Milk - - Cheese - -## Other Elements — abbr, sub, sup, kbd, mark - -#### Syntax - -```markdown -GIF is a bitmap image format. - -H2O - -Xn + Yn = Zn - -Press CTRL+ALT+Delete to end the session. - -Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. -``` - -#### Output - -GIF is a bitmap image format. - -H2O - -Xn + Yn = Zn - -Press CTRL+ALT+Delete to end the session. - -Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. - -```js title="/src/app/fetchMovie.js" -const movies = await fetchMovies() -``` - -```js caption="Fetch movies from our server" -export async function fetchMovies() { - const response = await fetch('http://example.com/movies.json') - return await response.json() -} -``` - -```js {2-4} -const movies = await fetchMovies() -movies.map((movie, i) => { - console.log(movie.title) -}) -``` - -```js /movie.title/ -const movies = await fetchMovies() -movies.map((movie, i) => { - console.log(movie.title) -}) -``` - -```js showLineNumbers -const movies = await fetchMovies() -movies.map((movie, i) => { - console.log(movie.title) -}) -``` diff --git a/src/content/blog/the-state-of-static-blogs.mdx b/src/content/blog/the-state-of-static-blogs.mdx new file mode 100644 index 0000000..1c784e3 --- /dev/null +++ b/src/content/blog/the-state-of-static-blogs.mdx @@ -0,0 +1,58 @@ +--- +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' +author: 'enscribe' +--- + +## Introduction + +Hello! My name is enscribe, and I'm a fullstack web developer who has been fiddling with blogging platforms for a couple of years now. I run a blog at [enscribe.dev](https://enscribe.dev), where I write about cybersecurity and the capture-the-flag (CTF) scene. + +I have a lot of opinions about what makes a great blogging template. As a cumulative result of all the slop, bullshit, and outright terrible design decisions I've had to deal with working with various templates and frameworks, I bring you [astro-erudite](https://github.com/jktrn/astro-erudite), which should hopefully bring a better developer and user experience in terms of ease of use, customization, and performance. + +astro-erudite is written in Astro, a framework hyperoptimized for static content such as blogs. Within the codebase of this template I've included many nuances that, in my opinion (and there will be many, many opinions here), make the developer experience significantly more pleasant. I've also _excluded_ many features that, frankly, you don't need. + +### Welcoming some features + +- [shadcn/ui](https://ui.shadcn.com) is a pretty controversial component library. I love it. 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). +- [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: + + ```css title="src/styles/global.css" caption="Styling code blocks using rehype-pretty-code (with a caption down here)" showLineNumbers{80} {10-12} /pre/ + @layer components { + code[data-theme*=' '] span { /* [!code ++] */ + color: var(--shiki-light); /* [!code ++] */ + } /* [!code ++] */ + + .dark code[data-theme*=' '] span { /* [!code --] */ + color: var(--shiki-dark); /* [!code --] */ + } /* [!code --] */ + + pre { + @apply max-h-[600px] overflow-auto rounded-xl border bg-secondary/20 p-4 text-sm leading-loose; + } + ``` + + The following snippet was generated with this Markdown code: + + ````mdx + ```css title="src/styles/global.css" caption="Styling code blocks using rehype-pretty-code (with a caption down here)" showLineNumbers{80} {10-12} /pre/ + + ``` + ```` + + When I added those two diff additions and deletions, I simply added `/* [!code ++] */` and `/* [!code --] */` to the lines I wanted to highlight. Just use the comment syntax of whatever language you're attempting to highlight. + +### Foregoing some slop + +- Goodbye, [ESLint](https://eslint.org/)! There have been so many occasions where I've had to deal with blogging templates with in-built pre-commit hooks which enforce contrived and arbitrary linting rules that, frankly, I couldn't be bothered with. Obviously, linting is awesome for ensuring consistency and best practice, but that's with shared and large codebases. You're dealing with, at most, your mediocre MDX blog posts and some interior fetching. It's just not worth the hypertension. + +- You really don't need analytics via [Umami](https://umami.is) or [Plausible](https://plausible.io). Let's be realistic: for many personal blogs, unless you're an anime profile picture Twitter microcelebrity and/or the daughter of Taylor Swift you don't need to know how many of your avid fans click Big Button A versus how many click Big Button B. +- 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. +- 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/lib/utils.ts b/src/lib/utils.ts index 02428ce..f81827c 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -8,8 +8,8 @@ export function cn(...inputs: ClassValue[]) { export function formatDate(date: Date) { return Intl.DateTimeFormat('en-US', { year: 'numeric', - month: '2-digit', - day: '2-digit', + month: 'long', + day: 'numeric', }).format(date) } diff --git a/src/pages/404.astro b/src/pages/404.astro index 85856a2..4c29591 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -13,11 +13,12 @@ import { BreadcrumbSeparator, } from '@/components/ui/breadcrumb' import { HomeIcon } from 'lucide-react' +import { cn } from '@lib/utils' --- - - + +

404: Page not found

@@ -40,16 +41,17 @@ import { HomeIcon } from 'lucide-react' Oops! The page you're looking for doesn't exist.

-
- - ← Go to home page - -
+ + ← Go to home page +
diff --git a/src/pages/about.astro b/src/pages/about.astro index 7c62e86..9550071 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -15,8 +15,8 @@ import { HomeIcon } from 'lucide-react' --- - - + + -
+

Some more about us

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro index b8234b7..0354467 100644 --- a/src/pages/blog/[...slug].astro +++ b/src/pages/blog/[...slug].astro @@ -16,7 +16,7 @@ import { BreadcrumbPage, BreadcrumbSeparator, } from '@/components/ui/breadcrumb' -import { HomeIcon } from 'lucide-react' +import { Hash, HomeIcon } from 'lucide-react' import { cn } from '@/lib/utils' import { Separator } from '@/components/ui/separator' import Link from '@components/Link.astro' @@ -156,6 +156,7 @@ if ( href={`/tags/${tag}`} class={badgeVariants({ variant: 'secondary' })} > + {tag} )) diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index 5cf5ba2..505515c 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -34,8 +34,8 @@ const years = Object.keys(posts).sort((a, b) => parseInt(b) - parseInt(a)) --- - - + + parseInt(b) - parseInt(a)) -

-
- { - years.map((year) => ( -
-
{year}
-
-
    - {posts[year].map((post) => ( -
  • - -
    • - ))} -
-
-
- )) - } -
+
+ { + years.map((year) => ( +
+
{year}
+
+
    + {posts[year].map((post) => ( +
  • + +
    • + ))} +
+
+
+ )) + }
diff --git a/src/pages/index.astro b/src/pages/index.astro index 0c3432e..b04e68d 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -21,31 +21,32 @@ const blog = (await getCollection('blog')) --- - -
+ +
er·u·dite /ˈer(y)əˌdīt/ • adjective/ˈer(y)əˌdīt/ • adjective -

having or showing great knowledge or learning.

+

+ astro-erudite is an opinionated, no-frills static blogging template + built with Astro. To learn more about why this template exists, read The State of Static Blogs in 2024. +

-
-

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

-
-
-

Latest posts

-
-
    +
+
+

Latest posts

+
    { blog.map((post) => (
  • diff --git a/src/styles/global.css b/src/styles/global.css index e0f21d6..73a728c 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -2,34 +2,6 @@ @tailwind components; @tailwind utilities; -:root { - --astro-code-color-text: #09090b; - --astro-code-color-background: #fafafa; - --astro-code-token-comment: #a19595; - --astro-code-token-keyword: #f47067; - --astro-code-token-string: #00a99a; - --astro-code-token-function: #429996; - --astro-code-token-constant: #2b70c5; - --astro-code-token-parameter: #4e8fdf; - --astro-code-token-string-expression: #ae42a0; - --astro-code-token-punctuation: #8996a3; - --astro-code-token-link: #8d85ff; -} - -.dark { - --astro-code-color-text: #fafafa; - --astro-code-color-background: #09090b; - --astro-code-token-comment: #a19595; - --astro-code-token-keyword: #f47067; - --astro-code-token-string: #00a99a; - --astro-code-token-function: #6eafad; - --astro-code-token-constant: #b3cceb; - --astro-code-token-parameter: #4e8fdf; - --astro-code-token-string-expression: #bf7db6; - --astro-code-token-punctuation: #8996a3; - --astro-code-token-link: #8d85ff; -} - @layer base { :root { --background: 0 0% 100%; @@ -103,6 +75,10 @@ html.dark { color-scheme: dark; } + + ::-webkit-scrollbar-corner { + @apply bg-transparent; + } } @layer components { @@ -115,11 +91,12 @@ } pre { - @apply max-h-[600px] overflow-auto rounded-xl border bg-secondary/20 p-4 text-sm leading-loose; + @apply max-h-[600px] overflow-auto rounded-xl border bg-secondary/20 py-4 text-sm leading-loose; } pre > code { counter-reset: line; + @apply whitespace-pre-wrap; } code[data-line-numbers] { @@ -132,6 +109,10 @@ @apply mr-4 inline-block w-4 text-right text-muted-foreground; } + pre > code > span[data-line] { + @apply px-4; + } + [data-highlighted-line] { @apply !bg-foreground/10; } @@ -155,4 +136,8 @@ .diff.remove { @apply bg-destructive/15; } + + article :not(pre) > code { + @apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-medium; + } }