enhance(docs): comparison to real footnotes (#1096)
Co-authored-by: Aaron <aaronklinker1@gmail.com>
This commit is contained in:
Malix
@@ -8,6 +8,7 @@ import {
|
||||
prepareTypedocSidebar,
|
||||
} from './utils/menus';
|
||||
import { meta, script } from './utils/head';
|
||||
import footnote from 'markdown-it-footnote';
|
||||
import { version as wxtVersion } from '../../packages/wxt/package.json';
|
||||
import { version as i18nVersion } from '../../packages/i18n/package.json';
|
||||
import { version as autoIconsVersion } from '../../packages/auto-icons/package.json';
|
||||
@@ -47,6 +48,12 @@ export default defineConfig({
|
||||
}),
|
||||
],
|
||||
|
||||
markdown: {
|
||||
config: (md) => {
|
||||
md.use(footnote);
|
||||
},
|
||||
},
|
||||
|
||||
themeConfig: {
|
||||
// https://vitepress.dev/reference/default-theme-config
|
||||
logo: {
|
||||
|
||||
@@ -8,50 +8,59 @@ Lets compare the features of WXT vs [Plasmo](https://docs.plasmo.com/framework)
|
||||
- 🟡 - Partial support
|
||||
- ❌ - No support
|
||||
|
||||
| Features | WXT | Plasmo | CRXJS |
|
||||
| ------------------------------------------------------- | :--------------: | :-------------: | :--------------: |
|
||||
| Supports all browsers | ✅ | ✅ | 🟡 <sup>10</sup> |
|
||||
| MV2 Support | ✅ | ✅ | 🟡 <sup>1</sup> |
|
||||
| MV3 Support | ✅ | ✅ | 🟡 <sup>1</sup> |
|
||||
| Create Extension ZIPs | ✅ | ✅ | ❌ |
|
||||
| Create Firefox Sources ZIP | ✅ | ❌ | ❌ |
|
||||
| First-class TypeScript support | ✅ | ✅ | ✅ |
|
||||
| Entrypoint discovery | ✅ <sup>2</sup> | ✅ <sup>2</sup> | ❌ |
|
||||
| Inline entrypoint config | ✅ | ✅ | ❌ <sup>9</sup> |
|
||||
| Auto-imports | ✅ | ❌ | ❌ |
|
||||
| Reusable module system | ✅ | ❌ | ❌ |
|
||||
| Supports all frontend frameworks | ✅ | 🟡 <sup>3</sup> | ✅ |
|
||||
| Framework specific entrypoints (like `Popup.tsx`) | 🟡 <sup>4</sup> | ✅ <sup>5</sup> | ❌ |
|
||||
| Automated publishing | ✅ | ✅ | ❌ |
|
||||
| Remote Code Bundling (Google Analytics) | ✅ | ✅ | ❌ |
|
||||
| Unlisted HTML Pages | ✅ | ✅ | ✅ |
|
||||
| Unlisted Scripts | ✅ | ❌ | ❌ |
|
||||
| ESM Content Scripts | ❌ <sup>12</sup> | ❌ | ✅ |
|
||||
| <strong style="opacity: 50%">Dev Mode</strong> | | |
|
||||
| `.env` Files | ✅ | ✅ | ✅ |
|
||||
| Opens browser with extension installed | ✅ | ❌ | ❌ |
|
||||
| HMR for UIs | ✅ | 🟡 <sup>6</sup> | ✅ |
|
||||
| Reload HTML Files on Change | ✅ | 🟡 <sup>7</sup> | ✅ |
|
||||
| Reload Content Scripts on Change | ✅ | 🟡 <sup>7</sup> | ✅ |
|
||||
| Reload Background on Change | 🟡 <sup>7</sup> | 🟡 <sup>7</sup> | 🟡 <sup>7</sup> |
|
||||
| Respects Content Script `run_at` | ✅ | ✅ | ❌ <sup>8</sup> |
|
||||
| <strong style="opacity: 50%">Built-in Wrappers</strong> | | | |
|
||||
| Storage | ✅ | ✅ | ❌ <sup>11</sup> |
|
||||
| Messaging | ❌ <sup>11</sup> | ✅ | ❌ <sup>11</sup> |
|
||||
| Content Script UI | ✅ | ✅ | ❌ <sup>11</sup> |
|
||||
| I18n | ✅ | ❌ | ❌ |
|
||||
| Features | WXT | Plasmo | CRXJS |
|
||||
| ------------------------------------------------------- | :-----: | :-----: | :-----: |
|
||||
| Supports all browsers | ✅ | ✅ | 🟡 [^j] |
|
||||
| MV2 Support | ✅ | ✅ | 🟡 [^a] |
|
||||
| MV3 Support | ✅ | ✅ | 🟡 [^a] |
|
||||
| Create Extension ZIPs | ✅ | ✅ | ❌ |
|
||||
| Create Firefox Sources ZIP | ✅ | ❌ | ❌ |
|
||||
| First-class TypeScript support | ✅ | ✅ | ✅ |
|
||||
| Entrypoint discovery | ✅ [^b] | ✅ [^b] | ❌ |
|
||||
| Inline entrypoint config | ✅ | ✅ | ❌ [^i] |
|
||||
| Auto-imports | ✅ | ❌ | ❌ |
|
||||
| Reusable module system | ✅ | ❌ | ❌ |
|
||||
| Supports all frontend frameworks | ✅ | 🟡 [^c] | ✅ |
|
||||
| Framework specific entrypoints (like `Popup.tsx`) | 🟡 [^d] | ✅ [^e] | ❌ |
|
||||
| Automated publishing | ✅ | ✅ | ❌ |
|
||||
| Remote Code Bundling (Google Analytics) | ✅ | ✅ | ❌ |
|
||||
| Unlisted HTML Pages | ✅ | ✅ | ✅ |
|
||||
| Unlisted Scripts | ✅ | ❌ | ❌ |
|
||||
| ESM Content Scripts | ❌ [^l] | ❌ | ✅ |
|
||||
| <strong style="opacity: 50%">Dev Mode</strong> | | | |
|
||||
| `.env` Files | ✅ | ✅ | ✅ |
|
||||
| Opens browser with extension installed | ✅ | ❌ | ❌ |
|
||||
| HMR for UIs | ✅ | 🟡 [^f] | ✅ |
|
||||
| Reload HTML Files on Change | ✅ | 🟡 [^g] | ✅ |
|
||||
| Reload Content Scripts on Change | ✅ | 🟡 [^g] | ✅ |
|
||||
| Reload Background on Change | 🟡 [^g] | 🟡 [^g] | 🟡 [^g] |
|
||||
| Respects Content Script `run_at` | ✅ | ✅ | ❌ [^h] |
|
||||
| <strong style="opacity: 50%">Built-in Wrappers</strong> | | | |
|
||||
| Storage | ✅ | ✅ | ❌ [^k] |
|
||||
| Messaging | ❌ [^k] | ✅ | ❌ [^k] |
|
||||
| Content Script UI | ✅ | ✅ | ❌ [^k] |
|
||||
| I18n | ✅ | ❌ | ❌ |
|
||||
|
||||
<small>
|
||||
<sup>1</sup>: Either MV2 or MV3, not both.
|
||||
<br/><sup>2</sup>: File based.
|
||||
<br/><sup>3</sup>: Only React, Vue, and Svelte.
|
||||
<br/><sup>4</sup>: <code>.html</code> <code>.ts</code> <code>.tsx</code>.
|
||||
<br/><sup>5</sup>: <code>.html</code> <code>.ts</code> <code>.tsx</code>. <code>.vue</code> <code>.svelte</code>.
|
||||
<br/><sup>6</sup>: React only.
|
||||
<br/><sup>7</sup>: Reloads entire extension.
|
||||
<br/><sup>8</sup>: ESM-style loaders run asynchronously.
|
||||
<br/><sup>9</sup>: Entrypoint options all configured in <code>manifest.json</code>.
|
||||
<br/><sup>10</sup>: As of <code>v2.0.0-beta.23</code>, but v2 stable hasn't been released yet.
|
||||
<br/><sup>11</sup>: There is no built-in wrapper around this API. However, you can still access the standard APIs via <code>chrome</code>/<code>browser</code> globals or use any 3rd party NPM package.
|
||||
<br/><sup>12</sup>: WIP, moving very slowly. Follow <a href="https://github.com/wxt-dev/wxt/issues/357" target="_blank"><code>wxt-dev/wxt#357</code></a> for updates.
|
||||
</small>
|
||||
[^a]: Either MV2 or MV3, not both.
|
||||
|
||||
[^b]: File based.
|
||||
|
||||
[^c]: Only React, Vue, and Svelte.
|
||||
|
||||
[^d]: `.html`, `.ts`, `.tsx`.
|
||||
|
||||
[^e]: `.html`, `.ts`, `.tsx`, `.vue`, `.svelte`.
|
||||
|
||||
[^f]: React only.
|
||||
|
||||
[^g]: Reloads entire extension.
|
||||
|
||||
[^h]: ESM-style loaders run asynchronously.
|
||||
|
||||
[^i]: Entrypoint options all configured in `manifest.json`.
|
||||
|
||||
[^j]: As of `v2.0.0-beta.23`, but v2 stable hasn't been released yet.
|
||||
|
||||
[^k]: There is no built-in wrapper around this API. However, you can still access the standard APIs via `chrome`/`browser` globals or use any 3rd party NPM package.
|
||||
|
||||
[^l]: WIP, moving very slowly. Follow [wxt-dev/wxt#357](https://github.com/wxt-dev/wxt/issues/357) for updates.
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
"fast-glob": "^3.3.2",
|
||||
"fs-extra": "^11.2.0",
|
||||
"lint-staged": "^15.2.10",
|
||||
"markdown-it-footnote": "^4.0.0",
|
||||
"nano-spawn": "^0.1.0",
|
||||
"prettier": "^3.3.3",
|
||||
"simple-git-hooks": "^2.11.1",
|
||||
@@ -51,6 +52,9 @@
|
||||
"@algolia/client-search",
|
||||
"search-insights"
|
||||
]
|
||||
},
|
||||
"patchedDependencies": {
|
||||
"markdown-it-footnote": "patches/markdown-it-footnote.patch"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
Removed sub-ids from rendered links. When you link to the same footnote multiple times, the link would look like `[3.2]` instead of just `[3]`. Didn't like how that looked, so this patch removes that function.
|
||||
@@ -0,0 +1,79 @@
|
||||
diff --git a/dist/index.cjs.js b/dist/index.cjs.js
|
||||
index 806448c967261a61288f0faa0633a91f77d35968..6812dd84bbbb7176af4115a287677454fa562883 100644
|
||||
--- a/dist/index.cjs.js
|
||||
+++ b/dist/index.cjs.js
|
||||
@@ -13,14 +13,14 @@ function render_footnote_anchor_name(tokens, idx, options, env /*, slf */) {
|
||||
}
|
||||
function render_footnote_caption(tokens, idx /*, options, env, slf */) {
|
||||
let n = Number(tokens[idx].meta.id + 1).toString();
|
||||
- if (tokens[idx].meta.subId > 0) n += `:${tokens[idx].meta.subId}`;
|
||||
+ // if (tokens[idx].meta.subId > 0) n += `:${tokens[idx].meta.subId}`;
|
||||
return `[${n}]`;
|
||||
}
|
||||
function render_footnote_ref(tokens, idx, options, env, slf) {
|
||||
const id = slf.rules.footnote_anchor_name(tokens, idx, options, env, slf);
|
||||
const caption = slf.rules.footnote_caption(tokens, idx, options, env, slf);
|
||||
let refid = id;
|
||||
- if (tokens[idx].meta.subId > 0) refid += `:${tokens[idx].meta.subId}`;
|
||||
+ // if (tokens[idx].meta.subId > 0) refid += `:${tokens[idx].meta.subId}`;
|
||||
return `<sup class="footnote-ref"><a href="#fn${id}" id="fnref${refid}">${caption}</a></sup>`;
|
||||
}
|
||||
function render_footnote_block_open(tokens, idx, options) {
|
||||
@@ -31,7 +31,7 @@ function render_footnote_block_close() {
|
||||
}
|
||||
function render_footnote_open(tokens, idx, options, env, slf) {
|
||||
let id = slf.rules.footnote_anchor_name(tokens, idx, options, env, slf);
|
||||
- if (tokens[idx].meta.subId > 0) id += `:${tokens[idx].meta.subId}`;
|
||||
+ // if (tokens[idx].meta.subId > 0) id += `:${tokens[idx].meta.subId}`;
|
||||
return `<li id="fn${id}" class="footnote-item">`;
|
||||
}
|
||||
function render_footnote_close() {
|
||||
@@ -39,7 +39,7 @@ function render_footnote_close() {
|
||||
}
|
||||
function render_footnote_anchor(tokens, idx, options, env, slf) {
|
||||
let id = slf.rules.footnote_anchor_name(tokens, idx, options, env, slf);
|
||||
- if (tokens[idx].meta.subId > 0) id += `:${tokens[idx].meta.subId}`;
|
||||
+ // if (tokens[idx].meta.subId > 0) id += `:${tokens[idx].meta.subId}`;
|
||||
|
||||
/* ↩ with escape code to prevent display as Apple Emoji on iOS */
|
||||
return ` <a href="#fnref${id}" class="footnote-backref">\u21a9\uFE0E</a>`;
|
||||
diff --git a/index.mjs b/index.mjs
|
||||
index 48277ca67206f248b9deb0058e9a7d69dbc07702..718e3e527b2513e4f6f59cba9d4526a36d58f6bc 100644
|
||||
--- a/index.mjs
|
||||
+++ b/index.mjs
|
||||
@@ -17,7 +17,7 @@ function render_footnote_anchor_name (tokens, idx, options, env/*, slf */) {
|
||||
function render_footnote_caption (tokens, idx/*, options, env, slf */) {
|
||||
let n = Number(tokens[idx].meta.id + 1).toString()
|
||||
|
||||
- if (tokens[idx].meta.subId > 0) n += `:${tokens[idx].meta.subId}`
|
||||
+ // if (tokens[idx].meta.subId > 0) n += `:${tokens[idx].meta.subId}`
|
||||
|
||||
return `[${n}]`
|
||||
}
|
||||
@@ -27,7 +27,7 @@ function render_footnote_ref (tokens, idx, options, env, slf) {
|
||||
const caption = slf.rules.footnote_caption(tokens, idx, options, env, slf)
|
||||
let refid = id
|
||||
|
||||
- if (tokens[idx].meta.subId > 0) refid += `:${tokens[idx].meta.subId}`
|
||||
+ // if (tokens[idx].meta.subId > 0) refid += `:${tokens[idx].meta.subId}`
|
||||
|
||||
return `<sup class="footnote-ref"><a href="#fn${id}" id="fnref${refid}">${caption}</a></sup>`
|
||||
}
|
||||
@@ -45,7 +45,7 @@ function render_footnote_block_close () {
|
||||
function render_footnote_open (tokens, idx, options, env, slf) {
|
||||
let id = slf.rules.footnote_anchor_name(tokens, idx, options, env, slf)
|
||||
|
||||
- if (tokens[idx].meta.subId > 0) id += `:${tokens[idx].meta.subId}`
|
||||
+ // if (tokens[idx].meta.subId > 0) id += `:${tokens[idx].meta.subId}`
|
||||
|
||||
return `<li id="fn${id}" class="footnote-item">`
|
||||
}
|
||||
@@ -57,7 +57,7 @@ function render_footnote_close () {
|
||||
function render_footnote_anchor (tokens, idx, options, env, slf) {
|
||||
let id = slf.rules.footnote_anchor_name(tokens, idx, options, env, slf)
|
||||
|
||||
- if (tokens[idx].meta.subId > 0) id += `:${tokens[idx].meta.subId}`
|
||||
+ // if (tokens[idx].meta.subId > 0) id += `:${tokens[idx].meta.subId}`
|
||||
|
||||
/* ↩ with escape code to prevent display as Apple Emoji on iOS */
|
||||
return ` <a href="#fnref${id}" class="footnote-backref">\u21a9\uFE0E</a>`
|
||||
Generated
+13
@@ -4,6 +4,11 @@ settings:
|
||||
autoInstallPeers: true
|
||||
excludeLinksFromLockfile: false
|
||||
|
||||
patchedDependencies:
|
||||
markdown-it-footnote:
|
||||
hash: ue34jdgdx43siqdj557feoepzq
|
||||
path: patches/markdown-it-footnote.patch
|
||||
|
||||
importers:
|
||||
|
||||
.:
|
||||
@@ -35,6 +40,9 @@ importers:
|
||||
lint-staged:
|
||||
specifier: ^15.2.10
|
||||
version: 15.2.10
|
||||
markdown-it-footnote:
|
||||
specifier: ^4.0.0
|
||||
version: 4.0.0(patch_hash=ue34jdgdx43siqdj557feoepzq)
|
||||
nano-spawn:
|
||||
specifier: ^0.1.0
|
||||
version: 0.1.0
|
||||
@@ -3353,6 +3361,9 @@ packages:
|
||||
mark.js@8.11.1:
|
||||
resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==}
|
||||
|
||||
markdown-it-footnote@4.0.0:
|
||||
resolution: {integrity: sha512-WYJ7urf+khJYl3DqofQpYfEYkZKbmXmwxQV8c8mO/hGIhgZ1wOe7R4HLFNwqx7TjILbnC98fuyeSsin19JdFcQ==}
|
||||
|
||||
marked@4.3.0:
|
||||
resolution: {integrity: sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==}
|
||||
engines: {node: '>= 12'}
|
||||
@@ -7803,6 +7814,8 @@ snapshots:
|
||||
|
||||
mark.js@8.11.1: {}
|
||||
|
||||
markdown-it-footnote@4.0.0(patch_hash=ue34jdgdx43siqdj557feoepzq): {}
|
||||
|
||||
marked@4.3.0: {}
|
||||
|
||||
marky@1.2.5: {}
|
||||
|
||||
Reference in New Issue
Block a user