Initial Commit

components/BackgroundCalm.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { Engine } from '@tsparticles/engine';
+
+const onLoad = (container: Container) => {
+}
+
+</script>
+
+<template>
+    <NuxtParticles
+            class="fixed w-full h-full"
+            id="tsparticles"
+            @load="onLoad"
+            :particlesInit="particlesInit"
+            :options="{
+                    fullScreen: {
+                        enable: true,
+                        zIndex: -1
+                    },
+                    fpsLimit: 60,
+                    interactivity: {
+                        detect_on: 'window',
+                        events: {
+                            onHover: {
+                                enable: true,
+                                mode: 'repulse'
+                            },
+                        },
+                        modes: {
+                            repulse: {
+                                distance: 100,
+                                duration: 1.0
+                            }
+                        }
+                    },
+                    particles: {
+                        zIndex: -10,
+                        color: {
+                            value: '#A020F0'
+                        },
+                        links: {
+                            color: '#B020F0',
+                            distance: 200,
+                            enable: true,
+                            opacity: 0.5,
+                            width: 1.5
+                        },
+                        move: {
+                            direction: 'none',
+                            enable: true,
+                            outModes: 'bounce',
+                            random: false,
+                            speed: 1.5,
+                            straight: false
+                        },
+                        number: {
+                            density: {
+                                enable: true,
+                            },
+                            value: 40
+                        },
+                        opacity: {
+                            value: 0.5
+                        },
+                        shape: {
+                            type: 'circle'
+                        },
+                        size: {
+                            value: { min: 2, max: 9 }
+                        }
+                    },
+                    detectRetina: true
+                }"
+        >
+    </NuxtParticles>
+    <slot></slot>
+</template>

components/Navbar.vue

@@ -0,0 +1,15 @@
+<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>
+            </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>
+            </div>
+        </div>
+    </div>
+</template>

components/PostCard.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { ref, watch } from 'vue';
+import fm from 'front-matter';
+
+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)
+const data = ref(null)
+const error = ref(null)
+
+const background = ref('');
+const title = ref(null);
+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()
+}, {
+    immediate: true 
+});
+
+async function fetchData() {
+    error.value = data.value = null
+    loading.value = true
+    
+    try {
+        data.value = await (await fetch(url.value)).text()
+        const processed = fm(data.value)
+        background.value = processed.attributes.background
+        title.value = processed.attributes.title
+        description.value = processed.attributes.description
+        date.value = processed.attributes.date
+        tags.value = processed.attributes.tags
+    } catch (err) {
+        error.value = err.toString()
+        loading.value = false
+    } finally {
+        loading.value = false
+    }
+}
+</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" 
+        :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>
+            <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">
+                        <span class="text-xs bg-purple-800 border-purple-400 border text-white p-1 rounded-md">{{ tag }}</span>
+                    </div>
+                </div>
+            </div>
+            <p>{{ description }}</p>
+        </div>
+    </div>
+    </a>
+</template>