mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add some slugify to permalinks

Browse Source
This commit is contained in:
prototypa
2022-08-30 12:19:35 -04:00
parent 2912a796a7
commit 2afa6b1d64
5 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -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"
}
}

4
src/pages/[...blog]/[...page].astro
View File

@ -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,
});
}

13
src/pages/[...categories]/[category]/[...page].astro
View File

@ -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 = {
<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} />

10
src/pages/[...tags]/[tag]/[...page].astro
View File

@ -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 = {
<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} />

20
src/utils/permalinks.js
View File

@ -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;
}
}
export const getSlug = (text) => slugify(text);