vuepress-plugin-md-power 1.0.0-rc.113 → 1.0.0-rc.115

package/lib/client/styles/demo-wrapper.css

@@ -0,0 +1,140 @@
+.vp-doc .demo-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 40px;
+  margin: 40px -16px;
+  border: solid 1px var(--vp-c-divider);
+  border-radius: 8px;
+  box-shadow: var(--vp-shadow-2);
+  transition: var(--vp-t-color);
+  transition-property: border, box-shadow;
+}
+
+.vp-doc .demo-wrapper .demo-head {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: 0;
+  border-bottom: solid 1px var(--vp-c-divider);
+  transition: border-bottom var(--vp-t-color);
+}
+
+.vp-doc .demo-wrapper .demo-container {
+  min-height: 0;
+  padding: 20px;
+  font-size: 14px;
+  line-height: 22px;
+  background-color: var(--vp-c-bg-alt);
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+  transition: background-color var(--vp-t-color);
+}
+
+.vp-doc .demo-wrapper.has-title .demo-head {
+  border-bottom-color: transparent;
+}
+
+.vp-doc .demo-wrapper.only-img {
+  overflow: hidden;
+}
+
+.vp-doc .demo-wrapper.only-img img {
+  display: block;
+}
+
+.vp-doc .demo-wrapper.only-img .demo-container,
+.vp-doc .demo-wrapper.no-padding .demo-container {
+  padding: 0;
+}
+
+.vp-doc .demo-wrapper.has-height .demo-container {
+  height: var(--demo-container-height);
+  overflow-y: auto;
+}
+
+.vp-doc .demo-wrapper .demo-ctrl {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 5px 0 5px 8px;
+}
+
+.vp-doc .demo-wrapper .demo-ctrl i {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background-color: #ccc;
+  border-radius: 100%;
+  transition: background-color var(--vp-t-color);
+}
+
+.vp-doc .demo-wrapper .demo-ctrl i:nth-child(1) {
+  background-color: var(--vp-c-danger-3);
+}
+
+.vp-doc .demo-wrapper .demo-ctrl i:nth-child(2) {
+  background-color: var(--vp-c-warning-3);
+}
+
+.vp-doc .demo-wrapper .demo-ctrl i:nth-child(3) {
+  background-color: var(--vp-c-green-3);
+}
+
+.vp-doc .demo-wrapper .demo-title {
+  position: relative;
+  min-width: 0;
+  padding: 0 16px;
+  margin: 0 20px -1px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  background-color: var(--vp-c-bg-alt);
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  transition: var(--vp-t-color);
+  transition-property: color, background-color;
+}
+
+.vp-doc .demo-wrapper .demo-title p {
+  max-width: 100%;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+}
+
+.vp-doc .demo-wrapper .demo-title::after,
+.vp-doc .demo-wrapper .demo-title::before {
+  position: absolute;
+  bottom: 0;
+  z-index: 1;
+  width: 8px;
+  height: 8px;
+  content: " ";
+  transition: background var(--vp-t-color);
+}
+
+.vp-doc .demo-wrapper .demo-title::before {
+  left: 100%;
+  background: radial-gradient(16px at right top, transparent 50%, var(--vp-c-bg-alt) 50%);
+}
+
+.vp-doc .demo-wrapper .demo-title::after {
+  right: 100%;
+  background: radial-gradient(16px at left top, transparent 50%, var(--vp-c-bg-alt) 50%);
+}
+
+.vp-doc .demo-wrapper .demo-container > *:first-child {
+  margin-top: 0;
+}
+
+.vp-doc .demo-wrapper .demo-container > *:last-child {
+  margin-bottom: 0;
+}
+
+@media (min-width: 419px) {
+  .vp-doc .demo-wrapper {
+    margin: 40px 0;
+  }
+}

package/lib/client/styles/index.css

@@ -0,0 +1,4 @@
+@charset "UTF-8";
+
+@import url("./demo-wrapper.css");
+@import url("./steps.css");

