move title processing to plugin

lcpu-club · Dec 27, 2024 · 3cc51ff · 3cc51ff
1 parent 1dd2143
commit 3cc51ff
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 69 deletions.
diff --git a/generator/base-css-generator.ts b/generator/base-css-generator.ts
diff --git a/generator/content-generator.ts b/generator/content-generator.ts
@@ -1,5 +1,5 @@
 import { PluginOption } from 'vite'
-import * as mdit from 'markdown-it'
+import MarkdownIt, * as mdit from 'markdown-it'
 import Token from 'markdown-it/lib/token.mjs'
 import matter from 'gray-matter'
 import Shiki from '@shikijs/markdown-it'
@@ -27,9 +27,9 @@ const md = mdit
       class: 'header-anchor',
     }),
   })
-  .use(MarkdownItContainer, 'warning')
-  .use(MarkdownItContainer, 'error')
-  .use(MarkdownItContainer, 'info')
+  .use(createContainer, 'warning', SiteConfiguration.markdown.container.warningLabel || 'WARNING')
+  .use(createContainer, 'error', SiteConfiguration.markdown.container.errorLabel || 'ERROR')
+  .use(createContainer, 'info', SiteConfiguration.markdown.container.infoLabel || 'INFO')
   .use(MarkdownItContainer, 'expander', {
     render: (tokens: Token[], idx: number) => {
       if (tokens[idx].nesting === 1) {
@@ -103,3 +103,15 @@ function extractExpanderTitle(info: string) {
   if (result) return result
   else return SiteConfiguration.markdown.container.expanderLabel ?? 'MORE'
 }
+
+function createContainer(md: MarkdownIt, klass: string, title: string) {
+  MarkdownItContainer(md, klass, {
+    render: (tokens: Token[], idx: number) => {
+      console.log(md.renderer.renderAttrs(tokens[idx]))
+      console.log(tokens[idx])
+      return tokens[idx].nesting === 1
+        ? `<div class="container ${klass}"><p class="container-title">${title}</p>\n`
+        : '</div>\n'
+    },
+  })
+}
diff --git a/src/assets/base.css b/src/assets/base.css
@@ -5,12 +5,6 @@ body {
 }
 
 :root {
-  --warning-text: '/* warning text */';
-  --error-text: '/* error text */';
-  --info-text: '/* info text */';
-
-  /* NOT USED: refer to ../generator/content-generator.ts */
-  --expander-text: '/* expander text */';
   font-family:
     'Inter',
     -apple-system,

diff --git a/src/assets/containers.css b/src/assets/containers.css
@@ -1,22 +1,16 @@
-.warning,
-.error,
-.info {
-  --at-apply: p-4 rounded-md m-y-2;
+.container {
+  --at-apply: p-4 rounded-md m-y-2 w-auto;
 }
 
 .expander {
   --at-apply: p-x-4 rounded-md m-y-2;
 }
 
-.warning::before,
-.error::before,
-.info::before {
-  --at-apply: text-sm font-bold;
+.container > .container-title {
+  --at-apply: text-sm font-bold m-0;
 }
 
-.warning > p:last-of-type,
-.error > p:last-of-type,
-.info > p:last-of-type,
+.container > p:last-of-type,
 /* no '>' here as it is two levels deep */
 .expander p:last-of-type {
   margin-bottom: 0;
@@ -33,26 +27,14 @@
   --at-apply: 'text-yellow-800 bg-yellow-200/20 dark:bg-yellow-500/20 dark:text-yellow-100';
 }
 
-.warning::before {
-  content: var(--warning-text);
-}
-
 .error {
   --at-apply: 'text-red-800 bg-red-300/20 dark:bg-red-500/20 dark:text-red-100';
 }
 
-.error::before {
-  content: var(--error-text);
-}
-
 .info {
   --at-apply: 'text-blue-800 bg-blue-300/20 dark:bg-blue-500/20 dark:text-blue-100';
 }
 
-.info::before {
-  content: var(--info-text);
-}
-
 .expander {
   --at-apply: 'text-gray-800 bg-gray-200/30 dark:bg-truegray-500/20 dark:text-truegray-100 ';
 }
diff --git a/src/main.ts b/src/main.ts
@@ -1,5 +1,5 @@
 import 'virtual:uno.css'
-import 'virtual:base.css'
+import '@/assets/base.css'
 import '@/assets/codeblocks.css'
 import '@/assets/containers.css'