feat: upgrade markdown-it-anchor (#350)

BREAKING CHANGE: the `markdown.anchor` option is updated. Refer to valeriangalliat/markdown-it-anchor#permalinks for instructions to upgrade your existing `markdown.anchor.permalink` option. **This doesn't affect you if you weren't changing the header permalinks behavior**.
vuejs · Aug 20, 2021 · 26b5aa9 · 26b5aa9
1 parent 9e8e441
commit 26b5aa9
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 18 deletions.
diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md
@@ -60,7 +60,6 @@ Outbound links automatically get `target="_blank" rel="noopener noreferrer"`:
 title: Blogging Like a Hacker
 lang: en-US
 ---
-
 ```
 
 This data will be available to the rest of the page, along with all custom and theming components.
@@ -404,10 +403,15 @@ You can also use a [VS Code region](https://code.visualstudio.com/docs/editor/co
 VitePress uses [markdown-it](https://github.com/markdown-it/markdown-it) as the Markdown renderer. A lot of the extensions above are implemented via custom plugins. You can further customize the `markdown-it` instance using the `markdown` option in `.vitepress/config.js`:
 
 ```js
+const anchor = require('markdown-it-anchor')
+
 module.exports = {
   markdown: {
     // options for markdown-it-anchor
-    anchor: { permalink: false },
+    // https://github.com/valeriangalliat/markdown-it-anchor#permalinks
+    anchor: {
+      permalink: anchor.permalink.headerLink()
+    },
 
     // options for markdown-it-toc
     toc: { includeLevel: [1, 2] },

diff --git a/package.json b/package.json
@@ -79,7 +79,7 @@
     "gray-matter": "^4.0.3",
     "lru-cache": "^6.0.0",
     "markdown-it": "^12.0.6",
-    "markdown-it-anchor": "^7.1.0",
+    "markdown-it-anchor": "^8.1.2",
     "markdown-it-container": "^3.0.0",
     "markdown-it-emoji": "^2.0.0",
     "markdown-it-table-of-contents": "^0.5.2",

diff --git a/src/client/app/components/Debug.vue b/src/client/app/components/Debug.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, reactive } from 'vue'
 import { useData } from '../data'
 
 const data = useData()
 const el = ref<HTMLElement | null>(null)
 const open = ref(false)
 
+// FIXME: remove in next Vue release
+const tempData = reactive(data)
+
 watch(open, (value) => {
   if (!value) {
     el.value!.scrollTop = 0
@@ -16,7 +19,7 @@ watch(open, (value) => {
 <template>
   <div class="debug" :class="{ open }" ref="el" @click="open = !open">
     <p class="title">Debug</p>
-    <pre class="block">{{ data }}</pre>
+    <pre class="block">{{ tempData }}</pre>
   </div>
 </template>
 

diff --git a/src/client/theme-default/components/CarbonAds.vue b/src/client/theme-default/components/CarbonAds.vue
@@ -24,6 +24,7 @@ onMounted(() => {
 .carbon-ads {
   border-radius: 4px;
   margin: 0 auto;
+  padding: 8px;
   max-width: 280px;
   font-size: 0.75rem;
   background-color: var(--c-bg-accent);
@@ -41,7 +42,6 @@ onMounted(() => {
     z-index: 1;
     float: right;
     margin: -8px -8px 24px 24px;
-    padding: 8px;
     width: 146px;
     max-width: 100%;
     min-height: 200px;

diff --git a/src/node/markdown/markdown.ts b/src/node/markdown/markdown.ts
@@ -12,18 +12,16 @@ import { preWrapperPlugin } from './plugins/preWrapper'
 import { linkPlugin } from './plugins/link'
 import { extractHeaderPlugin } from './plugins/header'
 import { Header } from '../shared'
+import anchor, { AnchorOptions } from 'markdown-it-anchor'
 
 const emoji = require('markdown-it-emoji')
-const anchor = require('markdown-it-anchor')
 const toc = require('markdown-it-table-of-contents')
 
 export interface MarkdownOptions extends MarkdownIt.Options {
   lineNumbers?: boolean
   config?: (md: MarkdownIt) => void
   anchor?: {
-    permalink?: boolean
-    permalinkBefore?: boolean
-    permalinkSymbol?: string
+    permalink?: AnchorOptions['permalink']
   }
   // https://github.com/Oktavilla/markdown-it-table-of-contents
   toc?: any
@@ -70,10 +68,7 @@ export const createMarkdownRenderer = (
     .use(emoji)
     .use(anchor, {
       slugify,
-      permalink: true,
-      permalinkBefore: true,
-      permalinkSymbol: '#',
-      permalinkAttrs: () => ({ 'aria-hidden': true }),
+      permalink: anchor.permalink.ariaHidden({}),
       ...options.anchor
     })
     .use(toc, {

diff --git a/yarn.lock b/yarn.lock
@@ -3553,10 +3553,10 @@ map-obj@^4.0.0:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.2.1.tgz#e4ea399dbc979ae735c83c863dd31bdf364277b7"
   integrity sha512-+WA2/1sPmDj1dlvvJmB5G6JKfY9dpn7EVBUL06+y6PoljPkh+6V1QihwxNkbcGxCRjt2b0F9K0taiCuo7MbdFQ==
 
-markdown-it-anchor@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-7.1.0.tgz#30fb21497bf59e83ff4d1ddc052d821962e2489e"
-  integrity sha512-loQggrwsIkkP7TOrESvmYkV2ikbQNNKhHcWyqC7/C2CmfHl1tkUizJJU8C5aGgg7J6oXVQJx17gk7i47tNn/lQ==
+markdown-it-anchor@^8.1.2:
+  version "8.1.2"
+  resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-8.1.2.tgz#1f26b102005cb7750d5159d06ba3cfa9400ebc3d"
+  integrity sha512-9D58TKK4dakqmjcmVuqHoB3ntKBpQJ0Ld38B83aiHJcBD72IZIyPjNtihPA6ayRI5WD33e1W68mArliNLHCprg==
 
 markdown-it-container@^3.0.0:
   version "3.0.0"