Merge branch 'main' into docs

.eslintignore

@@ -15,3 +15,4 @@ vite.config.js
 !**/*.mjs
 **/*.tsx
 **/*.ts
+**/*.json

.gitignore

@@ -37,4 +37,6 @@ talk/public/EmuSP12
 talk/public/samples
 server/samples/old
 repl/stats.html
-coverage
+coverage
+public/icons/apple-splash-*
+dev-dist

README.md

@@ -7,6 +7,7 @@ An experiment in making a [Tidal](https://github.com/tidalcycles/tidal/) using w
 - Try it here: <https://strudel.tidalcycles.org/>
 - Docs: <https://strudel.tidalcycles.org/learn/>
 - Technical Blog Post: <https://loophole-letters.vercel.app/strudel>
+- 1 Year of Strudel Blog Post: <https://loophole-letters.vercel.app/strudel1year>
 
 ## Running Locally
 

paper/iclc-reviews.md

@@ -0,0 +1,97 @@
+**Submission ID:** 8
+
+**Title:** Strudel: live coding patterns on the Web
+
+**Status:** Accept
+
+**Reviewer 1:**
+
+Author Comments: * Summary of the contribution:\
+This paper describes Strudel, a Web-based implementation of Tidal Cycles. It is generally a good overview of the system which could help prospective users understand how it works beyond the manual, and it provides many code examples. The most interesting contribution is the comparison between the Haskell and JavaScript features for this case.
+
+* On theme (1-5):\
+1
+
+* Citation quality (1-5):\
+5
+
+* Missing references:\
+not answered
+
+* Suggested improvements:\
+This paper is a good introduction to Strudel. The style is mostly illustrative, but it is hard to understand where the Tidal syntax is being introduced vs where the specific Strudel features are used. Thus, the best way to improve it would be to focus on Strudel. Also, it would be good to give a better hint on what output method would be preferable. Also the title of Section 9 should compare Strudel to Tidal or Haskell to JavaScript.
+
+The paper is driven by examples, but many are a bit difficult to follow, here are some issues:\
+Section 4 - the mini-notation example does not look terser despite the text.\
+Section 5 - echo funciton is not used.\
+Sections 7.11 and 7.12 - the same (mini-notation) example is used so it is not clear what relation there is between transpilation and using mini-notation. Also please reference peggy\
+Sectin 7.3.2 The sawtooth waveform has been used in all examples, so it would be clearer if it was used here (maybe cutoff as well).
+
+Generally, beyond the language differences, what does Strudel contribute with respect to Haskell-based Tidal? I would say that there is a lot to be gained in terms of installation, availability and potential for collaboration.
+
+* Clarity (1-5):\
+4
+
+* Corrections required:\
+No contentious / incorrect claims
+
+* Other Changes if Published:\
+not answered
+
+* Correct Template used?\
+Yes
+
+* All materials provided?\
+Yes
+
+* Wordcount respected?\
+Yes
+
+* Have any deviations, errors or omissions impacted your ability to give a fair review?\
+No
+
+**Reviewer 2:**
+
+Author Comments: * Summary of the contribution:\
+This proposal presents Strudel, an online, JavaScript-native approach to algorithmic pattern composition that in many ways mirrors TidalCycles. TidalCycles, developed by one of the authors, is a key software piece for live coding. Perhaps the most difficult aspects of Tidal are related to Haskell and Haskell's dependency system that makes it very difficult to install. Haskell in itself is a difficult language to grasp; if Tidal users would like to expand and 'personalise' the possibilities of the software, they would have to get familiar with the particularities of Haskell. JavaScript is a multi-paradigm language that is used for web development can make pattern-based, algorithmic composition more popular. The process of bringing Tidal's paradigm to a dynamic type system seems to be an important part of this research. I enjoy and find very interesting the dialectical process that occurs between Strudel and Tidal, where the implementation of Tidal concepts in Strudel simultaneously transforms Tidal, either by introspection (finding bugs, etc.) or by bringing back to Tidal new insights that are clear in JavaScript. I think moving to TypeScript makes sense; perhaps a small section where the decision to use JavaScript is discussed a little further could be helpful for readers (beyond accessibility). Overall, this paper is clear and presents software that is a key development for live coding and will be a great addition to the next ICLC.
+
+* On theme (1-5):\
+4
+
+* Citation quality (1-5):\
+5
+
+* Missing references:\
+not answered
+
+* Suggested improvements:\
+Tidal-Strudel parity seems to be on the immediate horizon, but I wonder if this parity is transient and if the ultimate goal of Strudel is to ultimately diverge from Tidal. Perhaps the project is in its early stages, and this is not clear, but it would be interesting to get some insights on the authors' intentions. Personally, I think that a key discussion that needs to happen in live coding communities and development nodes is that of what is understood as multilingual live coding. Tidal's paradigm is implemented in a number of programming languages (as well as platforms such as Estuary), each with its own set of features and challenges: some are functional reactive programming, type strict oriented, while others are multi-paradigm, dynamic type oriented, etc. This seems to suggest that it is possible for many programming languages to adopt one single understanding of how to make music. Perhaps further considerations should be made as to whether we need one single grammar to name and express all music structures or whether we need environments and software that help difference to proliferate in terms of music/sound art/art idiosyncrasies. Perhaps questions in this direction are beyond the scope of this paper and I hope this comment is taken as productive feedback for the authors.
+
+* Clarity (1-5):\
+4
+
+* Corrections required:\
+Nothing contentious or incorrect to note.
+
+* Other Changes if Published:\
+The example shown on page 3 under "Pattern Example" seems to be different from its explanation. The explanations do not mention scale but mention echo, which is not present in the example. I would double check all the code examples inc ase I missed something like this.
+
+* Correct Template used?\
+Yes
+
+* All materials provided?\
+Yes
+
+* Wordcount respected?\
+Yes
+
+* Have any deviations, errors or omissions impacted your ability to give a fair review?\
+no
+
+* General remarks:\
+This proposal presents Strudel, an online, JavaScript-native approach to algorithmic pattern composition that in many ways mirrors TidalCycles. TidalCycles, developed by one of the authors, is a key software piece for live coding. Perhaps the most difficult aspects of Tidal are related to Haskell and Haskell's dependency system that makes it very difficult to install. Haskell in itself is a difficult language to grasp; if Tidal users would like to expand and 'personalise' the possibilities of the software, they would have to get familiar with the particularities of Haskell. JavaScript is a multi-paradigm language that can make pattern-based, algorithmic composition more popular. The process of bringing Tidal's paradigm to a dynamic type system seems to be an important part of this research. I enjoy and find very interesting the dialectical process that occurs between Strudel and Tidal, where the implementation of Tidal concepts in Strudel simultaneously transforms Tidal, either by introspection (finding bugs, etc.) or by bringing back to Tidal new insights that are clear in JavaScript. I think moving to TypeScript makes sense; perhaps a small section where the decision to use JavaScript is discussed a little further could be helpful for readers (beyond accessibility). I am curious, did the authors consider PureScript? I can see how, in terms of popularity, PureScript is a lateral move coming from Haskell, but an explicit explanation about the (maybe) obvious candidates would be interesting.\
+Tidal-Strudel parity seems to be on the immediate horizon, but I wonder if this parity is transient and if the ultimate goal of Strudel is to ultimately diverge from Tidal. Perhaps the project is in its early stages, and this is not clear, but it would be interesting to get some insights on the authors' intentions. Personally, I think that a key discussion that needs to happen in live coding communities and development nodes is that of what is understood as multilingual live coding. Tidal's paradigm is implemented in a number of programming languages (as well as platforms such as Estuary), each with its own set of features and challenges: some are functional reactive programming, type strict oriented, while others are multi-paradigm, dynamic type oriented, etc. This seems to suggest that it is possible for many programming languages to adopt one single understanding of how to make music. Perhaps further considerations should be made as to whether we need one single grammar to name and express all music structures or whether we need environments and software that help difference to proliferate in terms of music/sound art/art idiosyncrasies. Perhaps questions in this direction are beyond the scope of this paper and I hope this last comment is taken as productive feedback for the authors.
+
+Overall, this paper is clear and presents software that is a key development for live coding and will be a great addition to the next ICLC.
+
+PS. The example shown on page 3 under "Pattern Example" seems to be different from its explanation. The explanations do not mention scale but mention echo, which is not present in the example.

website/README.md

@@ -19,6 +19,13 @@ npm run build # <- builds repl + tutorial to ../docs
 npm run preview # <- test static build
 ```
 
+## Generate PWA icons
+
+```sh
+cd website/public
+npx pwa-asset-generator icon.png icons
+```
+
 # Standard Readme of Astro Starter Kit: Docs Site
 
 ```bash

website/astro.config.mjs

@@ -9,6 +9,7 @@ import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 
 import tailwind from '@astrojs/tailwind';
+import AstroPWA from '@vite-pwa/astro';
 // import { visualizer } from 'rollup-plugin-visualizer';
 
 const options = {
@@ -29,6 +30,71 @@ export default defineConfig({
     react(),
     mdx(options),
     tailwind(),
+    AstroPWA({
+      registerType: 'autoUpdate',
+      injectRegister: 'auto',
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,json,wav,mp3,ogg}'],
+        runtimeCaching: [
+          {
+            urlPattern: ({ url }) =>
+              [
+                /^https:\/\/raw\.githubusercontent\.com\/.*/i,
+                /^https:\/\/freesound\.org\/.*/i,
+                /^https:\/\/shabda\.ndre\.gr\/.*/i,
+              ].some((regex) => regex.test(url)),
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'external-samples',
+              expiration: {
+                maxEntries: 5000,
+                maxAgeSeconds: 60 * 60 * 24 * 30, // <== 14 days
+              },
+              cacheableResponse: {
+                statuses: [0, 200],
+              },
+            },
+          },
+        ],
+      },
+      devOptions: {
+        enabled: false,
+      },
+      manifest: {
+        includeAssets: ['favicon.ico', 'icons/apple-icon-180.png', 'favicon.svg'],
+        name: 'Strudel REPL',
+        short_name: 'Strudel',
+        description:
+          'Strudel is a music live coding environment for the browser, porting the TidalCycles pattern language to JavaScript.',
+        theme_color: '#222222',
+        icons: [
+          {
+            src: 'icons/manifest-icon-192.maskable.png',
+            sizes: '192x192',
+            type: 'image/png',
+            purpose: 'any',
+          },
+          {
+            src: 'icons/manifest-icon-192.maskable.png',
+            sizes: '192x192',
+            type: 'image/png',
+            purpose: 'maskable',
+          },
+          {
+            src: 'icons/manifest-icon-512.maskable.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'any',
+          },
+          {
+            src: 'icons/manifest-icon-512.maskable.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'maskable',
+          },
+        ],
+      },
+    }),
   ],
   site: `https://strudel.tidalcycles.org`,
   base: '/',

