Merge branch 'main' of https://github.com/onwidget/astrowind

src/components/blog/Tags.astro

@@ -7,28 +7,35 @@ import type { Post } from '~/types';
 export interface Props {
   tags: Post['tags'];
   class?: string;  
+  title?: string | undefined;
+  isCategory?: boolean;
 }
 
-const { tags, class: className = 'text-sm' } = Astro.props;
+const { tags, class: className = 'text-sm', title = undefined, isCategory = false } = Astro.props;
 ---
 
 {
   tags && Array.isArray(tags) && (
-    <ul class={className}>
-      {tags.map((tag) => (
-        <li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 mb-2 py-0.5 px-2 lowercase font-medium">
-          {BLOG?.tag?.disabled ? (
-            tag
-          ) : (
-            <a
-              href={getPermalink(tag, 'tag')}
-              class="text-muted dark:text-slate-300 hover:text-primary dark:hover:text-gray-200"
-            >
-              {tag}
-            </a>
-          )}
-        </li>
-      ))}
-    </ul>
+    <>
+      <>
+        {title !== undefined && <span class="align-super font-normal underline underline-offset-4 decoration-2 dark:text-slate-400">{title}</span>}
+      </>
+      <ul class={className}>
+        {tags.map((tag) => (
+          <li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 mb-2 py-0.5 px-2 lowercase font-medium">
+            {BLOG?.tag?.disabled ? (
+              tag
+            ) : (
+              <a
+                href={getPermalink(tag, (isCategory ? 'category' : 'tag'))}
+                class="text-muted dark:text-slate-300 hover:text-primary dark:hover:text-gray-200"
+              >
+                {tag}
+              </a>
+            )}
+          </li>
+        ))}
+      </ul>
+    </>
   )
 }

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

@@ -5,8 +5,10 @@ import Layout from '~/layouts/PageLayout.astro';
 import BlogList from '~/components/blog/List.astro';
 import Headline from '~/components/blog/Headline.astro';
 import Pagination from '~/components/blog/Pagination.astro';
+// import PostTags from "~/components/blog/Tags.astro";
 
 import { fetchPosts } from '~/utils/blog';
+// import { findTags, findCategories } from '~/utils/blog';
 import { BLOG_BASE } from '~/utils/permalinks';
 
 export async function getStaticPaths({ paginate }) {
@@ -20,6 +22,9 @@ export async function getStaticPaths({ paginate }) {
 const { page } = Astro.props;
 const currentPage = page.currentPage ?? 1;
 
+// const allCategories = await findCategories();
+// const allTags = await findTags();
+
 const meta = {
   title: `Blog${currentPage > 1 ? ` — Page ${currentPage}` : ''}`,
   description: SITE.description,
@@ -37,5 +42,9 @@ const meta = {
     </Headline>
     <BlogList posts={page.data} />
     <Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
+    <!--
+      <PostTags tags={allCategories} class="mb-2" header="Search by Categories:" isCategory />
+      <PostTags tags={allTags}  header="Search by Tags:" />
+    -->
   </section>
 </Layout>

src/utils/blog.ts

@@ -122,3 +122,27 @@ export const findLatestPosts = async ({ count }: { count?: number }): Promise<Ar
 
   return posts ? posts.slice(0, _count) : [];
 };
+
+/** */
+export const findTags = async (): Promise<Array<string>> => {
+  const posts = await fetchPosts();
+  const tags = posts.reduce((acc, post: Post) => {
+    if (post.tags && Array.isArray(post.tags)) {
+      return [...acc, ...post.tags];
+    }
+    return acc;
+  }, []);
+  return [...new Set(tags)];
+};
+
+/** */
+export const findCategories = async (): Promise<Array<string>> => {
+  const posts = await fetchPosts();
+  const categories = posts.reduce((acc, post: Post) => {
+    if (post.category) {
+      return [...acc, post.category];
+    }
+    return acc;
+  }, []);
+  return [...new Set(categories)];
+};