rework layout and add table of contents

package-lock.json

@@ -10,10 +10,14 @@
       "devDependencies": {
         "@sveltejs/adapter-static": "^1.0.0-next.21",
         "@sveltejs/kit": "next",
+        "hast-util-to-text": "^3.1.2",
+        "mdast-util-to-string": "^4.0.0",
         "mdsvex": "^0.9.8",
         "node-sass": "^6.0.1",
         "svelte": "^3.42.6",
-        "svelte-preprocess": "^4.9.8"
+        "svelte-preprocess": "^4.9.8",
+        "unist-util-find": "^2.0.0",
+        "unist-util-visit": "^5.0.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -159,6 +163,24 @@
         }
       }
     },
+    "node_modules/@types/hast": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.5.tgz",
+      "integrity": "sha512-SvQi0L/lNpThgPoleH53cdjB3y9zpLlVjRbqB3rH8hx1jiRSBGAhyjV3H+URFjNVRqt2EdYNrbZE5IsGlNfpRg==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2"
+      }
+    },
+    "node_modules/@types/mdast": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.0.tgz",
+      "integrity": "sha512-YLeG8CujC9adtj/kuDzq1N4tCDYKoZ5l/bnjq8d74+t/3q/tHquJOJKUQXJrLCflOHpKjXgcI/a929gpmLOEng==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/minimist": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
@@ -1433,6 +1455,36 @@
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
       "dev": true
     },
+    "node_modules/hast-util-is-element": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-2.1.3.tgz",
+      "integrity": "sha512-O1bKah6mhgEq2WtVMk+Ta5K7pPMqsBBlmzysLdcwKVrqzZQ0CHqUPiIVspNhAG1rvxpvJjtGee17XfauZYKqVA==",
+      "dev": true,
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "@types/unist": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-text": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-3.1.2.tgz",
+      "integrity": "sha512-tcllLfp23dJJ+ju5wCCZHVpzsQQ43+moJbqVX3jNWPB7z/KFC4FyZD6R7y94cHL6MQ33YtMZL8Z0aIXXI4XFTw==",
+      "dev": true,
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "@types/unist": "^2.0.0",
+        "hast-util-is-element": "^2.0.0",
+        "unist-util-find-after": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -1689,6 +1741,12 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/lodash.iteratee": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.iteratee/-/lodash.iteratee-4.7.0.tgz",
+      "integrity": "sha512-yv3cSQZmfpbIKo4Yo45B1taEvxjNvcpF1CEOc0Y6dEyvhPIfEJE3twDwPgWTPQubcSgXyBwBKG6wpQvWMDOf6Q==",
+      "dev": true
+    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -1725,6 +1783,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "dev": true,
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdsvex": {
       "version": "0.9.8",
       "resolved": "https://registry.npmjs.org/mdsvex/-/mdsvex-0.9.8.tgz",
@@ -2944,6 +3015,109 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/unist-util-find": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-find/-/unist-util-find-2.0.0.tgz",
+      "integrity": "sha512-I4NH8M2r7B9pGNXl41fftwCCi/WhG50RUdZDYcpEmiQEgHUYtfWpcCX4/R6s4XtK0ztxUSwC6u9sztlnDQAoaA==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "lodash.iteratee": "^4.0.0",
+        "unist-util-visit": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-find-after": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-4.0.1.tgz",
+      "integrity": "sha512-QO/PuPMm2ERxC6vFXEPtmAutOopy5PknD+Oq64gGwxKtk4xwo9Z97t9Av1obPmGU0IyTa6EKYUfTrK2QJS3Ozw==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-find-after/node_modules/unist-util-is": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz",
+      "integrity": "sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-find/node_modules/unist-util-is": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz",
+      "integrity": "sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-find/node_modules/unist-util-visit": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.2.tgz",
+      "integrity": "sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0",
+        "unist-util-visit-parents": "^5.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-find/node_modules/unist-util-visit-parents": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz",
+      "integrity": "sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+      "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-is/node_modules/@types/unist": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz",
+      "integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==",
+      "dev": true
+    },
     "node_modules/unist-util-stringify-position": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
