zoeissleeping/juls07.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

loading indicator I like better and github redirect

Browse Source
This commit is contained in:
Zoe
2024-10-25 01:30:51 -05:00
parent d0fb293c76
commit b3768887b7
19 changed files with 122 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
pages/blog/[...slug].vue Executable file → Normal file
View File

@@ -1,47 +1,12 @@
<script setup>
let year = new Date().getFullYear();
</script>
<template>
<div class="min-h-screen">
<Nav />
<div class="grid grid-cols-12 gap-x-5 justify-center pt-6 mb-4 relative">
<Suspense>
<Blog />
<template #fallback>
<div
class="!col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10 order-1">
<div
class="mb-2 rounded-md drop-shadow w-full dark:bg-zinc-400 bg-zinc-600 animate-pulse aspect-video">
</div>
<div class="h-9 mb-2 rounded-lg dark:bg-zinc-400 bg-zinc-600 animate-pulse"
:style="{ width: `${Math.max(Math.ceil(Math.random() * 100), 55)}%` }"></div>
<div class="h-4 mb-2 rounded-lg dark:bg-zinc-400 bg-zinc-600 animate-pulse"
:style="{ width: `${Math.max(Math.ceil(Math.random() * 65), 15)}%` }"></div>
<div class="h-3 mb-2 rounded-lg bg-zinc-500 animate-pulse"
:style="{ width: `${Math.max(Math.ceil(Math.random() * 50), 10)}%` }"></div>
<div class="flex flex-wrap w-full gap-2 justify-start mb-3">
<div v-for="i in Math.ceil(Math.random() * 4)"
class="font-inter md:text-lg w-fit max-h-9 min-w-fit dark:bg-obsidian-night bg-[hsl(270,68%,95.47%)] border border-soft-lilac dark:border-midnight-slate/30 py-1 px-2 rounded shadow flex items-center">
<div class="mb-1 rounded bg-zinc-500 animate-pulse w-[20px] h-[20px] mr-2"></div>
<div class="h-3 mb-1 rounded-lg bg-zinc-500 animate-pulse"
:style="{ width: `${(i * 10) + 67}px` }">
</div>
</div>
</div>
<hr class="mb-4 border-[#ECE6E7] dark:border-[#232326] border-t" />
<div
class="!col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10 order-3">
<main id="main" class="leading-relaxed">
<div class="max-h-full leading-relaxed">
<div v-for="i in 100"
class="h-3 my-1 rounded-lg dark:bg-zinc-400 bg-zinc-600 animate-pulse"
:style="{ width: `${80 + Math.ceil(Math.random() * 20)}%` }" :class="{
'mb-4':
Math.random() > 0.8
}"></div>
</div>
</main>
</div>
</div>
</template>
</Suspense>
<Blog />
</div>
<footer class="grid grid-cols-12 gap-5 justify-center">
<div

23
pages/blog/index.vue Executable file → Normal file
View File

@@ -11,23 +11,16 @@ useHead({
<Nav />
<main>
<div id="main" class="gap-4 justify-evenly py-2 grid grid-cols-[repeat(auto-fit,_minmax(50px,_450px))]">
<Suspense>
<ContentQuery path="blog"
:only="['image', '_path', 'title', 'description', 'date', 'tags', 'excerpt', 'readTime']" :sort="{
date: 1
}" :where="{
<ContentQuery path="blog"
:only="['image', '_path', 'title', 'description', 'date', 'tags', 'excerpt', 'readTime']" :sort="{
date: 1
}" :where="{
_draft: false
}" v-slot="{ data }">
<div v-for="article in data" :key="article._path" class="mb-5 px-1.5">
<BlogCard :article="article" />
</div>
</ContentQuery>
<template #fallback>
<div v-for="i in 15">
<BlogSkeletonCard />
</div>
</template>
</Suspense>
<div v-for="article in data" :key="article._path" class="mb-5 px-1.5">
<BlogCard :article="article" />
</div>
</ContentQuery>
</div>
</main>
</div>