elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-25 12:38:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

basic community oven

Browse Source
This commit is contained in:
Felix Roos 2024-01-18 18:21:56 +01:00
parent 873a412179
commit 4229d673c9
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: 'What is Strudel?', link: 'workshop/getting-started' },
{ text: 'Showcase', link: 'intro/showcase' }, { text: 'Showcase', link: 'intro/showcase' },
{ text: 'Blog', link: 'blog' }, { text: 'Blog', link: 'blog' },
{ text: 'Community Oven', link: 'oven' },
], ],
Workshop: [ Workshop: [
// { text: 'Getting Started', link: 'workshop/getting-started' }, // { text: 'Getting Started', link: 'workshop/getting-started' },

60
website/src/pages/oven.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 Oven</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 Oven</h1>
<p>
This page contains all the strudels baked by the community.<br /> Add your own by clicking the "Share" button
in the REPL
</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>