From 1012f562ff0bbc10034e63bbc4e9901d896b7168 Mon Sep 17 00:00:00 2001
From: enscribe <jason@enscribe.dev>
Date: Wed, 11 Sep 2024 12:31:49 -0700
Subject: [PATCH] fix: layer directives

---
 src/components/Head.astro                   |  2 -
 src/components/TableOfContents.astro        | 21 +++++--
 src/components/TableOfContentsHeading.astro |  2 +-
 src/content/blog/blog-post-4.mdx            | 54 +++++++++++++++---
 src/pages/blog/[...slug].astro              |  2 +-
 src/pages/index.astro                       |  7 ++-
 src/styles/codeblocks.css                   | 61 --------------------
 src/styles/global.css                       | 62 ++++++++++++++++++++-
 src/styles/typography.css                   | 18 ------
 tailwind.config.ts                          | 30 +++++-----
 10 files changed, 143 insertions(+), 116 deletions(-)
 delete mode 100644 src/styles/codeblocks.css
 delete mode 100644 src/styles/typography.css

diff --git a/src/components/Head.astro b/src/components/Head.astro
index 112f7b5..d36f91c 100644
--- a/src/components/Head.astro
+++ b/src/components/Head.astro
@@ -1,8 +1,6 @@
 ---
 import '../styles/global.css'
 import '../styles/katex.css'
-import '../styles/typography.css'
-import '../styles/codeblocks.css'
 
 import '@fontsource/geist-sans'
 import '@fontsource/geist-mono'
diff --git a/src/components/TableOfContents.astro b/src/components/TableOfContents.astro
index 3b06552..0bfffc8 100644
--- a/src/components/TableOfContents.astro
+++ b/src/components/TableOfContents.astro
@@ -27,10 +27,23 @@ function buildToc(headings: Heading[]) {
 }
 ---
 
-<details open class="mb-8 block rounded-xl border p-3 xl:hidden">
-  <summary class="cursor-pointer text-xl font-semibold"
-    >Table of Contents</summary
+<details open class="group mb-8 block rounded-xl border p-3 xl:hidden">
+  <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>
     <ul class="py-3">
       {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"
 >
   <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>
         <h2 class="mb-2 text-lg font-semibold">Table of Contents</h2>
       </li>
diff --git a/src/components/TableOfContentsHeading.astro b/src/components/TableOfContentsHeading.astro
index 68cb1d1..11184a3 100644
--- a/src/components/TableOfContentsHeading.astro
+++ b/src/components/TableOfContentsHeading.astro
@@ -6,7 +6,7 @@ const { heading } = Astro.props
 ---
 
 <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}>
     {heading.text}
diff --git a/src/content/blog/blog-post-4.mdx b/src/content/blog/blog-post-4.mdx
index 0d8e209..612f6bc 100644
--- a/src/content/blog/blog-post-4.mdx
+++ b/src/content/blog/blog-post-4.mdx
@@ -27,13 +27,9 @@ end
 
 ```tsx showLineNumbers
 console.log('Introduction.')
-
-console.log('Subtraction.') // [!code focus] // [!code --]
-
-console.log('Addition.') // [!code focus] // [!code ++]
-
-console.log('In focus.') // [!code focus]
-
+console.log('Subtraction.') // [!code --]
+console.log('Addition.') // [!code ++]
+console.log('In focus.')
 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>
   </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>
+<!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>
 
-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.
 ```
@@ -239,7 +275,7 @@ H<sub>2</sub>O
 
 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.
 
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 023bd17..b8234b7 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -154,7 +154,7 @@ if (
             post.data.tags.map((tag) => (
               <a
                 href={`/tags/${tag}`}
-                class={badgeVariants({ variant: 'outline' })}
+                class={badgeVariants({ variant: 'secondary' })}
               >
                 {tag}
               </a>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f4c1a70..0c3432e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -26,10 +26,13 @@ const blog = (await getCollection('blog'))
       <Card>
         <CardHeader>
           <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>
         <CardContent>
-          <p class="font-medium">adjective</p>
           <p>having or showing great knowledge or learning.</p>
         </CardContent>
       </Card>
diff --git a/src/styles/codeblocks.css b/src/styles/codeblocks.css
deleted file mode 100644
index 60039bf..0000000
--- a/src/styles/codeblocks.css
+++ /dev/null
@@ -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);
-  }
-}
diff --git a/src/styles/global.css b/src/styles/global.css
index 4f25464..e0f21d6 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -40,12 +40,14 @@
     --popover-foreground: 0 0% 3.9%;
     --primary: 0 0% 9%;
     --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
+    --secondary: 0 0% 80.1%;
     --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
+    --muted: 0 0% 80.1%;
     --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
+    --accent: 0 0% 80.1%;
     --accent-foreground: 0 0% 9%;
+    --additive: 112 50% 36%;
+    --additive-foreground: 0 0% 9%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
     --border: 0 0% 89.8%;
@@ -73,6 +75,8 @@
     --muted-foreground: 0 0% 63.9%;
     --accent: 0 0% 14.9%;
     --accent-foreground: 0 0% 98%;
+    --additive: 112 50% 36%;
+    --additive-foreground: 0 0% 9%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
     --border: 0 0% 14.9%;
@@ -100,3 +104,55 @@
     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;
+  }
+}
diff --git a/src/styles/typography.css b/src/styles/typography.css
deleted file mode 100644
index e00bb61..0000000
--- a/src/styles/typography.css
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 123d489..ccf6079 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,16 +1,6 @@
 import type { Config } from 'tailwindcss'
 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 = {
   darkMode: ['selector'],
   content: ['./src/**/*.{astro,md,mdx,ts,tsx}'],
@@ -52,6 +42,10 @@ const config: Config = {
           DEFAULT: 'hsl(var(--accent))',
           foreground: 'hsl(var(--accent-foreground))',
         },
+        additive: {
+          DEFAULT: 'hsl(var(--additive))',
+          foreground: 'hsl(var(--additive-foreground))',
+        },
         destructive: {
           DEFAULT: 'hsl(var(--destructive))',
           foreground: 'hsl(var(--destructive-foreground))',
@@ -68,11 +62,17 @@ const config: Config = {
         },
       },
       typography: {
-        DEFAULT: { css: disabledCss },
-        sm: { css: disabledCss },
-        lg: { css: disabledCss },
-        xl: { css: disabledCss },
-        '2xl': { css: disabledCss },
+        DEFAULT: {
+          css: {
+            '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',
+          },
+        },
       },
     },
   },