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

feat: remove support for nested categories

This commit is contained in:
saicaca 2023-12-14 13:43:06 +08:00
parent f7efa010a2
commit f9a78b3e3b
9 changed files with 50 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ArchivePanel.astro
View File

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

17
src/components/PostMetadata.astro
View File

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

10
src/components/TitleCardNew.astro
View File

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

24
src/components/widget/Categories.astro
View File

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

21
src/components/widget/CategoriesLink.astro
View File

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

19
src/pages/archive/category/[category].astro
View File

@ -1,6 +1,5 @@
---
import {getSortedPosts} from "../../../utils/content-utils";
import {getCategoryList, getSortedPosts} from "../../../utils/content-utils";
import MainGridLayout from "../../../layouts/MainGridLayout.astro";
import ArchivePanel from "../../../components/ArchivePanel.astro";
import {i18n} from "../../../i18n/translation";
@ -8,21 +7,11 @@ import I18nKey from "../../../i18n/i18nKey";
export async function getStaticPaths() {
let posts = await getSortedPosts()
const allCategories = posts.reduce((acc, post) => {
if (!Array.isArray(post.data.categories))
return acc;
post.data.categories.forEach(category => acc.add(category));
return acc;
}, new Set());
const allCategoriesArray = Array.from(allCategories);
return allCategoriesArray.map(category => {
const categories = await getCategoryList();
return categories.map(category => {
return {
params: {
category: category
category: category.name
}
}
});

1
src/pages/page/[page].astro
View File

@ -22,7 +22,6 @@ const {page} = Astro.props;
entry={entry}
title={entry.data.title}
tags={entry.data.tags}
categories={entry.data.categories}
category={entry.data.category}
published={entry.data.published}
url={getPostUrlBySlug(entry.slug)}

2
src/pages/posts/[slug].astro
View File

@ -64,7 +64,7 @@ const { remarkPluginFrontmatter } = await entry.render();
class="mb-5"
published={entry.data.published}
tags={entry.data.tags}
categories={entry.data.categories}
category={entry.data.category}
></PostMetadata>
<!-- always show cover as long as it has one -->

53
src/utils/content-utils.ts
View File

@ -20,7 +20,12 @@ export async function getSortedPosts() {
return sorted;
}
export async function getTagList(): Promise<{ name: string; count: number }[]> {
export type Tag = {
name: string;
count: number;
}
export async function getTagList(): Promise<Tag[]> {
const allBlogPosts = await getCollection("posts");
const countMap: { [key: string]: number } = {};
@ -32,44 +37,38 @@ export async function getTagList(): Promise<{ name: string; count: number }[]> {
});
// sort tags
const keys: string[] = Object.keys(countMap).sort(function (a, b) {
var textA = a.toLowerCase();
var textB = b.toLowerCase();
if (textA < textB) {
return -1;
}
if (textA > textB) {
return 1;
}
return 0;
const keys: string[] = Object.keys(countMap).sort((a, b) => {
return a.toLowerCase().localeCompare(b.toLowerCase());
});
return keys.map((key) => ({name: key, count: countMap[key]}));
}
type Category = {
export type Category = {
name: string;
count: number;
children: CategoryMap;
}
export type CategoryMap = { [key: string]: Category };
export async function getCategoryMap(): Promise<CategoryMap> {
export async function getCategoryList(): Promise<Category[]> {
const allBlogPosts = await getCollection("posts");
let root: CategoryMap = {};
let count : {[key: string]: number} = {};
allBlogPosts.map((post) => {
let current = root;
if (post.data.category) {
post.data.categories = [post.data.category];
}
if (!post.data.categories)
if (!post.data.category) {
return;
for (const c of post.data.categories) {
if (!current[c]) current[c] = {name: c, count: 0, children: {}};
current[c].count++;
current = current[c].children;
}
if (!count[post.data.category]) {
count[post.data.category] = 0;
}
count[post.data.category]++;
});
return root;
let lst = Object.keys(count).sort((a, b) => {
return a.toLowerCase().localeCompare(b.toLowerCase());
});
let ret : Category[] = [];
for (const c of lst) {
ret.push({name: c, count: count[c]});
}
return ret;
}