feat: footnotes

docs/vfm.md

@@ -19,6 +19,7 @@ Vivliostyle Flavored Markdown (VFM), a Markdown syntax optimized for book author
 - [Math equation](#math-equation)
 - [Frontmatter](#frontmatter)
   - [Reserved words](#reserved-words)
+- [Footnotes](#footnotes)
 - [Full HTML document](#full-html-document)
 - [Page Layout](#page-layout)
 - [Hard new line (optional)](#hard-new-line)
@@ -446,6 +447,47 @@ body.twocolumn {
 
 To specify multiple classes, define as `class:'foo bar'`.
 
+## Footnotes
+
+Define a footnote.
+
+**VFM**
+
+```markdown
+VFM is developed in the GitHub repository [^1].
+Issues are managed on GitHub [^Issues].
+Footnotes can also be written inline ^[This part is a footnote.].
+
+[^1]: [VFM](https://github.com/vivliostyle/vfm)
+
+[^Issues]: [Issues](https://github.com/vivliostyle/vfm/issues)
+```
+
+**HTML**
+
+```html
+<p>
+  VFM is developed in the GitHub repository <sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup>.
+  Issues are managed on GitHub <sup id="fnref-issues"><a href="#fn-issues" class="footnote-ref">Issues</a></sup>.
+  Footnotes can also be written inline <sup id="fnref-2"><a href="#fn-2" class="footnote-ref">2</a></sup>.
+</p>
+<div class="footnotes">
+  <hr>
+  <ol>
+    <li id="fn-1"><a href="https://github.com/vivliostyle/vfm">VFM</a><a href="#fnref-1" class="footnote-backref">↩</a></li>
+    <li id="fn-issues"><a href="https://github.com/vivliostyle/vfm/issues">Issues</a><a href="#fnref-issues" class="footnote-backref">↩</a></li>
+    <li id="fn-2">This part is a footnote.<a href="#fnref-2" class="footnote-backref">↩</a></li>
+  </ol>
+</div>
+```
+
+**CSS**
+
+```css
+.footnotes {
+}
+```
+
 ## Full HTML document
 
 <Badge type="warning">PRE-RELEASE</Badge>

package.json

@@ -72,7 +72,7 @@
     "rehype-stringify": "^8.0.0",
     "remark-attr": "^0.11.1",
     "remark-breaks": "^1.0.5",
-    "remark-footnotes": "^1.0.0",
+    "remark-footnotes": "^2.0.0",
     "remark-frontmatter": "^2.0.0",
     "remark-math": "^2.0.1",
     "remark-parse": "^8.0.2",

src/plugins/footnotes.ts

@@ -0,0 +1,6 @@
+import footnotes from 'remark-footnotes';
+
+/**
+ * Process Markdown AST.
+ */
+export const mdast = [footnotes, { inlineNotes: true }];

src/revive-parse.ts

@@ -1,11 +1,11 @@
 import breaks from 'remark-breaks';
-import footnotes from 'remark-footnotes';
 import frontmatter from 'remark-frontmatter';
 import markdown from 'remark-parse';
 import slug from 'remark-slug';
 import unified from 'unified';
 import { mdast as attr } from './plugins/attr';
 import { mdast as code } from './plugins/code';
+import { mdast as footnotes } from './plugins/footnotes';
 import { mdast as math } from './plugins/math';
 import { mdast as metadata } from './plugins/metadata';
 import { mdast as ruby } from './plugins/ruby';
@@ -27,7 +27,7 @@ export const reviveParse = (
   ...(hardLineBreaks ? [breaks] : []),
   ...(enableMath ? [math] : []),
   ruby,
-  [footnotes, { inlineNotes: true }],
+  footnotes,
   attr,
   slug,
   section,

tests/footnotes.test.ts

@@ -0,0 +1,61 @@
+import { stringify } from '../src/index';
+
+it('Footnotes', () => {
+  const md = `VFM is developed in the GitHub repository [^1].
+
+[^1]: [VFM](https://github.com/vivliostyle/vfm)`;
+  const received = stringify(md, { partial: true });
+  const expected = `
+<p>VFM is developed in the GitHub repository <sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup>.</p>
+<div class="footnotes">
+  <hr>
+  <ol>
+    <li id="fn-1"><a href="https://github.com/vivliostyle/vfm">VFM</a><a href="#fnref-1" class="footnote-backref">↩</a></li>
+  </ol>
+</div>
+`;
+  expect(received).toBe(expected);
+});
+
+it('Inline', () => {
+  const md = `Footnotes can also be written inline ^[This part is a footnote.].`;
+  const received = stringify(md, { partial: true });
+  const expected = `
+<p>Footnotes can also be written inline <sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup>.</p>
+<div class="footnotes">
+  <hr>
+  <ol>
+    <li id="fn-1">This part is a footnote.<a href="#fnref-1" class="footnote-backref">↩</a></li>
+  </ol>
+</div>
+`;
+  expect(received).toBe(expected);
+});
+
+it('Multiple', () => {
+  const md = `VFM is developed in the GitHub repository [^1].
+Issues are managed on GitHub [^Issues].
+Footnotes can also be written inline ^[This part is a footnote.].
+
+[^1]: [VFM](https://github.com/vivliostyle/vfm)
+
+[^Issues]: [Issues](https://github.com/vivliostyle/vfm/issues)
+`;
+  const received = stringify(md, { partial: true });
+  const expected = `
+<p>
+  VFM is developed in the GitHub repository <sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup>.
+  Issues are managed on GitHub <sup id="fnref-issues"><a href="#fn-issues" class="footnote-ref">Issues</a></sup>.
+  Footnotes can also be written inline <sup id="fnref-2"><a href="#fn-2" class="footnote-ref">2</a></sup>.
+</p>
+<div class="footnotes">
+  <hr>
+  <ol>
+    <li id="fn-1"><a href="https://github.com/vivliostyle/vfm">VFM</a><a href="#fnref-1" class="footnote-backref">↩</a></li>
+    <li id="fn-issues"><a href="https://github.com/vivliostyle/vfm/issues">Issues</a><a href="#fnref-issues" class="footnote-backref">↩</a></li>
+    <li id="fn-2">This part is a footnote.<a href="#fnref-2" class="footnote-backref">↩</a></li>
+  </ol>
+</div>
+`;
+  expect(received).toBe(expected);
+});

yarn.lock

@@ -6056,6 +6056,11 @@
   "resolved" "https://registry.npmjs.org/remark-footnotes/-/remark-footnotes-1.0.0.tgz"
   "version" "1.0.0"
 
+"remark-footnotes@^2.0.0":
+  "integrity" "sha512-3Clt8ZMH75Ayjp9q4CorNeyjwIxHFcTkaektplKGl2A1jNGEUey8cKL0ZC5vJwfcD5GFGsNLImLG/NGzWIzoMQ=="
+  "resolved" "https://registry.npmjs.org/remark-footnotes/-/remark-footnotes-2.0.0.tgz"
+  "version" "2.0.0"
+
 "remark-frontmatter@^1.2.0":
   "integrity" "sha512-fM5eZPBvu2pVNoq3ZPW22q+5Ativ1oLozq2qYt9I2oNyxiUd/tDl0iLLntEVAegpZIslPWg1brhcP1VsaSVUag=="
   "resolved" "https://registry.npmjs.org/remark-frontmatter/-/remark-frontmatter-1.3.3.tgz"