package/lib/client/styles/steps.css

@@ -0,0 +1,69 @@
+.vp-doc .vp-steps {
+  margin: 16px 0;
+}
+
+.vp-doc .vp-steps > ol,
+.vp-doc .vp-steps > ul {
+  padding-inline-start: 0;
+  list-style: none;
+}
+
+.vp-doc .vp-steps > ol > li,
+.vp-doc .vp-steps > ul > li {
+  position: relative;
+  min-height: 22px;
+  padding-bottom: 1px;
+  padding-left: 44px;
+}
+
+.vp-doc .vp-steps > ol > li::before,
+.vp-doc .vp-steps > ul > li::before {
+  position: absolute;
+  inset-inline-start: 0;
+  top: 0;
+  width: 28px;
+  height: 28px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 28px;
+  color: var(--vp-c-text-1);
+  text-align: center;
+  content: counter(list-item);
+  background-color: var(--vp-c-bg-soft);
+  border: solid 1px var(--vp-c-divider);
+  border-radius: 100%;
+  transition: var(--vp-t-color);
+  transition-property: color, background-color, border-color;
+}
+
+.vp-doc .vp-steps > ol > li:not(:last-of-type)::after,
+.vp-doc .vp-steps > ul > li:not(:last-of-type)::after {
+  position: absolute;
+  inset-inline-start: 14px;
+  top: 34px;
+  bottom: 5px;
+  width: 1px;
+  content: "";
+  background-color: var(--vp-c-divider);
+  transition: background-color var(--vp-t-color);
+}
+
+.vp-doc .vp-steps > ol > li > :first-child,
+.vp-doc .vp-steps > ul > li > :first-child {
+  margin-top: 0;
+}
+
+.vp-doc .vp-steps > ol > li > :first-child:where(h1,h2,h3,h4,h5,h6),
+.vp-doc .vp-steps > ul > li > :first-child:where(h1,h2,h3,h4,h5,h6) {
+  padding-top: 0;
+  border-top: none;
+}
+
+.vp-doc .vp-steps > ol > li > :first-child:where(p) {
+  line-height: 28px;
+}
+
+.vp-doc .vp-steps > ol > li + li,
+.vp-doc .vp-steps > ul > li + li {
+  margin-top: 1px;
+}

package/lib/node/index.js

@@ -216,24 +216,47 @@ import { addViteOptimizeDepsInclude } from "@vuepress/helper";
 // src/node/container/index.ts
 import { isPlainObject as isPlainObject2 } from "@vuepress/helper";
 
-// src/node/container/align.ts
+// src/node/container/createContainer.ts
 import container from "markdown-it-container";
+function createContainerPlugin(md, type2, options = {}) {
+  const render = (tokens, index) => {
+    const token = tokens[index];
+    const info = token.info.trim().slice(type2.length).trim() || "";
+    if (token.nesting === 1) {
+      return options.before?.(info, tokens, index) || `<div class="custom-container ${type2}">`;
+    } else {
+      return options.after?.(info, tokens, index) || "</div>";
+    }
+  };
+  md.use(container, type2, { render });
+}
+
+// src/node/container/align.ts
 var alignList = ["left", "center", "right", "justify"];
 function alignPlugin(md) {
   for (const name of alignList) {
-    md.use(container, name, {
-      validate: (info) => info.trim() === name,
-      render: (tokens, idx) => {
-        if (tokens[idx].nesting === 1) {
-          return `<div style="text-align:${name}">`;
-        } else {
-          return "</div>";
-        }
-      }
+    createContainerPlugin(md, name, {
+      before: () => `<div style="text-align:${name}">`
     });
   }
 }
 
+// src/node/container/card.ts
+function cardPlugin(md) {
+  createContainerPlugin(md, "card", {
+    before(info) {
+      const { attrs: attrs2 } = resolveAttrs(info);
+      const { title, icon } = attrs2;
+      return `<VPCard${title ? ` title="${title}"` : ""}${icon ? ` icon="${icon}"` : ""}>`;
+    },
+    after: () => "</VPCard>"
+  });
+  createContainerPlugin(md, "card-grid", {
+    before: () => "<VPCardGrid>",
+    after: () => "</VPCardGrid>"
+  });
+}
+
 // src/node/container/codeTabs.ts
 import { tab } from "@mdit/plugin-tab";
 import { isPlainObject } from "@vuepress/helper";
@@ -1156,6 +1179,36 @@ var codeTabs = (md, options = {}) => {
   });
 };
 
