1---
2import BlogPost from '../components/BlogPost.astro';
3import HeadCommon from '../components/HeadCommon.astro';
4import HeadSEO from '../components/HeadSEO.astro';
5import Header from '../components/Header/Header.astro';
6import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
7import PageContent from '../components/PageContent/PageContent.astro';
8import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
9import { getCollection } from 'astro:content';
10import { compareDesc } from 'date-fns';
11import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
12const currentPage = Astro.url.pathname;
13
14const posts = (await getCollection('blog')).sort((a, b) => compareDesc(a.data.date, b.data.date));
15---
16
17<html dir={'ltr'} lang={'en'} class="initial dark">
18  <head>
19    <HeadCommon />
20    <!-- <HeadSEO frontmatter={frontmatter} canonicalUrl={canonicalURL} /> -->
21    <title>🌀 Strudel Blog</title>
22  </head>
23
24  <body class="h-app-height text-gray-50 bg-background">
25    <div class="w-full h-full space-y-4 flex flex-col">
26      <header class="max-w-full fixed top-0 w-full z-[100]">
27        <Header currentPage={currentPage} />
28      </header>
29      <main class="relative pt-16">
30        <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">
31          <aside title="Site Navigation" class="w-[300px] px-6 left-0 hidden md:block fixed h-full">
32            <LeftSidebar currentPage={currentPage} />
33          </aside>
34          <PageContent>
35            <div class="border-b-4 border-lineHighlight py-4">
36              <h1>Strudel Blog</h1>
37              <p>
38                Welcome to the Strudel Blog, where we will keep you updated with the latest changes and things happening
39                in the strudelsphere. You can subscribe to this blog using <a target="_blank" href="/rss.xml"
40                  >this rss link</a
41                >
42              </p>
43            </div>
44            <div class="space-y-8">
45              {posts.map((post) => <BlogPost post={post} />)}
46            </div>
47          </PageContent>
48          <aside class="fixed right-0 h-full overflow-auto pr-4 pl-0 pb-16 hidden xl:block" title="Table of Contents">
49            <RightSidebar
50              headings={posts.map((post) => ({
51                depth: 1,
52                slug: post.slug,
53                text: post.data.title,
54              }))}
55            />
56          </aside>
57        </div>
58      </main>
59    </div>
60  </body>
61</html>