same thread posts

vorant94 · Oct 17, 2023 · 85e23a2 · 85e23a2
1 parent b5affc1
commit 85e23a2
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 39 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/blog/package.json b/packages/blog/package.json
@@ -36,6 +36,7 @@
     "cssnano": "^6.0.1",
     "postcss": "^8.4.30",
     "postcss-load-config": "^4.0.1",
+    "postcss-nested": "^6.0.1",
     "typescript": "^5.2.2"
   }
 }
diff --git a/packages/blog/postcss.config.cjs b/packages/blog/postcss.config.cjs
@@ -1,4 +1,8 @@
 /** @type {import('postcss-load-config').Config} */
 module.exports = {
-  plugins: [require('autoprefixer'), require('cssnano')],
+  plugins: [
+    require('autoprefixer'),
+    require('cssnano'),
+    require('tailwindcss/nesting')(require('postcss-nested')),
+  ],
 };
diff --git a/packages/blog/src/components/Intro.astro b/packages/blog/src/components/Intro.astro
@@ -2,9 +2,10 @@
 import { Image } from 'astro:assets';
 import logoIntro from '../images/logo-intro.png';
 import { DESCRIPTION } from '../shared/intro-texts.js';
+import StandOut from './StandOut.astro';
 ---
 
-<section class="border rounded-md p-5 m-3 flex gap-3 items-center">
+<StandOut class="items-center">
   <div class="hidden lg:block shrink-0">
     <Image
       src={logoIntro}
@@ -24,4 +25,4 @@ import { DESCRIPTION } from '../shared/intro-texts.js';
        read
     </span>
   </div>
-</section>
+</StandOut>
diff --git a/packages/blog/src/components/StandOut.astro b/packages/blog/src/components/StandOut.astro
@@ -0,0 +1,11 @@
+---
+import { type HTMLAttributes } from 'astro/types';
+
+interface Props extends Pick<HTMLAttributes<'section'>, 'class'> {}
+
+const { class: moreClasses } = Astro.props;
+---
+
+<section class:list={['border rounded-md p-5 m-3 flex gap-3', moreClasses]}>
+  <slot />
+</section>
diff --git a/packages/blog/src/layouts/Layout.astro b/packages/blog/src/layouts/Layout.astro
@@ -73,7 +73,7 @@ const ogImage = new URL(image ?? '/favicon.ico', Astro.site);
 
     <Header />
 
-    <main class="flex-1 p-4 flex flex-col">
+    <main class="flex-1 p-4 flex flex-col gap-2">
       <slot />
     </main>
 

diff --git a/packages/blog/src/pages/about.astro b/packages/blog/src/pages/about.astro
@@ -11,40 +11,38 @@ const links = await getCollection('links');
 <Layout title="About">
   <Intro />
 
-  <div class="flex flex-col gap-2">
-    <Divider>
-      <h3 class="text-2xl">Stay up to date</h3>
-    </Divider>
+  <Divider>
+    <h3 class="text-2xl">Stay up to date</h3>
+  </Divider>
 
-    <p>
-      If you wish to be up to date with new posts you can
-      <Link
-        href="/rss.xml"
-        target="_blank">
-        <span class="text-gray-500"> subscribe with RSS</span>
-      </Link>
-    </p>
+  <p>
+    If you wish to be up to date with new posts you can
+    <Link
+      href="/rss.xml"
+      target="_blank">
+      <span class="text-gray-500"> subscribe with RSS</span>
+    </Link>
+  </p>
 
-    <p>There will also be an email newsletter somewhere in the future</p>
+  <p>There will also be an email newsletter somewhere in the future</p>
 
-    <Divider>
-      <h3 class="text-2xl">How to reach me</h3>
-    </Divider>
+  <Divider>
+    <h3 class="text-2xl">How to reach me</h3>
+  </Divider>
 
-    <ul class="grid grid-cols-3 gap-5 mx-auto">
-      {
-        links.map(({ data }) => (
-          <li>
-            <a
-              class="rounded-2xl w-24 h-24 border flex flex-col gap-2 items-center justify-center hover:outline outline-blue-500 hover:text-blue-500 p-2"
-              href={data.url}
-              target="_blank">
-              <i class={`fa-brands ${data.icon} text-xl`} />
-              <span class="truncate max-w-full">{data.label}</span>
-            </a>
-          </li>
-        ))
-      }
-    </ul>
-  </div>
+  <ul class="grid grid-cols-3 gap-5 mx-auto">
+    {
+      links.map(({ data }) => (
+        <li>
+          <a
+            class="rounded-2xl w-24 h-24 border flex flex-col gap-2 items-center justify-center hover:outline outline-blue-500 hover:text-blue-500 p-2"
+            href={data.url}
+            target="_blank">
+            <i class={`fa-brands ${data.icon} text-xl`} />
+            <span class="truncate max-w-full">{data.label}</span>
+          </a>
+        </li>
+      ))
+    }
+  </ul>
 </Layout>
diff --git a/packages/blog/src/pages/posts/[...slug].astro b/packages/blog/src/pages/posts/[...slug].astro
@@ -5,17 +5,34 @@ import { getImage } from 'astro:assets';
 import Comments from '../../components/Comments.astro';
 import { Post } from '../../shared/post.js';
 import PostContent from '../../components/PostContent.astro';
+import PostList from '../../components/PostList.astro';
+import StandOut from '../../components/StandOut.astro';
 
 export async function getStaticPaths() {
-  const entries = await getCollection('posts');
+  const entries = Post.sortEntries(await getCollection('posts'));
 
   return await Promise.all(
     entries.map(async (entry) => {
       const post = await Post.fromEntry(entry);
 
+      let sameThreadPosts: Post[] = [];
+      if (entry.data.thread) {
+        const sameThreadEntries = entries.filter((e) => {
+          // non-null assertion is a type gymnastic only to pass
+          // astro check since we anyway are inside if block
+          return (
+            e.id !== entry.id && e.data.thread?.id === entry.data.thread!.id
+          );
+        });
+
+        sameThreadPosts = await Promise.all(
+          sameThreadEntries.map((e) => Post.fromEntry(e)),
+        );
+      }
+
       return {
         params: { slug: post.slug },
-        props: { entry, post },
+        props: { entry, post, sameThreadPosts },
       };
     }),
   );
@@ -24,9 +41,10 @@ export async function getStaticPaths() {
 interface Props {
   entry: CollectionEntry<'posts'>;
   post: Post;
+  sameThreadPosts: Post[];
 }
 
-const { entry, post } = Astro.props;
+const { entry, post, sameThreadPosts } = Astro.props;
 
 const { coverImage } = entry.data;
 const { title } = post;
@@ -46,5 +64,35 @@ if (coverImage) {
     post={post}
   />
 
+  {
+    sameThreadPosts.length > 0 && (
+      <StandOut class="flex-col">
+        <details>
+          <summary class="text-lg font-medium hover:cursor-pointer">
+            More from this thread
+          </summary>
+          <PostList posts={sameThreadPosts} />
+        </details>
+      </StandOut>
+    )
+  }
+
   <Comments post={post} />
 </Layout>
+
+<style>
+  details {
+    > summary {
+      list-style-type: none;
+
+      &::before {
+        font-family: 'Font Awesome 6 Free';
+        content: '\f0d7';
+      }
+    }
+
+    &[open] > summary::before {
+      content: '\f0d8';
+    }
+  }
+</style>