+// src/node/container/demoWrapper.ts
+function demoWrapperPlugin(md) {
+  createContainerPlugin(md, "demo-wrapper", {
+    before: (info) => {
+      const { attrs: attrs2 } = resolveAttrs(info);
+      const wrapperClasses = ["demo-wrapper"];
+      let containerStyle = "";
+      if (attrs2.title)
+        wrapperClasses.push("has-title");
+      if (attrs2.img)
+        wrapperClasses.push("only-img");
+      if (attrs2.noPadding)
+        wrapperClasses.push("no-padding");
+      if (attrs2.height) {
+        const h = Number.parseFloat(attrs2.height) === Number(attrs2.height) ? `${attrs2.height}px` : attrs2.height;
+        containerStyle += `--demo-container-height: ${h};`;
+        wrapperClasses.push("has-height");
+      }
+      return `<div class="${wrapperClasses.join(" ")}">
+  <div class="demo-head">
+    <div class="demo-ctrl"><i></i><i></i><i></i></div>
+    ${attrs2.title ? `<h4 class="demo-title"><p>${attrs2.title}</p></h4>` : ""}
+  </div>
+  <div class="demo-container" ${containerStyle ? `style="${containerStyle}"` : ""}>
+`;
+    },
+    after: () => "</div></div>"
+  });
+}
+
 // src/node/container/fileTree.ts
 import Token from "markdown-it/lib/token.mjs";
 import container2 from "markdown-it-container";
@@ -1172,7 +1225,6 @@ function fileTreePlugin(md, options = {}) {
       return type2 === "folder" ? defaultFolder : defaultFile;
     return getFileIcon(filename, type2);
   };
