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

💻 | Finish the blog preview page

Browse Source
This commit is contained in:
Arthur Danjou
2021-04-07 22:23:19 +02:00
parent 67f841881c
commit ca67cbb9bb
1 changed files with 42 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/pages/blog/_slug.vue
View File

@@ -42,7 +42,7 @@
</div> </div>
<nuxt-content <nuxt-content
:document="post" :document="post"
class="my-6 md:my-12 w-full text-justify max-w-none class="my-6 md:my-10 w-full text-justify max-w-none
prose prose-sm sm:prose lg:prose-lg lg:max-w-none sm:max-w-none prose prose-sm sm:prose lg:prose-lg lg:max-w-none sm:max-w-none
dark:prose-dark dark:max-w-none" dark:prose-dark dark:max-w-none"
/> />
@@ -104,54 +104,68 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import {computed, ref, useAsync, useContext, useFetch, useMeta, useRoute} from "@nuxtjs/composition-api"; import {
computed,
defineComponent,
ref,
useContext,
useFetch,
useMeta,
useRoute, useStatic
} from "@nuxtjs/composition-api";
import {Post} from "../../../@types/types"; import {Post} from "../../../@types/types";
export default { export default defineComponent({
name: "blog", name: "blog",
head: {},
setup() { setup() {
const { $content, i18n, $axios } = useContext() const {$content, i18n, $axios, app, $storage} = useContext()
const slug = useRoute().value.params.slug const {title} = useMeta()
const route = useRoute()
const slug = computed(() => route.value.params.slug)
const post = useAsync(() => { const post = useStatic((slug) => {
return $content(`articles/${i18n.locale}`, slug) return $content(`articles/${i18n.locale}`, slug)
.fetch<Post>() .fetch<Post>()
.catch(() => { .catch(() => {
error({ statusCode: 404, message: "Post not found" }); app.error({statusCode: 404, message: "Post not found"});
}) }) as Promise<Post>
}) }, slug, 'post')
title.value = `Blog - Arthur Danjou - ${post.value?.title}`
const likes = ref(0) const likes = ref(0)
const liked = ref(false) const liked = ref(false)
const { fetch } = useFetch(async () => { const {fetch} = useFetch(async () => {
likes.value = await $axios.get(`https://api.arthurdanjou.fr/posts/${slug}`).data await $axios.get(`https://api.arthurdanjou.fr/posts/${slug}`).then((response) => likes.value = response.data)
liked.value = await $axios.get(`https://api.arthurdanjou.fr/posts/${slug}`).data !== 0
}) })
fetch() fetch()
if (post.value) { //todo rework
useMeta(() => ({ title: 'Blog - Arthur Danjou - ' + post.value.title })) liked.value = $storage.getLocalStorage(`blog:${slug}`) === null
}
const handleLike = async () => { const handleLike = async () => {
console.log("tentative")
if (liked.value) { if (liked.value) {
const {data} = await $axios.post(`https://api.arthurdanjou.fr/posts/${post.value.slug}/unlike`) console.log("true")
if (data.code === 200) { liked.value = false
liked.value = false likes.value = likes.value - 1 <= 0 ? likes.value - 1 : 0
likes.value = data.post.likes $storage.removeLocalStorage(`blog:${slug}`)
} console.log("unliked")
} else { } else {
const {data} = await $axios.post(`https://api.arthurdanjou.fr/posts/${post.value.slug}/like`) const {data} = await $axios.post(`https://api.arthurdanjou.fr/posts/${post.value?.slug}/like`)
if (data.code === 200) { if (data.code === 200) {
liked.value = true liked.value = true
likes.value = data.post.likes likes.value = data.post.likes
$storage.setLocalStorage(`blog:${slug}`, true)
console.log('liked')
} }
} }
} }
const isCopied = ref(false) const isCopied = ref(false)
const copyToClipboard = () => { const copyToClipboard = () => {
navigator.clipboard.writeText('https://arthurdanjou.fr/blog/' + post.value.slug) navigator.clipboard.writeText('https://arthurdanjou.fr/blog/' + post.value?.slug)
isCopied.value = true isCopied.value = true
setTimeout(() => { setTimeout(() => {
isCopied.value = false isCopied.value = false
@@ -166,14 +180,14 @@ export default {
} }
const formatDate = computed(() => { const formatDate = computed(() => {
const dateFormat = post.value.date.split('-') const [first, second, third]: any = post.value?.date.split('-')
return dateFormat[0] + " " + i18n.t('month.' + dateFormat[1]) + " " + dateFormat[2] return `${first} ${i18n.t(`month.${second}`)} ${third}`
}) })
const formatTags = computed(() => { const formatTags = computed(() => {
let tags = "" let tags = ""
post.value.tags.map(tag => { post.value?.tags.map(tag => {
tags += i18n.t(tag) + ", " tags += i18n.t(String(tag)) + ", "
}) })
return tags.substring(0, tags.length - 2) return tags.substring(0, tags.length - 2)
}) })
@@ -190,7 +204,7 @@ export default {
formatTags formatTags
} }
} }
} })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">