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

35
components/Markdown.vue Normal file
View file

@ -0,0 +1,35 @@
<script setup lang="ts">
import configured_markdown from '~/assets/markdown_conf';
import { useSlots } from 'vue';
let markdown = configured_markdown();
const text = ref("");
const loading = ref(true);
const props = defineProps({
text: String,
});
function render_markdown(data: string | undefined) {
if (!data) {
loading.value = false;
return;
}
text.value = markdown.render(data);
loading.value = false
}
watch(() => props.text, (newVal) => {
render_markdown(newVal);
}, {
immediate: true
});
</script>
<template>
<div v-if="loading" class="text-center animate-pulse">
<h2>Loading...</h2>
</div>
<div v-html="text"></div>
</template>

13
components/Navbar.vue
View file

@ -1,14 +1,17 @@
<script setup>
</script>
<template>
<div class="flex justify-center">
<div class="flex-col transition-[margin] justify-center md:rounded-md max-md:w-screen lg:mt-3 w-fit-content pr-4 pl-4 bg-purple-500 bg-opacity-25 text-white">
<div class="flex justify-center">
<a href="/" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Home</a>
<a href="/blog/" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Blog</a>
<a href="/blog/?post=/blog/awesome.md" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Awesome</a>
<a href="/blog/?post=/blog/badges.md" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Badges</a>
<NuxtLink href="/" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Home</NuxtLink>
<NuxtLink href="/blog/" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Blog</NuxtLink>
<NuxtLink href="/blog/?post=/blog/awesome.md" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Awesome</NuxtLink>
<NuxtLink href="/blog/?post=/blog/badges.md" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Badges</NuxtLink>
</div>
<div class="flex justify-center">
<small class=" ml-3 mr-3">Hosted with <a href="https://github.com/misslunatic/misslunatic.github.io" class="text-blue-500">GitHub Pages</a></small>
<small class=" ml-3 mr-3">Hosted with <NuxtLink href="https://github.com/misslunatic/misslunatic.github.io" class="text-blue-500">GitHub Pages</NuxtLink></small>
</div>
</div>
</div>

12
components/PostCard.vue
View file

@ -6,11 +6,6 @@ const props = defineProps({
url: String,
});
import { useSlots } from 'vue';
const slots = useSlots();
const url = ref(props.url)
url.value = props.url
const loading = ref(false)
@ -52,11 +47,10 @@ async function fetchData() {
</script>
<template>
<a :href="'/blog?post=' +url">
<div class="m-4 p-3 min-h-10 w-90 text-white rounded-2xl border-2 border-purple-300 transition hover:bg-purple-600 bg-purple-700 bg-opacity-50 hover:bg-opacity-70"
<NuxtLink :href="'/blog?post=' +url">
<div class="m-4 p-3 min-h-30 w-90 text-white rounded-2xl border-2 border-purple-300 transition hover:bg-purple-600 bg-purple-700 bg-opacity-50 hover:bg-opacity-70"
:style="{ backgroundImage: `url(${background})` }">
<div v-if="loading" class="text-center animate-pulse">
<h2>Loading...</h2>
</div>
<div v-else-if="error" class="text-center">
<h2>Error: {{ error }}</h2>
@ -76,5 +70,5 @@ async function fetchData() {
<p>{{ description }}</p>
</div>
</div>
</a>
</NuxtLink>
</template>