From 2afa6b1d6418d04a713c798854f28c781404fc1f Mon Sep 17 00:00:00 2001 From: prototypa Date: Tue, 30 Aug 2022 12:19:35 -0400 Subject: [PATCH] Add some slugify to permalinks --- package.json | 3 ++- src/pages/[...blog]/[...page].astro | 4 ++-- .../[category]/[...page].astro | 13 ++++++------ src/pages/[...tags]/[tag]/[...page].astro | 10 +++++----- src/utils/permalinks.js | 20 +++++++++++-------- 5 files changed, 28 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index 3615c92..ac141b9 100644 --- a/package.json +++ b/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" } } diff --git a/src/pages/[...blog]/[...page].astro b/src/pages/[...blog]/[...page].astro index c422a83..de1a7a5 100644 --- a/src/pages/[...blog]/[...page].astro +++ b/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, }); } diff --git a/src/pages/[...categories]/[category]/[...page].astro b/src/pages/[...categories]/[category]/[...page].astro index b35c745..cc5f695 100644 --- a/src/pages/[...categories]/[category]/[...page].astro +++ b/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 { category } = Astro.params; +const { page, category } = Astro.props; 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 = { - Category {category} + Category: {category} diff --git a/src/pages/[...tags]/[tag]/[...page].astro b/src/pages/[...tags]/[tag]/[...page].astro index fcd755c..dc45b49 100644 --- a/src/pages/[...tags]/[tag]/[...page].astro +++ b/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 { tag } = Astro.params; +const { page, tag } = Astro.props; const currentPage = page.currentPage ?? 1; @@ -39,7 +39,7 @@ const meta = { - Tag {tag} + Tag: {tag} diff --git a/src/utils/permalinks.js b/src/utils/permalinks.js index 3b1e4f0..7d96a4f 100644 --- a/src/utils/permalinks.js +++ b/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); -const tagBaseUrl = trim(BLOG?.tag?.slug); + +export const BLOG_BASE = slugify(trimSlash(BLOG.slug), { lower: true }); +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; -} \ No newline at end of file +} + +export const getSlug = (text) => slugify(text); \ No newline at end of file