@@ -2957,6 +3131,47 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
+      "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents/node_modules/@types/unist": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz",
+      "integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==",
+      "dev": true
+    },
+    "node_modules/unist-util-visit/node_modules/@types/unist": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz",
+      "integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==",
+      "dev": true
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -3412,6 +3627,24 @@
         "svelte-hmr": "^0.14.11"
       }
     },
+    "@types/hast": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.5.tgz",
+      "integrity": "sha512-SvQi0L/lNpThgPoleH53cdjB3y9zpLlVjRbqB3rH8hx1jiRSBGAhyjV3H+URFjNVRqt2EdYNrbZE5IsGlNfpRg==",
+      "dev": true,
+      "requires": {
+        "@types/unist": "^2"
+      }
+    },
+    "@types/mdast": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.0.tgz",
+      "integrity": "sha512-YLeG8CujC9adtj/kuDzq1N4tCDYKoZ5l/bnjq8d74+t/3q/tHquJOJKUQXJrLCflOHpKjXgcI/a929gpmLOEng==",
+      "dev": true,
+      "requires": {
+        "@types/unist": "*"
+      }
+    },
     "@types/minimist": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
@@ -4312,6 +4545,28 @@
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
       "dev": true
     },
+    "hast-util-is-element": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-2.1.3.tgz",
+      "integrity": "sha512-O1bKah6mhgEq2WtVMk+Ta5K7pPMqsBBlmzysLdcwKVrqzZQ0CHqUPiIVspNhAG1rvxpvJjtGee17XfauZYKqVA==",
+      "dev": true,
+      "requires": {
+        "@types/hast": "^2.0.0",
+        "@types/unist": "^2.0.0"
+      }
+    },
+    "hast-util-to-text": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-3.1.2.tgz",
+      "integrity": "sha512-tcllLfp23dJJ+ju5wCCZHVpzsQQ43+moJbqVX3jNWPB7z/KFC4FyZD6R7y94cHL6MQ33YtMZL8Z0aIXXI4XFTw==",
+      "dev": true,
+      "requires": {
+        "@types/hast": "^2.0.0",
+        "@types/unist": "^2.0.0",
+        "hast-util-is-element": "^2.0.0",
+        "unist-util-find-after": "^4.0.0"
+      }
+    },
     "hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -4525,6 +4780,12 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "lodash.iteratee": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.iteratee/-/lodash.iteratee-4.7.0.tgz",
+      "integrity": "sha512-yv3cSQZmfpbIKo4Yo45B1taEvxjNvcpF1CEOc0Y6dEyvhPIfEJE3twDwPgWTPQubcSgXyBwBKG6wpQvWMDOf6Q==",
+      "dev": true
+    },
     "lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -4549,6 +4810,15 @@
       "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
       "dev": true
     },
+    "mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "dev": true,
+      "requires": {
+        "@types/mdast": "^4.0.0"
+      }
+    },
     "mdsvex": {
       "version": "0.9.8",
       "resolved": "https://registry.npmjs.org/mdsvex/-/mdsvex-0.9.8.tgz",
@@ -5452,6 +5722,87 @@
       "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
       "dev": true
     },
+    "unist-util-find": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-find/-/unist-util-find-2.0.0.tgz",
+      "integrity": "sha512-I4NH8M2r7B9pGNXl41fftwCCi/WhG50RUdZDYcpEmiQEgHUYtfWpcCX4/R6s4XtK0ztxUSwC6u9sztlnDQAoaA==",
+      "dev": true,
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "lodash.iteratee": "^4.0.0",
+        "unist-util-visit": "^4.0.0"
+      },
+      "dependencies": {
+        "unist-util-is": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz",
+          "integrity": "sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==",
+          "dev": true,
+          "requires": {
+            "@types/unist": "^2.0.0"
+          }
+        },
+        "unist-util-visit": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.2.tgz",
+          "integrity": "sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==",
+          "dev": true,
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "unist-util-is": "^5.0.0",
+            "unist-util-visit-parents": "^5.1.1"
+          }
+        },
+        "unist-util-visit-parents": {
+          "version": "5.1.3",
+          "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz",
+          "integrity": "sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==",
+          "dev": true,
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "unist-util-is": "^5.0.0"
+          }
+        }
+      }
+    },
+    "unist-util-find-after": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-4.0.1.tgz",
+      "integrity": "sha512-QO/PuPMm2ERxC6vFXEPtmAutOopy5PknD+Oq64gGwxKtk4xwo9Z97t9Av1obPmGU0IyTa6EKYUfTrK2QJS3Ozw==",
+      "dev": true,
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^5.0.0"
+      },
+      "dependencies": {
+        "unist-util-is": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz",
+          "integrity": "sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==",
+          "dev": true,
+          "requires": {
+            "@types/unist": "^2.0.0"
+          }
+        }
+      }
+    },
+    "unist-util-is": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+      "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+      "dev": true,
+      "requires": {
+        "@types/unist": "^3.0.0"
+      },
+      "dependencies": {
+        "@types/unist": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz",
+          "integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==",
+          "dev": true
+        }
+      }
+    },
     "unist-util-stringify-position": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
