SevenOfAces/personal-site
1
1
Fork 0
Code Issues Pull requests 10 Projects Releases Packages 1 Wiki Activity Actions

:3

Browse source
This commit is contained in:
Mrrp 2025-01-04 12:20:53 -08:00
parent 6c2bae94d8
commit 2d78426857
11 changed files with 159 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

71
pages/article/index.vue
View file

@ -9,16 +9,18 @@ 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/blog_list.json') as pages.PageList;
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 = []
@ -49,18 +51,28 @@ onMounted(() => {
<template>
<div class="relative z-50 flex w-full justify-center text-white">
<!-- Metadata -->
<MetaSet title="Articles" description="Ramblings." background="https://avatars.githubusercontent.com/u/94077364?v=4"
tags="blog, personal, author" />
<MetaSet title="Articles" description="Ramblings."
background="https://avatars.githubusercontent.com/u/94077364?v=4" tags="blog, personal, author" />
<!-- Main Content -->
<div class="mt-8 flex-col text-center">
<Transition name="list">
<div>
<!-- Article List -->
<!-- Article List -->
<h1>Articles</h1>
<div class="flex justify-center">
<div class="flex flex-wrap justify-center m-5 max-w-96">
<!-- 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)"
@ -70,22 +82,53 @@ onMounted(() => {
</div>
</div>
</div>
<div>
<div v-for="categoryKey in Object.keys(article_list.categories)" :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">
<!-- 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 tagFilter.length == 0 ? article_list.categories[categoryKey].posts : article_list.categories[categoryKey].posts.filter((post) => post.metadata.tags ? post.metadata.tags.some((tag) => tagFilter.includes(tag)) : true)">
<PostCard class="lg:w-[48rem]" :url="post.url" :key="post.id" :tagFilter="tagFilter" />
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()
: Object.values(article_list.categories)
.map((category) => category.posts)
.flat()
.filter((post) => post.metadata.tags ? post.metadata.tags.some((tag) => tagFilter.includes(tag)) : true)
">
<PostCard class="lg:w-[48rem]" :url="post.url" :key="post.id" :tagFilter="tagFilter" />
</div>
</div>
</div>
</Transition>
</div>
</div>
</template>
<style scoped>
</style>
<style scoped></style>