website/package.json

@@ -39,6 +39,7 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "astro": "^1.7.2",
+    "canvas": "^2.11.0",
     "fraction.js": "^4.2.0",
     "nanoid": "^4.0.0",
     "preact": "^10.7.3",
@@ -47,10 +48,12 @@
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.0.1",
     "remark-toc": "^8.0.1",
-    "tailwindcss": "^3.2.4",
-    "canvas": "^2.11.0"
+    "tailwindcss": "^3.2.4"
   },
   "devDependencies": {
-    "html-escaper": "^3.0.3"
+    "@vite-pwa/astro": "^0.0.1",
+    "html-escaper": "^3.0.3",
+    "vite-plugin-pwa": "^0.14.1",
+    "workbox-window": "^6.5.4"
   }
 }

website/src/components/HeadCommon.astro

@@ -1,4 +1,5 @@
 ---
+import { pwaInfo } from 'virtual:pwa-info';
 import '../styles/index.css';
 
 const { BASE_URL } = import.meta.env;
@@ -12,34 +13,18 @@ const base = BASE_URL;
 
 <link rel="icon" type="image/svg+xml" href="favicon.ico" />
 
-<link rel="sitemap" href="./sitemap.xml" />
+<meta
+  name="description"
+  content="Strudel is a music live coding environment for the browser, porting the TidalCycles pattern language to JavaScript."
+/>
+<link rel="icon" href="/favicon.ico" />
+<link rel="apple-touch-icon" href="/icons/apple-icon-180.png" sizes="180x180" />
+<meta name="theme-color" content="#222222" />
 
 <base href={base} />
 
