Flycro/Flycro-Me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Removed Motion and added vueuse/motion

Browse Source
This commit is contained in:
Flycro
2022-01-09 15:06:40 +01:00
parent 7084242b45
commit 3eb6064166
5 changed files with 1328 additions and 1409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages/posts/[slug].vue
View File

@@ -7,26 +7,22 @@
</route>
<template>
<div v-if="post && Object.keys(post.currentPost).length !== 0">
<Motion
:initial="{ opacity: 0 }"
:animate="{ opacity: 1}"
:transition="{ duration: 0.5, easing: 'ease-in-out' }"
>
<div class="text-3xl my-2">
<span class="font-bold text-fly-600 dark:text-fly-500">|</span>
<span class="align-middle mx-2">{{ post.currentPost.title }}</span>
</div>
<div v-html="post.currentPost.body" />
</Motion>
<div
v-if="post && Object.keys(post.currentPost).length !== 0" v-motion
:initial="{ opacity: 0 }" :enter="{opacity: 1, transition: {delay: 0.5,} }"
>
<div class="text-3xl my-2">
<span class="font-bold text-fly-600 dark:text-fly-500">|</span>
<span class="align-middle mx-2">{{ post.currentPost.title }}</span>
</div>
<div v-html="post.currentPost.body" />
</div>
<router-link class="no-underline dark:hover:text-fly-500" :to="`/posts/`">
<router-link v-if="post && Object.keys(post.currentPost).length !== 0" class="no-underline dark:hover:text-fly-500" :to="`/posts/`">
Back to Posts
</router-link>
</template>
<script setup lang="ts">
import { Motion } from 'motion/vue'
import { usePostStore } from '~/stores/post'
const post = usePostStore()

53
src/pages/posts/index.vue
View File

@@ -10,43 +10,33 @@
<div>
<h1>Blog</h1>
<div>
<ul v-if="post.postList && post.loading === false" key="test" class="list-none">
<Motion
:initial="{ opacity: 0 }"
:animate="{ opacity: 1}"
:transition="{ duration: 0.5, easing: 'ease-in-out' }"
>
<router-link v-for="p in post.postList" :key="p.slug" class="no-underline dark:hover:text-fly-500" :to="`/posts/${p.slug}`">
<li>
<div class="text-xl">
{{ p.title }}
</div>
<div class="flex justify-start flex-row">
<div class="text-xs">
{{ convertDate(p.date_created) }}
</div>
</div>
</li>
</router-link>
</Motion>
</ul>
<Motion
:initial="{ opacity: 0 }"
:animate="{ opacity: 1}"
:transition="{ duration: 0.5, easing: 'ease-in-out' }"
<ul
v-if="post.postList && post.loading === false" key="test" v-motion class="list-none"
:initial="{ opacity: 0 }" :enter="{opacity: 1, transition: {delay: 0.5,} }"
>
<div v-if="post.loading === false && post.postList.length === 0" class="text-xl">
No Posts found
</div>
</Motion>
<router-link v-for="p in post.postList" :key="p.slug" class="no-underline dark:hover:text-fly-500" :to="`/posts/${p.slug}`">
<li>
<div class="text-xl">
{{ p.title }}
</div>
<div class="flex justify-start flex-row">
<div class="text-xs">
{{ convertDate(p.date_created) }}
</div>
</div>
</li>
</router-link>
</ul>
<div
v-if="post.loading === false && post.postList.length === 0" class="text-xl"
>
No Posts found
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { Motion } from 'motion/vue'
import type { Ref } from 'vue'
import dayjs from 'dayjs'
import { usePostStore } from '~/stores/post'
@@ -58,7 +48,6 @@ useHead({
})
const post = usePostStore()
const show = ref(false)
function convertDate(date: string): string {
return dayjs(date).format('DD. MMMM YYYY')