elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-11 21:58:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #923 from tidalcycles/feed

Browse Source 
community bakery
This commit is contained in:
Felix Roos 2024-01-19 18:50:57 +01:00 committed by GitHub
commit a7f5d0e0c1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 108 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
website/src/components/Oven/Oven.jsx Normal file
View File

@ -0,0 +1,47 @@
import { useState, useEffect } from 'react';
import { loadFeaturedPatterns, loadPublicPatterns } from '@src/repl/util.mjs';
import { MiniRepl } from '@src/docs/MiniRepl';
import { PatternLabel } from '@src/repl/panel/PatternsTab';
function PatternList({ patterns }) {
return (
<div className="space-y-4">
{patterns.map((pat) => (
<div key={pat.id}>
<div className="flex justify-between not-prose pb-2">
<h2 className="text-lg">
<a href={`/?${pat.hash}`} target="_blank" className="underline">
<PatternLabel pattern={pat} />
</a>
</h2>
</div>
{/* <MiniRepl tune={pat.code.trim()} /> */}
{/* <pre>{JSON.stringify(pat)}</pre> */}
</div>
))}
</div>
);
}
export function Oven() {
const [featuredPatterns, setFeaturedPatterns] = useState([]);
const [publicPatterns, setPublicPatterns] = useState([]);
useEffect(() => {
loadPublicPatterns().then(({ data: pats }) => {
console.log('pats', pats);
setPublicPatterns(pats);
});
loadFeaturedPatterns().then(({ data: pats }) => {
console.log('pats', pats);
setFeaturedPatterns(pats);
});
}, []);
return (
<div>
<h2 id="featured">Featured Patterns</h2>
<PatternList patterns={featuredPatterns} />
<h2 id="latest">Last Creations</h2>
<PatternList patterns={publicPatterns} />
</div>
);
}

1
website/src/config.ts
View File

@ -58,6 +58,7 @@ export const SIDEBAR: Sidebar = {
{ text: 'What is Strudel?', link: 'workshop/getting-started' },
{ text: 'Showcase', link: 'intro/showcase' },
{ text: 'Blog', link: 'blog' },
{ text: 'Community Bakery', link: 'bakery' },
],
Workshop: [
// { text: 'Getting Started', link: 'workshop/getting-started' },

60
website/src/pages/bakery.astro Normal file
View File

@ -0,0 +1,60 @@
---
import HeadCommon from '../components/HeadCommon.astro';
import Header from '../components/Header/Header.astro';
import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
import PageContent from '../components/PageContent/PageContent.astro';
import { getCollection } from 'astro:content';
import { compareDesc } from 'date-fns';
import { Oven as CommunityOven } from '../components/Oven/Oven.jsx';
import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
const currentPage = Astro.url.pathname;
const posts = (await getCollection('blog')).sort((a, b) => compareDesc(a.data.date, b.data.date));
---
<html dir={'ltr'} lang={'en'} class="initial dark">
<head>
<HeadCommon />
<title>🌀 Strudel Community Bakery</title>
</head>
<body class="h-app-height text-gray-50 bg-background">
<div class="w-full h-full space-y-4 flex flex-col">
<header class="max-w-full fixed top-0 w-full z-[100]">
<Header currentPage={currentPage} />
</header>
<main class="relative pt-16">
<div class="h-full top-0 overflow-auto min-w-[300px] flex xl:justify-center pr-4 pl-4 md:pl-[300px] xl:pl-0">
<aside title="Site Navigation" class="w-[300px] px-6 left-0 hidden md:block fixed h-full">
<LeftSidebar currentPage={currentPage} />
</aside>
<PageContent>
<h1>Community Bakery</h1>
<p>
This page contains all the strudel patterns baked by the community. Add your own by clicking the "Share"
button in the REPL. Have fun, and please share some of what you create with the community.
</p>
<CommunityOven client:only />
</PageContent>
<aside class="fixed right-0 h-full overflow-auto pr-4 pl-0 pb-16 hidden xl:block" title="Table of Contents">
<RightSidebar
headings={[
{
depth: 1,
slug: 'featured',
text: 'Featured',
},
{
depth: 1,
slug: 'latest',
text: 'Last Creations',
},
]}
/>
</aside>
</div>
</main>
</div>
</body>
</html>