@@ -5461,6 +5812,43 @@
         "@types/unist": "^2.0.2"
       }
     },
+    "unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "dev": true,
+      "requires": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "dependencies": {
+        "@types/unist": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz",
+          "integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==",
+          "dev": true
+        }
+      }
+    },
+    "unist-util-visit-parents": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
+      "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+      "dev": true,
+      "requires": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "dependencies": {
+        "@types/unist": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz",
+          "integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==",
+          "dev": true
+        }
+      }
+    },
     "uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",

package.json

@@ -12,7 +12,11 @@
     "mdsvex": "^0.9.8",
     "node-sass": "^6.0.1",
     "svelte": "^3.42.6",
-    "svelte-preprocess": "^4.9.8"
+    "svelte-preprocess": "^4.9.8",
+    "unist-util-visit": "^5.0.0",
+    "unist-util-find": "^2.0.0",
+    "hast-util-to-text": "^3.1.2",
+    "mdast-util-to-string": "^4.0.0"
   },
   "type": "module"
 }

src/lib/Dropcap.svelte

@@ -34,9 +34,8 @@
     }
 </style>
 
-<p>
-    <span class="drop-cap">{initial}</span>
-    <span class="first-word" style:--shift={shift}>{remainder}</span>
-    <slot></slot>
-</p>
 
+<span class="drop-cap">{initial}</span>
+{#if remainder.length}
+    <span class="first-word" style:--shift={shift}>{remainder}</span>
+{/if}

src/lib/Heading.svelte

@@ -0,0 +1,52 @@
+    <script>
+    export let level;
+    export let id = '';
+
+    const tag = `h${level}`;
+</script>
+
+<style>
+    a {
+        /* Works better to set the size here for line-height reasons */
+        font-size: 0.9em;
+        color: hsl(0, 0%, 50%);
+    }
+
+    a:hover {
+        border-bottom: 0.05em solid currentcolor;
+    }
+
+    svg {
+        width: 1em;
+    }
+
+    .before {
+        display: none;
+        margin-right: 0.5rem;
+        margin-left: calc(-1em - 0.5rem);
+    }
+    
+    @media(min-width: 58rem) {
+        .before {
+            display: inline;
+        }
+        .after {
+            display: none;
+        }
+    }
+</style>
+
+<svelte:element this={tag} {id} class="h">
+    <a href="#{id}" class="before">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
+        </svg></a><span> <!-- Looks ugly but necessary to get rid of spurious whitespace -->
+            <slot></slot>
+        </span>
+    <!-- Icon from https://heroicons.com/ -->
+    <a href="#{id}" class="after">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
+        </svg>
+    </a>
+</svelte:element>

src/lib/Post.svelte

@@ -1,8 +1,9 @@
 <script context="module">
     import { onMount } from 'svelte';
     import { formatDate } from './datefmt.js';
-    import { makeSlug } from '$lib/slug.js';
+    import { makeSlug } from '$lib/utils.js';
     
+    import Toc from './Toc.svelte';
     import Link from './Link.svelte';
     export { Link as a };
 </script>
@@ -11,14 +12,35 @@
     export let title, date;
     export const description = '';
     export const draft = false;
+    export let toc = null;
 </script>
 
 <style>
+    .page {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) minmax(0, var(--content-width)) minmax(0, 1fr);
+
+        padding: 0 0.5rem;
+    }
+
+    .title {
+        grid-column: 2 / 3;
+    }
+
+    .left-gutter {
+        grid-column: 1 / 2;
+        justify-self: end;
+    }
+
     .subtitle {
         font-size: 0.9em;
         font-style: italic;
         margin-top: -0.5rem;
     }