-<!-- Preload Fonts -->
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" />
-
 <!-- Scrollable a11y code helper -->
 <script src="./make-scrollable-code-focusable.js" is:inline></script>
 
-<!-- This is intentionally inlined to avoid FOUC -->
-<script is:inline>
-  /*   const root = document.documentElement;
-  const theme = localStorage.getItem('theme');
-  if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-    root.classList.add('theme-dark');
-  } else {
-    root.classList.remove('theme-dark');
-  } */
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=G-TEL60V1WM9" is:inline></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', 'G-TEL60V1WM9');
-</script> -->
+<script src="/src/pwa.ts"></script>
+{pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}

website/src/components/HeadSEO.astro

@@ -2,8 +2,8 @@
 import { SITE, OPEN_GRAPH, Frontmatter } from '../config';
 
 export interface Props {
-	frontmatter: Frontmatter;
-	canonicalUrl: URL;
+  frontmatter: Frontmatter;
+  canonicalUrl: URL;
 }
 
 const { frontmatter, canonicalUrl } = Astro.props as Props;
@@ -23,11 +23,7 @@ const imageAlt = frontmatter.image?.alt ?? OPEN_GRAPH.image.alt;
 <meta property="og:locale" content={frontmatter.ogLocale ?? SITE.defaultLanguage} />
 <meta property="og:image" content={canonicalImageSrc} />
 <meta property="og:image:alt" content={imageAlt} />
