Docs
The docs page is built ontop of astroβs docs site.
Adding a new Docs Page
- add a
.mdx
file in a path underwebsite/src/pages/
, e.g. website/src/pages/learn/code.mdx will be available under https://strudel.cc/learn/code/ (or locally underhttp://localhost:4321/learn/code/
) - make sure to copy the top part of another existing docs page. Adjust the title accordingly
- To add a link to the sidebar, add a new entry to
SIDEBAR
toconfig.ts
Using the Mini REPL
To add a Mini REPL, make sure to import:
import { MiniRepl } from '../../docs/MiniRepl';
add a mini repl with
<MiniRepl client:idle tune={`note("a3 c#4 e4 a4")`} />
client:idle
is required to tell astro that the repl should be interactive, see Client Directivetune
: be any valid pattern codepunchcard
: if added, a punchcard / pianoroll visualization is renderddrawTime
: time window for drawing, defaults to[0, 4]
canvasHeight
: height of the canvas, defaults to 100px
See mini-notation.mdx
for usage examples
In-Source Documentation
You can add the in-source documentation for a function by using the JsDoc
component. Import:
import { JsDoc } from '../../docs/JsDoc';
Usage:
<JsDoc client:idle name="bandf" h={0} />
name
: function name, as named with@name
in jsdoch
: level of heading.0
will hide the heading. Hiding it allows using a manual heading which results in a nav link being generated in the right sidebar.hideDescription
: if set, the description will be hidden
Writing jsdoc
Documentation is written with jsdoc comments. Example:
/**
* Select a sound / sample by name.
*
* @name s
* @param {string | Pattern} sound The sound / pattern of sounds to pick
* @example
* s("bd hh")
*
*/
// implementation of s function
- Before each build, these comments will be rendered into
doc.json
using jsdoc-json as a template - To regenerate the
doc.json
file manually, runnpm run jsdoc-json
- The file is used by the
JsDoc
component to find the documentation by name - Also, it is used for the
examples.test.mjs
snapshot test
How does Strudel do its Testing?