+
+    .post {
+        grid-column: 2 / 3;
+    }
 </style>
 
 <svelte:head>
@@ -26,8 +48,17 @@
     <link rel="stylesheet" href="/prism-dracula.css" />
 </svelte:head>
 
-<div id="post">
+<div class="page">
-    <h1 id="{makeSlug(title)}">{title}</h1>
+    <div class="title">
-    <p class="subtitle">{formatDate(date)}</p>
+        <h1 id="{makeSlug(title)}">{title}</h1>
-    <slot></slot>
+        <p class="subtitle">{formatDate(date)}</p>
-</div>
+    </div>
+
+    <div class="left-gutter">
+        <Toc items={toc} />
+    </div>
+
+    <div class="post">
+        <slot></slot>
+    </div>
+</div>

src/lib/Sidenote.svelte

@@ -115,18 +115,6 @@
         }
 
     }
-
-    // /* slight tweaks for in between state */
-    // @media (min-width: 52.5em) and (max-width: 70em) {
-    //     .sidenote {
-    //         padding-left: calc(50vw - 19rem);
-    //     }
-    // }
-    // @media (max-width: 52.5em) {
-    //     .sidenote {
-    //         padding-left: 2rem;
-    //     }
-    // }
 </style>
 
 <script context="module">

src/lib/Toc.svelte

