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

reduce dependencies, and stop blocking

Browse Source
This commit is contained in:
Zoe
2024-09-25 03:13:40 -05:00
parent d85b6e7fe8
commit d0fb293c76
16 changed files with 414 additions and 14221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
components/blog/BlogCard.vue Normal file
View File

@@ -0,0 +1,37 @@
<script lang="ts" setup>
const props = defineProps({
article: { type: Object, required: true },
});
</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">
<NuxtImg v-if="article.image" :src="article.image.src" width="464" densities="1x 2x" quality="80"
class="w-full rounded-tl-lg rounded-tr-lg aspect-video" loading="lazy" />
<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">
<h3>
<NuxtLink tabindex="0" class="text-lg" :prefetch="true" :to="article._path">
{{ article.title }}
</NuxtLink>
</h3>
<p class="dark:text-zinc-400 text-zinc-600">
{{ article.description }}
</p>
<p class="text-zinc-500">
{{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }} |
{{ article.readTime }} minute read
</p>
<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>
<div class="max-h-full leading-relaxed">
<ContentRenderer :value="article">
<ContentRendererMarkdown :value="article" :excerpt="true" />
</ContentRenderer>
</div>
</div>
</div>
</template>

35
components/blog/BlogSkeletonCard.vue Normal file
View File

@@ -0,0 +1,35 @@
<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>

21
components/blog/MiniBlogCard.vue Normal file
View File

@@ -0,0 +1,21 @@
<script lang="ts" setup>
const props = defineProps({
to: String,
title: String,
description: String,
rightAlign: Boolean,
});
</script>
<template>
<NuxtLink :to="props.to"
class="py-8 px-6 border-[#ECE6E7] dark:border-[#232326] border rounded-lg hover:dark:bg-obsidian-night hover:bg-[hsl(270,68%,95.71%)] hover:transition-colors select-none block"
:class="props.rightAlign ? 'text-right' : ''">
<div
class="p-1.5 inline-flex bg-[#ECE6E7] dark:bg-[#1A1A1D] rounded-full mb-4 border border-gray-300/80 dark:border-neutral-800/70">
<Icon :name="props.rightAlign ? 'tabler:arrow-right' : 'tabler:arrow-left'" size="24" />
</div>
<p class="font-semibold">{{ props.title }}</p>
<p class="text-sm">{{ props.description }}</p>
</NuxtLink>
</template>

149
components/blog/index.vue Normal file
View File

@@ -0,0 +1,149 @@
<script setup lang="ts">
import { withoutTrailingSlash } from 'ufo';
import MiniBlogCard from './MiniBlogCard.vue';
let copied = ref(false);
const copy = (text: string) => {
if (import.meta.client) {
navigator.clipboard.writeText(text)
copied.value = true;
setTimeout(() => {
copied.value = false;
}, 2000);
}
};
const activeTocId: Ref<string | null> = ref(null)
const nuxtContent = ref(null)
const updateActiveHeading = () => {
const headings = document.querySelectorAll('#main h2[id], #main h3[id]')
const windowHeight = window.innerHeight
const windowMidpoint = windowHeight / 2
headings.forEach((heading) => {
const headingRect = heading.getBoundingClientRect()
const headingBottom = headingRect.bottom
if (headingBottom <= windowMidpoint) {
activeTocId.value = heading.id
}
})
}
onMounted(() => {
window.addEventListener('scroll', updateActiveHeading)
})
onUnmounted(() => {
window.removeEventListener('scroll', updateActiveHeading)
})
let year = new Date().getFullYear();
let route = useRoute();
const { data: doc } = await useAsyncData(`${route.path}-data`, () => queryContent(route.path).findOne())
if (!doc.value) {
throw createError({ statusCode: 404, statusMessage: 'Article not found', fatal: true })
}
const { data: surround } = await useAsyncData(`${route.path}-surround`, () => queryContent('/blog')
.where({ _extension: 'md' })
.only(['title', 'description', '_path'])
.sort({ date: 1 })
.where({ _draft: false })
.findSurround(withoutTrailingSlash(route.path))
)
console.log("SURROUND", surround.value)
useSeoMeta({
title: doc.value?.title,
description: doc.value?.description,
ogTitle: doc.value?.title,
ogDescription: doc.value?.description,
ogImage: doc.value?.image.src,
ogUrl: 'https://juls07.dev',
twitterTitle: doc.value?.title,
twitterDescription: doc.value?.description,
twitterImage: doc.value?.image.src,
twitterCard: 'summary_large_image',
})
useHead({
htmlAttrs: {
lang: 'en'
},
meta: [
{
name: "copyright",
content: `© ${year} juls07`
},
{
name: "robots",
content: "index, follow"
},
{
name: "keywords",
content: doc.value?.tags.join(", ")
},
{
name: "author",
content: "juls07",
}
],
link: [
{
rel: 'icon',
type: 'image/png',
href: '/favicon.png'
}
]
})
</script>
<template>
<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">
<NuxtImg v-if="doc && doc.image" :src="doc.image.src" class="mb-2 rounded-md drop-shadow w-full" quality="80" />
<h1 class="text-3xl dark:text-gray-100 md:text-4xl font-semibold mb-2">{{ doc?.title }}</h1>
<p class="mb-1 dark:text-zinc-400 text-zinc-600">
{{ doc?.description }}
</p>
<p class="mb-2 text-zinc-500">
{{ new Date(doc?.date).toDateString().split(' ').slice(1).join(' ') }} |
{{ doc?.readTime }} minute read
</p>
<div class="flex flex-wrap w-full gap-2 justify-start mb-3">
<IconTag v-for="tag in doc?.tags" :name="tag" :iconName='tag' isTag="true" />
</div>
<hr class="mb-4 border-[#ECE6E7] dark:border-[#232326] border-t" />
</div>
<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">
<ContentRenderer ref="nuxtContent" class="dark:text-gray-200 text-gray-800" :value="doc" />
</main>
</div>
<nav
class="lg:ml-2 mb-3 lg:mb-0 col-start-2 md:col-start-3 lg:block lg:col-start-10 lg:col-span-2 md:col-span-8 col-span-10 lg:sticky lg:top-8 h-fit order-2 lg:order-4">
<TableOfContents :doc="doc" :activeTocId="activeTocId" />
</nav>
<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-5">
<div class="flex justify-between mt-10">
<NuxtLink class="flex items-center text-fuschia hover:underline visited:bg-rose-700" to="/blog">
← Back to Blog
</NuxtLink>
<button class="flex items-center px-2 py-1" @click="copy('https://juls07.dev' + route.path)">
<Icon v-if="copied" name="tabler:check" class="mr-1.5" size="20" />
<Icon v-else name="tabler:link" class="mr-1.5" size="20" />
Copy Link
</button>
</div>
<hr class="my-6 border-[#ECE6E7] dark:border-[#232326] border-t" />
<div v-if="surround && surround.length > 0" class="sm:grid gap-8 sm:grid-cols-2">
<MiniBlogCard v-if="surround[0]" :to="surround[0]._path" :title="surround[0].title"
:description="surround[0].description" />
<MiniBlogCard class="col-start-2" v-if="surround[1]" :to="surround[1]._path" :title="surround[1].title"
:right-align="true" :description="surround[1].description" />
</div>
</div>
</template>