fixed several rendering and linking issues

package.json

@@ -14,7 +14,6 @@
     "@astrojs/rss": "^4.0.1",
     "@astrojs/sitemap": "^3.0.0",
     "@astrojs/tailwind": "^5.0.0",
-    "@igor.dvlpr/astro-post-excerpt": "^2.1.0",
     "@tailwindcss/typography": "^0.5.10",
     "@xmldom/xmldom": "^0.8.10",
     "astro": "^3.0.12",

src/lib/utils.js

@@ -0,0 +1,20 @@
+import sanitizeHtml from "sanitize-html";
+import MarkdownIt from "markdown-it";
+
+export function generatePathFromPost(post) {
+  return `/blog/${
+    post.slug.split("/")[0] + "/" + post.slug.split("/").pop().split("_").pop()
+  }`;
+}
+
+export function createExcerpt(post) {
+  const parser = new MarkdownIt();
+  return parser.render(post)
+    .split('\n')
+    .slice(0, 8)
+    .map((str) => {
+        return str.replace(/<\/?[^>]+(>|$)/g, '').split('\n');
+    })
+    .flat()
+    .join(' ');
+}

src/pages/blog.astro

@@ -3,8 +3,9 @@ import { getCollection, getEntry } from "astro:content";
 import Container from "../components/layout/Container.astro";
 import PageHeader from "../components/layout/PageHeader.astro";
 import Layout from "../layouts/Layout.astro";
-import PostExcerpt from '@igor.dvlpr/astro-post-excerpt'
 import Icon from "astro-icon";
+import { generatePathFromPost, createExcerpt } from "../lib/utils"
+
 const posts = await getCollection("blog");
 posts.sort((a, b) => {
   const dateA = new Date(a.data.date);
@@ -63,14 +64,13 @@ const blogMenu = await getEntry('menus', 'blog');
     <div class="flex flex-col gap-8">
       {
         posts.reverse().map(async (post) => {
-          const { Content } = await post.render();
           return (
             <article data-category={post.slug.split("/")[0]} class="font-light" aria-hidden="false">
-              <a href={`/blog/${post.slug.split("/")[0] + "/" + post.slug.split("/").pop().split("_").pop()}`}>
+              <a href={generatePathFromPost(post)}>
                 <h2 class="text-4xl text-nixdarkblue font-heading font-extrabold">{post.data.title}</h2>
               </a>
-              <PostExcerpt post={post} />
               <p class="text-gray-700 text-xs mb-2">- Published on {post.data.date ? post.data.date.toDateString() : ""}</p>
+              <p>{createExcerpt(post.body)}...</p>
             </article>
           );
         })

src/pages/index.astro

@@ -5,14 +5,24 @@ import Button from "../components/ui/Button.astro";
 import NixosSearchInput from "../components/ui/NixosSearchInput.astro";
 import { getCollection } from "astro:content";
 import { Image } from "astro:assets";
+import { generatePathFromPost, createExcerpt } from "../lib/utils"
 const landingFeatures = await getCollection("landing-features");
+
+const posts = await getCollection("blog");
+posts.sort((a, b) => {
+  const dateA = new Date(a.data.date);
+  const dateB = new Date(b.data.date);
+  return dateA > dateB ? -1 : 1;
+}).filter((p) => {
+  return p.slug.split("/")?.[0] === "announcements";
+}).reverse();
 ---
 
 <Layout title="Nix & NixOS">
   <div class="bg-nixlighterblue">
     <Container class="flex flex-col md:flex-row items-center justify-between py-4">
-      <b class="text-nixsemidarkblue text-lg">NixOS 23.05 released.</b>
-      <Button>Announcement</Button>
+      <b class="text-nixsemidarkblue text-lg">{posts[0].data.title}</b>
+      <Button href={generatePathFromPost(posts[0])}>Announcement</Button>
     </Container>
   </div>
   <div class="bg-[url('/hero-bg.svg')] bg-cover bg-no-repeat bg-left">
@@ -27,8 +37,8 @@ const landingFeatures = await getCollection("landing-features");
           reliable systems.
         </p>
         <div class="flex flex-col md:flex-row justify-stretch gap-4">
-          <Button color="green" size="lg">Download</Button>
-          <Button color="lightblue" size="lg">Get Started</Button>
+          <Button href="/download" color="green" size="lg">Download</Button>
+          <Button href="/learn" color="lightblue" size="lg">Get Started</Button>
         </div>
       </div>
     </Container>

src/pages/learn.astro

@@ -49,7 +49,7 @@ const { data: learningResources } = await getEntry('learning', 'resources');
         return (
           <div class="border-0.5 border-nixdarkerblue rounded-2xl p-4 flex flex-col gap-4 justify-start items-center">
             <article>
-              <img src="/doc-icon.svg" class="h-20 w-20 float-left inline pr-4 pb-4" />
+              <img src="/doc-icon.svg" class="pl-0 h-20 w-20 float-left inline pr-4 pb-4" />
               <h2 class="text-4xl text-nixdarkblue font-heading font-extrabold leading-none mb-4">
                 {manual.data.title}
               </h2>

src/styles/base.css

@@ -16,23 +16,27 @@
     }
 
     article ul {
-        @apply list-circle list-inside mb-4;
+        @apply list-circle list-outside mb-4 ml-6;
     }
 
     article ul > li > ul {
-        @apply list-disc list-inside ml-4;
+        @apply list-disc list-outside;
     }
 
     article ul > li > p:first-child {
-        @apply ml-0 inline-block;
+        @apply ml-0 inline;
     }
 
     article ul > li > p {
-        @apply ml-5 block;
+        @apply block;
     }
 
     article ul.inlinelist {
-        @apply list-none flex flex-col ml-6 mb-0;
+        @apply list-none flex flex-col ml-0 mb-0;
+    }
+
+    article ul.inlinelist ul {
+        @apply ml-0;
     }
 
     article ul.inlinelist li {
@@ -90,18 +94,18 @@
     }
 
     article h1 {
-        @apply text-4xl mb-4;
+        @apply text-4xl mb-2;
     }
 
     article h2 {
-        @apply text-3xl mb-4;
+        @apply text-3xl mb-2;
     }
 
     article h3 {
-        @apply text-2xl mb-4;
+        @apply text-2xl mb-2;
     }
 
     article h4 {
-        @apply text-xl mb-4;
+        @apply text-xl mb-2;
     }
 }