z0x/blog.z0x.ca
Code Actions

fix: layer directives

Browse source
This commit is contained in:
enscribe 2024-09-11 12:31:49 -07:00
parent 0cf5cf226c
commit 1012f562ff
No known key found for this signature in database
GPG key ID: 9BBD5C4114E25322
10 changed files with 143 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Head.astro
View file

@ -1,8 +1,6 @@
--- ---
import '../styles/global.css' import '../styles/global.css'
import '../styles/katex.css' import '../styles/katex.css'
import '../styles/typography.css'
import '../styles/codeblocks.css'
import '@fontsource/geist-sans' import '@fontsource/geist-sans'
import '@fontsource/geist-mono' import '@fontsource/geist-mono'

21
src/components/TableOfContents.astro
View file

@ -27,10 +27,23 @@ function buildToc(headings: Heading[]) {
} }
--- ---
<details open class="mb-8 block rounded-xl border p-3 xl:hidden"> <details open class="group mb-8 block rounded-xl border p-3 xl:hidden">
<summary class="cursor-pointer text-xl font-semibold" <summary
>Table of Contents</summary class="flex cursor-pointer items-center justify-between text-xl font-semibold"
> >
Table of Contents
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 transition-transform group-open:rotate-180"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</summary>
<nav> <nav>
<ul class="py-3"> <ul class="py-3">
{toc.map((heading) => <TableOfContentsHeading heading={heading} />)} {toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
@ -41,7 +54,7 @@ function buildToc(headings: Heading[]) {
class="overflow-wrap-break-word sticky top-16 hidden h-0 w-[calc(50vw-50%-4rem)] translate-x-[calc(-100%-2em)] text-xs leading-4 xl:block" class="overflow-wrap-break-word sticky top-16 hidden h-0 w-[calc(50vw-50%-4rem)] translate-x-[calc(-100%-2em)] text-xs leading-4 xl:block"
> >
<div class="mr-6 flex justify-end"> <div class="mr-6 flex justify-end">
<ul class="space-y-2"> <ul class="max-h-[calc(100vh-8rem)] space-y-2 overflow-y-auto">
<li> <li>
<h2 class="mb-2 text-lg font-semibold">Table of Contents</h2> <h2 class="mb-2 text-lg font-semibold">Table of Contents</h2>
</li> </li>

2
src/components/TableOfContentsHeading.astro
View file

@ -6,7 +6,7 @@ const { heading } = Astro.props
--- ---
<li <li
class="list-inside list-disc px-6 py-1.5 text-sm text-foreground/60 xl:list-none xl:p-0" class="mr-2 list-inside list-disc px-6 py-1.5 text-sm text-foreground/60 xl:list-none xl:p-0"
> >
<Link href={'#' + heading.slug} class="toc-link" data-heading={heading.slug}> <Link href={'#' + heading.slug} class="toc-link" data-heading={heading.slug}>
{heading.text} {heading.text}

54
src/content/blog/blog-post-4.mdx
View file

@ -27,13 +27,9 @@ end
```tsx showLineNumbers ```tsx showLineNumbers
console.log('Introduction.') console.log('Introduction.')
console.log('Subtraction.') // [!code --]
console.log('Subtraction.') // [!code focus] // [!code --] console.log('Addition.') // [!code ++]
console.log('In focus.')
console.log('Addition.') // [!code focus] // [!code ++]
console.log('In focus.') // [!code focus]
console.log('End.') console.log('End.')
``` ```
@ -139,6 +135,46 @@ we can use 3 backticks ``` in new line and write snippet and close with 3 backti
<p>Test</p> <p>Test</p>
</body> </body>
</html> </html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
``` ```
```` ````
@ -226,7 +262,7 @@ H<sub>2</sub>O
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup> X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session. Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures. Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
``` ```
@ -239,7 +275,7 @@ H<sub>2</sub>O
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup> X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session. Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures. Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.

2
src/pages/blog/[...slug].astro
View file

@ -154,7 +154,7 @@ if (
post.data.tags.map((tag) => ( post.data.tags.map((tag) => (
<a <a
href={`/tags/${tag}`} href={`/tags/${tag}`}
class={badgeVariants({ variant: 'outline' })} class={badgeVariants({ variant: 'secondary' })}
> >
{tag} {tag}
</a> </a>

7
src/pages/index.astro
View file

@ -26,10 +26,13 @@ const blog = (await getCollection('blog'))
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle className="text-3xl">er·u·dite</CardTitle> <CardTitle className="text-3xl">er·u·dite</CardTitle>
<CardDescription>/ˈer(y)əˌdīt/</CardDescription> <CardDescription
>/ˈer(y)əˌdīt/ &bull; <span
class="font-semibold text-muted-foreground">adjective</span
></CardDescription
>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p class="font-medium">adjective</p>
<p>having or showing great knowledge or learning.</p> <p>having or showing great knowledge or learning.</p>
</CardContent> </CardContent>
</Card> </Card>

61
src/styles/codeblocks.css
View file

@ -1,61 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
code[data-theme*=' '] span {
color: var(--shiki-light);
}
.dark code[data-theme*=' '] span {
color: var(--shiki-dark);
}
pre {
@apply overflow-x-auto rounded-xl p-4 text-sm leading-loose;
}
pre > code {
counter-reset: line;
}
code[data-line-numbers] {
counter-reset: line;
}
code[data-line-numbers] > [data-line]::before {
counter-increment: line;
content: counter(line);
@apply mr-4 inline-block w-4 text-right text-muted-foreground;
}
[data-highlighted-line] {
@apply !bg-secondary;
}
[data-highlighted-chars] > span {
@apply rounded-md border !bg-secondary p-1 font-semibold;
}
[data-rehype-pretty-code-title] {
@apply rounded-t-xl border-x border-t p-2 text-sm font-semibold !text-foreground;
}
[data-rehype-pretty-code-title] + pre {
@apply mt-0 rounded-t-none;
}
.diff.add {
background-color: #0505;
}
.diff.remove {
background-color: #8005;
}
.has-focused .line {
filter: blur(0.095rem);
}
.has-focused .focused {
filter: blur(0);
}
}

62
src/styles/global.css
View file

@ -40,12 +40,14 @@
--popover-foreground: 0 0% 3.9%; --popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%; --primary: 0 0% 9%;
--primary-foreground: 0 0% 98%; --primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%; --secondary: 0 0% 80.1%;
--secondary-foreground: 0 0% 9%; --secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%; --muted: 0 0% 80.1%;
--muted-foreground: 0 0% 45.1%; --muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%; --accent: 0 0% 80.1%;
--accent-foreground: 0 0% 9%; --accent-foreground: 0 0% 9%;
--additive: 112 50% 36%;
--additive-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%; --destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%; --border: 0 0% 89.8%;
@ -73,6 +75,8 @@
--muted-foreground: 0 0% 63.9%; --muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%; --accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%; --accent-foreground: 0 0% 98%;
--additive: 112 50% 36%;
--additive-foreground: 0 0% 9%;
--destructive: 0 62.8% 30.6%; --destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%; --border: 0 0% 14.9%;
@ -100,3 +104,55 @@
color-scheme: dark; color-scheme: dark;
} }
} }
@layer components {
code[data-theme*=' '] span {
color: var(--shiki-light);
}
.dark code[data-theme*=' '] span {
color: var(--shiki-dark);
}
pre {
@apply max-h-[600px] overflow-auto rounded-xl border bg-secondary/20 p-4 text-sm leading-loose;
}
pre > code {
counter-reset: line;
}
code[data-line-numbers] {
counter-reset: line;
}
code[data-line-numbers] > [data-line]::before {
counter-increment: line;
content: counter(line);
@apply mr-4 inline-block w-4 text-right text-muted-foreground;
}
[data-highlighted-line] {
@apply !bg-foreground/10;
}
[data-highlighted-chars] > span {
@apply rounded-md border !border-muted-foreground/40 !bg-muted p-1 font-semibold;
}
[data-rehype-pretty-code-title] {
@apply rounded-t-xl border-x border-t px-4 py-2 text-sm font-medium !text-foreground;
}
[data-rehype-pretty-code-title] + pre {
@apply mt-0 rounded-t-none;
}
.diff.add {
@apply bg-additive/15;
}
.diff.remove {
@apply bg-destructive/15;
}
}

18
src/styles/typography.css
View file

@ -1,18 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
article {
@apply prose prose-neutral dark:prose-invert;
@apply prose-h1:scroll-m-20 prose-h1:text-4xl prose-h1:font-extrabold prose-h1:tracking-tight prose-h1:lg:text-5xl;
@apply prose-h2:mt-10 prose-h2:scroll-m-20 prose-h2:border-b prose-h2:pb-2 prose-h2:text-3xl prose-h2:font-semibold prose-h2:tracking-tight prose-h2:transition-colors prose-h2:first:mt-0;
@apply prose-h3:mt-8 prose-h3:scroll-m-20 prose-h3:text-2xl prose-h3:font-semibold prose-h3:tracking-tight;
@apply prose-p:leading-7 prose-p:[&:not(:first-child)]:mt-6;
@apply prose-a:font-medium prose-a:text-primary prose-a:underline prose-a:underline-offset-4;
@apply prose-blockquote:mt-6 prose-blockquote:border-l-2 prose-blockquote:pl-6 prose-blockquote:italic;
@apply prose-ul:my-6 prose-ul:ml-6 prose-ul:list-disc prose-ul:[&>li]:mt-2;
@apply prose-pre:border prose-pre:border-border;
@apply prose-img:mx-auto prose-img:my-auto;
}
}

30
tailwind.config.ts
View file

@ -1,16 +1,6 @@
import type { Config } from 'tailwindcss' import type { Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme' import defaultTheme from 'tailwindcss/defaultTheme'
const disabledCss = {
'code::before': false,
'code::after': false,
'blockquote p:first-of-type::before': false,
'blockquote p:last-of-type::after': false,
pre: false,
code: false,
'pre code': false,
}
const config: Config = { const config: Config = {
darkMode: ['selector'], darkMode: ['selector'],
content: ['./src/**/*.{astro,md,mdx,ts,tsx}'], content: ['./src/**/*.{astro,md,mdx,ts,tsx}'],
@ -52,6 +42,10 @@ const config: Config = {
DEFAULT: 'hsl(var(--accent))', DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))', foreground: 'hsl(var(--accent-foreground))',
}, },
additive: {
DEFAULT: 'hsl(var(--additive))',
foreground: 'hsl(var(--additive-foreground))',
},
destructive: { destructive: {
DEFAULT: 'hsl(var(--destructive))', DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))', foreground: 'hsl(var(--destructive-foreground))',
@ -68,11 +62,17 @@ const config: Config = {
}, },
}, },
typography: { typography: {
DEFAULT: { css: disabledCss }, DEFAULT: {
sm: { css: disabledCss }, css: {
lg: { css: disabledCss }, 'code::before': 'false',
xl: { css: disabledCss }, 'code::after': 'false',
'2xl': { css: disabledCss }, 'blockquote p:first-of-type::before': 'false',
'blockquote p:last-of-type::after': 'false',
pre: 'false',
code: 'false',
'pre code': 'false',
},
},
}, },
}, },
}, },