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

added old 3ds stuff

Browse source
This commit is contained in:
Mrrp 2025-01-01 14:17:16 -08:00
parent 526bdc91cc
commit 61e90aef4f
13 changed files with 853 additions and 5574 deletions
Download patch file Download diff file Expand all files Collapse all files

144
components/PostCard.vue
View file

@ -1,10 +1,17 @@
<script setup>
import { ref, watch } from 'vue';
import fm from 'front-matter';
import { auto } from '@popperjs/core';
const props = defineProps({
url: String,
tagFilter: Array
tagFilter: Array,
// Allow sm, md, and lg
size: {
type: String,
default: 'full',
validator: (value) => ['xs', 'sm', 'md', 'full'].includes(value)
}
});
const url = ref(props.url)
@ -19,6 +26,7 @@ const description = ref(null);
const date = ref(null);
const tags = ref(null);
// watch the params of the route to fetch the data again
watch(url, async () => {
await fetchData()
@ -38,6 +46,8 @@ async function fetchData() {
description.value = processed.attributes.description
date.value = processed.attributes.date
tags.value = processed.attributes.tags
date.value = new Date(date.value).toLocaleDateString()
} catch (err) {
error.value = err.toString()
loading.value = false
@ -49,33 +59,119 @@ async function fetchData() {
<template>
<NuxtLink :href="'/blog?post=' +url">
<div class="m-4 min-h-30 min-width-90 text-white transition hover:bg-purple-600 bg-opacity-50 hover:bg-opacity-70">
<Card>
<div v-if="loading" class="text-center animate-pulse">
</div>
<div v-else-if="error" class="text-center">
<h2>Error: {{ error }}</h2>
<button @click="fetchData">Retry</button>
</div>
<div v-else>
<div class="grid">
<div class="justify-center">
<h1>{{ title }}</h1>
</div>
<div class="flex justify-center">
<div v-for="tag in tags" :key="tag" class="m-1 text-center">
<div v-if="props.tagFilter.includes(tag)">
<span class="text-xs bg-slate-700 border-white border-2 text-white p-1 rounded-md">{{ tag }}</span>
<!-- Large -->
<div v-if = "size === 'full'">
<div class="m-4 min-h-30 min-width-90 text-white transition hover:bg-purple-600 bg-opacity-50 hover:bg-opacity-70">
<Card>
<div v-if="loading" class="text-center animate-pulse">
</div>
<div v-else-if="error" class="text-center">
<h2>Error: {{ error }}</h2>
<button @click="fetchData">Retry</button>
</div>
<div v-else>
<div class="grid">
<div class="justify-center">
<h1>{{ title }}</h1>
<small>{{ date }}</small>
</div>
<div class="flex justify-center">
<div v-for="tag in tags" :key="tag" class="m-1 text-center">
<div v-if="props.tagFilter.includes(tag)">
<span class="text-xs bg-slate-700 border-white border-2 text-white p-1 rounded-md">{{ tag }}</span>
</div>
<div v-else>
<span class="text-xs bg-black border-purple-400 border-2 text-white p-1 rounded-md">{{ tag }}</span>
</div>
</div>
</div>
</div>
<div v-else>
<span class="text-xs bg-black border-purple-400 border-2 text-white p-1 rounded-md">{{ tag }}</span>
<p>{{ description }}</p>
</div>
</Card>
</div>
</div>
<!-- Medium -->
<div v-else-if = "size === 'md'">
<div class="m-4 min-h-30 min-width-50 text-white transition hover:bg-purple-600 bg-opacity-50 hover:bg-opacity-70">
<Card>
<div v-if="loading" class="text-center animate-pulse">
</div>
<div v-else-if="error" class="text-center">
<h2>Error: {{ error }}</h2>
<button @click="fetchData">Retry</button>
</div>
<div v-else>
<div class="grid">
<div class="justify-center">
<h2>{{ title }}</h2>
<small>{{ date }}</small>
</div>
<div class="flex justify-center">
<div v-for="tag in tags" :key="tag" class="m-1 text-center">
<div v-if="props.tagFilter.includes(tag)">
<span class="text-xs bg-slate-700 border-white border-2 text-white p-1 rounded-md">{{ tag }}</span>
</div>
<div v-else>
<div class="flex justify-center">
<div v-for="tag in tags" :key="tag" class="m-1 text-center">
<div v-if="props.tagFilter.includes(tag)">
<span class="text-xs bg-slate-700 border-white border-2 text-white p-1 rounded-md">{{ tag }}</span>
</div>
<div v-else>
<span class="text-xs bg-black border-purple-400 border-2 text-white p-1 rounded-md">{{ tag }}</span>
</div>
</div>
</div>
<span class="text-xs bg-black border-purple-400 border-2 text-white p-1 rounded-md">{{ tag }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</Card>
</div>
</div>
<!-- Small -->
<div v-else-if = "size === 'sm'">
<div class="m-4 min-h-30 min-width-30 text-white transition hover:bg-purple-600 bg-opacity-50 hover:bg-opacity-70">
<Card>
<div v-if="loading" class="text-center animate-pulse">
</div>
<div v-else-if="error" class="text-center">
<h2>Error: {{ error }}</h2>
<button @click="fetchData">Retry</button>
</div>
<div v-else>
<div class="grid">
<div class="justify-center">
<h3>{{ title }}</h3>
<small>{{ date }}</small>
</div>
</div>
</div>
</Card>
</div>
</div>
<!-- Extra Small -->
<div v-else-if = "size === 'xs'">
<div class="m-4 min-h-30 min-width-20 text-white transition hover:bg-purple-600 bg-opacity-50 hover:bg-opacity-70">
<Card>
<div v-if="loading" class="text-center animate-pulse">
</div>
<div v-else-if="error" class="text-center">
<h3>Error: {{ error }}</h3>
<button @click="fetchData">Retry</button>
</div>
<div v-else>
<div class="grid">
<div class="justify-center">
<h5>{{ title }}</h5>
</div>
</div>
</div>
</Card>
</div>
<p>{{ description }}</p>
</div>
</Card>
</div>
</NuxtLink>
</template>