@@ -0,0 +1,111 @@
+<script>
+    import { onMount } from 'svelte';
+    import { makeSlug } from '$lib/utils.js';
+
+    export let items;
+
+    items.forEach(i => i.slug = makeSlug(i.text));
+
+    const selector = 'h1[id], h2[id], h3[id], h4[id], h6[id]';
+    let currentHeadingSlug = null;
+    function setCurrentHeading() {
+        for (const h of document.querySelectorAll(selector)) {
+            const yPos = h.getBoundingClientRect().y;
+            if (yPos > (window.innerHeight / 3)) {
+                break;
+            }
+            currentHeadingSlug = h.id;
+        }
+    }
+
+    onMount (() => {
+        document.addEventListener('scroll', setCurrentHeading);
+        setCurrentHeading();
+    });
+</script>
+
+
+<style>
+    /* move everything out to the left and center it vertically */
+    #toc {
+        position: sticky;
+        top: 1.5rem;
+        margin-right: 4rem;
+
+        max-width: 14rem;
+        color: var(--content-color-faded);
+        opacity: 0;
+        animation: fade-in 600ms ease-out;
+        animation-delay: 500ms;
+        animation-fill-mode: forwards;
+    }
+
+    @keyframes fade-in {
+        from {opacity: 0}
+        to {opacity: 100%}
+    }
+
+    /* margin-left is to match the padding on the top-level list items,
+    but here it needs to be margin so that the border is also shifted */
+    h5 {
+        font-variant: petite-caps;
+        font-weight: 500;
+        max-width: fit-content;
+
+        margin-top: 0;
+        /* 0.5rem for indent, 0.1rem for border */
+        margin-left: 0.6rem;
+        margin-bottom: 0.25em;
+
+        padding-right: 1.5rem;
+        padding-bottom: 0.25em;
+
+        border-bottom: 1px solid currentcolor;
+    }
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    /* margin for indentation, padding so that the accent bar for the current 
+    item isn't right on top of it */
+    li {
+        margin-left: var(--indent, 0);
+        padding-left: 0.5rem;
+        margin-bottom: 0.15rem;
+        font-size: 0.9rem;
+        border-left: 0.1rem solid transparent;
+    }
+    li:hover {
+        color: var(--content-color);
+        border-left: 0.1rem solid var(--accent-color);
+    }
+    li.current {
+        color: var(--content-color);
+        border-left: 0.1rem solid var(--accent-color);
+    }
+
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+</style>
+
+
+<div id="toc">
+    <h5>
+        <span class="heading">Contents</span>
+    </h5>
+    <ul>
+        {#each items as item}
+        <li 
+            style:--indent="{(item.depth - 2) * 0.75}em"
+            class:current={item.slug === currentHeadingSlug}
+        >
+            <a href="#{item.slug}">{item.text}</a>
+        </li>
+        {/each}
+    </ul>
+</div>

src/lib/projects/sidenotes/Frame.svelte

@@ -1,20 +0,0 @@
-<script>
-    import Step from './Step.svelte';
-    import {onMount} from 'svelte';
-
-    let frame;
-    onMount(() => {
-        frame.setAttribute('srcdoc', frame.innerHTML);
-    })
-</script>
-
-
-<iframe bind:this={frame}>
-    <html>
-        <head></head>
-        <body>
-            <Step />
-            <p>Goodbye world!</p>
-        </body>
-    </html>
-</iframe>

src/lib/projects/sidenotes/Step.svelte

@@ -1,7 +0,0 @@
-<script>
-    let count = 0;
-</script>
-
-<p>hello world!</p>
-<button on:click={() => count++}>Increment</button>
-<p>The count is: {count}</p>

src/lib/slug.js

@@ -1,50 +0,0 @@
-const nonAlphaNum = /[^A-Za-z0-9\-]/g;
-const space = /\s/g
-
-export function makeSlug(text) {
-    return text
-        .toLowerCase()
-        .replace(space, '-')
-        .replace(nonAlphaNum, '')
-}
-
-function apply(node, types, fn) {
-    if (typeof types === 'string') {
-        types = new Set([types]);
-    }
-    else if (!(types instanceof Set)) {
-        types = new Set(types)
-        console.log(types)
-    }
-
-    if (types.has(node.type)) {
-        fn(node);
-    }
-    if ('children' in node) {
-        for (let child of node.children) {
-            apply(child, types, fn);
-        }
-    }
-}
-
-function getTextContent(node) {
-    let segments = [];
-    apply(node, 'text', textNode => {
-        // skip all-whitespace strings
-        if (textNode.value.match(/^\s+$/)) return;
-        segments.push(textNode.value.trim());
-    });
-
-    return segments.join(' ');
-}
-
-export default function slug() {
-    return (tree) => {
-        apply(tree, 'element', e => {
-            if (e.tagName.match(/h[1-6]/)) {
-                let text = getTextContent(e);
-                e.properties.id = makeSlug(text);
-            }
-        })
-    }
-}

src/lib/utils.js

@@ -0,0 +1,8 @@
+const nonAlphaNum = /[^A-Za-z0-9\-]/g;
+const space = /\s+/g;
+export function makeSlug(text) {
+    return text
+        .toLowerCase()
+        .replace(space, '-')
+        .replace(nonAlphaNum, '');
+}

src/plugins/rehype.js

@@ -0,0 +1,90 @@
+import { visit, CONTINUE, EXIT, SKIP, } from 'unist-util-visit';
+import { find } from 'unist-util-find';
+import { toText } from 'hast-util-to-text';
+import { makeSlug } from '../lib/utils.js';
+
+
+export function localRehype() {
+    let printed = false;
+
+    return (tree, vfile) => {
+        const needsDropcap = vfile.data.fm.dropcap !== false
+        let dropcapAdded = false;
+
+        let moduleScript;
+        let imports = new Set();
+        if (needsDropcap) {
+            imports.add("import Dropcap from '$lib/Dropcap.svelte';");
+        }
+
+        visit(tree, node => {
+            // add slugs to headings
+            if (isHeading(node)) {
+                processHeading(node);
+                imports.add("import Heading from '$lib/Heading.svelte';");
+                return SKIP;
+            }
+
+            // mdsvex adds a <script context="module"> so we just hijack that for our own purposes
+            if (isModuleScript(node)) {
+                moduleScript = node;
+            }
+
+            // convert first letter/word of first paragraph to <Dropcap word="{whatever}">
+            if (needsDropcap && !dropcapAdded && isParagraph(node)) {
+                addDropcap(node);
+                dropcapAdded = true;
+                return SKIP;
+            }
+        });
+
+        // insert our imports at the top of the `<script context="module">` tag
+        if (imports.size > 0) {
+            const script = moduleScript.value;
+            // split the script where the opening tag ends
+            const i = script.indexOf('>');
+            const openingTag = script.slice(0, i + 1);
+            const remainder = script.slice(i + 1);
+
+            // mdvsex uses tabs so we will as well
+            const importScript = Array.from(imports).join('\n\t');
+
+            moduleScript.value = `${openingTag}\n\t${importScript}${remainder}`;
+        }
+    }
+}
+
+
+function processHeading(node) {
+    const level = node.tagName.slice(1);
+    node.tagName = 'Heading';
+    node.properties.level = level;
+    node.properties.id = makeSlug(toText(node));
+}
+
+
+function addDropcap(par) {
+    let txtNode = find(par, {type: 'text'});
+    const i = txtNode.value.search(/\s/);
+    const firstWord = txtNode.value.slice(0, i);
+    const remainder = txtNode.value.slice(i);
+
+    par.children.unshift({
+        type: 'raw',
+        value: `<Dropcap word="${firstWord}" />`,
+    });
+    txtNode.value = remainder;
+}
+
+
+function isHeading(node) {
+    return node.type === 'element' && node.tagName.match(/h[1-6]/);
+}
+
+function isModuleScript(node) {
+    return node.type === 'raw' && node.value.match(/^<script context="module">/);
+}
+
+function isParagraph(node) {
+    return node.type === 'element' && node.tagName === 'p';
+}

src/plugins/remark.js

@@ -0,0 +1,19 @@
+import { visit } from 'unist-util-visit';
+import { toString } from 'mdast-util-to-string';
+
+
+// build table of contents and inject into frontmatter
+export function localRemark() {
+    return (tree, vfile) => {
+        let toc = [];
+        
+        visit(tree, 'heading', node => {
+            toc.push({
+                text: toString(node),
+                depth: node.depth,
+            });
+        });
+
+        vfile.data.fm.toc = toc;
+    }
+}

src/routes/__layout.svelte

@@ -1,39 +1,43 @@
-<style>
+<script>
-    :global(main) {
+    import Toc from '$lib/Toc.svelte';
-        --content-width: 42rem;
-        box-sizing: border-box;
-        max-width: var(--content-width);
-        margin: 0 auto;
-        padding:  0 15px;
-    }
 
-    #header {
+    const items = [
+        {depth: 2, text: 'The Suboptimal Solution: Absolute Positioning'},
+        {depth: 2, text: 'CSS Wizardry'},
+        {depth: 2, text: 'Implementation'},
+    ];
+</script>
+
+<style>
+    .header {
+        grid-column-start: 1;
+        grid-column-end: 4;
         background-color: #4f5f68;
     }
 
-    #nav-main {
+    nav {
-        max-width:  30rem;
+        max-width: 30rem;
-        margin:  0 auto;
+        margin: 0 auto;
-        display:  grid;
+        display: flex;
-        grid-template-columns:  repeat(3, minmax(6rem, 8rem));
+        justify-content: space-around;
-        justify-content: space-between;
     }
 
-    #nav-main a {
+    nav a {
+        width: 8rem;
+        min-width: 6rem;
         font-size: 1.5rem;
-        color:  white;
+        color: white;
         text-decoration: none;
         text-align: center;
-        padding:  0.25rem 0;
+        padding: 0.25rem 0;
     }
-
+    nav a:hover {
-    #nav-main a:hover {
         background-color: #00000025;
     }
 </style>
 
-<div id="header">
+<div class="header">
-    <nav id="nav-main">
+    <nav>
         <a sveltekit:prefetch href="/">Home</a>
         <a sveltekit:prefetch href="/posts">Posts</a>
         <a sveltekit:prefetch href="/">About</a>

src/routes/_posts/imagining-a-passwordless-future.svx

@@ -3,6 +3,7 @@ title: Imagining A Passwordless Future
 description: Can we replace passwords with something more user-friendly?
 date: 2021-04-30
 draft: true
+dropcap: false
 ---
 <script>
     import Sidenote from '$lib/Sidenote.svelte';

src/routes/_posts/sidenotes.svx

@@ -4,10 +4,8 @@ description: An entirely-too-detailed dive into how I implemented sidenotes for
 date: 2023-08-14
 ---
 <script>
-    import Dropcap from '$lib/Dropcap.svelte';
     import Sidenote from '$lib/Sidenote.svelte';
     import UnstyledSidenote from '$lib/UnstyledSidenote.svelte';
-    import Frame from '$lib/projects/sidenotes/Frame.svelte';
 </script>
 
 <style>
@@ -64,7 +62,7 @@ date: 2023-08-14
     }
 </style>
 
