Add some slugify to permalinks

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@onwidget/astrowind",
   "description": "A template to make your website using Astro + Tailwind CSS.",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "dev": "astro dev",
@@ -19,6 +19,7 @@
     "astro": "^1.0.0",
     "astro-icon": "^0.7.3",
     "reading-time": "^1.5.0",
+    "slugify": "^1.6.5",
     "subfont": "^6.9.0"
   }
 }

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

@@ -4,7 +4,7 @@ import { fetchPosts } from "~/utils/fetchPosts";
 import Layout from "~/layouts/BlogLayout.astro";
 import BlogList from "~/components/widgets/BlogList.astro";
 import Pagination from "~/components/widgets/Pagination.astro";
-import { getCanonical, getPermalink } from "~/utils/permalinks";
+import { getCanonical, getPermalink, BLOG_BASE } from "~/utils/permalinks";
 
 
 export async function getStaticPaths({ paginate }) {
@@ -13,7 +13,7 @@ export async function getStaticPaths({ paginate }) {
   const posts = await fetchPosts();
 
   return paginate(posts, {
-    params: { blog: BLOG?.slug || undefined },
+    params: { blog: BLOG_BASE || undefined },
     pageSize: BLOG.postsPerPage,
   });
 }

src/pages/[...categories]/[category]/[...page].astro

@@ -1,10 +1,11 @@
 ---
+
 import { SITE, BLOG } from "~/config.mjs";
 import { fetchPosts } from "~/utils/fetchPosts";
 import Layout from "~/layouts/BlogLayout.astro";
 import BlogList from "~/components/widgets/BlogList.astro";
 import Pagination from "~/components/widgets/Pagination.astro";
-import { getCanonical, getPermalink } from "~/utils/permalinks";
+import { getCanonical, getPermalink, getSlug, CATEGORY_BASE } from "~/utils/permalinks";
 
 
 export async function getStaticPaths({ paginate }) {
@@ -19,19 +20,19 @@ export async function getStaticPaths({ paginate }) {
 
   return Array.from(categories).map((category) => (
     paginate(posts.filter((post) => typeof post.category === "string" && category === post.category.toLowerCase()), {
-      params: { category, categories: BLOG?.category?.slug || undefined },
+      params: { category: getSlug(category), categories: CATEGORY_BASE || undefined },
       pageSize: BLOG.postsPerPage,
+      props: { category }
     })
   ))
 }
 
-const { page } = Astro.props;
+const { page, category } = Astro.props;
-const { category } = Astro.params;
 
 const currentPage = page.currentPage ?? 1;
 
 const meta = {
-  title: `Category ${category} ${currentPage > 1 ? `— Page ${currentPage} ` : ""}— ${SITE.name}`,
+  title: `Category '${category}' ${currentPage > 1 ? `— Page ${currentPage} ` : ""}— ${SITE.name}`,
   description: SITE.description,
   canonical: getCanonical(getPermalink(page.url.current))
 }
@@ -39,7 +40,7 @@ const meta = {
 
 <Layout meta={{ ...meta, noindex: true }}>
   <Fragment slot="title">
-    Category {category}
+    Category: {category}
   </Fragment>
   <BlogList page={page} />
   <Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />

src/pages/[...tags]/[tag]/[...page].astro

@@ -4,7 +4,7 @@ import { fetchPosts } from "~/utils/fetchPosts";
 import Layout from "~/layouts/BlogLayout.astro";
 import BlogList from "~/components/widgets/BlogList.astro";
 import Pagination from "~/components/widgets/Pagination.astro";
-import { getCanonical, getPermalink } from "~/utils/permalinks";
+import { getCanonical, getPermalink, getSlug, TAG_BASE } from "~/utils/permalinks";
 
 
 export async function getStaticPaths({ paginate }) {
@@ -19,14 +19,14 @@ export async function getStaticPaths({ paginate }) {
 
   return Array.from(tags).map((tag) => (
     paginate(posts.filter((post) => Array.isArray(post.tags) && post.tags.includes(tag)), {
-      params: { tag, tags: BLOG?.tag?.slug || undefined },
+      params: { tag: getSlug(tag), tags: TAG_BASE || undefined },
       pageSize: BLOG.postsPerPage,
+      props: { tag },
     })
   ))
 }
 
-const { page } = Astro.props;
+const { page, tag } = Astro.props;
-const { tag } = Astro.params;
 
 const currentPage = page.currentPage ?? 1;
 
@@ -39,7 +39,7 @@ const meta = {
 
 <Layout meta={{ ...meta, noindex: true }}>
   <Fragment slot="title">
-    Tag {tag}
+    Tag: {tag}
   </Fragment>
   <BlogList page={page} />
   <Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />

src/utils/permalinks.js

@@ -1,3 +1,4 @@
+import slugify from 'slugify'
 import { SITE, BLOG } from "~/config.mjs";
 
 const trim = (str, ch) => {
@@ -13,9 +14,10 @@ const trimSlash = (s) => trim(s, "/");
 const createPath = (...params) =>  "/" + params.filter((el) => !!el).join("/")
 
 const baseUrl = trimSlash(SITE.baseUrl);
-const blogBaseUrl = trimSlash(BLOG.slug);
+
-const categoryBaseUrl = trim(BLOG?.category?.slug);
+export const BLOG_BASE = slugify(trimSlash(BLOG.slug), { lower: true });
-const tagBaseUrl = trim(BLOG?.tag?.slug);
+export const CATEGORY_BASE = slugify(trim(BLOG?.category?.slug), { lower: true });
+export const TAG_BASE = slugify(trim(BLOG?.tag?.slug), { lower: true });
 
 const cleanSlug = (slug) => trimSlash(slug);
 
@@ -26,13 +28,13 @@ export const getPermalink = (slug = "", type = "page") => {
 
   switch (type) {
     case "category":
-      return createPath(baseUrl, categoryBaseUrl, _slug)
+      return createPath(baseUrl, CATEGORY_BASE, _slug)
 
     case "tag":
-      return createPath(baseUrl, tagBaseUrl, _slug)
+      return createPath(baseUrl, TAG_BASE, _slug)
 
     case "post":
-      return createPath(baseUrl, BLOG.postsWithoutBlogSlug ? "" : blogBaseUrl, _slug);
+      return createPath(baseUrl, BLOG.postsWithoutBlogSlug ? "" : BLOG_BASE, _slug);
 
     case "page":
     default:
@@ -40,8 +42,10 @@ export const getPermalink = (slug = "", type = "page") => {
   }
 };
 
-export const getBlogPermalink = () => getPermalink(blogBaseUrl);
+export const getBlogPermalink = () => getPermalink(BLOG_BASE);
 export const getHomePermalink = () => {
   const permalink = getPermalink();
   return permalink !== "/" ? permalink + "/" : permalink;
 }
+
+export const getSlug = (text) => slugify(text);