personal-site/pages/article/index.vue

<script setup lang="ts">
import { onMounted, watch, ref } from 'vue';
import fm from 'front-matter';

import PostCard from '~/components/PostCard.vue';
import * as pages from '~/utils/page_updater/update_pagelist';
import type { PageInfo, PageInfoMetdata } from '~/utils/page_updater/pages';
import type { ParsedContent } from '@nuxt/content';

// Automatically maintained is a blog_list.json in assets/meta. This file contains a list of all blog posts and their metadata.
// This file is generated by a script in the utils/pageupdater folder.
const article_list: pages.PageList = await import('~/assets/meta/post_list.json') as pages.PageList;

let route = useRoute()
console.log(route)

const loading: Ref<boolean> = ref(false)
const view: Ref<string> = ref('list') // list, category

const listCategoryKeys: Ref<string[]> = ref([])

const tagList: Ref<string[]> = ref([])
const categoryFilter: Ref<string[]> = ref([])
const tagFilter: Ref<string[]> = ref([])
tagFilter.value = []

function resetReadingPosition() {
    window.scrollTo(0, 0)
}

onMounted(() => {
    // Extract the tags from each post in each category
    var tags: string[] = []
    for (const category in article_list.categories) {
        console.log("Category: " + category)
        for (const post of article_list.categories[category].posts) {
            if (post.metadata.tags) {
                for (const tag of post.metadata.tags) {
                    if (!tags.includes(tag)) {
                        console.log("Adding tag: " + tag)
                        tags.push(tag)
                    }
                }
            }
        }
    }
    tagList.value = tags
});
</script>

<template>
    <div class="relative z-50 flex w-full justify-center text-white">
        <!-- Metadata -->
        <MetaSet title="Articles" description="Ramblings."
            background="/images/me.png" tags="blog, personal, author" />

        <!-- Main Content -->
        <div class="mt-8 flex-col text-center">
            <Transition name="list">
                <div>
                    <!-- Article List -->
                    <h1>Articles</h1>

                    <!-- View mode switcher -->
                    <div class="flex justify-center">
                        <button @click="view = 'list'"
                            class="m-1 bg-black border-purple-400 border text-white p-1 rounded-md"
                            :class="view == 'list' ? 'border-2 border-white bg-slate-700' : 'border-2 bg-black text-white'">List</button>
                        <button @click="view = 'category'"
                            class="m-1 bg-black border-purple-400 border text-white p-1 rounded-md"
                            :class="view == 'category' ? 'border-2 border-white bg-slate-700' : 'border-2 bg-black text-white'">Category</button>
                    </div>
                    <!-- Tag selection -->
                    <div class="flex justify-center" v-if="view == 'list'">
                        <div class="flex flex-wrap justify-center m-5 max-w-96">
                            <div v-for="tag in tagList" :key="tag" class="m-1">
                                <button
                                    @click="tagFilter.includes(tag) ? tagFilter.splice(tagFilter.indexOf(tag), 1) : tagFilter.push(tag)"
                                    class="text-xs bg-black border-purple-400 border text-white p-1 rounded-md"
                                    :class="tagFilter.includes(tag) ? 'border-2 border-white bg-slate-700' : 'border-2 bg-black text-white'">{{
                                        tag }}</button>
                            </div>
                        </div>
                    </div>
                    <!-- Category selection -->
                    <div class="flex justify-center" v-if="view == 'category'">
                        <div class="flex flex-wrap justify-center m-5 max-w-96">
                            <div v-for="category in Object.keys(article_list.categories)" :key="category"
                                class="m-1">
                                <button
                                    @click="categoryFilter.includes(category) ? categoryFilter.splice(categoryFilter.indexOf(category), 1) : categoryFilter.push(category)"
                                    class="text-xs bg-black border-purple-400 border text-white p-1 rounded-md"
                                    :class="categoryFilter.includes(category) ? 'border-2 border-white bg-slate-700' : 'border-2 bg-black text-white'">{{
                                    category }}</button>
                            </div>
                        </div>
                    </div>
                    <!-- Category view -->
                    <div v-if="view == 'category'">
                        <div v-for="categoryKey in Object.keys(article_list.categories).filter((category) => categoryFilter.length == 0 ? true : categoryFilter.includes(category))" :key="categoryKey">
                            <div
                                class="lg:w-[48rem] md:w-max flex flex-col bg-secondary bg-opacity-50 rounded-md shadow-md shadow-secondary p-2 m-2 mb-8">
                                <h2>{{ categoryKey }}</h2>
                                <div
                                    v-for="post in article_list.categories[categoryKey].posts">
                                    <PostCard class="lg:w-[48rem]" :url="post.url" :key="post.id"
                                        :tagFilter="tagFilter" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- List view -->
                    <!-- Instead of grouping by category, just throw cards by order of appearance -->
                    <div v-else-if="view == 'list'">
                        <div
                            v-for="post in tagFilter.length == 0 ? 
                            Object.values(article_list.categories)
                                .map((category) => category.posts)
                                .flat()
                                .sort((a, b) => new Date(b.metadata.date ?? 0).getTime() - new Date(a.metadata.date ?? 0).getTime())
                            : Object.values(article_list.categories)
                                .map((category) => category.posts)
                                .flat()
                                .filter((post) => post.metadata.tags ? post.metadata.tags.some((tag) => tagFilter.includes(tag)) : true)
                                .sort((a, b) => new Date(b.metadata.date ?? 0).getTime() - new Date(a.metadata.date ?? 0).getTime())
                                ">
                            <PostCard class="lg:w-[48rem]" :url="post.url" :key="post.id" :tagFilter="tagFilter" />
                        </div>
                    </div>
                </div>
            </Transition>
        </div>
    </div>
</template>

<style scoped></style>