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

Sweeping readability imrpovements

Browse source
This commit is contained in:
Mrrp 2025-01-01 00:26:10 -08:00
parent 5eb48fb4b6
commit ebaff6dea0
13 changed files with 1678 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

23
pages/blog.vue
View file

@ -8,7 +8,6 @@ import PostCard from '../components/PostCard.vue';
// Automatically maintained is a blog_list.json in assets/. This file contains a list of all blog posts and their metadata.
// This file is generated by a script in the root directory of the project.
import blog_list from '../assets/blog_list.json';
import configured_markdown from '~/assets/markdown_conf';
const modules = import.meta.glob('/blog/');
@ -20,7 +19,6 @@ for (const path in modules) {
let route = useRoute();
console.log(route)
const url = ref(null)
url.value = route.query.post
console.log(url.value)
@ -53,16 +51,14 @@ watch(route, async () => {
async function fetchData(url) {
const md = configured_markdown();
error.value = data.value = null
loading.value = true
console.log(url)
try {
data.value = await $fetch(url)
console.log(data.value)
const processed = fm(data.value)
text.value = md.render(processed.body)
console.log(text.value)
text.value = processed.body
background.value = processed.attributes.background
title.value = processed.attributes.title
description.value = processed.attributes.description
@ -137,15 +133,15 @@ watch(url, async () => {
<div v-for="tag in tagList" :key="tag" class="m-1 text-center">
<button
@click="tagFilter.includes(tag) ? tagFilter.splice(tagFilter.indexOf(tag), 1) : tagFilter.push(tag)"
class="text-xs bg-purple-800 border-purple-400 border text-white p-1 rounded-md"
:class="tagFilter.includes(tag) ? 'border-2 border-purple-200 bg-purple-500' : 'border-1 border-purple-600 bg-purple-800 text-white'">{{
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>
<TransitionGroup name="list">
<div v-for="post in tagFilter.length == 0 ? list : list.filter(post => tagFilter.some(tag => post.metadata.tags.includes(tag)))" :key="post.id">
<PostCard :url="post.url" :key="post.id" />
<PostCard :url="post.url" :key="post.id" :tagFilter="tagFilter"/>
</div>
</TransitionGroup>
</div>
@ -156,14 +152,13 @@ watch(url, async () => {
<h1>{{ title }}</h1>
<div class="max-w-50 flex flex-row justify-center">
<div v-for="tag in tags" :key="tag" class="m-1 text-center">
<span class="text-xs bg-purple-800 border-purple-400 border text-white p-1 rounded-md">{{
<span class="text-xs bg-black border-purple-400 border-2 text-white p-1 rounded-md">{{
tag }}</span>
</div>
</div>
<div
class="text-pretty min-w-96 text-left max-w-4xl mt-4 p-6 max-md:w-screen rounded-md container bg-opacity-90 bg-purple-950">
<div class="md-contents" v-html="text"></div>
</div>
<Card class="text-pretty max-w-4xl mt-4 max-md:w-screen text-left">
<Markdown :text="text"></Markdown>
</Card>
</div>
</Transition>
</div>

13
pages/index.vue
View file

@ -4,6 +4,7 @@ import markdownit from 'markdown-it'
import PostCard from '../components/PostCard.vue';
import configured_markdown from '~/assets/markdown_conf';
import Markdown from '~/components/Markdown.vue';
import Card from '~/components/Card.vue';
const aboutMe = ref("");
@ -20,14 +21,20 @@ fetch("/about_me.md")
<div class="relative flex w-full justify-center text-white">
<div class="mt-8 flex-col text-center">
<div class="flex justify-center">
<div class="p-2 shadow-md rounded-full bg-pink-500">
<div id="PFP" class="p-1 shadow-md rounded-full bg-pink-500">
<img class="transition-all w-40 h-40 md:w-56 md:h-56 rounded-full"
src="https://avatars.githubusercontent.com/u/94077364?v=4" alt="User PFP" />
</div>
</div>
<div class="max-w-4xl mt-4 p-6 max-md:w-screen rounded-md container bg-opacity-90 bg-purple-950">
<Card class="max-w-4xl mt-4 max-md:w-screen">
<Markdown :text="aboutMe"></Markdown>
</div>
</Card>
</div>
</div>
</template>
<style scoped>
#PFP {
box-shadow: 0 0 10px 0 pink;
}
</style>