1---
2import HeadCommon from '../components/HeadCommon.astro';
3import Header from '../components/Header/Header.astro';
4import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
5import PageContent from '../components/PageContent/PageContent.astro';
6import { getCollection } from 'astro:content';
7import { compareDesc } from 'date-fns';
8import { Oven as CommunityOven } from '../components/Oven/Oven.jsx';
9import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
10
11const currentPage = Astro.url.pathname;
12
13const posts = (await getCollection('blog')).sort((a, b) => compareDesc(a.data.date, b.data.date));
14---
15
16<html dir={'ltr'} lang={'en'} class="initial dark">
17  <head>
18    <HeadCommon />
19    <title>🌀 Strudel Community Bakery</title>
20  </head>
21
22  <body class="h-app-height text-gray-50 bg-background">
23    <div class="w-full h-full space-y-4 flex flex-col">
24      <header class="max-w-full fixed top-0 w-full z-[100]">
25        <Header currentPage={currentPage} />
26      </header>
27      <main class="relative pt-16">
28        <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">
29          <aside title="Site Navigation" class="w-[300px] px-6 left-0 hidden md:block fixed h-full">
30            <LeftSidebar currentPage={currentPage} />
31          </aside>
32          <PageContent>
33            <h1>Community Bakery</h1>
34            <p>
35              This page contains all the strudel patterns baked by the community. Add your own by clicking the "Share"
36              button in the REPL. Have fun, and please share some of what you create with the community.
37            </p>
38            <CommunityOven client:only />
39          </PageContent>
40          <aside class="fixed right-0 h-full overflow-auto pr-4 pl-0 pb-16 hidden xl:block" title="Table of Contents">
41            <RightSidebar
42              headings={[
43                {
44                  depth: 1,
45                  slug: 'featured',
46                  text: 'Featured',
47                },
48                {
49                  depth: 1,
50                  slug: 'latest',
51                  text: 'Last Creations',
52                },
53              ]}
54            />
55          </aside>
56        </div>
57      </main>
58    </div>
59  </body>
60</html>