Add basic pages for blog entries

src/components/Toc/Toc.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { MarkdownHeading } from 'astro';
+// import styles from './Toc.module.css';
+
+interface Props {
+  headings: MarkdownHeading[];
+}
+
+// TODO: Change this for the floating container with Intersection Observer
+// FIXME: Create real nesting and not the ilussion of nesting (aka nested ul and not padding multiplied by depth)
+export default function Toc({ headings }: Props): JSX.Element {
+  return (
+    <ul className="mb-3">
+      {headings.map((item, idx) => (
+        <li
+          key={idx}
+          style={{ paddingLeft: item.depth > 1 ? 20 * item.depth : 0 }}
+        >
+          <a href={`#${item.slug}`}>
+            {item.depth} - {item.text}
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+}

src/content

@@ -1 +1 @@
-Subproject commit 6b406948b70fa4c56333c0afc628e9b6618aacdc
+Subproject commit 9d81cb4b875538e54aea6be70f973442be55b0ea

src/pages/blog/[...slug].astro

@@ -0,0 +1,26 @@
+---
+import type { InferGetStaticPropsType, GetStaticPaths } from 'astro';
+import { getCollection } from 'astro:content';
+import Layout from '@layouts/Layout.astro';
+import Toc from '@components/Toc/Toc';
+
+export const getStaticPaths = (async () => {
+  const entries = await getCollection('blog');
+
+  return entries.map((entry) => ({
+    params: { slug: entry.slug },
+    props: entry,
+  }));
+}) satisfies GetStaticPaths;
+
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+
+const entry = Astro.props;
+const { Content, headings } = await entry.render();
+---
+
+<Layout title={entry.data.title}>
+  <Toc headings={headings} />
+
+  <Content />
+</Layout>

src/pages/blog/index.astro

@@ -0,0 +1,43 @@
+---
+import { getCollection } from 'astro:content';
+import Layout from '@layouts/Layout.astro';
+import Table from '@components/Table';
+import { HeaderType, type Header } from '@components/Table/types';
+
+const rawEntries = await getCollection('blog', ({ data }) => {
+  return import.meta.env.PROD ? data.draft !== true : true;
+});
+
+const entries = rawEntries.map((item, idx) => ({
+  ...item.data,
+  id: idx + 1,
+  slug: item.slug,
+}));
+
+const headers: Header[] = [
+  {
+    key: 'id',
+    header: 'index',
+    type: HeaderType.Index,
+  },
+  {
+    key: 'title',
+    header: 'Title',
+    formatter: (data) => `<a href="blog/${data.slug}">${data.title}</a>`,
+    type: HeaderType.String,
+  },
+  {
+    key: 'tags',
+    header: 'Tags',
+    type: HeaderType.Multiple,
+  },
+];
+---
+
+<Layout title="List of blog entries">
+  <h1>Blog's entries</h1>
+
+  <section>
+    <Table client:load data={entries} headers={headers} />
+  </section>
+</Layout>

src/pages/index.astro

@@ -59,7 +59,7 @@ const games = await getCollection('games', (_, idx) => idx < 3);
           </li>
         </ul>
         <div slot="footer" class="text-end">
-          <a href="">See more...</a>
+          <a href="/blog">See more...</a>
         </div>
       </Card>