-<Dropcap word="One">of my major goals when building this blog was to have sidenotes. I've always been a fan of sidenotes on the web, because the most comfortable reading width for a column of text is <em>far</em> less than the absurd amounts of screen width we tend to have available, and what else are we going to use it for?<Sidenote>Some sites use it for ads, of course, which is yet another example of how advertising ruins everything.</Sidenote></Dropcap>
+One of my major goals when building this blog was to have sidenotes. I've always been a fan of sidenotes on the web, because the most comfortable reading width for a column of text is <em>far</em> less than the absurd amounts of screen width we tend to have available, and what else are we going to use it for?<Sidenote>Some sites use it for ads, of course, which is yet another example of how advertising ruins everything.</Sidenote>
 
 Footnotes don't really work on the web the way they do on paper, since the web doesn't have page breaks. You _can_ stick your footnotes in a floating box at the bottom of the page, so they're visible at the bottom of the text just like they would be on a printed page, but this sacrifices precious vertical space.<Sidenote>On mobile, it's _horizontal_ space that's at a premium, so I do use this approach there. Although I'm a pretty heavy user of sidenotes, so I have to make them toggleable as well or they'd fill up the entire screen.</Sidenote> Plus, you usually end up with the notes further away from the point of divergence than they would be as sidenotes anyway.
 

