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

light mode and a few improvements

Browse Source
This commit is contained in:
Zoe
2024-04-08 22:52:47 -05:00
parent 66ad112d8c
commit ca1283d5a8
42 changed files with 14514 additions and 9654 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,42 +1,46 @@
<script setup lang="ts">
let year = new Date().getFullYear();
</script>
<template>
<Nav />
<div class="grid grid-cols-12 gap-5 justify-center">
<div class="pt-6 mb-4 !col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
<ContentDoc v-slot="{ doc }">
<img :src="doc.image.src"
class="mb-2 rounded-md drop-shadow" />
<h1 class="text-3xl text-gray-100 md:text-4xl font-semibold mb-2">{{ doc.title }}</h1>
<p class="mb-1 text-zinc-400">
{{ doc.description }}
</p>
<p class="mb-2 text-zinc-500">
{{ new Date(doc.date).toDateString().split(' ').slice(1).join(' ') }}
</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>
<main id="main">
<ContentRenderer
class="text-gray-200"
:value="doc" />
</main>
</ContentDoc>
<div class="min-h-screen">
<Nav />
<div class="grid grid-cols-12 gap-5 justify-center">
<div class="pt-6 mb-4 !col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
<ContentDoc v-slot="{ doc }">
<img :src="doc.image.src" class="mb-2 rounded-md drop-shadow" />
<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(' ') }}
</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>
<main id="main" class="leading-relaxed">
<ContentRenderer class="dark:text-gray-200 text-gray-800" :value="doc" />
</main>
</ContentDoc>
</div>
</div>
<footer class="grid grid-cols-12 gap-5 justify-center">
<div class="py-2 mb-4 !col-start-3 md:!col-start-4 xl:!col-start-5 xl:col-span-4 md:col-span-6 col-span-8">
<!-- <NewsletterSignup class="mb-2" /> -->
© 2022 Juls07 - GPL v3.0 License
© {{ year }} Juls07 - GPL v3.0 License
</div>
</footer>
</div>
</template>
<style>
br {
@apply my-3;
display: block;
@apply my-3;
display: block;
}
#main a {
@apply text-fuschia hover:underline visited:bg-rose-700;
}
</style>

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

@@ -1,52 +1,48 @@
<template>
<div class="h-screen text-white">
<div class="min-h-screen">
<Nav />
<main>
<div id="main"
class="gap-4 justify-evenly py-2 grid grid-cols-[repeat(auto-fit,_minmax(50px,_450px))]">
<div v-for="article in articles"
:key="article._path"
class="mb-5 px-1.5">
<div
class="text-white bg-[#201F20] max-h-[563.25px] h-[563.25px] overflow-hidden rounded-lg border border-zinc-700/30 shadow-md">
<img v-if="article.image.src"
:src="article.image.src"
class="w-full rounded-tl-lg rounded-tr-lg aspect-video" />
<div id="main" class="gap-4 justify-evenly py-2 grid grid-cols-[repeat(auto-fit,_minmax(50px,_450px))]">
<ContentQuery path="blog" :only="['image', '_path', 'title', 'description', 'date', 'tags', 'excerpt']"
:sort="{
date: -1
}" :where="{
_draft: false
}" v-slot="{ data }">
<div v-for="article in data" :key="article._path" class="mb-5 px-1.5">
<div
class="p-3 overflow-hidden pt-2 text-fade mb-1 pb-1 relative">
<h3>
<nuxt-link tabindex="0"
class="text-lg"
:to="article._path">
{{ article.title }}
</nuxt-link>
</h3>
<p class="text-zinc-400">
{{ article.description }}
</p>
<p class="text-zinc-500">
{{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }}
</p>
<p class="text-zinc-200 max-h-[13.75rem]">
<ContentDoc :head="false"
:value="article"
:path="article._path"
v-slot="{ doc }">
<div class="flex flex-wrap w-full gap-2 justify-start my-1">
<IconTag v-for="tag in doc.tags"
:name="tag"
:iconName='tag'
isTag="true" />
</div>
<div class="max-h-full">
<ContentRenderer :value="doc"
:excerpt="true" />
</div>
</ContentDoc>
</p>
class="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" :src="article.image.src"
class="w-full rounded-tl-lg rounded-tr-lg aspect-video" loading="lazy" />
<div
class="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>
<nuxt-link tabindex="0" class="text-lg" :to="article._path">
{{ article.title }}
</nuxt-link>
</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(' ') }}
</p>
<p class="dark:text-zinc-200 text-zinc-800 max-h-[13.75rem]">
<ContentDoc :head="false" :value="article" :path="article._path" v-slot="{ doc }">
<div class="flex flex-wrap w-full gap-2 justify-start my-1">
<IconTag v-for="tag in doc.tags" :name="tag" :iconName='tag' isTag="true" />
</div>
<div class="max-h-full leading-relaxed">
<ContentRenderer :value="doc">
<ContentRendererMarkdown :value="doc" :excerpt="true" />
</ContentRenderer>
</div>
</ContentDoc>
</p>
</div>
</div>
</div>
</div>
</ContentQuery>
</div>
</main>
</div>
@@ -60,18 +56,14 @@
height: 33.333333%;
left: 0px;
bottom: 0px;
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(12,12,12,0) 36%, rgba(32,31,32,1) 95%, rgba(32,31,32,1) 100%);
}
#main a {
@apply text-fuschia hover:underline visited:bg-rose-700;
}
</style>
<script setup lang="ts">
const { data: articles } = await useAsyncData('posts-list', () => queryContent('/blog')
.only(['image', '_path', 'title', 'description', 'date'])
.where({ _draft: false })
.sort({ date: -1, $numeric: true, })
.find()
);
useHead({
title: 'Juls07',
})