feat(bi-directional-links): support hash tags, query strings for bi-directional links (#152)

Author: nekomeowww

.github/workflows/ci.yaml

@@ -12,6 +12,48 @@ env:
   STORE_PATH: ''
 
 jobs:
+  unittest:
+    strategy:
+      matrix:
+        node-version: ['18.x', '20.x']
+
+    name: Unit tests - ${{ matrix.node-version }}
+    runs-on: 'ubuntu-latest'
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          run_install: false
+          version: 8
+
+      - name: Obtain pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Obtain pnpm store cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Test
+        run: pnpm run test:run
+
   lint:
     strategy:
       matrix:

docs/.vitepress/config.ts

@@ -42,7 +42,14 @@ export const sidebars: Record<string, DefaultTheme.Sidebar> = {
       {
         text: 'Markdown It Plugins',
         items: [
-          { text: 'Bi-directional links', link: '/pages/en/integrations/markdown-it-bi-directional-links/' },
+          {
+            text: 'Bi-directional links',
+            collapsed: true,
+            items: [
+              { text: 'Getting Started', link: '/pages/en/integrations/markdown-it-bi-directional-links/' },
+              { text: 'Syntax', link: '/pages/en/integrations/markdown-it-bi-directional-links/syntax' },
+            ],
+          },
           { text: 'Elements Transformation', link: '/pages/en/integrations/markdown-it-element-transform/' },
           { text: 'Lazy loading blurred thumbnails', link: '/pages/en/integrations/markdown-it-unlazy-img/' },
         ],
@@ -59,6 +66,7 @@ export const sidebars: Record<string, DefaultTheme.Sidebar> = {
           { text: 'Enhanced mark elements', link: '/pages/en/integrations/vitepress-plugin-enhanced-mark/' },
           {
             text: 'Thumbnail hashing for images',
+            collapsed: true,
             items: [
               { text: 'Usage', link: '/pages/en/integrations/vitepress-plugin-thumbnail-hash/' },
               { text: 'Try ThumbHash', link: '/pages/en/integrations/vitepress-plugin-thumbnail-hash/thumbhash' },
@@ -132,7 +140,14 @@ export const sidebars: Record<string, DefaultTheme.Sidebar> = {
       {
         text: 'Markdown It 插件',
         items: [
-          { text: '双向链接', link: '/pages/zh-CN/integrations/markdown-it-bi-directional-links/' },
+          {
+            text: '双向链接',
+            collapsed: true,
+            items: [
+              { text: '快速上手', link: '/pages/zh-CN/integrations/markdown-it-bi-directional-links/' },
+              { text: '语法', link: '/pages/zh-CN/integrations/markdown-it-bi-directional-links/syntax' },
+            ],
+          },
           { text: '元素转换', link: '/pages/zh-CN/integrations/markdown-it-element-transform/' },
           { text: '懒加载模糊缩略图', link: '/pages/zh-CN/integrations/markdown-it-unlazy-img/' },
         ],

docs/pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page.md

@@ -1,3 +1,19 @@
 # Bi-directional Links Example Page
 
 Hi! This is a linked internal page.
+
+## Section 2
+
+Section 2 content.
+
+### Subsection 2.1
+
+Subsection 2.1 content.
+
+## Section 3
+
+Section 3 content.
+
+### Subsection 3.1
+
+Subsection 3.1 content.

docs/pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Same Name Page.md

@@ -1,3 +1,19 @@
 # Bi-directional Links Example Same Name Page
 
 Hi! This is a linked internal page.
+
+## Section 2
+
+Section 2 content.
+
+### Subsection 2.1
+
+Subsection 2.1 content.
+
+## Section 3
+
+Section 3 content.
+
+### Subsection 3.1
+
+Subsection 3.1 content.

docs/pages/en/integrations/markdown-it-bi-directional-links/index.md

@@ -1,21 +1,5 @@
 # Bi-directional Links <Badge type="tip" text="v1.27.2" />
 
-## Demo
-
-[[Bi-directional Links Example Page]]
-
-Custom text: [[Bi-directional Links Example Page|Custom Text]]
-
-Compatible to modify the HTML attributes [[Bi-directional Links Example Page|Custom Attrs]]{style="color: red;"}
-
-Obsidian same name pages: [[pages/en/integrations/markdown-it-bi-directional-links/same-name/Bi-directional Links Example Same Name Page|Bi-directional Links Example Same Name Page]] 和 [[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Same Name Page|Bi-directional Links Example Same Name Page]]
-
-Absolute Path: [[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page]]
-
-Images are supported:
-
-![[foxtail field.jpg]]
-
 ## Introduction
 
 **Bi-directional links** (also known as internal links), and another concept you may know and hear about [WikiLinks](https://en.wikipedia.org/wiki/Help:Link), holds a important place in the document engineering area. It is usually used to quickly establish a connection (or link) from one page to another page, and widely used in Wiki pages such as [Wikipedia](https://wikipedia.org), and now days popular tools such as [Obsidian](https://obsidian.md/) and [Logseq](https://logseq.com/).
@@ -25,135 +9,47 @@ This plugin is a fully featured compatible implementation version of [Obsidian](
 1. A page's file name (without extension) can be used as a link target, for example: `[[Bi-directional Links Example Page]]` will be parsed as a link to the globally unique `Bi-directional Links Example Page.md` file.
 2. A link target can be an absolute path, for example: `[[Some Folder/Bi-directional Links Example Page]]` will be parsed as a link to `Some Folder/Bi-directional Links Example Page.md`, usually appears when you have multiple files with the same name.
 
-### Examples
+## Demo
 
-<br>
+::: info Syntax supporting matrix
+
+<div grid="~ cols-[auto_1fr] gap-1" items-center my-1>
+  <span i-icon-park-outline:check-one text="green-600" />
+  <span>Basic syntax</span>
+  <span i-icon-park-outline:check-one text="green-600" />
+  <span>Able to handle hash tags <code>#</code></span>
+  <span i-icon-park-outline:check-one text="green-600" />
+  <span>Able to handle query strings <code>?</code></span>
+  <span i-icon-park-outline:check-one text="green-600" />
+  <span>Images</span>
+  <span i-icon-park-outline:check-one text="green-600" />
+  <span>Custom text</span>
+  <span i-icon-park-outline:check-one text="green-600" />
+  <span>Custom HTML attributes</span>
+  <span i-icon-park-outline:check-one text="green-600" />
+  <span>Same name pages</span>
+  <span i-icon-park-outline:check-one text="green-600" />
+  <span>Absolute path</span>
+</div>
+
+You can discover more syntaxes and features in the [Syntax](/pages/en/integrations/markdown-it-bi-directional-links/syntax).
+:::
 
-#### Basic
+Basic: [[Bi-directional Links Example Page]]
 
-```markdown
-[[Target Page File Name]]
-```
-
-Demo
+Custom text: [[Bi-directional Links Example Page|Custom Text]]
 
-[[Bi-directional Links Example Page]]
+Compatible to modify the HTML attributes [[Bi-directional Links Example Page|Custom Attrs]]{style="color: red;"}
 
-##### Image
+Obsidian same name pages: [[pages/en/integrations/markdown-it-bi-directional-links/same-name/Bi-directional Links Example Same Name Page|Bi-directional Links Example Same Name Page]] 和 [[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Same Name Page|Bi-directional Links Example Same Name Page]]
 
-```markdown
-![[foxtail field.jpg]]
-```
+Absolute Path: [[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page]]
 
-Demo
+Images are supported:
 
 ![[foxtail field.jpg]]
 
-#### Custom Text
-
-```markdown
-[[Target Page File Name|Custom Text]]
-```
-
-Demo
-
-[[Bi-directional Links Example Page|Custom Text]]
-
-#### Compatible with [`markdown-it-attrs`](https://github.com/arve0/markdown-it-attrs) to modify HTML attributes
-
-<br>
-
-##### Change color
-
-```markdown
-[[Target Page File Name]]{style="color: red;"}
-```
-
-Demo
-
-[[Bi-directional Links Example Page]]{style="color: red;"}
-
-##### Change class name
-
-```markdown
-[[Target Page File Name]]{.custom-class}
-```
-
-Demo
-
-[[Bi-directional Links Example Page]]{.custom-class}
-
-### Absolute path
-
-```markdown
-[[Some Full Path Reference to Your Page]]
-```
-
-Demo
-
-[[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page]]
-
-#### Image
-
-```markdown
-![[en/integrations/markdown-it-bi-directional-links/images/railway near by beach same name.jpg]]
-```
-
-Demo
-
-![[pages/en/integrations/markdown-it-bi-directional-links/images/railway near by beach same name.jpg]]
-
-And it is distinguishable to the pictures with the same name:
-
-```markdown
-![[en/integrations/markdown-it-bi-directional-links/images/same-name/railway near by beach same name.jpg]]
-```
-
-Demo
-
-![[pages/en/integrations/markdown-it-bi-directional-links/images/same-name/railway near by beach same name.jpg]]
-
-### Absolute path with custom text
-
-```markdown
-[[Some Full Path Reference to Your Page|Custom Text]]
-```
-
-Demo
-
-[[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page|Custom Text]]
-
-### Use Markdown markup in custom text
-
-```markdown
-[[Some Full Path Reference to Your Page|`Code Block (Before)` Middle `Code Block (After)`]]
-
-[[Some Full Path Reference to Your Page|**Bold Before** Middle **Bold After**]]
-
-[[Some Full Path Reference to Your Page|*Italic Before* Middle *After*]]
-
-[[Some Full Path Reference to Your Page|~~Strikethrough Before~~ Middle ~~Strikethrough After~~]]
-
-[[Some Full Path Reference to Your Page|<span style="color: red;">Custom HTML</span>]]
-
-[[Some Full Path Reference to Your Page|<span style="color: red;">Custom HTML (Before)</span> Middle <span style="color: blue;">Custom HTML (After)</span>]]
-```
-
-[[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page|`Code Block (Before)` Middle `Code Block (After)`]]
-
-[[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page|**Bold (Before)** Middle **Bold (After)**]]
-
-[[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page|*Italic (Before)* Middle *Italic (After)*]]
-
-[[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page|~~Strikethrough (Before)~~ Middle ~~Strikethrough (After)~~]]
-
-[[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page|<span style="color: red;">Custom HTML</span>]]
-
-[[pages/en/integrations/markdown-it-bi-directional-links/Bi-directional Links Example Page|<span style="color: red;">Custom HTML</span> Middle <span style="color: blue;">Custom HTML</span>]]
-
-## How to use
-
-### Installation
+## Installation
 
 Install `@nolebase/markdown-it-bi-directional-links` to your project dependencies by running the following command:
 
@@ -173,6 +69,8 @@ yarn add @nolebase/markdown-it-bi-directional-links -D
 
 :::
 
+## Configuration
+
 ### Integrate with VitePress
 
 In the VitePress configuration file (usually `docs/.vitepress/config.ts`, the file path and extension may be different), import `@nolebase/markdown-it-bi-directional-links` as a plugin, and use it as a `markdown-it` plugin in the `markdown` option: