+
+
-
-
-
-
-
-
-
-
- 
-
- {!window.location.href.includes('localhost') && (
-
- window.scrollTo(0, 0)}> - Strudel Tutorial -
-
- go to REPL
-
- )}
- - -# Playing Pitches - -Pitches are an essential building block for music. In Strudel, there are 3 different options to express a pitch: - -- `note`: letter notation -- `n`: number notation -- `freq`: frequency notation - -## note - -Notes are notated with the note letter, followed by the octave number. You can notate flats with `b` and sharps with `#`. - -
- -# Playing Sounds - -Instead of pitches, we can also play sounds with `s`: - -
- -# Syntax - -So far, we've seen the following syntax: - -``` -xxx("foo").yyy("bar") -``` - -Generally, `xxx` and `yyy` are called functions, while `foo` and `bar` are called function arguments. -So far, we've used the functions to declare which aspect of the sound we want to control, and their arguments for the actual data. -The `yyy` function is called a chained function, because it is appended with a dot. - -Strudel makes heavy use of chained functions. Here is a more extreme example: - -
- -# Mini Notation - -Similar to Tidal Cycles, Strudel has an embedded mini language that is designed to write rhythmic patterns in a short manner. -Before diving deeper into the details, here is a flavor of how the mini language looks like: - -
- -# Synths, Samples & Effects - -Let's take a closer look at how we can control synths, sounds and effects. - -## Synths - -So far, all the mini notation examples all used the same sound, which is kind of boring. -We can change the sound, using the `s` function: - -
- -# JavaScript API - -While the mini notation is powerful on its own, there is much more to discover. -Internally, the mini notation will expand to use the actual functional JavaScript API. - -For example, this Pattern in Mini Notation: - -
-
- -# Tonal API - -The Tonal API, uses [tonaljs](https://github.com/tonaljs/tonal) to provide helpers for musical operations. - -### transpose(semitones) - -Transposes all notes to the given number of semitones: - -
-
- -# MIDI API - -Strudel also supports midi via [webmidi](https://npmjs.com/package/webmidi). - -### midi(outputName?) - -Either connect a midi device or use the IAC Driver (Mac) or Midi Through Port (Linux) for internal midi messages. -If no outputName is given, it uses the first midi output it finds. - -
+
+
+
diff --git a/website/src/components/Footer/Footer.astro b/website/src/components/Footer/Footer.astro
new file mode 100644
index 00000000..1ec756b8
--- /dev/null
+++ b/website/src/components/Footer/Footer.astro
@@ -0,0 +1,19 @@
+---
+import AvatarList from './AvatarList.astro';
+type Props = {
+ path: string;
+};
+const { path } = Astro.props as Props;
+---
+
+
+
+
diff --git a/website/src/components/HeadCommon.astro b/website/src/components/HeadCommon.astro
new file mode 100644
index 00000000..410e9b91
--- /dev/null
+++ b/website/src/components/HeadCommon.astro
@@ -0,0 +1,40 @@
+---
+import '../styles/index.css';
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website/src/components/HeadSEO.astro b/website/src/components/HeadSEO.astro
new file mode 100644
index 00000000..c40e0432
--- /dev/null
+++ b/website/src/components/HeadSEO.astro
@@ -0,0 +1,46 @@
+---
+import { SITE, OPEN_GRAPH, Frontmatter } from '../config';
+
+export interface Props {
+ frontmatter: Frontmatter;
+ canonicalUrl: URL;
+}
+
+const { frontmatter, canonicalUrl } = Astro.props as Props;
+const formattedContentTitle = `${frontmatter.title} 🚀 ${SITE.title}`;
+const imageSrc = frontmatter.image?.src ?? OPEN_GRAPH.image.src;
+const canonicalImageSrc = new URL(imageSrc, Astro.site);
+const imageAlt = frontmatter.image?.alt ?? OPEN_GRAPH.image.alt;
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website/src/components/Header/Header.astro b/website/src/components/Header/Header.astro
new file mode 100644
index 00000000..bb688329
--- /dev/null
+++ b/website/src/components/Header/Header.astro
@@ -0,0 +1,77 @@
+---
+// import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages';
+import * as CONFIG from '../../config';
+// import AstroLogo from './AstroLogo.astro';
+import SidebarToggle from './SidebarToggle';
+// import LanguageSelect from './LanguageSelect';
+import Search from './Search';
+import CommandLineIcon from '@heroicons/react/20/solid/CommandLineIcon';
+import MobileNav from '../../docs/MobileNav';
+import { SIDEBAR } from '../../config';
+
+type Props = {
+ currentPage: string;
+};
+
+const { currentPage } = Astro.props as Props;
+// const lang = getLanguageFromURL(currentPage);
+const langCode = 'en'; // getLanguageFromURL(currentPage);
+const sidebar = SIDEBAR[langCode];
+---
+
+
+
+
+
+
diff --git a/website/src/components/Header/LanguageSelect.css b/website/src/components/Header/LanguageSelect.css
new file mode 100644
index 00000000..4e878714
--- /dev/null
+++ b/website/src/components/Header/LanguageSelect.css
@@ -0,0 +1,47 @@
+.language-select {
+ flex-grow: 1;
+ width: 48px;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0.33em 0.5em;
+ overflow: visible;
+ font-weight: 500;
+ font-size: 1rem;
+ font-family: inherit;
+ line-height: inherit;
+ background-color: var(--theme-bg);
+ border-color: var(--theme-text-lighter);
+ color: var(--theme-text-light);
+ border-style: solid;
+ border-width: 1px;
+ border-radius: 0.25rem;
+ outline: 0;
+ cursor: pointer;
+ transition-timing-function: ease-out;
+ transition-duration: 0.2s;
+ transition-property: border-color, color;
+ -webkit-font-smoothing: antialiased;
+ padding-left: 30px;
+ padding-right: 1rem;
+}
+.language-select-wrapper .language-select:hover,
+.language-select-wrapper .language-select:focus {
+ color: var(--theme-text);
+ border-color: var(--theme-text-light);
+}
+.language-select-wrapper {
+ color: var(--theme-text-light);
+ position: relative;
+}
+.language-select-wrapper > svg {
+ position: absolute;
+ top: 7px;
+ left: 10px;
+ pointer-events: none;
+}
+
+@media (min-width: 50em) {
+ .language-select {
+ width: 100%;
+ }
+}
diff --git a/website/src/components/Header/LanguageSelect.tsx b/website/src/components/Header/LanguageSelect.tsx
new file mode 100644
index 00000000..4ef4482c
--- /dev/null
+++ b/website/src/components/Header/LanguageSelect.tsx
@@ -0,0 +1,49 @@
+/** @jsxImportSource react */
+import type { FunctionComponent } from 'react';
+import './LanguageSelect.css';
+import { KNOWN_LANGUAGES, langPathRegex } from '../../languages';
+
+const LanguageSelect: FunctionComponent<{ lang: string }> = ({ lang }) => {
+ return (
+ -
+ {
+ recentContributors.map((item) => (
+
-
+
+
+ +
+ ))
+ }
+
+
+
+
+ );
+};
+
+export default LanguageSelect;
diff --git a/website/src/components/Header/Search.css b/website/src/components/Header/Search.css
new file mode 100644
index 00000000..344fcf48
--- /dev/null
+++ b/website/src/components/Header/Search.css
@@ -0,0 +1,75 @@
+/** Style Algolia */
+:root {
+ --docsearch-primary-color: var(--theme-accent);
+ --docsearch-logo-color: var(--theme-text);
+}
+.search-input {
+ flex-grow: 1;
+ box-sizing: border-box;
+ width: 100%;
+ margin: 0;
+ padding: 0.33em 0.5;
+ overflow: visible;
+ font-weight: 500;
+ font-size: 1rem;
+ font-family: inherit;
+ line-height: inherit;
+ background-color: var(--theme-divider);
+ border-color: var(--theme-divider);
+ color: var(--theme-text-light);
+ border-style: solid;
+ border-width: 1px;
+ border-radius: 0.25rem;
+ outline: 0;
+ cursor: pointer;
+ transition-timing-function: ease-out;
+ transition-duration: 0.2s;
+ transition-property: border-color, color;
+ -webkit-font-smoothing: antialiased;
+}
+.search-input:hover,
+.search-input:focus {
+ color: var(--theme-text);
+ border-color: var(--theme-text-light);
+}
+.search-input:hover::placeholder,
+.search-input:focus::placeholder {
+ color: var(--theme-text-light);
+}
+.search-input::placeholder {
+ color: var(--theme-text-light);
+}
+.search-hint {
+ position: absolute;
+ top: 7px;
+ right: 19px;
+ padding: 3px 5px;
+ display: none;
+ align-items: center;
+ justify-content: center;
+ letter-spacing: 0.125em;
+ font-size: 13px;
+ font-family: var(--font-mono);
+ pointer-events: none;
+ border-color: var(--theme-text-lighter);
+ color: var(--theme-text-light);
+ border-style: solid;
+ border-width: 1px;
+ border-radius: 0.25rem;
+ line-height: 14px;
+}
+
+@media (min-width: 50em) {
+ .search-hint {
+ display: flex;
+ }
+}
+
+/* ------------------------------------------------------------ *\
+ DocSearch (Algolia)
+\* ------------------------------------------------------------ */
+
+.DocSearch-Modal .DocSearch-Hit a {
+ box-shadow: none;
+ border: 1px solid var(--theme-accent);
+}
diff --git a/website/src/components/Header/Search.tsx b/website/src/components/Header/Search.tsx
new file mode 100644
index 00000000..f51ede45
--- /dev/null
+++ b/website/src/components/Header/Search.tsx
@@ -0,0 +1,95 @@
+/** @jsxImportSource react */
+import { useState, useCallback, useRef } from 'react';
+import { ALGOLIA } from '../../config';
+import '@docsearch/css';
+import './Search.css';
+
+import { createPortal } from 'react-dom';
+import * as docSearchReact from '@docsearch/react';
+
+/** FIXME: This is still kinda nasty, but DocSearch is not ESM ready. */
+const DocSearchModal = docSearchReact.DocSearchModal || (docSearchReact as any).default.DocSearchModal;
+const useDocSearchKeyboardEvents =
+ docSearchReact.useDocSearchKeyboardEvents || (docSearchReact as any).default.useDocSearchKeyboardEvents;
+
+export default function Search() {
+ const [isOpen, setIsOpen] = useState(false);
+ const searchButtonRef = useRef-
+ {
+ editHref && (
+
- + + + Edit this page + + + ) + } + { + CONFIG.COMMUNITY_INVITE_URL && ( +
- + + + Join our community + + + ) + } +
+
+
diff --git a/website/src/components/RightSidebar/RightSidebar.astro b/website/src/components/RightSidebar/RightSidebar.astro
new file mode 100644
index 00000000..7334b1eb
--- /dev/null
+++ b/website/src/components/RightSidebar/RightSidebar.astro
@@ -0,0 +1,17 @@
+---
+import TableOfContents from './TableOfContents';
+import MoreMenu from './MoreMenu.astro';
+import type { MarkdownHeading } from 'astro';
+
+type Props = {
+ headings: MarkdownHeading[];
+ githubEditUrl: string;
+};
+
+const { headings, githubEditUrl } = Astro.props as Props;
+---
+
+
diff --git a/website/src/components/RightSidebar/TableOfContents.tsx b/website/src/components/RightSidebar/TableOfContents.tsx
new file mode 100644
index 00000000..ed48fcca
--- /dev/null
+++ b/website/src/components/RightSidebar/TableOfContents.tsx
@@ -0,0 +1,91 @@
+import { unescape } from 'html-escaper';
+import type { MarkdownHeading } from 'astro';
+import type { FunctionalComponent } from 'preact';
+import { useState, useEffect, useRef } from 'preact/hooks';
+
+type ItemOffsets = {
+ id: string;
+ topOffset: number;
+};
+
+const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({ headings = [] }) => {
+ const toc = useRef-
+ {headings
+ .filter(({ depth }) => depth >= minDepth && depth < 4)
+ .map((heading) => (
+
- + + {unescape(heading.text)} + + + ))} +
+ {themes.map((t, i) => {
+ const icon = icons[i];
+ const checked = t === theme;
+ return (
+
+ );
+ })}
+
+ );
+};
+
+export default ThemeToggle;
diff --git a/website/src/config.ts b/website/src/config.ts
new file mode 100644
index 00000000..7df00f70
--- /dev/null
+++ b/website/src/config.ts
@@ -0,0 +1,56 @@
+export const SITE = {
+ title: 'Strudel Docs',
+ description: 'Documentation for the Strudel Live Coding Language',
+ defaultLanguage: 'en_US',
+};
+
+export const OPEN_GRAPH = {
+ image: {
+ src: 'https://github.com/withastro/astro/blob/main/assets/social/banner-minimal.png?raw=true',
+ alt:
+ 'astro logo on a starry expanse of space,' + ' with a purple saturn-like planet floating in the right foreground',
+ },
+ twitter: 'astrodotbuild',
+};
+
+// This is the type of the frontmatter you put in the docs markdown files.
+export type Frontmatter = {
+ title: string;
+ description: string;
+ layout: string;
+ image?: { src: string; alt: string };
+ dir?: 'ltr' | 'rtl';
+ ogLocale?: string;
+ lang?: string;
+};
+
+export const KNOWN_LANGUAGES = {
+ English: 'en',
+} as const;
+export const KNOWN_LANGUAGE_CODES = Object.values(KNOWN_LANGUAGES);
+
+export const GITHUB_EDIT_URL = `https://github.com/tidalcycles/strudel/tree/main/website`;
+
+export const COMMUNITY_INVITE_URL = `https://discord.com/invite/HGEdXmRkzT`;
+
+// See "Algolia" section of the README for more information.
+export const ALGOLIA = {
+ indexName: 'XXXXXXXXXX',
+ appId: 'XXXXXXXXXX',
+ apiKey: 'XXXXXXXXXX',
+};
+
+export type Sidebar = Record{tune};
+}
diff --git a/website/src/docs/MobileNav.jsx b/website/src/docs/MobileNav.jsx
new file mode 100644
index 00000000..edd9ce33
--- /dev/null
+++ b/website/src/docs/MobileNav.jsx
@@ -0,0 +1,55 @@
+import { Disclosure } from '@headlessui/react';
+import Bars3Icon from '@heroicons/react/24/outline/Bars3Icon';
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
+
+function classNames(...classes) {
+ return classes.filter(Boolean).join(' ');
+}
+
+export default function MobileNav({ sidebar }) {
+ return (
+
+
+ go to REPL
+
+ {Object.entries(sidebar).map(([group, items], i) => (
+
+
+
+ {item.text}
+
+ ))}
+
+ ))}
+ {group}
+ {items.map((item, j) => (
+
+
+
+
+
+
+
+
+
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
new file mode 100644
index 00000000..f22f5569
--- /dev/null
+++ b/website/src/pages/index.astro
@@ -0,0 +1,14 @@
+---
+import HeadCommon from '../components/HeadCommon.astro';
+import { Repl } from '../repl/Repl.jsx';
+---
+
+
+
+
+
+
+
+
+
+ + +# Playing Sounds + +Instead of pitches, we can also play sounds with `s`: + +
+ +# Syntax + +So far, we've seen the following syntax: + +``` +xxx("foo").yyy("bar") +``` + +Generally, `xxx` and `yyy` are called functions, while `foo` and `bar` are called function arguments. +So far, we've used the functions to declare which aspect of the sound we want to control, and their arguments for the actual data. +The `yyy` function is called a chained function, because it is appended with a dot. + +Strudel makes heavy use of chained functions. Here is a more extreme example: + +
diff --git a/website/src/pages/learn/index.astro b/website/src/pages/learn/index.astro new file mode 100644 index 00000000..6f0a723d --- /dev/null +++ b/website/src/pages/learn/index.astro @@ -0,0 +1,3 @@ + diff --git a/website/src/pages/learn/mini-notation.mdx b/website/src/pages/learn/mini-notation.mdx new file mode 100644 index 00000000..0424fd56 --- /dev/null +++ b/website/src/pages/learn/mini-notation.mdx @@ -0,0 +1,127 @@ +--- +title: Mini Notation +layout: ../../layouts/MainLayout.astro +--- + +import { MiniRepl } from '../../docs/MiniRepl'; +import { JsDoc } from '../../docs/JsDoc'; + +# Mini Notation + +Similar to Tidal Cycles, Strudel has an embedded mini language that is designed to write rhythmic patterns in a short manner. +Before diving deeper into the details, here is a flavor of how the mini language looks like: + +
To learn more about what this all means, check out the{' '}
-
+
interactive tutorial
. Also feel free to join the{' '}
diff --git a/repl/src/Header.jsx b/website/src/repl/Header.jsx
similarity index 91%
rename from repl/src/Header.jsx
rename to website/src/repl/Header.jsx
index 0182fee5..c9de3b75 100644
--- a/repl/src/Header.jsx
+++ b/website/src/repl/Header.jsx
@@ -6,12 +6,12 @@ import SparklesIcon from '@heroicons/react/20/solid/SparklesIcon';
import StopCircleIcon from '@heroicons/react/20/solid/StopCircleIcon';
import { cx } from '@strudel.cycles/react';
import React, { useContext } from 'react';
-import { AppContext } from './App';
-import './App.css';
+// import { ReplContext } from './Repl';
+import './Repl.css';
const isEmbedded = window.location !== window.parent.location;
-export function Header() {
+export function Header({ context }) {
const {
started,
pending,
@@ -24,17 +24,18 @@ export function Header() {
handleShare,
isZen,
setIsZen,
- } = useContext(AppContext);
+ } = context;
+ // useContext(ReplContext)
+
return (
+
{/*
shuffle
)}
- {!isEmbedded && (
-
-
-
+
);
}
-export default App;
-
export function useEvent(name, onTrigger, useCapture = false) {
useEffect(() => {
document.addEventListener(name, onTrigger, useCapture);
diff --git a/repl/src/favicon.ico b/website/src/repl/favicon.ico
similarity index 100%
rename from repl/src/favicon.ico
rename to website/src/repl/favicon.ico
diff --git a/website/src/repl/prebake.mjs b/website/src/repl/prebake.mjs
new file mode 100644
index 00000000..d8fc199c
--- /dev/null
+++ b/website/src/repl/prebake.mjs
@@ -0,0 +1,31 @@
+import { Pattern, toMidi, valueToMidi } from '@strudel.cycles/core';
+import { samples } from '@strudel.cycles/webaudio';
+
+export async function prebake({ baseDir = '.' } = {}) {
+ // https://archive.org/details/SalamanderGrandPianoV3
+ // License: CC-by http://creativecommons.org/licenses/by/3.0/ Author: Alexander Holm
+ return await Promise.all([
+ samples('piano.json', `${baseDir}/piano/`),
+ // https://github.com/sgossner/VCSL/
+ // https://api.github.com/repositories/126427031/contents/
+ // LICENSE: CC0 general-purpose
+ samples('vcsl.json', 'github:sgossner/VCSL/master/'),
+ samples('tidal-drum-machines.json', 'github:ritchse/tidal-drum-machines/main/machines/'),
+ samples('EmuSP12.json', `${baseDir}/EmuSP12/`),
+ ]);
+}
+
+const maxPan = toMidi('C8');
+const panwidth = (pan, width) => pan * width + (1 - width) / 2;
+
+Pattern.prototype.piano = function () {
+ return this.clip(1)
+ .s('piano')
+ .release(0.1)
+ .fmap((value) => {
+ const midi = valueToMidi(value);
+ // pan by pitch
+ const pan = panwidth(Math.min(Math.round(midi) / maxPan, 1), 0.5);
+ return { ...value, pan: (value.pan || 1) * pan };
+ });
+};
diff --git a/repl/src/tunes.mjs b/website/src/repl/tunes.mjs
similarity index 100%
rename from repl/src/tunes.mjs
rename to website/src/repl/tunes.mjs
diff --git a/website/src/styles/index.css b/website/src/styles/index.css
new file mode 100644
index 00000000..dabed423
--- /dev/null
+++ b/website/src/styles/index.css
@@ -0,0 +1,9 @@
+@import '@strudel.cycles/react/dist/style.css';
+
+body {
+ background-color: #222;
+}
+
+.cm-gutters {
+ display: none !important;
+}
diff --git a/website/tailwind.config.cjs b/website/tailwind.config.cjs
new file mode 100644
index 00000000..52707838
--- /dev/null
+++ b/website/tailwind.config.cjs
@@ -0,0 +1,23 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+ theme: {
+ extend: {
+ colors: {
+ primary: '#c792ea',
+ secondary: '#c3e88d',
+ tertiary: '#82aaff',
+ highlight: '#ffcc00',
+ linegray: '#8a91991a',
+ lineblack: '#00000095',
+ bg: '#222222',
+ // header: '#8a91991a',
+ // footer: '#8a91991a',
+ header: '#00000050',
+ // header: 'transparent',
+ footer: '#00000050',
+ },
+ },
+ },
+ plugins: [require('@tailwindcss/typography')],
+};
diff --git a/website/tsconfig.json b/website/tsconfig.json
new file mode 100644
index 00000000..efb484fc
--- /dev/null
+++ b/website/tsconfig.json
@@ -0,0 +1,8 @@
+{
+ "extends": "astro/tsconfigs/strict",
+ "compilerOptions": {
+ "jsx": "react-jsx",
+ "skipLibCheck": true,
+ "jsxImportSource": "react"
+ }
+}
\ No newline at end of file