-  const validate = (info) => info.trim().startsWith(type);
   const render = (tokens, idx) => {
     const { attrs: attrs2 } = resolveAttrs(tokens[idx].info.slice(type.length - 1));
     if (tokens[idx].nesting === 1) {
@@ -1208,7 +1260,7 @@ function fileTreePlugin(md, options = {}) {
       return "</div>";
     }
   };
-  md.use(container2, type, { validate, render });
+  md.use(container2, type, { render });
 }
 function resolveTreeNodeInfo(tokens, current, idx) {
   let hasInline = false;
@@ -1554,7 +1606,6 @@ var MANAGERS_CONFIG = {
 };
 function npmToPlugins(md, options = {}) {
   const type2 = "npm-to";
-  const validate = (info) => info.trim().startsWith(type2);
   const opt = isArray(options) ? { tabs: options } : options;
   const defaultTabs = opt.tabs?.length ? opt.tabs : DEFAULT_TABS;
   const render = (tokens, idx) => {
@@ -1574,7 +1625,7 @@ function npmToPlugins(md, options = {}) {
     }
     return "";
   };
-  md.use(container4, type2, { validate, render });
+  md.use(container4, type2, { render });
 }
 function resolveNpmTo(lines, info, idx, tabs2) {
   tabs2 = validateTabs(tabs2);
@@ -1712,6 +1763,13 @@ function parseArgs(line) {
   return { cmd: cmd.trim(), args: args.trim(), scriptArgs };
 }
 
+// src/node/container/steps.ts
+function stepsPlugin(md) {
+  createContainerPlugin(md, "steps", {
+    before: () => '<div class="vp-steps">'
+  });
+}
+
 // src/node/container/tabs.ts
 import { tab as tab2 } from "@mdit/plugin-tab";
 var tabs = (md) => {
@@ -1740,6 +1798,9 @@ async function containerPlugin(app, md, options) {
   alignPlugin(md);
   tabs(md);
   codeTabs(md, options.codeTabs);
+  demoWrapperPlugin(md);
+  stepsPlugin(md);
+  cardPlugin(md);
   if (options.npmTo) {
     npmToPlugins(md, typeof options.npmTo === "boolean" ? {} : options.npmTo);
   }
@@ -2149,6 +2210,44 @@ function embedSyntaxPlugin(md, options) {
   }
 }
 
+// src/node/enhance/docsTitle.ts
+var REG_HEADING = /^#\s*?([^#\s].*)?\n/;
+function docsTitlePlugin(md) {
+  const render = md.render;
+  md.render = (source, env) => {
+    if (!env.filePathRelative)
+      return render(source, env);
+    let { matter, content } = parseSource(source.trim());
+    let title = "";
+    content = content.trim().replace(REG_HEADING, (_, match) => {
+      title = match.trim();
+      return "";
+    });
+    source = `${matter}
+${content}`;
+    const result = render(source, env);
+    if (title) {
+      env.frontmatter ??= {};
+      env.frontmatter.title ??= title;
+    }
+    return result;
+  };
+}
+function parseSource(source) {
+  const char = "---";
+  if (!source.startsWith(char)) {
+    return { matter: "", content: source };
+  } else {
+    const end = source.indexOf(`
+${char}`);
+    const len = char.length + 1;
+    return {
+      matter: source.slice(0, end + len),
+      content: source.slice(end + len)
+    };
+  }
+}
+
 // src/node/inline/index.ts
 import { attrs } from "@mdit/plugin-attrs";
 import { footnote } from "@mdit/plugin-footnote";
@@ -2325,6 +2424,8 @@ async function prepareConfigFile(app, options) {
     `import { defineClientConfig } from 'vuepress/client'
 ${Array.from(imports.values()).join("\n")}
 
+import '${CLIENT_FOLDER}styles/index.css'
+
 export default defineClientConfig({
   enhance({ router, app }) {
 ${Array.from(enhances.values()).map((item) => `    ${item}`).join("\n")}
@@ -2344,10 +2445,15 @@ function markdownPowerPlugin(options = {}) {
     },
     extendsBundlerOptions(bundlerOptions, app) {
       if (options.repl) {
-        addViteOptimizeDepsInclude(bundlerOptions, app, ["shiki/core", "shiki/wasm", "shiki/engine/oniguruma"]);
+        addViteOptimizeDepsInclude(
+          bundlerOptions,
+          app,
+          ["shiki/core", "shiki/wasm", "shiki/engine/oniguruma"]
+        );
       }
     },
     extendsMarkdown: async (md, app) => {
+      docsTitlePlugin(md);
       embedSyntaxPlugin(md, options);
       inlineSyntaxPlugin(md, options);
       await containerPlugin(app, md, options);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.113",
+  "version": "1.0.0-rc.115",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -47,15 +47,15 @@
     "@mdit/plugin-sup": "^0.13.1",
     "@mdit/plugin-tab": "^0.13.2",
     "@mdit/plugin-tasklist": "^0.13.1",
-    "@vuepress/helper": "2.0.0-rc.56",
-    "@vueuse/core": "^11.1.0",
+    "@vuepress/helper": "2.0.0-rc.60",
+    "@vueuse/core": "^11.2.0",
     "image-size": "^1.1.1",
     "local-pkg": "^0.5.0",
     "markdown-it-container": "^4.0.0",
-    "nanoid": "^5.0.7",
-    "shiki": "^1.22.1",
-    "tm-grammars": "^1.18.5",
-    "tm-themes": "^1.9.0",
+    "nanoid": "^5.0.8",
+    "shiki": "^1.22.2",
+    "tm-grammars": "^1.19.0",
+    "tm-themes": "^1.9.3",
     "vue": "^3.5.12"
   },
   "devDependencies": {