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

Fancy transitions!

Browse source
This commit is contained in:
Mrrp 2024-12-22 12:22:47 -08:00
parent 472ab354d8
commit 5f9eb1fc50
11 changed files with 183 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

81
pages/blog.vue
View file

@ -1,43 +1,14 @@
<script setup>
import { onMounted, watch, ref } from 'vue';
import fm from 'front-matter';
import markdownit from 'markdown-it'
import PostCard from '../components/PostCard.vue';
import hljs from 'highlight.js';
// 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';
const md = markdownit({
breaks: true,
typographer: true,
html: true,
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return '<pre><code class="hljs">' +
hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
'</code></pre>';
} catch (__) { }
}
return '<pre><code class="hljs">' + md.utils.escapeHtml(str) + '</code></pre>';
}
})
md.renderer.rules.hr = function (tokens, idx, options, env, self) {
return '<div class="rounded-full h-0.5 bg-purple-500 my-3"></div>'
}
md.renderer.rules.softbreak = function (tokens, idx, options, env, self) {
return '<br>'
}
md.renderer.rules.hardbreak = function (tokens, idx, options, env, self) {
return '<br><br>'
}
import configured_markdown from '~/assets/markdown_conf';
const modules = import.meta.glob('/blog/');
@ -73,10 +44,16 @@ const tags = ref(null);
// watch the params of the route to fetch the data again
fetchData(url.value)
watch(route, async () => {
url.value = route.query.post
await fetchData(route.query.post)
}, {
immediate: true
});
async function fetchData(url) {
const md = configured_markdown();
error.value = data.value = null
loading.value = true
console.log(url)
@ -140,12 +117,21 @@ async function fetchList() {
}
fetchList()
// Hook and check if the URL gets changed in the query params
watch(url, async () => {
await fetchData(url.value)
}, {
immediate: true
});
</script>
<template>
<div class="relative z-50 flex w-full justify-center text-white">
<div class="mt-8 flex-col text-center">
<div v-if="url == null">
<Transition name="list">
<div v-if="url == null" :key="url">
<h1>Blog</h1>
<div class="flex justify-center m-5">
<div v-for="tag in tagList" :key="tag" class="m-1 text-center">
@ -165,20 +151,23 @@ fetchList()
</div>
</div>
<div v-else>
<div class="flex flex-col">
<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">{{
tag }}</span>
<Transition name="list">
<div class="flex flex-col" :key="url">
<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">{{
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 v-html="text"></div>
</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 v-html="text"></div>
</div>
</div>
</Transition>
</div>
</Transition>
</div>
</div>
</template>
@ -187,7 +176,7 @@ fetchList()
.list-move,
.list-enter-active,
.list-leave-active {
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.list-enter-from,

56
pages/index.vue
View file

@ -1,47 +1,33 @@
<script setup>
import { ref } from 'vue';
import aboutMe from '../assets/about_me.md?raw'
import markdownit from 'markdown-it'
import PostCard from '../components/PostCard.vue';
import configured_markdown from '~/assets/markdown_conf';
import Markdown from '~/components/Markdown.vue';
const md = markdownit({
breaks: true,
typographer: true,
html: true,
})
const aboutMe = ref("");
md.renderer.rules.hr = function(tokens, idx, options, env, self) {
return '<div class="rounded-full h-0.5 bg-purple-500 my-3"></div>'
}
md.renderer.rules.softbreak = function(tokens, idx, options, env, self) {
return '<br>'
}
md.renderer.rules.hardbreak = function(tokens, idx, options, env, self) {
return '<br><br>'
}
md.renderer.rules.blockquote_open = function(tokens, idx, options, env, self) {
return '<blockquote class="border-l-4 border-purple-500 pl-4 my-4">'
}
const result = ref('')
result.value = md.render(aboutMe);
fetch("/about_me.md")
.then((res) => res.text())
.then((data) => {
console.log(data);
aboutMe.value = data;
});
</script>
<template>
<div class="relative z-50 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">
<img class="z-20 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 class="relative z-50 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">
<img class="z-20 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>
<div class="max-w-4xl mt-4 p-6 max-md:w-screen rounded-md container bg-opacity-70 bg-purple-950">
<div v-html=result></div>
</div>
</div>
</div>
<div class="max-w-4xl mt-4 p-6 max-md:w-screen rounded-md container bg-opacity-70 bg-purple-950">
<Markdown :text="aboutMe"></Markdown>
</div>
</div>
</div>
</template>