mirror of
https://github.com/ArthurDanjou/website.git
synced 2026-01-25 09:20:32 +01:00
Working
This commit is contained in:
@@ -8,6 +8,5 @@ useHead({
|
||||
<template>
|
||||
<section>
|
||||
<MainBanner />
|
||||
<NewsletterCard />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
21
src/pages/uses.vue
Normal file
21
src/pages/uses.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<script lang="ts" setup>
|
||||
useHead({
|
||||
title: 'My uses — Arthur Danjou',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-container lg:my-32 my-16">
|
||||
<div class="max-w-3xl space-y-8">
|
||||
<ContentDoc
|
||||
class="my-16 prose leading-6 prose-table:w-full md:prose-table:w-4/5 lg:prose-table:w-3/5 max-w-none
|
||||
dark:prose dark:prose-invert dark:leading-6 dark:max-w-none dark:prose-table:w-full dark:md:prose-table:w-3/4 dark:lg:prose-table:w-2/5"
|
||||
path="/uses"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
16
src/pages/writing/[slug].vue
Normal file
16
src/pages/writing/[slug].vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Post } from '../../../types'
|
||||
|
||||
const route = useRoute()
|
||||
const { data: postContent } = await useAsyncData<Post>(`blog:post-content:${route.params.id}`, async () => await queryContent<Post>(`/posts/${route.params.id}`).findOne())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
{{ postContent }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
64
src/pages/writing/index.vue
Normal file
64
src/pages/writing/index.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<script setup lang="ts">
|
||||
const appConfig = useAppConfig()
|
||||
|
||||
function getColor() {
|
||||
return `text-${appConfig.ui.primary}-500`
|
||||
}
|
||||
|
||||
useHead({
|
||||
title: 'My Shelf — Arthur Danjou',
|
||||
})
|
||||
|
||||
const { data: posts } = await usePosts()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-container lg:my-32 my-16">
|
||||
<div class="max-w-3xl space-y-8">
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
|
||||
Writing on my life, development and my passions.
|
||||
</h1>
|
||||
<p class="leading-relaxed text-subtitle">
|
||||
All my thoughts on programming, mathematics, artificial intelligence design, etc., are put together in chronological order. I also write about my projects, my discoveries, and my thoughts. <s>It is sometimes updated.</s>
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-16 md:mt-20">
|
||||
<div class="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">
|
||||
<div class="flex max-w-3xl flex-col space-y-16">
|
||||
<article v-for="post in posts" :key="post.slug" class="md:grid md:grid-cols-4 md:items-baseline">
|
||||
<div class="md:col-span-3 group relative flex flex-col items-start">
|
||||
<h2 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
|
||||
<div class="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
|
||||
<NuxtLink :to="post._path">
|
||||
<span class="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
|
||||
<span class="relative z-10">
|
||||
{{ post.title }}
|
||||
</span>
|
||||
</NuxtLink>
|
||||
</h2>
|
||||
<time class="md:hidden relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500 pl-3.5">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center">
|
||||
<span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
|
||||
</span>
|
||||
{{ post.publishedAt }}
|
||||
</time>
|
||||
<p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
|
||||
{{ post.description }}
|
||||
</p>
|
||||
<div class="relative z-10 mt-4 flex items-center gap-2 justify-center text-sm font-medium" :class="getColor()">
|
||||
<p>Read article</p>
|
||||
<UIcon name="i-ph-arrow-circle-right-bold" />
|
||||
</div>
|
||||
</div>
|
||||
<time class="mt-1 md:block relative z-10 order-first mb-3 hidden text-sm text-zinc-400 dark:text-zinc-500">
|
||||
<p>{{ post.publishedAt }}</p>
|
||||
<p>{{ post.readingMins }} min.</p>
|
||||
</time>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user