Update site

- Fix the mislinked images
- Add a table of contents

site/src/components/Image.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import config from '../../next.config.js';
+
+const MyImage = ({ src, width, height, ...props }) => {
+  const _src = `${config.basePath}${src}`
+  return (
+    <img src={_src} placeholder="blur"/>
+  );
+};
+
+export default MyImage;

site/src/components/Rehype.jsx

@@ -1,19 +1,25 @@
 import React from 'react';
 
 import unified from 'unified';
+import orgParse from 'uniorg-parse';
+import org2rehype from 'uniorg-rehype';
 import rehype2react from 'rehype-react';
+import toc from '@jsdevtools/rehype-toc';
 
 import Link from './Link';
+import Image from './Image';
 
 // we use rehype-react to process hast and transform it to React
 // component, which allows as replacing some of components with custom
 // implementation. e.g., we can replace all <a> links to use
 // `next/link`.
-const processor = unified().use(rehype2react, {
+const processor = unified()
+    .use(rehype2react, {
   createElement: React.createElement,
   Fragment: React.Fragment,
   components: {
     a: Link,
+    img: Image,
   },
 });
 

site/src/lib/api.js

@@ -1,4 +1,5 @@
 import * as path from 'path';
+import toc from '@jsdevtools/rehype-toc';
 import trough from 'trough';
 import toVFile from 'to-vfile';
 import findDown from 'vfile-find-down';
@@ -73,6 +74,7 @@ function populateBacklinks(files) {
       backlinks[file.data.slug] || new Set();
 
     file.data.links.forEach((other) => {
+      if (other === file.data.slug) { return; }
       backlinks[other] = backlinks[other] || new Set();
       backlinks[other].add(file.data.slug);
     });

site/src/lib/orgToHtml.js

@@ -5,6 +5,7 @@ import org2rehype from 'uniorg-rehype';
 import extractKeywords from 'uniorg-extract-keywords';
 import { uniorgSlug } from 'uniorg-slug';
 import { visitIds } from 'orgast-util-visit-ids';
+import toc from '@jsdevtools/rehype-toc'
 
 const processor = unified()
   .use(orgParse)
@@ -12,6 +13,7 @@ const processor = unified()
   .use(uniorgSlug)
   .use(extractIds)
   .use(org2rehype)
+  .use(toc)
   .use(toJson);
 
 export default async function orgToHtml(file) {

site/src/styles/globals.css

@@ -1,6 +1,5 @@
 html,
-body {
-  padding: 0;
+body { padding: 0;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
@@ -32,3 +31,17 @@ code {
   background-color: #eee;
 
 }
+
+ol {
+  counter-reset: item;
+  list-style: none;
+}
+ol>li {
+  counter-increment: item;
+}
+ol>li::before {
+  content: counters(item, '.') '. ';
+}
+img {
+  max-width: 100%;
+}