style: add letter spacing to cjk header, navbar and post titles

astro.config.ts

@@ -5,7 +5,6 @@ import robotsTxt from 'astro-robots-txt'
 import { defineConfig } from 'astro/config'
 import rehypeExternalLinks from 'rehype-external-links'
 import rehypeKatex from 'rehype-katex'
-import rehypeSlug from 'rehype-slug'
 import remarkDirective from 'remark-directive'
 import remarkMath from 'remark-math'
 import UnoCSS from 'unocss/astro'
@@ -69,7 +68,6 @@ export default defineConfig({
       remarkReadingTime,
     ],
     rehypePlugins: [
-      rehypeSlug,
       rehypeKatex,
       rehypeImgToFigure,
       [

package.json

@@ -31,7 +31,6 @@
     "reading-time": "^1.5.0",
     "rehype-external-links": "^3.0.0",
     "rehype-katex": "^7.0.1",
-    "rehype-slug": "^6.0.0",
     "remark-directive": "^4.0.0",
     "remark-math": "^6.0.0",
     "sanitize-html": "^2.16.0",

pnpm-lock.yaml

@@ -62,9 +62,6 @@ importers:
       rehype-katex:
         specifier: ^7.0.1
         version: 7.0.1
-      rehype-slug:
-        specifier: ^6.0.0
-        version: 6.0.0
       remark-directive:
         specifier: ^4.0.0
         version: 4.0.0
@@ -2369,9 +2366,6 @@ packages:
   hast-util-from-parse5@8.0.3:
     resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==}
 
-  hast-util-heading-rank@3.0.0:
-    resolution: {integrity: sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==}
-
   hast-util-is-element@3.0.0:
     resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
 
@@ -2393,9 +2387,6 @@ packages:
   hast-util-to-parse5@8.0.0:
     resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==}
 
-  hast-util-to-string@3.0.1:
-    resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==}
-
   hast-util-to-text@4.0.2:
     resolution: {integrity: sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==}
 
@@ -3337,9 +3328,6 @@ packages:
   rehype-recma@1.0.0:
     resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
 
-  rehype-slug@6.0.0:
-    resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==}
-
   rehype-stringify@10.0.1:
     resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}
 
@@ -6841,10 +6829,6 @@ snapshots:
       vfile-location: 5.0.3
       web-namespaces: 2.0.1
 
-  hast-util-heading-rank@3.0.0:
-    dependencies:
-      '@types/hast': 3.0.4
-
   hast-util-is-element@3.0.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -6934,10 +6918,6 @@ snapshots:
       web-namespaces: 2.0.1
       zwitch: 2.0.4
 
-  hast-util-to-string@3.0.1:
-    dependencies:
-      '@types/hast': 3.0.4
-
   hast-util-to-text@4.0.2:
     dependencies:
       '@types/hast': 3.0.4
@@ -8154,14 +8134,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  rehype-slug@6.0.0:
-    dependencies:
-      '@types/hast': 3.0.4
-      github-slugger: 2.0.0
-      hast-util-heading-rank: 3.0.0
-      hast-util-to-string: 3.0.1
-      unist-util-visit: 5.0.0
-
   rehype-stringify@10.0.1:
     dependencies:
       '@types/hast': 3.0.4

src/components/Header.astro

@@ -17,7 +17,7 @@ const SubtitleTag = isPost ? 'div' : 'h2'
 <header
   class:list={[
     isPost ? 'mb-10.8' : 'mb-10.5',
-    'lg:(uno-desktop-column top-20)',
+    'cjk:tracking-0.02em lg:(uno-desktop-column top-20)',
   ]}
 >
   <TitleTag

src/components/Navbar.astro

