add showcase

website/src/components/Showcase.jsx

@@ -0,0 +1,121 @@
+import { useState } from 'react';
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
+
+export function shuffleArray(array) {
+  array = [...array];
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
+
+export function Showcase() {
+  const [videos, setVideos] = useState(_videos);
+  return (
+    <>
+      <div className="flex space-x-2">
+        <button className="bg-lineHighlight p-2 rounded-md" onClick={() => setVideos(shuffleArray(_videos))}>
+          <span>shuffle videos</span>
+        </button>
+        <button className="bg-lineHighlight p-2 rounded-md" onClick={() => setVideos(_videos)}>
+          <span>newest first</span>
+        </button>
+      </div>
+      {videos.map((video, i) => (
+        <div key={i}>
+          <h2>{video.title}</h2>
+          <LiteYouTubeEmbed {...video} />
+          {video.description && <p>{video.description}</p>}
+        </div>
+      ))}
+    </>
+  );
+}
+
+const _videos = [
+  // solstice 2023
+  { title: 'Jade Rose @ solstice stream 2023', id: 'wg0vW5Ac7L0' },
+  {
+    title: 'eddyflux @ solstice stream 2023',
+    id: 'DX8E99kC7q0',
+    description:
+      'A from-scratch session, starting with sample loops, later transitioning to more electronic territory.',
+  },
+  {
+    title: 'CCC @ solstice stream 2023',
+    id: '3uLTIDQa_Lc',
+    params: 'start=24',
+  },
+  { title: 'letSeaTstrudeL @ solstice stream 2023', id: 'fTiX6dVtdWQ' },
+  { title: 'totalgee (Glen F) @ solstice stream 2023', id: 'IvI6uaE3nLU' },
+  { title: 'Dan Gorelick @ solstice stream 2023', id: 'qMJEljJyPi0' },
+  //
+  {
+    title: 'Creative Coding @ Chalmers University of Technology, video by svt.se',
+    id: '4zgHeNpG4wU',
+  },
+  { title: 'Switch Angel - Morrow', id: 'qiatPuJpxLs' },
+  {
+    title: 'Jade Rose - Into your spell',
+    id: 'lxQgBeLQBgk',
+    description:
+      'Jade Rose performing with various synths via MIDI, superdirt via OSC and the native strudel superdough engine + vocal parts!',
+  },
+  // algo afro futures
+  {
+    title: 'Emma Osman @ (Algo|Afro) Futures 2023',
+    id: 'zUoZvkZ3J7Q',
+    params: 'start=1278',
+  },
+  {
+    title: 'Zach B @ (Algo|Afro) Futures 2023',
+    id: 'zUoZvkZ3J7Q',
+    params: 'start=2547',
+  },
+  {
+    title: 'Jamal Lloyd Davis @ (Algo|Afro) Futures 2023',
+    id: 'zUoZvkZ3J7Q',
+    params: 'start=3883',
+  },
+  {
+    title: 'Jim Osman @ (Algo|Afro) Futures 2023',
+    id: 'zUoZvkZ3J7Q',
+    params: 'start=5155',
+  },
+  {
+    title: 'φ @ (Algo|Afro) Futures 2023',
+    id: 'zUoZvkZ3J7Q',
+    params: 'start=7809',
+  },
+  {
+    title: 'Tomilola Olumide @ (Algo|Afro) Futures 2023',
+    id: 'zUoZvkZ3J7Q',
+    params: 'start=9224',
+  },
+  {
+    title: 'Tyga Blue @ (Algo|Afro) Futures 2023',
+    id: 'zUoZvkZ3J7Q',
+    params: 'start=10909',
+  },
+  //
+  {
+    title: 'boggo - Live Coding Metal Djents',
+    id: 'n0rhn9-PRwE',
+    description: 'A rare sight: live coded Metal Djents, where strudel is sending MIDI to bespoke synth!',
+  },
+  {
+    title: 'froos @ Solstice Night Stream December 2022',
+    id: 'P1DDsOvcyco',
+    params: 'start=19',
+  },
+  { title: 'froos @ WAC 2022 Day', id: 'KWIotFWVOi4' },
+  {
+    title: 'yaxu & olivia - Algorithmic Pattern Live Stream',
+    id: 'Jvs7Q4cdLy4',
+    description:
+      'A first foray into combining (an early version) strudel and hydra, using flok for collaborative coding.',
+  },
+  { title: 'froos @ Algorave 10th Birthday stream', id: 'IcMSocdKwvw' },
+];

website/src/config.ts

@@ -54,8 +54,12 @@ export const SIDEBAR: Sidebar = {
     ],
   },
   en: {
+    Presentation: [
+      { text: 'What is Strudel?', link: 'workshop/getting-started' },
+      { text: 'Showcase', link: 'intro/showcase' },
+    ],
     Workshop: [
-      { text: 'Getting Started', link: 'workshop/getting-started' },
+      // { text: 'Getting Started', link: 'workshop/getting-started' },
       { text: 'First Sounds', link: 'workshop/first-sounds' },
       { text: 'First Notes', link: 'workshop/first-notes' },
       { text: 'First Effects', link: 'workshop/first-effects' },

website/src/pages/intro/showcase.mdx

@@ -0,0 +1,12 @@
+---
+title: Showcase
+layout: ../../layouts/MainLayout.astro
+---
+
+import { Showcase } from '../../components/Showcase';
+
+# Showcase
+
+This page contains a randomly shuffled selection of videos that show people using strudel in some way.
+
+<Showcase client:only="react" />