use filename as slug

ezzabuzaid · Nov 13, 2023 · ce0e58b · ce0e58b
1 parent 058ec38
commit ce0e58b
Show file tree

Hide file tree

Showing 12 changed files with 35 additions and 70 deletions.
diff --git a/src/components/PostLine.astro b/src/components/PostLine.astro
@@ -1,6 +1,5 @@
 ---
 import type { CollectionEntry } from "astro:content";
-import slugify from "../utils/slugify";
 import Datetime from "./Datetime";
 
 export interface Props {
@@ -13,11 +12,7 @@ const { data } = post;
 
 <li class="my-1 space-y-4">
   <h2 class="text-4xl font-semibold decoration-dashed hover:underline">
-    <a
-      rel="prefetch"
-      class="flex w-full sm:w-9/12"
-      href={`/posts/${slugify(data)}`}
-    >
+    <a rel="prefetch" class="flex w-full sm:w-9/12" href={`/posts/${post.id}`}>
       {data.title}
     </a>
   </h2>

diff --git a/src/components/Search.tsx b/src/components/Search.tsx
@@ -1,17 +1,14 @@
 import Card from "@components/Card";
-import type { BlogFrontmatter } from "@content/_schemas";
-import slugify from "@utils/slugify";
 import Fuse from "fuse.js";
 import { useEffect, useMemo, useRef, useState } from "react";
-
-export type SearchItem = BlogFrontmatter;
+import type { BlogContentType } from "../utils/getPosts";
 
 interface Props {
-  searchList: SearchItem[];
+  searchList: BlogContentType[];
 }
 
 interface SearchResult {
-  item: SearchItem;
+  item: BlogContentType;
   refIndex: number;
 }
 
@@ -116,9 +113,9 @@ export default function SearchBar({ searchList }: Props) {
         {searchResults &&
           searchResults.map(({ item, refIndex }) => (
             <Card
-              href={`/posts/${slugify(item)}`}
-              frontmatter={item}
-              key={`${refIndex}-${slugify(item)}`}
+              href={`/posts/${item.id}`}
+              frontmatter={item.data}
+              key={`${refIndex}-${item.id}`}
             />
           ))}
       </ul>

diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
@@ -2,7 +2,6 @@
 import { LOGO_IMAGE, SITE } from "@config";
 
 import getSortedPosts from "@utils/getSortedPosts";
-import slugify from "@utils/slugify";
 import { Image } from "astro:assets";
 import logoSVG from "../assets/logo.svg";
 import SearchBar from "./Search";
@@ -35,7 +34,7 @@ const posts = await getPublishedPosts();
 </section>
 
 <div class="my-2"></div>
-<SearchBar client:load searchList={posts.map(it => it.data)} />
+<SearchBar client:load searchList={posts} />
 <div class="my-2"></div>
 <p class="mb-2 font-bold">Connect:</p>
 <Socials />
@@ -56,8 +55,8 @@ const posts = await getPublishedPosts();
   <p class="mb-2 font-bold">Featured Posts:</p>
   <ul>
     {
-      featuredPosts.map(({ data }) => (
-        <Card href={`/posts/${slugify(data)}`} frontmatter={data} />
+      featuredPosts.map(post => (
+        <Card href={`/posts/${post.id}`} frontmatter={post.data} />
       ))
     }
   </ul>
@@ -69,9 +68,9 @@ const posts = await getPublishedPosts();
   <ul>
     {
       restPosts.map(
-        ({ data }, index) =>
+        (post, index) =>
           index < 4 && (
-            <Card href={`/posts/${slugify(data)}`} frontmatter={data} />
+            <Card href={`/posts/${post.id}`} frontmatter={post.data} />
           )
       )
     }

diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro
@@ -30,7 +30,7 @@ const ogUrl = new URL(ogImage ? ogImage : `${title}.png`, Astro.url.origin)
 const devMode = import.meta.env.DEV;
 ---
 
-{devMode && <Chat client:only post={post.data.title} />}
+{devMode && <Chat client:only post={post.id} />}
 
 <Layout
   title={title}

diff --git a/src/layouts/Posts.astro b/src/layouts/Posts.astro
@@ -3,7 +3,6 @@ import Card from "@components/Card";
 import { SITE } from "@config";
 import Layout from "@layouts/Layout.astro";
 import Main from "@layouts/Main.astro";
-import slugify from "@utils/slugify";
 import type { CollectionEntry } from "astro:content";
 
 export interface Props {
@@ -17,8 +16,8 @@ const { posts } = Astro.props;
   <Main pageTitle="Posts" pageDesc="All the articles I've posted.">
     <ul>
       {
-        posts.map(({ data }) => (
-          <Card href={`/posts/${slugify(data)}`} frontmatter={data} />
+        posts.map(post => (
+          <Card href={`/posts/${post.id}`} frontmatter={post.data} />
         ))
       }
     </ul>

diff --git a/src/pages/posts/[slug].astro b/src/pages/posts/[slug].astro
@@ -2,7 +2,6 @@
 import PostDetails from "@layouts/PostDetails.astro";
 import Posts from "@layouts/Posts.astro";
 import getSortedPosts from "@utils/getSortedPosts";
-import slugify from "@utils/slugify";
 import { type CollectionEntry } from "astro:content";
 import { getPublishedPosts } from "../../utils/getPosts";
 
@@ -14,30 +13,17 @@ export async function getStaticPaths() {
   const posts = await getPublishedPosts();
 
   const postResult = posts.map(post => ({
-    params: { slug: slugify(post.data) },
+    params: { slug: post.id },
     props: { post },
   }));
 
-
-  return [...postResult, ];
+  return [...postResult];
 }
 
 const { slug } = Astro.params;
 const { post } = Astro.props;
 
 const sortedPosts = await getSortedPosts();
-
-
-
-
 ---
 
-{
-  post ? (
-    <PostDetails post={post} />
-  ) : (
-    <Posts
-      posts={sortedPosts}
-    />
-  )
-}
+{post ? <PostDetails post={post} /> : <Posts posts={sortedPosts} />}
diff --git a/src/pages/recipes/[slug].astro b/src/pages/recipes/[slug].astro
@@ -2,7 +2,6 @@
 import PostDetails from "@layouts/PostDetails.astro";
 import Posts from "@layouts/Posts.astro";
 import getSortedPosts from "@utils/getSortedPosts";
-import slugify from "@utils/slugify";
 import { type CollectionEntry } from "astro:content";
 import { getPublishedPosts } from "../../utils/getPosts";
 
@@ -14,11 +13,10 @@ export async function getStaticPaths() {
   const posts = await getPublishedPosts();
 
   const postResult = posts.map(post => ({
-    params: { slug: slugify(post.data) },
+    params: { slug: post.id },
     props: { post },
   }));
 
-
   return [...postResult];
 }
 
@@ -28,12 +26,4 @@ const { post } = Astro.props;
 const sortedPosts = await getSortedPosts();
 ---
 
-{
-  post ? (
-    <PostDetails post={post} />
-  ) : (
-    <Posts
-      posts={sortedPosts}
-    />
-  )
-}
+{post ? <PostDetails post={post} /> : <Posts posts={sortedPosts} />}
diff --git a/src/pages/recipes/index.astro b/src/pages/recipes/index.astro
@@ -4,7 +4,6 @@ import { SITE } from "@config";
 import Layout from "@layouts/Layout.astro";
 import Main from "@layouts/Main.astro";
 import getSortedPosts from "@utils/getSortedPosts";
-import slugify from "@utils/slugify";
 import type { CollectionEntry } from "astro:content";
 
 export interface Props {
@@ -24,8 +23,8 @@ const sortedPosts = (await getSortedPosts()).filter(post =>
   >
     <ul>
       {
-        sortedPosts.map(({ data }) => (
-          <Card href={`/posts/${slugify(data)}`} frontmatter={data} />
+        sortedPosts.map(post => (
+          <Card href={`/posts/${post.id}`} frontmatter={post.data} />
         ))
       }
     </ul>

diff --git a/src/pages/rss.xml.ts b/src/pages/rss.xml.ts
@@ -1,19 +1,18 @@
 import rss from "@astrojs/rss";
 import { SITE } from "@config";
 import getSortedPosts from "@utils/getSortedPosts";
-import slugify from "@utils/slugify";
 
 export async function get() {
   const sortedPosts = await getSortedPosts();
   return rss({
     title: SITE.title,
     description: SITE.desc,
     site: SITE.website,
-    items: sortedPosts.map(({ data }) => ({
-      link: `posts/${slugify(data)}`,
-      title: data.title,
-      description: data.description,
-      pubDate: new Date(data.pubDatetime),
+    items: sortedPosts.map(post => ({
+      link: `posts/${post.id}`,
+      title: post.data.title,
+      description: post.data.description,
+      pubDate: new Date(post.data.pubDatetime),
     })),
   });
 }
diff --git a/src/pages/search.astro b/src/pages/search.astro
@@ -10,6 +10,6 @@ const posts = await getPublishedPosts();
 
 <Layout title={`Search | ${SITE.title}`}>
   <Main pageTitle="Search" pageDesc="Search any article ...">
-    <SearchBar client:load searchList={posts.map(it => it.data)} />
+    <SearchBar client:load searchList={posts} />
   </Main>
 </Layout>
diff --git a/src/pages/tags/[tag].astro b/src/pages/tags/[tag].astro
@@ -6,7 +6,6 @@ import Main from "@layouts/Main.astro";
 import getPostsByTag from "@utils/getPostsByTag";
 import getSortedPosts from "@utils/getSortedPosts";
 import getUniqueTags from "@utils/getUniqueTags";
-import slugify from "@utils/slugify";
 import { type CollectionEntry } from "astro:content";
 import { getPublishedPosts } from "../../utils/getPosts";
 
@@ -39,8 +38,8 @@ const tagPosts = getPostsByTag(sortTagsPost, tag);
   >
     <ul>
       {
-        tagPosts.map(({ data }) => (
-          <Card href={`/posts/${slugify(data)}`} frontmatter={data} />
+        tagPosts.map(post => (
+          <Card href={`/posts/${post.id}`} frontmatter={post.data} />
         ))
       }
     </ul>

diff --git a/src/utils/getPosts.ts b/src/utils/getPosts.ts
@@ -1,8 +1,10 @@
 import { getCollection, type CollectionEntry } from "astro:content";
 
+export type BlogContentType = CollectionEntry<"blog">;
+
 export async function getPosts(
-  filter?: (entry: CollectionEntry<"blog">) => boolean
-) {
+  filter?: (entry: BlogContentType) => boolean
+): Promise<BlogContentType[]> {
   const posts = await getCollection("blog", filter);
   for (const post of posts) {
     const {
@@ -13,6 +15,6 @@ export async function getPosts(
   return posts;
 }
 
-export function getPublishedPosts() {
+export function getPublishedPosts(): Promise<BlogContentType[]> {
   return getPosts(({ data }) => (import.meta.env.DEV ? true : !data.draft));
 }