@@ -37,7 +37,7 @@ const navItems = [
   class:list={[
     isPost ? 'hidden lg:block' : '',
     'mb-10.5 text-3.6 font-semibold leading-8.75 font-navbar',
-    'lg:(uno-desktop-column text-4 leading-9.72 bottom-50)',
+    'cjk:tracking-0.02em lg:(uno-desktop-column text-4 leading-9.72 bottom-50)',
   ]}
 >
   <ul>

src/components/PostList.astro

@@ -39,7 +39,7 @@ function getPostPath(post: Post) {
       {/* post title */}
       <h3 class="inline">
         <a
-          class="hover:c-primary"
+          class="cjk:tracking-0.02em hover:c-primary"
           lg={isHome ? 'font-medium text-4.5' : ''}
           href={getPostPath(post)}
           transition:name={`post-${post.data.abbrlink || post.id}-${lang}`}

src/styles/heti.css

@@ -7,10 +7,7 @@
 
 /* Global Styles */
 .heti {
-  --at-apply: 'break-words leading-1.5em tracking-0.02em hyphens-auto';
-}
-.heti:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) {
-  --at-apply: 'tracking-0';
+  --at-apply: 'cjk:tracking-0.02em break-words leading-1.5em hyphens-auto';
 }
 
 /* Customized Post Title */
@@ -48,12 +45,7 @@
 .heti :where(h1),
 .heti :where(h2),
 .heti :where(h3) {
-  --at-apply: 'text-pretty tracking-0.05em';
-}
-.heti :where(h1:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))),
-.heti :where(h2:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))),
-.heti :where(h3:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))) {
-  --at-apply: 'text-balance tracking-0';
+  --at-apply: 'cjk:text-pretty cjk:tracking-0.05em text-balance';
 }
 .heti :where(h1 + h2),
 .heti :where(h2 + h3),
@@ -65,10 +57,7 @@
 
 /* Paragraphs */
 .heti :where(p) {
-  --at-apply: 'mb-4 text-justify text-pretty';
-}
-.heti :where(p:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))) {
-  --at-apply: 'text-start';
+  --at-apply: 'cjk:text-justify mb-4 text-pretty';
 }
 
 /* Links */
@@ -103,12 +92,9 @@ html.dark .heti pre :where(span) {
 
 /* Inline Code */
 .heti :where(code) {
-  --at-apply: 'px-0.4em py-0.2em text-0.85em tracking-0 uno-round-border bg-secondary/5';
+  --at-apply: 'cjk:break-all px-0.4em py-0.2em text-0.85em tracking-0 uno-round-border bg-secondary/5';
   counter-reset: line;
 }
-.heti :where(code:is(:lang(zh), :lang(ja), :lang(ko))) {
-  --at-apply: 'break-all';
-}
 .heti :where(code) span.line {
   --at-apply: 'relative pl-8';
 }
@@ -266,16 +252,12 @@ html.dark .heti sup a:target {
 }
 
 /* Cite */
-.heti :where(cite:is(:lang(zh), :lang(ja), :lang(ko))) {
-  --at-apply: 'not-italic';
+.heti :where(cite) {
+  --at-apply: 'cjk:not-italic';
 }
 
 /* Quotes */
-.heti :where(q) {
+.heti :where(q:is(:lang(zh), :lang(ja), :lang(ko))) {
   quotes: "「" "」" "『" "』";
 }
-.heti :where(q:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))) {
-  quotes: initial;
-  quotes: auto;
-}
 

uno.config.ts

@@ -47,6 +47,12 @@ export default defineConfig({
       serif: ['STIX', 'EarlySummer', 'Georgia', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
     },
   },
+  rules: [
+    ['scrollbar-hidden', {
+      'scrollbar-width': 'none',
+      '-ms-overflow-style': 'none',
+    }],
+  ],
   shortcuts: {
     'uno-desktop-column': 'fixed w-14rem right-[max(5.625rem,calc(50vw-34.375rem))]',
     'uno-tags-style': 'inline-block whitespace-nowrap border border-secondary/25 rounded-full px-3.2 py-0.7 c-secondary transition-colors hover:(border-secondary/75 text-primary)',
@@ -54,11 +60,15 @@ export default defineConfig({
     'uno-tags-wrapper': 'flex flex-wrap gap-x-3 gap-y-3.2',
     'uno-round-border': 'rounded border border-solid border-secondary/5',
   },
-  rules: [
-    ['scrollbar-hidden', {
-      'scrollbar-width': 'none',
-      '-ms-overflow-style': 'none',
-    }],
+  variants: [
+    (matcher) => {
+      if (!matcher.startsWith('cjk:'))
+        return matcher
+      return {
+        matcher: matcher.slice(4),
+        selector: s => `${s}:is(:lang(zh), :lang(ja), :lang(ko))`,
+      }
+    },
   ],
   transformers: [
     transformerDirectives(),