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

0
components/IconTag.vue Executable file → Normal file
View File

0
components/Nav.vue Executable file → Normal file
View File

45
components/ProgressBar.vue Normal file
View File

@@ -0,0 +1,45 @@
<script lang="ts" setup>
let props = defineProps<{
isLoading: boolean,
}>()
let showLoading = ref(false);
let progress = ref(10);
watch(() => props.isLoading, () => {
if (props.isLoading) {
start();
} else {
finish();
}
})
let interval = null;
function start() {
progress.value = 10;
showLoading.value = true;
interval = setInterval(() => {
if (progress.value < 80) {
progress.value += Math.random() * 2;
}
}, 400);
}
function finish() {
progress.value = 100;
setTimeout(() => {
showLoading.value = false;
progress.value = 10;
}, 100);
clearInterval(interval);
}
</script>
<template>
<div class="fixed top-0 left-0 right-0 h-0.5 bg-sea-green z-50 transition-all ease-in-out"
:class="{ 'opacity-0': !showLoading }" :style="{ width: `${progress}%` }"></div>
</template>
<style></style>

48
components/ProjectCard.vue Executable file → Normal file
View File

@@ -1,31 +1,31 @@
<script>
export default {
props: ["name", "icons", "headerIcon", "githubLink", "externalLink"],
props: ["name", "icons", "headerIcon", "repo", "externalLink"],
}
</script>
<template>
<div
class="dark:bg-dark-slate bg-touched-lavender relative border p-6 h-[60vw] max-h-[425px] min-h-[375px] border-soft-lilac dark:border-midnight-slate/30 shadow-md rounded-lg">
<div class="flex mb-4 items-center" v-if="headerIcon">
<Icon size="64" class="text-sea-green" :name="headerIcon" />
<div class="ml-auto flex">
<a v-if="githubLink" :href="githubLink" :aria-label="`${name}'s Gtihub`"
class="dark:!text-zinc-300/80 !text-deep-indigo/75 dark:hover:!text-zinc-200 hover:!text-deep-indigo/95 dark:focus:!text-zinc-200 focus:!text-deep-indigo/95 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-fuschia">
<Icon size="38" name="tabler:brand-github" />
</a>
<a v-if="externalLink" :href="externalLink"
class="dark:!text-zinc-300/80 !text-deep-indigo/75 dark:hover:!text-zinc-200 hover:!text-deep-indigo/95 dark:focus:!text-zinc-200 focus:!text-deep-indigo/95 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-fuschia">
<Icon size="38" name="tabler:external-link" />
</a>
</div>
</div>
<h3 class="text-xl mb-1 capitalize font-jetbrains">{{ name }}</h3>
<div id="body" class="mb-4">
<slot />
</div>
<div class="flex flex-wrap gap-2 absolute bottom-6" v-if="icons">
<IconTag v-for="icon in icons" size="16" :name="icon.name" :iconName="icon.icon"></IconTag>
</div>
</div>
<div
class="dark:bg-dark-slate bg-touched-lavender relative border p-6 h-[60vw] max-h-[425px] min-h-[375px] border-soft-lilac dark:border-midnight-slate/30 shadow-md rounded-lg">
<div class="flex mb-4 items-center" v-if="headerIcon">
<Icon size="64" class="text-sea-green" :name="headerIcon" />
<div class="ml-auto flex">
<a v-if="repo" :href="`/github/${repo}`" :aria-label="`${name}'s Gtihub`"
class="dark:!text-zinc-300/80 !text-deep-indigo/75 dark:hover:!text-zinc-200 hover:!text-deep-indigo/95 dark:focus:!text-zinc-200 focus:!text-deep-indigo/95 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-fuschia">
<Icon size="38" name="tabler:brand-github" />
</a>
<a v-if="externalLink" :href="externalLink"
class="dark:!text-zinc-300/80 !text-deep-indigo/75 dark:hover:!text-zinc-200 hover:!text-deep-indigo/95 dark:focus:!text-zinc-200 focus:!text-deep-indigo/95 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-fuschia">
<Icon size="38" name="tabler:external-link" />
</a>
</div>
</div>
<h3 class="text-xl mb-1 capitalize font-jetbrains">{{ name }}</h3>
<div id="body" class="mb-4">
<slot />
</div>
<div class="flex flex-wrap gap-2 absolute bottom-6" v-if="icons">
<IconTag v-for="icon in icons" size="16" :name="icon.name" :iconName="icon.icon"></IconTag>
</div>
</div>
</template>

35
components/blog/BlogSkeletonCard.vue
View File

@@ -1,35 +0,0 @@
<script lang="ts" setup>
const titleWidth = Math.max(Math.floor(Math.random() * 300), 175);
</script>
<template>
<div
class="flex flex-col dark:bg-dark-slate bg-touched-lavender max-h-[563.25px] h-[563.25px] overflow-hidden rounded-lg border border-soft-lilac dark:border-midnight-slate/30 shadow-md">
<div class="w-full rounded-tl-lg rounded-tr-lg aspect-video dark:bg-zinc-400 bg-zinc-600 animate-pulse">
</div>
<div
class="flex-shrink p-3 overflow-hidden pt-2 text-fade dark:before:bg-[linear-gradient(180deg,transparent_0,hsla(0,0%,5%,0)_36%,#0C0B0C_95%,#0C0B0C)] before:bg-[linear-gradient(180deg,transparent_0,hsla(0,0%,5%,0)_36%,#F5EDFE_95%,#F5EDFE)] mb-1 pb-1 relative">
<div class="h-5 mb-1 rounded-lg dark:bg-zinc-400 bg-zinc-600 animate-pulse"
:style="{ width: `${titleWidth}px` }"></div>
<div class="h-3 mb-1 rounded-lg dark:bg-zinc-400 bg-zinc-600 animate-pulse w-36"></div>
<div class="h-3 mb-1 rounded-lg bg-zinc-500 animate-pulse w-44"></div>
<div
class="flex flex-wrap w-full gap-2 justify-start my-1 dark:text-zinc-200 text-zinc-800 max-h-[13.75rem]">
<!-- <IconTag v-for="tag in article.tags" :name="tag" :iconName='tag' isTag="true" /> -->
<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>
<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>
</div>
</div>
</template>

2
components/blog/index.vue
View File

@@ -55,8 +55,6 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => qu
.findSurround(withoutTrailingSlash(route.path))
)
console.log("SURROUND", surround.value)
useSeoMeta({
title: doc.value?.title,
description: doc.value?.description,

0
components/content/ProseCode.vue Executable file → Normal file
View File

18
components/content/ProseCodeInline.vue Executable file → Normal file
View File

@@ -1,16 +1,16 @@
<template>
<code class="dark:bg-[#1d1b1d] bg-[hsl(270,26.89%,94.47%)]">
<slot />
</code>
<code class="dark:bg-[#1d1b1d] bg-[hsl(270,26.89%,94.47%)]">
<slot />
</code>
</template>
<style scoped>
code {
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.25rem;
overflow: hidden;
padding: 3px 6px;
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.25rem;
overflow: hidden;
padding: 3px 6px;
}
</style>

0
components/content/ProseH2.vue Executable file → Normal file
View File

0
components/content/ProseH3.vue Executable file → Normal file
View File