feat(md-enhance): remove card and add component option

BREAKING CHANGE: card option is no longer supported
vuepress-theme-hope · Nov 10, 2023 · 2dbddb9 · 2dbddb9
1 parent 55ea333
commit 2dbddb9
Show file tree

Hide file tree

Showing 60 changed files with 285 additions and 411 deletions.
diff --git a/demo/md-enhance/src/.vuepress/config.ts b/demo/md-enhance/src/.vuepress/config.ts
@@ -25,11 +25,11 @@ export default defineUserConfig({
       "/demo/": [
         "/demo/align",
         "/demo/attrs",
-        "/demo/card",
         "/demo/chart",
         "/demo/echarts",
         "/demo/code-demo",
         "/demo/code-tabs",
+        "/demo/component",
         "/demo/container",
         "/demo/figure",
         "/demo/flowchart",
@@ -65,9 +65,9 @@ export default defineUserConfig({
     mdEnhancePlugin({
       align: true,
       attrs: true,
-      card: true,
       chart: true,
       codetabs: true,
+      component: true,
       container: true,
       demo: true,
       echarts: true,

diff --git a/demo/md-enhance/src/demo/README.md b/demo/md-enhance/src/demo/README.md
@@ -10,6 +10,7 @@ title: Get Started
 - [ECharts](echarts.md)
 - [Code Demo](code-demo.md)
 - [Code Tabs](code-tabs.md)
+- [Component](component.md)
 - [Container](container.md)
 - [Figure](figure.md)
 - [Flowchart](flowchart.md)

diff --git a/demo/md-enhance/src/demo/card.md b/demo/md-enhance/src/demo/card.md
diff --git a/demo/md-enhance/src/demo/component.md b/demo/md-enhance/src/demo/component.md
@@ -0,0 +1,19 @@
+---
+title: Component
+---
+
+```component VPCard
+title: Mr.Hope
+desc: Where there is light, there is hope
+logo: https://mister-hope.com/logo.svg
+link: https://mister-hope.com
+```
+
+```component VPCard
+{
+  "title": "Mr.Hope",
+  "desc": "Where there is light, there is hope",
+  "logo": "https://mister-hope.com/logo.svg",
+  "link": "https://mister-hope.com"
+}
+```
diff --git a/demo/theme-blog/src/.vuepress/theme.ts b/demo/theme-blog/src/.vuepress/theme.ts
@@ -150,9 +150,9 @@ export default hopeTheme(
       mdEnhance: {
         align: true,
         attrs: true,
-        card: true,
         chart: true,
         codetabs: true,
+        component: true,
         demo: true,
         echarts: true,
         figure: true,

diff --git a/demo/theme-blog/src/demo/markdown.md b/demo/theme-blog/src/demo/markdown.md
@@ -187,17 +187,17 @@ Support setting color scheme and size
 
 - [View Detail](https://theme-hope.vuejs.press/guide/markdown/image.html)
 
-#### Card
+#### Component
 
-```card
+```component VPCard
 title: Mr.Hope
 desc: Where there is light, there is hope
 logo: https://mister-hope.com/logo.svg
 link: https://mister-hope.com
 color: rgba(253, 230, 138, 0.15)
 ```
 
-- [View Detail](https://theme-hope.vuejs.press/guide/markdown/card.html)
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/component.html)
 
 #### Include files
 

diff --git a/demo/theme-blog/src/zh/demo/markdown.md b/demo/theme-blog/src/zh/demo/markdown.md
@@ -167,17 +167,17 @@ npm i -D vuepress-theme-hope
 
 - [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/image.html)
 
-#### 卡片
+#### 组件
 
-```card
+```component VPCard
 title: Mr.Hope
 desc: Where there is light, there is hope
 logo: https://mister-hope.com/logo.svg
 link: https://mister-hope.com
 color: rgba(253, 230, 138, 0.15)
 ```
 
-- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/card.html)
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/component.html)
 
 #### 导入文件
 

diff --git a/demo/theme-docs/src/.vuepress/theme.ts b/demo/theme-docs/src/.vuepress/theme.ts
@@ -80,9 +80,9 @@ export default hopeTheme(
       mdEnhance: {
         align: true,
         attrs: true,
-        card: true,
         chart: true,
         codetabs: true,
+        component: true,
         demo: true,
         echarts: true,
         figure: true,

diff --git a/demo/theme-docs/src/README.md b/demo/theme-docs/src/README.md
@@ -90,10 +90,10 @@ highlights:
         details: improve syntax to specify size and color scheme
         link: https://theme-hope.vuejs.press/guide/markdown/image.html
 
-      - title: Card Support
+      - title: Component Support
         icon: square
-        details: Add cards in Markdown
-        link: https://theme-hope.vuejs.press/guide/markdown/card.html
+        details: Add component easily in Markdown
+        link: https://theme-hope.vuejs.press/guide/markdown/component.html
 
       - title: Chart Support
         icon: chart-simple

diff --git a/demo/theme-docs/src/demo/markdown.md b/demo/theme-docs/src/demo/markdown.md
@@ -187,17 +187,17 @@ Support setting color scheme and size
 
 - [View Detail](https://theme-hope.vuejs.press/guide/markdown/image.html)
 
-#### Card
+#### Component
 
-```card
+```component VPCard
 title: Mr.Hope
 desc: Where there is light, there is hope
 logo: https://mister-hope.com/logo.svg
 link: https://mister-hope.com
 color: rgba(253, 230, 138, 0.15)
 ```
 
-- [View Detail](https://theme-hope.vuejs.press/guide/markdown/card.html)
+- [View Detail](https://theme-hope.vuejs.press/guide/markdown/component.html)
 
 #### Include files
 

diff --git a/demo/theme-docs/src/zh/README.md b/demo/theme-docs/src/zh/README.md
@@ -90,10 +90,10 @@ highlights:
         details: 使用改进的语法指定图片大小与颜色模式
         link: https://theme-hope.vuejs.press/zh/guide/markdown/image.html
 
-      - title: 卡片支持
-        icon: square
-        details: 在 Markdown 中展示卡片
-        link: https://theme-hope.vuejs.press/zh/guide/markdown/card.html
+      - title: 组件支持
+        icon: puzzle-piece
+        details: 在 Markdown 中展示组件
+        link: https://theme-hope.vuejs.press/zh/guide/markdown/component.html
 
       - title: 图表支持
         icon: chart-simple

diff --git a/demo/theme-docs/src/zh/demo/markdown.md b/demo/theme-docs/src/zh/demo/markdown.md
@@ -167,17 +167,17 @@ npm i -D vuepress-theme-hope
 
 - [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/image.html)
 
-#### 卡片
+#### 组件
 
-```card
+```component VPCard
 title: Mr.Hope
 desc: Where there is light, there is hope
 logo: https://mister-hope.com/logo.svg
 link: https://mister-hope.com
 color: rgba(253, 230, 138, 0.15)
 ```
 
-- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/card.html)
+- [查看详情](https://theme-hope.vuejs.press/zh/guide/markdown/component.html)
 
 #### 导入文件
 

diff --git a/docs/md-enhance/src/.vuepress/theme.ts b/docs/md-enhance/src/.vuepress/theme.ts
@@ -19,12 +19,16 @@ export default theme("md-enhance", {
   },
 
   plugins: {
+    components: {
+      components: ["VPCard"],
+    },
+
     mdEnhance: {
       align: true,
       attrs: true,
-      card: true,
       chart: true,
       codetabs: true,
+      component: true,
       container: true,
       demo: true,
       echarts: true,

diff --git a/docs/md-enhance/src/README.md b/docs/md-enhance/src/README.md
@@ -86,10 +86,10 @@ highlights:
         details: Group similar content with tabs and switch them together
         link: ./guide/content/tabs.html
 
-      - title: Card Support
-        icon: square
-        details: Add cards in Markdown
-        link: ./guide/content/card.html
+      - title: Component Support
+        icon: puzzle-piece
+        details: Easily insert components in Markdown
+        link: ./guide/content/component.html
 
   - header: Stylizing contents
     image: /assets/image/marker.svg

diff --git a/docs/md-enhance/src/config.md b/docs/md-enhance/src/config.md
@@ -341,14 +341,14 @@ Whether to enable $\TeX$ syntax support through Math Jax. You can pass an object
 
 Please see [source code](https://github.com/vuepress-theme-hope/vuepress-theme-hope/tree/main/packages/md-enhance/src/shared/mathjax.ts) for available options.
 
-### card
+### component
 
 - Type: `boolean`
 - Default: `false`
 - Details:
-  - [Card](./guide/content/card.md)
+  - [Component](./guide/content/component.md)
 
-Whether to enable card support
+Whether to enable component support
 
 ### chart
 

diff --git a/docs/md-enhance/src/guide/content/README.md b/docs/md-enhance/src/guide/content/README.md
@@ -11,7 +11,7 @@ index: false
 
 This plugin provides the following ways to enrich your content.
 
-- Cards: quickly create cards
+- Component: quickly insert component in M.
 - Footnotes: Supplementary explanation of key content
 - Import files: Easily split or reuse files
 - Slideshow: Show content
@@ -24,17 +24,17 @@ This plugin provides the following ways to enrich your content.
 
 <!-- #region demo -->
 
-### Card
+### component
 
-```card
+```component VPCard
 title: Mr.Hope
 desc: Where there is light, there is hope
 logo: https://mister-hope.com/logo.svg
 link: https://mister-hope.com
 color: rgba(253, 230, 138, 0.15)
 ```
 
-- [View Detail](./card.md)
+- [View Detail](./component.md)
 
 ### Footnote