-<meta
-	name="description"
-	property="og:description"
-	content={frontmatter.description ?? SITE.description}
-/>
+<meta name="description" property="og:description" content={frontmatter.description ?? SITE.description} />
 <meta property="og:site_name" content={SITE.title} />
 
 <!-- Twitter Tags -->
@@ -37,10 +33,3 @@ const imageAlt = frontmatter.image?.alt ?? OPEN_GRAPH.image.alt;
 <meta name="twitter:description" content={frontmatter.description ?? SITE.description} />
 <meta name="twitter:image" content={canonicalImageSrc} />
 <meta name="twitter:image:alt" content={imageAlt} />
-
-<!--
-  TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense?
-  Docs: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data
-  https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this.
-  Even better, there's a React component that integrates with `schema-dts`: https://github.com/google/react-schemaorg
--->

website/src/config.ts

@@ -1,16 +1,14 @@
 export const SITE = {
-  title: 'Strudel Docs',
-  description: 'Documentation for the Strudel Live Coding Language',
-  defaultLanguage: 'en_US',
+  title: 'Strudel',
+  description: 'Strudel is a music live coding editor that brings TidalCycles to the browser.',
+  defaultLanguage: 'en',
 };
 
 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',
+    src: 'https://strudel.tidalcycles.org/icon.png',
+    alt: 'Strudel Logo',
   },
-  twitter: 'astrodotbuild',
 };
 
 // This is the type of the frontmatter you put in the docs markdown files.

website/src/env.d.ts

@@ -1 +1,3 @@
 /// <reference types="astro/client" />
+/// <reference types="vite-plugin-pwa/info" />
+/// <reference types="vite-plugin-pwa/client" />

website/src/layouts/MainLayout.astro

@@ -22,12 +22,12 @@ const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.mdx`;
 const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
 ---
 
-<html dir={frontmatter.dir ?? 'ltr'} lang={frontmatter.lang ?? 'en-us'} class="initial">
+<html dir={frontmatter.dir ?? 'ltr'} lang={frontmatter.lang ?? 'en'} class="initial">
   <head>
     <HeadCommon />
     <HeadSEO frontmatter={frontmatter} canonicalUrl={canonicalURL} />
     <title>
-      {frontmatter.title ? `${frontmatter.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}
+      {frontmatter.title ? `${frontmatter.title} 🌀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}
     </title>
   </head>
 

website/src/pages/index.astro

@@ -3,7 +3,7 @@ import HeadCommon from '../components/HeadCommon.astro';
 import { Repl } from '../repl/Repl.jsx';
 ---
 
-<html>
+<html lang="en">
   <head>
     <HeadCommon />
     <title>Strudel REPL</title>

website/src/pages/learn/effects.mdx

@@ -9,7 +9,7 @@ import { JsDoc } from '../../docs/JsDoc';
 
 # Audio Effects
 
-Wether you're using a synth or a sample, you can apply any of the following built-in audio effects.
+Whether you're using a synth or a sample, you can apply any of the following built-in audio effects.
 As you might suspect, the effects can be chained together, and they accept a pattern string as their argument.
 
 # Filters

website/src/pwa.ts

@@ -0,0 +1,11 @@
+import { registerSW } from 'virtual:pwa-register';
+
+registerSW({
+  immediate: true,
+  onRegisteredSW(swScriptUrl) {
+    // console.log('SW registered: ', swScriptUrl)
+  },
+  onOfflineReady() {
+    // console.log('PWA application ready to work offline')
+  },
+});

website/src/repl/Footer.jsx

@@ -76,7 +76,7 @@ export function Footer({ context }) {
           <FooterTab name="reference" />
         </div>
         {activeFooter !== '' && (
-          <button onClick={() => setActiveFooter('')} className="text-white">
+          <button onClick={() => setActiveFooter('')} className="text-white" aria-label="Close Panel">
             <XMarkIcon className="w-5 h-5" />
           </button>
         )}

website/tsconfig.json

@@ -3,6 +3,10 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "skipLibCheck": true,
-    "jsxImportSource": "react"
+    "jsxImportSource": "react",
+    "noImplicitAny": false,
+    "types": [
+      "vite-plugin-pwa/client"
+    ]
   }
 }