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

add new blogs

Browse Source
This commit is contained in:
Zoe
2023-01-01 05:01:45 -06:00
parent 3f412b8a34
commit 471496018a
19 changed files with 392 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
pages/blog/[...slug].vue
View File

@@ -4,7 +4,7 @@
<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" />
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 }}
@@ -12,7 +12,7 @@
<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-7">
<div class="flex flex-wrap w-full gap-2 justify-start mb-3">
<IconTag v-for="tag in doc.tags"
:name="tag"
:iconName='tag'
@@ -33,3 +33,10 @@
</div>
</footer>
</template>
<style>
br {
@apply my-3;
display: block;
}
</style>

23
pages/blog/index.vue
View File

@@ -13,7 +13,7 @@
:src="article.image.src"
class="w-full rounded-tl-lg rounded-tr-lg aspect-video" />
<div
class="p-3 overflow-hidden pt-2 before:w-full before:h-2/6 before:absolute before:left-0 before:bottom-0 before:bg-gradient-to-b before:from-transparent before:to-[#201F20] mb-1 pb-1 relative">
class="p-3 overflow-hidden pt-2 text-fade mb-1 pb-1 relative">
<h3>
<nuxt-link tabindex="0"
class="text-lg"
@@ -27,7 +27,7 @@
<p class="text-zinc-500">
{{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }}
</p>
<p class="text-zinc-200 max-h-56">
<p class="text-zinc-200 max-h-[13.75rem]">
<ContentDoc :head="false"
:value="article"
:path="article._path"
@@ -38,8 +38,10 @@
:iconName='tag'
isTag="true" />
</div>
<ContentRenderer :value="doc"
:excerpt="true" />
<div class="max-h-full">
<ContentRenderer :value="doc"
:excerpt="true" />
</div>
</ContentDoc>
</p>
</div>
@@ -50,8 +52,21 @@
</div>
</template>
<style>
.text-fade::before {
content: '';
position: absolute;
width: 100%;
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%);
}
</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()