jaron/folio
1
0
Fork 0
mirror of https://github.com/jaronpate/folio.git synced 2026-10-19 01:07:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added some animations and tweaked some styles

Browse Source
This commit is contained in:
Jaron
2026-06-12 20:22:56 -05:00
parent d8d93f4517
commit 3cb4b9b71f
9 changed files with 404 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/writing/[...slug].vue
+5 -3
View File
@@ -16,12 +16,13 @@ useSeoMeta({
});
definePageMeta({
layout: 'main',
layout: false,
});
</script>
<template>
<NuxtLayout
<div>
<NuxtLayout
name="main"
:title="page?.title"
:description="page?.description"
@@ -39,7 +40,8 @@ definePageMeta({
</div>
</template>
<ContentRenderer class="writing__content" v-if="page" :value="page" />
</NuxtLayout>
</NuxtLayout>
</div>
</template>
<style scoped>
app/pages/writing/index.vue
+49 -38
View File
@@ -1,55 +1,66 @@
<script setup lang="ts">
const { data: pages } = await useAsyncData('writing-pages', () =>
queryCollection('writing').all(),
);
// const { data: pages } = await useAsyncData('writing-pages', () =>
// queryCollection('writing').all(),
// );
const pages: any[] = [];
const formatDate = (dateString: string) => {
const date = new Date(dateString);
// ex. May 5, 2026
return `${date.toLocaleDateString('en-US', { month: 'short' })} ${date.getDate()}, ${date.getFullYear()}`;
};
definePageMeta({
layout: false,
});
</script>
<template>
<NuxtLayout
name="main"
title="Writing"
description="Thoughts I've had here and there. Maybe you'll find something helpful or interesting here."
>
<template #header-upper>
<div class="header-upper-inner">
<NuxtLink to="/" class="back-link" aria-label="Back to Home">
<span class="arrow">←</span>
<span>Home</span>
</NuxtLink>
</div>
</template>
<section>
<div class="section__content">
<template v-if="pages?.length">
<div>
<NuxtLayout
name="main"
title="Writing"
description="Thoughts I've had here and there. Maybe you'll find something helpful or interesting here."
>
<template #header-upper>
<div class="header-upper-inner">
<NuxtLink
v-for="page in pages"
:to="'/writing/' + page.path"
:key="page.path"
class="article"
to="/"
class="back-link"
aria-label="Back to Home"
>
<h3 class="article__title">{{ page.title }}</h3>
<!-- <p class="article__date">
<span class="arrow">←</span>
<span>Home</span>
</NuxtLink>
</div>
</template>
<section>
<div class="section__content">
<template v-if="pages?.length">
<NuxtLink
v-for="page in pages"
:to="'/writing/' + page.path"
:key="page.path"
class="article"
>
<h3 class="article__title">{{ page.title }}</h3>
<!-- <p class="article__date">
{{ formatDate(page.date) }}
</p> -->
<p class="article__description">
{{ page.description }}
</p>
</NuxtLink>
</template>
<template v-else>
<div class="empty-state">
<p>Nothing here yet.</p>
</div>
</template>
</div>
</section>
</NuxtLayout>
<p class="article__description">
{{ page.description }}
</p>
</NuxtLink>
</template>
<template v-else>
<div class="empty-state">
<p>No thoughts...head empty</p>
</div>
</template>
</div>
</section>
</NuxtLayout>
</div>
</template>
<style scoped>