src/routes/_posts/vue-vs-svelte.svx

@@ -4,12 +4,11 @@ description: They're more similar than they are different, but they say the most
 date: 2023-06-29
 ---
 <script>
-    import Dropcap from '$lib/Dropcap.svelte';
     import Sidenote from '$lib/Sidenote.svelte';
 </script>
 
 
-<Dropcap word="Recently">I've had a chance to get to know Vue a bit. Since my frontend framework of choice has previously been Svelte (this blog is built in Svelte, for instance) I was naturally interested in how they compared.</Dropcap>
+Recently I've had a chance to get to know Vue a bit. Since my frontend framework of choice has previously been Svelte (this blog is built in Svelte, for instance) I was naturally interested in how they compared.
 
 Of course, this is only possible because Vue and Svelte are really much more similar than they are different. Even among frontend frameworks, they share a lot of the same basic ideas and high-level concepts, which means that we get to dive right into the nitpicky details and have fun debating `bind:attr={value}` versus `:attr="value"`. In the meantime, a lot of the building blocks are basically the same or at least have equivalents, such as:
 * Single-file components with separate sections for markup, style, and logic

static/style.css

@@ -29,10 +29,12 @@ html {
     line-height: var(--content-line-height);
     letter-spacing: -0.005em;
     color: var(--content-color);
+    box-sizing: border-box;
 }
 
 body {
     margin: 0;
+    --content-width: 42rem;
 }
 
 h1, h2, h3, h4, h5, h6 {

svelte.config.js

@@ -1,7 +1,9 @@
 import { mdsvex } from 'mdsvex';
 import staticAdapter from '@sveltejs/adapter-static';
 import svp from 'svelte-preprocess';
-import slug from './src/lib/slug.js';
+
+import { localRemark } from './src/plugins/remark.js';
+import { localRehype } from './src/plugins/rehype.js';
 
 
 const config = {
@@ -9,7 +11,8 @@ const config = {
     preprocess: [
         mdsvex({
             layout: './src/lib/Post.svelte',
-            rehypePlugins: [slug],
+            remarkPlugins: [localRemark],
+            rehypePlugins: [localRehype],
         }),
         svp.scss(),
     ],