feat(plugin-markdown-ext): add styles for footnote and tasklist

plugins/markdown/plugin-markdown-ext/package.json

@@ -37,7 +37,8 @@
   "scripts": {
     "build": "tsc -b tsconfig.build.json",
     "bundle": "rollup -c rollup.config.ts --configPlugin esbuild",
-    "clean": "rimraf --glob ./lib ./*.tsbuildinfo"
+    "clean": "rimraf --glob ./lib ./*.tsbuildinfo",
+    "style": "sass src:lib --embed-sources --style=compressed"
   },
   "dependencies": {
     "@mdit/plugin-container": "^0.13.1",

plugins/markdown/plugin-markdown-ext/src/client/styles/footnote.scss

@@ -0,0 +1,18 @@
+// footnote anchor position
+.footnote-item {
+  margin-top: calc(0rem - var(--header-offset, 3.6rem));
+  padding-top: calc(var(--header-offset, 3.6rem) + 0.5rem);
+
+  > p {
+    margin-bottom: 0;
+  }
+}
+
+.footnote-ref {
+  position: relative;
+}
+
+.footnote-anchor {
+  position: absolute;
+  top: calc(-0.5rem - var(--header-offset, 3.6rem));
+}

plugins/markdown/plugin-markdown-ext/src/client/styles/tasklist.scss

@@ -0,0 +1,90 @@
+.task-list-container {
+  padding-inline-start: 0;
+  list-style-position: inside;
+
+  .task-list-container {
+    padding-inline-start: 1.5em;
+  }
+}
+
+.task-list-item {
+  list-style: none;
+}
+
+.task-list-item-checkbox {
+  position: relative;
+
+  vertical-align: text-bottom;
+
+  height: 1em;
+  margin-inline-end: 1.5em;
+
+  cursor: pointer;
+
+  appearance: none;
+
+  &::after {
+    content: ' ';
+
+    position: absolute;
+    top: 0;
+
+    display: inline-block;
+
+    box-sizing: border-box;
+    width: 1em;
+    height: 1em;
+    padding-inline-start: 0;
+    border: 1px solid var(--vp-c-border);
+    border-radius: 2px;
+
+    background: var(--vp-c-control);
+
+    text-align: center;
+
+    visibility: visible;
+
+    transition:
+      border-color var(--vp-t-color),
+      background var(--vp-t-color);
+
+    @media print {
+      border-color: var(--vp-c-text);
+    }
+  }
+
+  &:checked {
+    &::after {
+      content: '';
+      border-color: var(--vp-c-accent-bg);
+      background: var(--vp-c-accent-bg);
+
+      @media print {
+        border-color: var(--vp-c-text);
+        background: transparent;
+      }
+    }
+
+    &::before {
+      content: '';
+
+      position: absolute;
+      inset-inline-start: 0.35em;
+      top: 0.1em;
+      z-index: 1;
+
+      width: 0.2em;
+      height: 0.5em;
+      border: solid var(--vp-c-white);
+      border-width: 0 0.15em 0.15em 0;
+
+      transition: border-color var(--vp-t-color);
+
+      transform: rotate(45deg);
+
+      @media print {
+        border-color: var(--vp-c-text);
+      }
+    }
+  }
+}

plugins/markdown/plugin-markdown-ext/src/node/markdownExtPlugin.ts

@@ -8,6 +8,7 @@ import {
   vPre as vPrePlugin,
 } from './markdown-it-plugins/index.js'
 import type { MarkdownExtPluginOptions } from './options.js'
+import { prepareClientConfigFile } from './prepreClientConfigFile.js'
 import { PLUGIN_NAME } from './utils.js'
 
 export const markdownExtPlugin = ({
@@ -16,23 +17,27 @@ export const markdownExtPlugin = ({
   linkify,
   footnote,
   tasklist,
-
   component,
   vPre,
-}: MarkdownExtPluginOptions): Plugin => {
-  return {
-    name: PLUGIN_NAME,
+}: MarkdownExtPluginOptions): Plugin => ({
+  name: PLUGIN_NAME,
+
+  extendsMarkdown: (md) => {
+    // Behavior
+    if (breaks ?? gfm) md.options.breaks = true
+    if (linkify ?? gfm) md.options.linkify = true
 
-    extendsMarkdown: (md) => {
-      // Behavior
-      if (breaks ?? gfm) md.options.breaks = true
-      if (linkify ?? gfm) md.options.linkify = true
+    if (footnote ?? gfm) md.use(footnotePlugin)
+    if (tasklist ?? gfm)
+      md.use(tasklistPlugin, [isPlainObject(tasklist) ? tasklist : {}])
+    if (component) md.use(componentPlugin)
+    if (vPre) md.use(vPrePlugin)
+  },
 
-      if (footnote ?? gfm) md.use(footnotePlugin)
-      if (tasklist ?? gfm)
-        md.use(tasklistPlugin, [isPlainObject(tasklist) ? tasklist : {}])
-      if (component) md.use(componentPlugin)
-      if (vPre) md.use(vPrePlugin)
-    },
-  }
-}
+  clientConfigFile: (app) =>
+    prepareClientConfigFile(app, {
+      gfm,
+      footnote,
+      tasklist,
+    }),
+})

plugins/markdown/plugin-markdown-ext/src/node/prepreClientConfigFile.ts

@@ -0,0 +1,14 @@
+import type { App } from 'vuepress'
+import { CLIENT_FOLDER } from './utils.js'
+
+export const prepareClientConfigFile = (
+  app: App,
+  { gfm, footnote, tasklist }: Record<string, unknown>,
+): Promise<string> =>
+  app.writeTemp(
+    `markdown-ext/config.js`,
+    `\
+    ${(footnote ?? gfm) ? `import "${CLIENT_FOLDER}styles/footnote.css"\n` : ''}\
+    ${(tasklist ?? gfm) ? `import "${CLIENT_FOLDER}styles/tasklist.css"\n` : ''}\
+`,
+  )

plugins/markdown/plugin-markdown-ext/src/node/utils.ts

@@ -1,5 +1,12 @@
-import { Logger } from '@vuepress/helper'
+import { Logger, ensureEndingSlash } from '@vuepress/helper'
+import { getDirname, path } from 'vuepress/utils'
+
+const __dirname = getDirname(import.meta.url)
 
 export const PLUGIN_NAME = '@vuepress/plugin-markdown-ext'
 
 export const logger = new Logger(PLUGIN_NAME)
+
+export const CLIENT_FOLDER = ensureEndingSlash(
+  path.resolve(__dirname, '../client'),
+)