arthur/website-old
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website-old.git synced 2026-01-29 03:10:41 +01:00
Code Issues 31 Packages Projects Releases Wiki Activity

Change post view

Browse Source
This commit is contained in:
Arthur Danjou
2021-08-28 18:34:36 +02:00
parent becc744193
commit 6a92a992bc
3 changed files with 33 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/Post.vue
View File

@@ -1,23 +1,10 @@
<template> <template>
<nuxt-link :to="`/blog/${slug}`"> <nuxt-link :to="`/blog/${slug}`">
<div class="h-full rounded-lg dark:shadow-white shadow-xl w-full bg-gray-100 dark:bg-gray-800 transform hover:scale-103 duration-300"> <div class="group post w-full text-justify">
<div class="max-w-full rounded-t-lg border-l-2 border-r-2 border-t-2 border-transparent dark:border-gray-900"> <h1 class="font-black text-3xl duration-300" :class="getHoverColor">{{ $t(title) }}</h1>
<img class="max-w-full rounded-t-lg" :src="`https://athena.arthurdanjou.fr/files/${cover}`" alt="Post Cover" /> <h3 class="my-4 text-2xl text-gray-600">{{ $t(description) }}</h3>
</div> <div class="text-gray-400">
<div class="px-8 py-4 flex flex-col justify-between text-justify"> <span>{{ formatDate }}</span> | <span>{{ reading_time }}</span> min.
<div>
<div class="flex space-x-2 mb-2">
<div v-for="tag in tags">
<Tag :content="tag" :pill="true"/>
</div>
</div>
<h1 class="text-2xl font-bold">{{ $t(title) }}</h1>
<p class="text-base mt-3 text-gray-600 dark:text-gray-400 text-justify">{{ $t(description) }}</p>
</div>
<div class="flex justify-between">
<h5 class="text-base text-gray-800 dark:text-gray-500">{{ formatDate }}</h5>
<h5 class="text-base text-gray-800 dark:text-gray-500">{{ reading_time }} min.</h5>
</div>
</div> </div>
</div> </div>
</nuxt-link> </nuxt-link>
@@ -33,7 +20,8 @@ interface PostProps {
cover: string, cover: string,
slug: string, slug: string,
tags: Array<string>, tags: Array<string>,
reading_time: number reading_time: number,
id: number
} }
export default defineComponent({ export default defineComponent({
@@ -66,6 +54,10 @@ export default defineComponent({
reading_time: { reading_time: {
type: Number, type: Number,
default: 0 default: 0
},
id: {
type: Number,
default: 0
} }
}, },
setup(props: PostProps) { setup(props: PostProps) {
@@ -75,8 +67,22 @@ export default defineComponent({
return `${first} ${i18n.t(`month.${second}`)} ${third}` return `${first} ${i18n.t(`month.${second}`)} ${third}`
}) })
const getHoverColor = computed(() => {
switch (props.id) {
case 0:
return 'group-hover:text-blue-400'
case 1:
return 'group-hover:text-red-400'
case 2:
return 'group-hover:text-green-400'
default:
return 'group-hover:text-blue-400'
}
})
return { return {
formatDate formatDate,
getHoverColor
} }
} }
}) })

5
src/components/PostsHome.vue
View File

@@ -9,10 +9,11 @@
{{ $t('blog.description') }} {{ $t('blog.description') }}
</p> </p>
</div> </div>
<div class="grid grid-cols-1 gap-x-4 gap-y-8 mb-8 sm:mb-20 md:grid-cols-3 text-left"> <div class="w-full lg:w-1/2 mt-20 grid grid-cols-1 gap-y-24 mb-8 sm:mb-24 text-left">
<Post <Post
v-for="post in posts" v-for="(post, index) in posts"
:key="post.slug" :key="post.slug"
:id="index"
:title="post.title.code" :title="post.title.code"
:cover="post.cover.file_name" :cover="post.cover.file_name"
:description="post.description.code" :description="post.description.code"

7
src/pages/blog/index.vue
View File

@@ -5,11 +5,12 @@
{{ $t('blog.description') }} {{ $t('blog.description') }}
</p> </p>
<h1 v-if="posts.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('blog.no_posts') }}</h1> <h1 v-if="posts.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('blog.no_posts') }}</h1>
<div class="w-full" v-else> <div class="flex justify-center" v-else>
<div class="grid grid-cols-1 gap-x-4 gap-y-8 mb-20 sm:grid-cols-3"> <div class="w-full lg:w-1/2 mt-20 grid grid-cols-1 gap-y-24 mb-8 sm:mb-24 text-left">
<Post <Post
v-for="post in posts" v-for="(post, index) in posts"
:key="post.slug" :key="post.slug"
:id="index"
:title="post.title.code" :title="post.title.code"
:cover="post.cover.file_name" :cover="post.cover.file_name"
:description="post.description.code" :description="post.description.code"