feat: remove support for nested categories

src/components/ArchivePanel.astro

@@ -20,7 +20,7 @@ if (Array.isArray(tags) && tags.length > 0) {
 
 if (Array.isArray(categories) && categories.length > 0) {
     posts = posts.filter(post =>
-        Array.isArray(post.data.categories) && post.data.categories.some(category => categories.includes(category))
+        post.data.category && categories.includes(post.data.category)
     );
 }
 

src/components/PostMetadata.astro

@@ -8,10 +8,9 @@ interface Props {
     class: string;
     published: Date;
     tags: string[];
-    categories: string[];
     category: string;
 }
-const {published, tags, categories} = Astro.props;
+const {published, tags, category} = Astro.props;
 const className = Astro.props.class;
 ---
 
@@ -25,23 +24,21 @@ const className = Astro.props.class;
         <span class="text-black/50 dark:text-white/50 text-sm font-medium">{formatDateToYYYYMMDD(published)}</span>
     </div>
 
-    <!-- categories -->
+    <!-- categoriy -->
     <div class="flex items-center">
         <div class="meta-icon"
         >
             <Icon name="material-symbols:menu-rounded" class="text-xl"></Icon>
         </div>
         <div class="flex flex-row flex-nowrap">
-            {(categories && categories.length > 0) && categories.map(category => <div
-                    class="with-divider"
-            >
-                <a href=`/archive/category/${category}` aria-label=`View all posts in the ${category} category`
+            {category &&
+                <div><a href=`/archive/category/${category}` aria-label=`View all posts in the ${category} category`
                    class="link-lg transition text-black/50 dark:text-white/50 text-sm font-medium
                                 hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
                     {category}
-                </a>
-            </div>)}
-            {!(categories && categories.length > 0) && <div class="transition text-black/50 dark:text-white/50 text-sm font-medium">{i18n(I18nKey.uncategorized)}</div>}
+                </a></div>
+            }
+            {!category && <div class="transition text-black/50 dark:text-white/50 text-sm font-medium">{i18n(I18nKey.uncategorized)}</div>}
         </div>
     </div>
 

src/components/TitleCardNew.astro

@@ -7,13 +7,12 @@ interface Props {
     url: string;
     published: Date;
     tags: string[];
-    categories: string[];
     category: string;
     image: string;
     description: string;
     words: number;
 }
-const { entry, title, url, published, tags, categories, category, image, description, words } = Astro.props;
+const { entry, title, url, published, tags, category, image, description, words } = Astro.props;
 const className = Astro.props.class;
 // console.log(Astro.props);
 import ImageBox from "./misc/ImageBox.astro";
@@ -29,11 +28,6 @@ const coverWidth = "28%";
 
 const { remarkPluginFrontmatter } = await entry.render();
 
-let cate = categories;
-if (category) {
-    cate = [category];
-}
-
 ---
 <div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]}>
     <div class:list={["pl-9 pr-9 md:pr-2 pt-6 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>
@@ -49,7 +43,7 @@ if (category) {
         </a>
 
         <!-- metadata -->
-        <PostMetadata published={published} tags={tags} categories={cate} class:list={{"mb-4": description, "mb-6": !description}}></PostMetadata>
+        <PostMetadata published={published} tags={tags} category={category} class:list={{"mb-4": description, "mb-6": !description}}></PostMetadata>
 
         <div class="transition text-black/75 dark:text-white/75 mb-3.5">
             { description }

src/components/widget/Categories.astro

@@ -3,31 +3,25 @@ import WidgetLayout from "./WidgetLayout.astro";
 
 import {i18n} from "../../i18n/translation";
 import I18nKey from "../../i18n/i18nKey";
-import {CategoryMap, getCategoryMap} from "../../utils/content-utils";
-import CategoriesLink from "./CategoriesLink.astro";
+import {Category, getCategoryList} from "../../utils/content-utils";
+import {getCategoryUrl} from "../../utils/url-utils";
+import ButtonLink from "../control/ButtonLink.astro";
 
-const categories = await getCategoryMap();
+const categories = await getCategoryList();
 
 const COLLAPSED_HEIGHT = "120px";
 const COLLAPSE_THRESHOLD = 5;
 
-function count(categoryMap: CategoryMap): number {
-    let res = 0;
-    for (const key in categoryMap) {
-        res++;
-        res += count(categoryMap[key].children);
-    }
-    return res;
-}
-
-const isCollapsed = count(categories) >= COLLAPSE_THRESHOLD;
+const isCollapsed = categories.length >= COLLAPSE_THRESHOLD;
 
 interface Props {
-    categories: CategoryMap;
+    categories: Category[];
 }
 
 ---
 
 <WidgetLayout name={i18n(I18nKey.categories)} id="categories" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT}>
-    <CategoriesLink categories={categories}></CategoriesLink>
+    {categories.map((c) =>
+        <ButtonLink url={getCategoryUrl(c.name)} badge={c.count} label=`View all posts in the ${c.name} category`>{c.name}</ButtonLink>
+    )}
 </WidgetLayout>

src/components/widget/CategoriesLink.astro

@@ -1,21 +0,0 @@
----
-
-import {CategoryMap} from "../../utils/content-utils";
-import {getCategoryUrl} from "../../utils/url-utils";
-import ButtonLink from "../control/ButtonLink.astro";
-
-interface Props {
-    categories: CategoryMap;
-}
-
-const {categories} = Astro.props;
-
----
-<div>
-    {Object.entries(categories).map(([key, value]) =>
-        <ButtonLink url={getCategoryUrl(key)} badge={value.count} label=`View all posts in the ${value.name} category`>{value.name}</ButtonLink>
-        <div class="ml-2">
-            {Object.keys(value.children).length > 0 && <Astro.self categories={value.children}></Astro.self>}
-        </div>
-    )}
-</div>