From 8ca3b129dcf3c39eb967b7e68cf63f93c77aeb63 Mon Sep 17 00:00:00 2001
From: aleidk <ale.navarro.parra@gmail.com>
Date: Sat, 11 Nov 2023 18:48:50 -0300
Subject: [PATCH] Add basic pages for blog entries

---
 src/components/Toc/Toc.module.css |  0
 src/components/Toc/Toc.tsx        | 26 +++++++++++++++++++
 src/content                       |  2 +-
 src/pages/blog/[...slug].astro    | 26 +++++++++++++++++++
 src/pages/blog/index.astro        | 43 +++++++++++++++++++++++++++++++
 src/pages/index.astro             |  2 +-
 6 files changed, 97 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Toc/Toc.module.css
 create mode 100644 src/components/Toc/Toc.tsx
 create mode 100644 src/pages/blog/[...slug].astro
 create mode 100644 src/pages/blog/index.astro

diff --git a/src/components/Toc/Toc.module.css b/src/components/Toc/Toc.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Toc/Toc.tsx b/src/components/Toc/Toc.tsx
new file mode 100644
index 0000000..21e6d0b
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/content b/src/content
index 6b40694..9d81cb4 160000
--- a/src/content
+++ b/src/content
@@ -1 +1 @@
-Subproject commit 6b406948b70fa4c56333c0afc628e9b6618aacdc
+Subproject commit 9d81cb4b875538e54aea6be70f973442be55b0ea
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
new file mode 100644
index 0000000..577ff08
--- /dev/null
+++ b/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>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
new file mode 100644
index 0000000..efb693d
--- /dev/null
+++ b/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>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 82b2189..0d0d92b 100644
--- a/src/pages/index.astro
+++ b/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>