tutorial toc

tutorial/Tutorial.jsx

@@ -7,17 +7,19 @@ This program is free software: you can redistribute it and/or modify it under th
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Tutorial from './tutorial.mdx';
-import './style.css';
+import './style.scss';
 import '@strudel.cycles/react/dist/style.css';
 
 ReactDOM.render(
   <React.StrictMode>
     <div className="min-h-screen">
-      <header className="flex-none flex justify-center w-full h-16 px-2 items-center border-b border-gray-200 bg-white">
-        <div className="p-4 w-full max-w-3xl flex justify-between">
+      <header className="flex-none flex justify-start sticky top-0 z-[2] w-full h-16 px-2 items-center border-b border-gray-200 bg-white">
+        <div className="p-4 w-full flex justify-between">
           <div className="flex items-center space-x-2">
             <img src={'https://tidalcycles.org/img/logo.svg'} className="Tidal-logo w-10 h-10" alt="logo" />
-            <h1 className="text-xl">Strudel Tutorial</h1>
+            <h1 className="text-xl cursor-pointer" onClick={() => window.scrollTo(0, 0)}>
+              Strudel Tutorial
+            </h1>
           </div>
           {!window.location.href.includes('localhost') && (
             <div className="flex space-x-4">
@@ -26,7 +28,7 @@ ReactDOM.render(
           )}
         </div>
       </header>
-      <main className="p-4 max-w-3xl prose">
+      <main className="p-4 pl-6 max-w-3xl prose">
         <Tutorial />
       </main>
     </div>

tutorial/link.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
+  <path fill-rule="evenodd"
+    d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z">
+  </path>
+</svg>

tutorial/package.json

@@ -8,6 +8,7 @@
     "build": "vite build",
     "preview": "vite preview"
   },
+  "type": "module",
   "dependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
@@ -20,7 +21,13 @@
     "@types/react-dom": "^17.0.2",
     "@vitejs/plugin-react": "^1.3.0",
     "autoprefixer": "^10.4.7",
+    "install": "^0.13.0",
+    "npm": "^8.10.0",
     "postcss": "^8.4.13",
+    "rehype-autolink-headings": "^6.1.1",
+    "rehype-slug": "^5.0.1",
+    "remark-toc": "^8.0.1",
+    "sass": "^1.51.0",
     "tailwindcss": "^3.0.24",
     "vite": "^2.9.9",
     "vite-plugin-mdx": "^3.5.10"

tutorial/style.css

@@ -1,11 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-.cm-editor {
-  background-color: transparent !important;
-}
-
-main {
-  margin: 0 auto;
-}

tutorial/style.scss

@@ -0,0 +1,81 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.cm-editor {
+  background-color: transparent !important;
+}
+
+h1::before,
+h2::before,
+h3::before,
+h4::before,
+h5::before,
+h6::before {
+  display: block;
+  content: ' ';
+  margin-top: -70px;
+  height: 70px;
+  visibility: hidden;
+  pointer-events: none;
+  position: relative;
+}
+
+h1:hover .icon-link,
+h2:hover .icon-link,
+h3:hover .icon-link,
+h4:hover .icon-link,
+h5:hover .icon-link,
+h6:hover .icon-link,
+.icon.icon-link:hover {
+  visibility: visible;
+}
+.icon.icon-link {
+  background-image: url(./link.svg);
+  background-repeat: no-repeat;
+  width: 16px;
+  height: 16px;
+  display: block;
+  color: gray;
+  fill: black;
+  position: absolute;
+  visibility: hidden;
+  margin-left: -20px;
+  width: 20px;
+  margin-top: 8px;
+}
+
+#table-of-contents {
+  display: none;
+}
+
+#table-of-contents + ul {
+  position: fixed;
+  right: 0;
+  top: 64px;
+  padding: 12px 0;
+  overflow: auto;
+  height: calc(100vh - 64px);
+  width: 33%;
+  margin: 2px;
+  padding-left: 8px;
+  ul {
+    padding-left: 8px;
+  }
+  li {
+    list-style: none;
+    margin: 2px;
+    p {
+      margin: 0;
+    }
+    a {
+      text-decoration: none;
+    }
+  }
+}
+
+@media only screen and (max-width: 1120px) {
+  #table-of-contents + ul {
+    display: none;
+  }
+}

tutorial/tutorial.mdx

@@ -1,5 +1,7 @@
 import { MiniRepl } from './MiniRepl';
 
+# Table of Contents
+
 # What is Strudel?
 
 With Strudel, you can expressively write dynamic music pieces.
@@ -579,7 +581,7 @@ Helper that returns a Filter Node of type highpass with the given cutoff. Intend
 .tone(synth(osc('sawtooth')).chain(highpass(2000), out()))`}
 />
 
-### adsr(attack, decay?, sustain?, release?)
+### adsr
 
 Helper to set the envelope of a Tone.js instrument. Intended to be used with Tone's .set:
 

tutorial/vite.config.js

@@ -1,14 +1,19 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import mdx from 'vite-plugin-mdx';
+import _mdx from 'vite-plugin-mdx';
+import remarkToc from 'remark-toc';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 
+const mdx = _mdx.default || _mdx;
 // `options` are passed to `@mdx-js/mdx`
 const options = {
   // See https://mdxjs.com/advanced/plugins
   remarkPlugins: [
+    remarkToc,
     // E.g. `remark-frontmatter`
   ],
-  rehypePlugins: [],
+  rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings],
 };
 
 // https://vitejs.dev/config/