diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bbb8d9f7..e4e13639 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -481,6 +481,9 @@ importers: '@algolia/client-search': specifier: ^4.22.0 version: 4.22.0 + '@astro-community/astro-embed-youtube': + specifier: ^0.4.3 + version: 0.4.3(astro@4.0.8) '@astrojs/mdx': specifier: ^2.0.3 version: 2.0.3(astro@4.0.8) @@ -598,6 +601,9 @@ importers: react-hook-inview: specifier: ^4.5.0 version: 4.5.0(react-dom@18.2.0)(react@18.2.0) + react-lite-youtube-embed: + specifier: ^2.4.0 + version: 2.4.0(react-dom@18.2.0)(react@18.2.0) rehype-autolink-headings: specifier: ^7.1.0 version: 7.1.0 @@ -794,6 +800,15 @@ packages: leven: 3.1.0 dev: true + /@astro-community/astro-embed-youtube@0.4.3(astro@4.0.8): + resolution: {integrity: sha512-zXtPmR9yxrTo6cuLhH8v+r62bsXbsLJgsU2FiZalPr4bXJxAUQEIlG46S/qK0AEXi9uNShKqy4+zBaJ98xTVEg==} + peerDependencies: + astro: ^2.0.0 || ^3.0.0-beta || ^4.0.0-beta + dependencies: + astro: 4.0.8(@types/node@20.10.6)(typescript@5.3.3) + lite-youtube-embed: 0.2.0 + dev: false + /@astrojs/compiler@2.3.4: resolution: {integrity: sha512-33/YtWoBCE0cBUNy1kh78FCDXBoBANX87ShgATlAHECYbG2+buNTAgq4Xgz4t5NgnEHPN21GIBC2Mvvwisoutw==} @@ -8902,6 +8917,10 @@ packages: uc.micro: 1.0.6 dev: true + /lite-youtube-embed@0.2.0: + resolution: {integrity: sha512-XXXAk5sbvtjjwbie3XG+6HppgTm1HTGL/Uk9z9NkJH53o7puZLur434heHzAjkS60hZB3vT4ls25zl5rMiX4EA==} + dev: false + /load-json-file@4.0.0: resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==} engines: {node: '>=4'} @@ -11287,6 +11306,16 @@ packages: resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} dev: true + /react-lite-youtube-embed@2.4.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-Xo6cM1zPlROvvM97JkqQIoXstlQDaC4+DawmM7BB7Hh1cXrkBHEGq1iJlQxBTUWAUklmpcC7ph7qg7CztXtABQ==} + peerDependencies: + react: '>=18.2.0' + react-dom: '>=18.2.0' + dependencies: + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /react-refresh@0.14.0: resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} engines: {node: '>=0.10.0'} diff --git a/website/package.json b/website/package.json index 6ca768ef..a324821b 100644 --- a/website/package.json +++ b/website/package.json @@ -13,6 +13,7 @@ }, "dependencies": { "@algolia/client-search": "^4.22.0", + "@astro-community/astro-embed-youtube": "^0.4.3", "@astrojs/mdx": "^2.0.3", "@astrojs/react": "^3.0.9", "@astrojs/tailwind": "^5.1.0", @@ -52,6 +53,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-inview": "^4.5.0", + "react-lite-youtube-embed": "^2.4.0", "rehype-autolink-headings": "^7.1.0", "rehype-slug": "^6.0.0", "rehype-urls": "^1.2.0", diff --git a/website/src/components/Showcase.jsx b/website/src/components/Showcase.jsx new file mode 100644 index 00000000..c858d2fc --- /dev/null +++ b/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 ( + <> +
+ + +
+ {videos.map((video, i) => ( +
+

{video.title}

+ + {video.description &&

{video.description}

} +
+ ))} + + ); +} + +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' }, +]; diff --git a/website/src/config.ts b/website/src/config.ts index 962bfdb0..fc904bfa 100644 --- a/website/src/config.ts +++ b/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' }, diff --git a/website/src/pages/intro/showcase.mdx b/website/src/pages/intro/showcase.mdx new file mode 100644 index 00000000..31e2d6d9 --- /dev/null +++ b/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. + +