Replace getRelativeLink with getPermalink

src/components/common/ExtraMetaTags.astro

@@ -1,7 +1,7 @@
 ---
-import { getRelativeLink } from '~/utils/permalinks';
+import { getPermalink } from '~/utils/permalinks';
 ---
 
-<link rel="shortcut icon" href={getRelativeLink('/favicon.ico')} />
+<link rel="shortcut icon" href={getPermalink('/favicon.ico')} />
-<link rel="icon" type="image/svg+xml" href={getRelativeLink('/favicon.svg')} />
+<link rel="icon" type="image/svg+xml" href={getPermalink('/favicon.svg')} />
-<link rel="mask-icon" href={getRelativeLink('/favicon.svg')} color="#8D46E7" />
+<link rel="mask-icon" href={getPermalink('/favicon.svg')} color="#8D46E7" />

src/components/common/Pagination.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon';
-import { getRelativeLink } from '~/utils/permalinks';
+import { getPermalink } from '~/utils/permalinks';
 
 export interface Props {
 	prevUrl: string;
@@ -16,13 +16,13 @@ const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } =
 	(prevUrl || nextUrl) && (
 		<div class="container flex">
 			<div class="flex flex-row mx-auto container justify-between">
-				<a href={getRelativeLink(prevUrl)} class={`btn btn-ghost px-3 mr-2 ${!prevUrl ? 'invisible' : ''}`}>
+				<a href={getPermalink(prevUrl)} class={`btn btn-ghost px-3 mr-2 ${!prevUrl ? 'invisible' : ''}`}>
 					<div class="flex flex-row align-middle">
 						<Icon name="tabler:chevron-left" class="w-6 h-6" />
 						<p class="ml-2">{prevText}</p>
 					</div>
 				</a>
-				<a href={getRelativeLink(nextUrl)} class={`btn btn-ghost px-3 ${!nextUrl ? 'invisible' : ''}`}>
+				<a href={getPermalink(nextUrl)} class={`btn btn-ghost px-3 ${!nextUrl ? 'invisible' : ''}`}>
 					<div class="flex flex-row align-middle">
 						<span class="mr-2">{nextText}</span>
 						<Icon name="tabler:chevron-right" class="w-6 h-6" />

src/components/widgets/Footer.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon';
-import { getHomePermalink, getRelativeLink } from '~/utils/permalinks';
+import { getHomePermalink, getPermalink } from '~/utils/permalinks';
 
 const links = [
 	{
@@ -53,7 +53,7 @@ const social = [
 	{ label: 'Twitter', icon: 'tabler:brand-twitter', href: '#' },
 	{ label: 'Instagram', icon: 'tabler:brand-instagram', href: '#' },
 	{ label: 'Facebook', icon: 'tabler:brand-facebook', href: '#' },
-	{ label: 'RSS', icon: 'tabler:rss', href: getRelativeLink('/rss.xml') },
+	{ label: 'RSS', icon: 'tabler:rss', href: getPermalink('/rss.xml') },
 	{ label: 'Github', icon: 'tabler:brand-github', href: 'https://github.com/onwidget/astrowind' },
 ];
 ---

src/components/widgets/Header.astro

@@ -4,7 +4,7 @@ import Logo from '~/components/common/Logo.astro';
 import ToggleTheme from '~/components/common/ToggleTheme.astro';
 import ToggleMenu from '~/components/common/ToggleMenu.astro';
 
-import { getHomePermalink, getBlogPermalink, getPermalink, getRelativeLink } from '~/utils/permalinks';
+import { getHomePermalink, getBlogPermalink, getPermalink, getPermalink } from '~/utils/permalinks';
 ---
 
 <header
@@ -79,7 +79,7 @@ import { getHomePermalink, getBlogPermalink, getPermalink, getRelativeLink } fro
 					<a
 						class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
 						aria-label="RSS Feed"
-						href={getRelativeLink('/rss.xml')}
+						href={getPermalink('/rss.xml')}
 					>
 						<Icon name="tabler:rss" class="w-5 h-5" />
 					</a>

src/utils/permalinks.ts

@@ -11,7 +11,6 @@ const trim = (str = '', ch?: string) => {
 };
 
 const trimSlash = (s: string) => trim(trim(s, '/'));
-
 const createPath = (...params: string[]) => {
 	const paths = params.filter((el) => !!el).join('/');
 	return '/' + paths + (SITE.trailingSlash && paths ? '/' : '');
@@ -19,7 +18,11 @@ const createPath = (...params: string[]) => {
 
 const basePathname = trimSlash(SITE.basePathname);
 
-export const cleanSlug = (text: string) => slugify(trimSlash(text));
+export const cleanSlug = (text: string) =>
+	trimSlash(text)
+		.split('/')
+		.map((slug) => slugify(slug))
+		.join('/');
 
 export const BLOG_BASE = cleanSlug(BLOG?.blog?.pathname);
 export const POST_BASE = cleanSlug(BLOG?.post?.pathname);
@@ -31,33 +34,24 @@ export const getCanonical = (path = ''): string | URL => new URL(path, SITE.orig
 
 /** */
 export const getPermalink = (slug = '', type = 'page'): string => {
-	const _slug = cleanSlug(slug);
-
 	switch (type) {
 		case 'category':
-			return createPath(basePathname, CATEGORY_BASE, _slug);
+			return createPath(basePathname, CATEGORY_BASE, cleanSlug(slug));
 
 		case 'tag':
-			return createPath(basePathname, TAG_BASE, _slug);
+			return createPath(basePathname, TAG_BASE, cleanSlug(slug));
 
 		case 'post':
-			return createPath(basePathname, POST_BASE, _slug);
+			return createPath(basePathname, POST_BASE, cleanSlug(slug));
-
-		case 'page':
-		default:
-			return createPath(basePathname, _slug);
 	}
+
+	return createPath(basePathname, trimSlash(slug));
 };
 
 /** */
 export const getHomePermalink = (): string => {
 	const permalink = getPermalink();
-	return permalink !== '/' ? permalink + '/' : permalink;
+	return !permalink.startsWith('/') ? '/' + permalink : permalink;
-};
-
-/** */
-export const getRelativeLink = (link = ''): string => {
-	return createPath(basePathname, trimSlash(link));
 };
 
 /** */