List of tags and categories

[asarkar]

I like the style, thanks for making the theme freely available. However, there’s one feature that I really want in my blog which isn’t present in the OOTB theme. It’s a list of tags, and optionally categories, ordered by popularity. Is this something you can add to the theme? If not, can a user of your user make this modification easily?

[mathieukh]

You might consider adding those snippets in blog.ts:

export const findTagsWithOccurrences = async (): Promise<Record<string, number>> => {
  const posts = await fetchPosts();
  const allTags = posts.flatMap(({ tags = [] }) => [...tags]).map(({ title }) => title);
  return allTags.reduce((acc, tag) => ({ ...acc, [tag]: acc[tag] ? acc[tag] + 1 : 1 }), {} as Record<string, number>);
};

export const findCategoriesWithOccurrences = async (): Promise<Record<string, number>> => {
  const posts = await fetchPosts();
  const allCategories = posts
    .map(({ category }) => category)
    .filter((category) => category !== undefined)
    .map(({ title }) => title);
  return allCategories.reduce(
    (acc, category) => ({ ...acc, [category]: acc[category] ? acc[category] + 1 : 1 }),
    {} as Record<string, number>
  );
};

It will return an object with the names of tags or categories considering the methods you will using with the number of occurrences found for them in the blog.

You can use those objects to create the expected behaviour from there.

for example:

const tagsWithOccurrences = await findTagsWithOccurrences();
const orderedTagsByUsage = Object.entries(tagsWithOccurrences).sort(([,to1], [,to2]) => to2 - to1);

This will result in an array of tuple with [tag, numberOfOccurrences] ordered by usage desc. (the most used is first)