#12 Support for footnotes

package.json

@@ -40,7 +40,7 @@
     "chokidar": "^3.0.2",
     "cpx": "^1.5.0",
     "hastscript": "^5.1.0",
-    "mdast-util-to-hast": "^6.0.1",
+    "mdast-util-to-hast": "^6.0.2",
     "mkdirp": "^0.5.1",
     "node-sass": "^4.12.0",
     "npm-run-all": "^4.1.5",
@@ -69,11 +69,11 @@
     "textlint-rule-no-nfd": "^1.0.1",
     "textlint-rule-preset-ja-spacing": "^2.0.1",
     "ts-node": "^8.3.0",
-    "typescript": "^3.5.3",
+    "typescript": "^3.6.2",
     "unified": "^8.3.2",
     "unist-builder": "^1.0.4",
     "unist-util-visit": "^2.0.0",
-    "vivliostyle": "^2019.1.106",
-    "vivliostyle-savepdf": "^1.3.0"
+    "vivliostyle": "^2019.8.101",
+    "vivliostyle-savepdf": "^1.3.1"
   }
 }

src/build/md2html.ts

@@ -9,7 +9,7 @@ import stringify from 'rehype-stringify'
 import raw from 'rehype-raw'
 import format from 'rehype-format'
 import { highlight, copyFrontmatter, doc, linkMd2Html } from './remark'
-import { code, crossReference, footnote, image } from './rehype'
+import { code, crossReference, image } from './rehype'
 
 /**
  * Convert markdown to HTML.
@@ -19,7 +19,7 @@ import { code, crossReference, footnote, image } from './rehype'
 const md2html = (md: string, relativePath: string): Promise<string> => {
   return new Promise((resolve, reject) => {
     unified()
-      .use(markdown)
+      .use(markdown, { footnotes: true })
       .use(frontmatter, ['yaml', 'toml'])
       .use(parseFrontmatter)
       .use(copyFrontmatter as any)
@@ -32,7 +32,6 @@ const md2html = (md: string, relativePath: string): Promise<string> => {
         handlers: {
           code,
           crossReference,
-          footnote,
           image
         }
       })

src/build/rehype.ts

@@ -1,5 +1,4 @@
 import u from 'unist-builder'
-import all from 'mdast-util-to-hast'
 
 /**
  * Process `code` on `remark-rehype`.
@@ -48,16 +47,6 @@ export const crossReference = (h: any, node: any) => {
     )
 }
 
-/**
- * Process `foornote` on `remark-rehype`..
- * @param h Processer of HAST.
- * @param node Node of HAST.
- * @returns HAST.
- */
-export const footnote = (h: any, node: any) => {
-  return h(node, 'span', { className: ['footnote'] }, all(h, node))
-}
-
 /**
  * Process `image` on `remark-rehype`..
  * @param h Processer of HAST.

src/content/page.md

@@ -7,6 +7,9 @@ author: ['akabeko']
 
 ## 見出し
 
+アカベコマイリ [^1]
+[^1]: アカベコマイリ https://akabeko.me/blog/
+
 サンプル `code` サンプル
 
 サンプル test サンプル (sample) サンプル

src/scss/app.scss

@@ -2,3 +2,5 @@
 @import './lib-override.scss';
 @import './media.scss';
 @import './base.scss';
+@import './cover.scss';
+@import './toc.scss';

src/scss/base.scss

@@ -1,51 +1,41 @@
 @import './variables.scss';
 
-nav#toc {
-  break-before: page;
-  font-size: 1.2;
-
-  li a::after {
-    content: target-counter(attr(href), page);
-  }
-
-  li a {
-    display: inline-flex;
-    width: 100%;
-    text-decoration: none;
-    color: currentColor;
-    align-items: baseline;
-  }
-
-  li a::before {
-    margin-left: 0.5em;
-    margin-right: 0.5em;
-    border-bottom: solid 1px;
-    content: '';
-    order: 1;
-    flex: auto;
-  }
-
-  li a::after {
-    text-align: right;
-    content: target-counter(attr(href), page);
-    align-self: flex-end;
-    flex: none;
-    order: 2;
-  }
-}
-
 h1,
 h2,
 h3 {
   font-feature-settings: 'palt';
 }
 
+a {
+  text-decoration: none;
+  color: $color_blue;
+}
+
+a:visited {
+  color: $color_purple;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: $color_red;
+}
+
 p {
   font-feature-settings: 'palt';
 }
 
-#cover {
-  h1 {
-    color: $color_white;
+.footnote-ref {
+  text-decoration: none;
+
+  &:visited {
+    color: $color_blue;
+  }
+
+  &::before {
+    content: '[';
+  }
+
+  &::after {
+    content: ']';
   }
 }

src/scss/cover.scss

@@ -0,0 +1,7 @@
+@import './variables.scss';
+
+#cover {
+  h1 {
+    color: $color_white;
+  }
+}

src/scss/toc.scss

@@ -0,0 +1,35 @@
+@import './variables.scss';
+
+nav#toc {
+  break-before: page;
+  font-size: 1.2;
+
+  li a::after {
+    content: target-counter(attr(href), page);
+  }
+
+  li a {
+    display: inline-flex;
+    width: 100%;
+    text-decoration: none;
+    color: currentColor;
+    align-items: baseline;
+  }
+
+  li a::before {
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+    border-bottom: solid 1px;
+    content: '';
+    order: 1;
+    flex: auto;
+  }
+
+  li a::after {
+    text-align: right;
+    content: target-counter(attr(href), page);
+    align-self: flex-end;
+    flex: none;
+    order: 2;
+  }
+}