Support for spaces in tags and categories

FusionAuth · Aug 11, 2023 · 10ad5bb · 10ad5bb
1 parent bdd3786
commit 10ad5bb
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 18 deletions.
diff --git a/astro/src/layouts/Blog.astro b/astro/src/layouts/Blog.astro
@@ -14,17 +14,17 @@ let { frontmatter, title } = Astro.props;
 
 title = frontmatter.title ? frontmatter.title : title;
 const description = frontmatter.description ? frontmatter.description : '';
-const categories = frontmatter.categories ? frontmatter.categories.split(' ') : [];
+const categories = frontmatter.categories ? frontmatter.categories.split(',').map(cat => cat.trim()) : [];
 const image = frontmatter.image ? frontmatter.image : '/img/blogs/header-example.svg';
 const authors = frontmatter.authors ? frontmatter.authors.split(',').map(author => author.trim()) : [];
 const publishedDate = frontmatter.publish_date;
 const updatedDate = frontmatter.updated_date;
-const tags = frontmatter.tags ? frontmatter.tags.split(' ') : [];
+const tags = frontmatter.tags ? frontmatter.tags.split(',').map(tag => tag.trim()) : [];
 const featuredTag = frontmatter.featured_tag ? frontmatter.featured_tag : tags ? tags[0] : 'passwords';
 const featuredCategory = frontmatter.featured_category ? frontmatter.featured_category : categories ? categories[0] : 'tutorials';
 
 const mapToCategory = (collection, category) => collection.filter(blog => blog.data && blog.data.categories && blog.data.categories.includes(category));
-const mapToTag = (collection, tag) => collection.filter(blog => blog.data && blog.data.tags && blog.data.tags.split(' ').includes(tag));
+const mapToTag = (collection, tag) => collection.filter(blog => blog.data && blog.data.tags && blog.data.tags.split(',').includes(tag));
 
 const collection = await getCollection('blog');
 
@@ -70,7 +70,7 @@ const markdownStyles = [
     <div class="mb-10 mt-7 md:pr-40 lg:pr-48">
       <ul class="capitalize font-bold inline-block mb-3 text-base text-indigo-500">
         { categories && categories.map(category =>
-          <a href={"/blog/category/" + category + "/"}>
+          <a href={"/blog/category/" + category.replaceAll(' ', '-').toLowerCase() + "/"}>
             <li class="inline-block mr-3">{ category }</li>
           </a>
         )}
@@ -136,7 +136,7 @@ const markdownStyles = [
                 <ul class="flex-wrap inline-flex items-center ml-4 self-start md:ml-12 lg:ml-12">
                   { tags && tags.map((tag, idx, arr) =>
                     <span>
-                      <a href={"/blog/tag/" + tag + "/" } class="hover:decoration-auto hover:underline hover:underline-offset-2 inline-block mt-1 text-indigo-600">
+                      <a href={"/blog/tag/" + tag.replaceAll(' ', '-') + "/" } class="hover:decoration-auto hover:underline hover:underline-offset-2 inline-block mt-1 text-indigo-600">
                         <li class="text-base">{ tag }</li>
                       </a>{ idx + 1 < arr.length && <span class="mr-1">,</span> }
                     </span>

diff --git a/astro/src/layouts/BlogIndex.astro b/astro/src/layouts/BlogIndex.astro
@@ -68,7 +68,7 @@ const getPaginationRef = (stop) => {
           {showCategories &&
             <div>
               {first.categories && first.categories.map(cat =>
-                <a href={"/blog/category/" + cat + "/" }>
+                <a href={"/blog/category/" + cat.replaceAll(' ', '-').toLowerCase() + "/" }>
                   <li class="capitalize font-bold inline-block mb-3 text-base text-indigo-500">{ cat }</li>
                 </a>
               )}

diff --git a/astro/src/pages/blog/blog-tools.ts b/astro/src/pages/blog/blog-tools.ts
@@ -50,8 +50,8 @@ export const parseContent = (blog) => {
     blurb = blurb + '...';
   }
   blurb = marked.parse(blurb);
-  const categories = blog.data.categories.split(' ');
-  const tags = blog.data.tags.split(' ');
+  const categories = blog.data.categories.split(',').map(cat => cat.trim());
+  const tags = blog.data.tags.split(',').map(tag => tag.trim());
   const authors = blog.data.authors.split(',').map(author => author.trim());
   return {
     ...blog.data,
@@ -101,15 +101,17 @@ export const getStaticIndexPaths = async (paginate, attribute, splitter, paramNa
   const blogs = await getCollection('blog');
   const allTags = getAllEntries(blogs, attribute, splitter)
   return allTags.map((target) => {
+
     const filteredPosts = blogs.filter((post) => post.data[attribute].includes(target));
     // newest first
     filteredPosts.sort(sortByDate);
     const params = {} as any;
     params[paramName] = target.trim().replaceAll(' ', '-').toLowerCase();
+
+    // Put the readable name inot the astro props
     const props = {} as any;
-    if (attribute === 'authors') {
-      props.authorName = target;
-    }
+    props[paramName + "Name"] = target;
+
     return paginate(filteredPosts, {
       params,
       props,
@@ -118,6 +120,6 @@ export const getStaticIndexPaths = async (paginate, attribute, splitter, paramNa
   });
 }
 
-export const getStaticTagPaths = async (paginate) => getStaticIndexPaths(paginate, 'tags', ' ', 'tag');
-export const getStaticCategoryPaths = async (paginate) => getStaticIndexPaths(paginate, 'categories', ' ', 'category');
+export const getStaticTagPaths = async (paginate) => getStaticIndexPaths(paginate, 'tags', ',', 'tag');
+export const getStaticCategoryPaths = async (paginate) => getStaticIndexPaths(paginate, 'categories', ',', 'category');
 export const getStaticAuthorPaths = async (paginate) => getStaticIndexPaths(paginate, 'authors', ',', 'author');
diff --git a/astro/src/pages/blog/category/[category]/[...page].astro b/astro/src/pages/blog/category/[category]/[...page].astro
@@ -6,11 +6,11 @@ export async function getStaticPaths({ paginate }) {
   return getStaticCategoryPaths(paginate);
 }
 
-const { page } = Astro.props;
+const { page, categoryName } = Astro.props;
 const params = Astro.params;
 ---
 <Layout section="category"
         sectionTitle="Categories"
-        subject={params.category}
+        subject={categoryName}
         page={page}
-        showCategories={false}/>
+        showCategories={false}/>
diff --git a/astro/src/pages/blog/tag/[tag]/[...page].astro b/astro/src/pages/blog/tag/[tag]/[...page].astro
@@ -6,11 +6,11 @@ export async function getStaticPaths({ paginate }) {
   return getStaticTagPaths(paginate);
 }
 
-const { page } = Astro.props;
+const { page, tagName } = Astro.props;
 const params = Astro.params;
 ---
 <Layout section="tag"
         sectionTitle="Tags"
-        subject={params.tag}
+        subject={tagName}
         page={page}
         showCategories={true}/>