mirror of
https://github.com/ArthurDanjou/website-old.git
synced 2026-01-14 12:14:42 +01:00
Working
This commit is contained in:
53
src/components/GuestBookLogin.vue
Normal file
53
src/components/GuestBookLogin.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<section class="p-6 border border-indigo-300 dark:border-indigo-700 rounded-lg text-justify">
|
||||
<h1 class="text-black font-bold dark:text-white text-2xl">{{ $t('guestbook.signin') }}</h1>
|
||||
<h3 class="text-gray-500 dark:text-gray-400">{{ $t('guestbook.share') }}</h3>
|
||||
<div class="flex space-x-4 my-3">
|
||||
<div @click="loginWithGoogle" class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
|
||||
<GoogleIcon />
|
||||
</div>
|
||||
<div @click="loginWithGithub" class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
|
||||
<GithubIcon />
|
||||
</div>
|
||||
<div @click="loginWithTwitter" class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
|
||||
<TwitterIcon />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300">{{ $t('guestbook.infos') }}</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent, useContext} from "@nuxtjs/composition-api";
|
||||
|
||||
export default defineComponent({
|
||||
name: "GuestBookLogin",
|
||||
setup() {
|
||||
const { $axios } = useContext()
|
||||
|
||||
const loginWithGithub = () => {
|
||||
return $axios.get('/auth/github').then((response) => {
|
||||
console.log(response)
|
||||
})
|
||||
}
|
||||
|
||||
const loginWithGoogle = () => {
|
||||
|
||||
}
|
||||
|
||||
const loginWithTwitter = () => {
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
loginWithGithub,
|
||||
loginWithTwitter,
|
||||
loginWithGoogle
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,11 +1,28 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div class="my-6">
|
||||
<div class="text-justify leading-6">
|
||||
{{ message }}
|
||||
</div>
|
||||
<div class="flex mt-3">
|
||||
<div class="text-gray-600">
|
||||
{{ author }}
|
||||
</div>
|
||||
<div class="text-gray-200 px-3">/</div>
|
||||
<div class="text-gray-400 lining-nums">
|
||||
{{ formatDateAndTime }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent} from "@nuxtjs/composition-api";
|
||||
import {computed, defineComponent, useContext} from "@nuxtjs/composition-api";
|
||||
|
||||
interface GuestBookMessageProps {
|
||||
author: string,
|
||||
message: string,
|
||||
date: string
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: "GuestbookMessage",
|
||||
@@ -22,10 +39,20 @@ export default defineComponent({
|
||||
type: String,
|
||||
default: "Guestbook Date"
|
||||
}
|
||||
},
|
||||
setup(props: GuestBookMessageProps) {
|
||||
const {i18n} = useContext()
|
||||
|
||||
const formatDateAndTime = computed(() => {
|
||||
const date = new Date(props.date)
|
||||
const month = date.getMonth().toString().startsWith('0') ? date.getMonth() : `0${date.getMonth()}`
|
||||
const minutes = date.getMinutes().toString().startsWith('0') ? date.getMinutes() : `0${date.getMinutes()}`
|
||||
return `${date.getDate()} ${i18n.t(`month.${month}`)} ${date.getFullYear()} at ${date.getHours()}:${minutes}`
|
||||
})
|
||||
|
||||
return {
|
||||
formatDateAndTime
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,83 +1,77 @@
|
||||
<template>
|
||||
<header class="dark:bg-black dark:text-white fixed z-50 top-0 left-0 bg-white w-full duration-400" :class="scrollPosition > 50 ? ' shadow-md dark:shadow-white h-16 lg:h-20' : 'h-20 lg:h-24'">
|
||||
<header class="dark:bg-black dark:text-white fixed z-50 top-0 left-0 bg-white w-full duration-400"
|
||||
:class="scrollPosition > 50 ? ' shadow-md dark:shadow-white h-16 lg:h-20' : 'h-20 lg:h-24'">
|
||||
<div class="header-container z-index-50 flex justify-between items-center h-full px-5 xl:px-32">
|
||||
<nuxt-link to="/">
|
||||
<img src="~/assets/images/logo-header.png" alt="Logo Circle" class="h-10 left cursor-pointer duration-500" />
|
||||
<img src="~/assets/images/logo-header.png" alt="Logo Circle" class="h-10 left cursor-pointer duration-500"/>
|
||||
</nuxt-link>
|
||||
<nav class="right">
|
||||
<div class="flex flex-col md:flex-row items-center">
|
||||
<ul class="flex text-lg">
|
||||
<nuxt-link class="hidden md:inline-block" to="/about">
|
||||
<li class="nav-link">
|
||||
<li class="nav-link text-gray-500 dark:text-gray-400" :class="{'text-black dark:text-white': isWindow('/about')}">
|
||||
{{ $t('header.about') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link class="hidden md:inline-block" to="/blog">
|
||||
<li class="nav-link">
|
||||
<li class="nav-link text-gray-500 dark:text-gray-400" :class="{'text-black dark:text-white': isWindow('/blog')}">
|
||||
{{ $t('header.blog') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link class="hidden md:inline-block" to="/env">
|
||||
<li class="nav-link">
|
||||
{{ $t('header.env') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link class="hidden md:inline-block" to="/projects">
|
||||
<li class="nav-link">
|
||||
<li class="nav-link text-gray-500 dark:text-gray-400" :class="{'text-black dark:text-white': isWindow('/projects')}">
|
||||
{{ $t('header.projects') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link class="hidden md:inline-block" to="/contact">
|
||||
<li class="nav-link">
|
||||
<li class="nav-link text-gray-500 dark:text-gray-400" :class="{'text-black dark:text-white': isWindow('/projects')}">
|
||||
{{ $t('header.contact') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="dark:text-white dark:bg-black text-sm z-50 bg-white md:hidden fixed bottom-0 left-0 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
|
||||
<nuxt-link to="/" class="w-1/6 nav-link-mobile">
|
||||
<ul
|
||||
class="dark:text-white dark:bg-black text-sm z-50 bg-white md:hidden fixed bottom-0 left-0 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
|
||||
<nuxt-link to="/" class="w-1/5">
|
||||
<li class="h-full w-full font-medium flex flex-col items-center justify-center">
|
||||
<HomeIcon :active="true" />
|
||||
<HomeIcon :active="isWindow('')"/>
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/about" class="w-1/6 nav-link-mobile">
|
||||
<nuxt-link to="/about" class="w-1/5">
|
||||
<li class="font-medium flex flex-col items-center justify-center">
|
||||
<UserIcon :active="false" />
|
||||
<UserIcon :active="isWindow('/about')"/>
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/blog" class="w-1/6 nav-link-mobile blog">
|
||||
<nuxt-link to="/blog" class="w-1/5">
|
||||
<li class="font-medium flex flex-col items-center justify-center">
|
||||
<BookIcon />
|
||||
<BookIcon :active="isWindow('/blog')"/>
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/env" class="w-1/6 nav-link-mobile">
|
||||
<nuxt-link to="/projects" class="w-1/5">
|
||||
<li class="font-medium flex flex-col items-center justify-center">
|
||||
<ComputerIcon />
|
||||
<LightbulbIcon :active="isWindow('/projects')"/>
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/projects" class="w-1/6 nav-link-mobile">
|
||||
<nuxt-link to="/contact" class="w-1/5">
|
||||
<li class="font-medium flex flex-col items-center justify-center">
|
||||
<LightbulbIcon />
|
||||
<ContactIcon :active="isWindow('/contact')"/>
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/contact" class="w-1/6 nav-link-mobile">
|
||||
<li class="font-medium flex flex-col items-center justify-center">
|
||||
<ContactIcon />
|
||||
</li>
|
||||
</nuxt-link>
|
||||
</ul>
|
||||
</nav>
|
||||
<div>
|
||||
<ul class="flex items-center">
|
||||
<li @click="changeLanguage()" class="mx-1 h-9 w-9 cursor-pointer flex items-center justify-center p-1.5 rounded-xl hover:bg-gray-300 duration-200 dark:hover:bg-dark-400">
|
||||
<TranslateIcon />
|
||||
<li @click="changeLanguage()"
|
||||
class="mx-1 h-9 w-9 cursor-pointer flex items-center justify-center p-1.5 rounded-xl hover:bg-gray-300 duration-200 dark:hover:bg-dark-400">
|
||||
<TranslateIcon/>
|
||||
</li>
|
||||
<li @click="changeColorMode()" class="mx-1 h-9 w-9 cursor-pointer flex items-center p-1.5 rounded-xl hover:bg-gray-300 dark:hover:bg-dark-400 duration-200">
|
||||
<li @click="changeColorMode()"
|
||||
class="mx-1 h-9 w-9 cursor-pointer flex items-center p-1.5 rounded-xl hover:bg-gray-300 dark:hover:bg-dark-400 duration-200">
|
||||
<div v-if="this.$colorMode.preference === 'light'">
|
||||
<MoonIcon />
|
||||
<MoonIcon/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<SunIcon />
|
||||
<SunIcon/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -87,7 +81,16 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent, onMounted, onUnmounted, ref, useAsync, useContext, useRouter} from "@nuxtjs/composition-api";
|
||||
import {
|
||||
computed,
|
||||
defineComponent,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
ref,
|
||||
useAsync,
|
||||
useContext,
|
||||
useRouter, watch
|
||||
} from "@nuxtjs/composition-api";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Header",
|
||||
@@ -119,11 +122,17 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
|
||||
const isWindow = (loc: string) => {
|
||||
if (loc === '') return $router.currentRoute.path === "/"
|
||||
else return $router.currentRoute.path.includes(loc)
|
||||
}
|
||||
|
||||
return {
|
||||
scrollPosition,
|
||||
changeColorMode,
|
||||
updateScroll,
|
||||
changeLanguage
|
||||
changeLanguage,
|
||||
isWindow
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -131,15 +140,7 @@ export default defineComponent({
|
||||
|
||||
<style scoped lang="scss">
|
||||
.nav-link {
|
||||
@apply text-gray-500 dark:text-gray-400 hover:dark:text-white font-medium hover:text-black mx-4 cursor-pointer duration-300
|
||||
}
|
||||
|
||||
.nav-link-mobile {
|
||||
@apply text-gray-500 dark:text-gray-400 hover:dark:text-white hover:text-black duration-300
|
||||
}
|
||||
|
||||
.nuxt-link-exact-active {
|
||||
@apply text-black dark:text-white;
|
||||
@apply hover:dark:text-white font-medium hover:text-black mx-4 cursor-pointer duration-300
|
||||
}
|
||||
|
||||
.navbar-bottom-items li {
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
<template>
|
||||
<svg class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
|
||||
<svg v-if="active" class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
|
||||
<path
|
||||
d="M21 4H7a2 2 0 1 0 0 4h14v13a1 1 0 0 1-1 1H7a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h13a1 1 0 0 1 1 1v1zm-1 3H7a1 1 0 1 1 0-2h13v2z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<svg v-else class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
|
||||
<path
|
||||
d="M21 4H7a2 2 0 1 0 0 4h14v13a1 1 0 0 1-1 1H7a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h13a1 1 0 0 1 1 1v1zM5 18a2 2 0 0 0 2 2h12V10H7a3.982 3.982 0 0 1-2-.535V18zM20 7H7a1 1 0 1 1 0-2h13v2z"
|
||||
fill="currentColor"
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
<template>
|
||||
<svg class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
|
||||
<path
|
||||
d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "ComputerIcon",
|
||||
props: {
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,8 +1,16 @@
|
||||
<template>
|
||||
<svg class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
|
||||
<svg v-if="active" class="inline" width="2.5em" height="2.5em" viewBox="0 0 20 20" focusable="false">
|
||||
<path
|
||||
d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-1 14H5c-.55 0-1-.45-1-1V8l6.94 4.34c.65.41 1.47.41 2.12 0L20 8v9c0 .55-.45 1-1 1zm-7-7L4 6h16l-8 5z"
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
d="M7.172 11.334l2.83 1.935l2.728-1.882l6.115 6.033c-.161.052-.333.08-.512.08H1.667c-.22 0-.43-.043-.623-.12l6.128-6.046zM20 6.376v9.457c0 .247-.054.481-.15.692l-5.994-5.914L20 6.376zM0 6.429l6.042 4.132l-5.936 5.858A1.663 1.663 0 0 1 0 15.833V6.43zM18.333 2.5c.92 0 1.667.746 1.667 1.667v.586L9.998 11.648L0 4.81v-.643C0 3.247.746 2.5 1.667 2.5h16.666z"
|
||||
/>
|
||||
</svg>
|
||||
<svg v-else class="inline" width="2.5em" height="2.5em" viewBox="0 0 20 20" focusable="false">
|
||||
<path
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
d="M18.333 2.5c.92 0 1.667.746 1.667 1.667v11.666c0 .92-.746 1.667-1.667 1.667H1.667C.747 17.5 0 16.754 0 15.833V4.167C0 3.247.746 2.5 1.667 2.5h16.666zM7.168 11.328l-4.91 4.852h15.325l-4.857-4.802L10 13.265l-2.832-1.937zM18.64 7.292l-4.796 3.316l4.796 4.736V7.292zm-17.279.061v7.836l4.686-4.631l-4.686-3.205zm16.956-3.532H1.698a.358.358 0 0 0-.25.086a.26.26 0 0 0-.085.222v1.62L10 11.656l8.644-5.965V4.199c.001-.134-.03-.231-.092-.292a.306.306 0 0 0-.234-.086z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
@@ -1,9 +1,14 @@
|
||||
<template>
|
||||
<svg class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
|
||||
<svg v-if="active" class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
|
||||
<path
|
||||
d="M15 22.065v-5a3 3 0 0 0-6 0v5H4a2 2 0 0 1-2-2V9.197a2 2 0 0 1 .971-1.715l8-4.8a2 2 0 0 1 2.058 0l8 4.8A2 2 0 0 1 22 9.197v10.868a2 2 0 0 1-2 2h-5z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<svg v-else class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
|
||||
<path
|
||||
d="M20 20V9.132l-8-4.8l-8 4.8V20h4v-2.75a4 4 0 1 1 8 0V20h4zm-6 2v-4.75a2 2 0 1 0-4 0V22H4a2 2 0 0 1-2-2V9.132a2 2 0 0 1 .971-1.715l8-4.8a2 2 0 0 1 2.058 0l8 4.8A2 2 0 0 1 22 9.132V20a2 2 0 0 1-2 2h-6z"
|
||||
stroke="currentColor"
|
||||
:class="{active: 'fill-black dark:fill-white'}"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
@@ -1,9 +1,15 @@
|
||||
<template>
|
||||
<svg class="inline" width="1.5em" height="2.5em" viewBox="0 0 352 512" focusable="false">
|
||||
<svg v-if="active" class="inline" width="2.5em" height="2.5em" viewBox="0 0 256 256" focusable="false">
|
||||
<path
|
||||
d="M176 80c-52.94 0-96 43.06-96 96c0 8.84 7.16 16 16 16s16-7.16 16-16c0-35.3 28.72-64 64-64c8.84 0 16-7.16 16-16s-7.16-16-16-16zM96.06 459.17c0 3.15.93 6.22 2.68 8.84l24.51 36.84c2.97 4.46 7.97 7.14 13.32 7.14h78.85c5.36 0 10.36-2.68 13.32-7.14l24.51-36.84c1.74-2.62 2.67-5.7 2.68-8.84l.05-43.18H96.02l.04 43.18zM176 0C73.72 0 0 82.97 0 176c0 44.37 16.45 84.85 43.56 115.78c16.64 18.99 42.74 58.8 52.42 92.16v.06h48v-.12c-.01-4.77-.72-9.51-2.15-14.07c-5.59-17.81-22.82-64.77-62.17-109.67c-20.54-23.43-31.52-53.15-31.61-84.14c-.2-73.64 59.67-128 127.95-128c70.58 0 128 57.42 128 128c0 30.97-11.24 60.85-31.65 84.14c-39.11 44.61-56.42 91.47-62.1 109.46a47.507 47.507 0 0 0-2.22 14.3v.1h48v-.05c9.68-33.37 35.78-73.18 52.42-92.16C335.55 260.85 352 220.37 352 176C352 78.8 273.2 0 176 0z"
|
||||
d="M176 232a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h80a8 8 0 0 1 8 8zm40-128a87.544 87.544 0 0 1-33.642 69.208A16.235 16.235 0 0 0 176 185.977V192a16.018 16.018 0 0 1-16 16H96a16.018 16.018 0 0 1-16-16v-6.031a16.02 16.02 0 0 0-6.23-12.66a87.575 87.575 0 0 1-33.769-68.814c-.263-47.662 38.263-87.35 85.881-88.47A88.002 88.002 0 0 1 216 104zm-50.343 2.343a8.002 8.002 0 0 0-11.314 0L128 132.687l-26.343-26.344a8 8 0 0 0-11.314 11.314L120 147.314V184a8 8 0 0 0 16 0v-36.686l29.657-29.657a8 8 0 0 0 0-11.314z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
/>
|
||||
</svg>
|
||||
<svg v-else class="inline" width="2.5em" height="2.5em" viewBox="0 0 256 256" focusable="false">
|
||||
<path
|
||||
d="M176 232a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h80a8 8 0 0 1 8 8zm40-128a87.544 87.544 0 0 1-33.642 69.208A16.235 16.235 0 0 0 176 185.977V192a16.018 16.018 0 0 1-16 16H96a16.018 16.018 0 0 1-16-16v-6.031a16.02 16.02 0 0 0-6.23-12.66a87.575 87.575 0 0 1-33.769-68.814c-.263-47.662 38.263-87.35 85.881-88.47A88.002 88.002 0 0 1 216 104zm-16 0a72 72 0 0 0-73.741-71.98C87.303 32.939 55.786 65.41 56 104.408a71.657 71.657 0 0 0 27.637 56.307A31.922 31.922 0 0 1 96 185.968V192h24v-44.686l-29.657-29.657a8 8 0 0 1 11.314-11.314L128 132.687l26.343-26.344a8 8 0 1 1 11.314 11.314L136 147.314V192h24v-6.024a32.135 32.135 0 0 1 12.467-25.344A71.638 71.638 0 0 0 200 104z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,9 +1,14 @@
|
||||
<template>
|
||||
<svg class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
|
||||
<svg v-if="active" class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
|
||||
<path
|
||||
d="M15.71 12.71a6 6 0 1 0-7.42 0a10 10 0 0 0-6.22 8.18a1 1 0 0 0 2 .22a8 8 0 0 1 15.9 0a1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1a10 10 0 0 0-6.25-8.19zM12 12a4 4 0 1 1 4-4a4 4 0 0 1-4 4z"
|
||||
stroke="currentColor"
|
||||
:class="{active: 'fill-black dark:fill-white'}"
|
||||
d="M20 22H4v-2a5 5 0 0 1 5-5h6a5 5 0 0 1 5 5v2zm-8-9a6 6 0 1 1 0-12a6 6 0 0 1 0 12z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<svg v-else class="inline" width="2.5em" height="2.5em" viewBox="0 0 24 24" focusable="false">
|
||||
<path
|
||||
d="M20 22h-2v-2a3 3 0 0 0-3-3H9a3 3 0 0 0-3 3v2H4v-2a5 5 0 0 1 5-5h6a5 5 0 0 1 5 5v2zm-8-9a6 6 0 1 1 0-12a6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
@@ -16,20 +16,20 @@
|
||||
<h1 class="text-3xl md:text-5xl font-bold">
|
||||
{{ post.title }}
|
||||
</h1>
|
||||
<h3 class="text-xl text-gray-800 dark:text-dark-100 my-4 md:mt-8">
|
||||
<h3 class="text-xl text-gray-800 dark:text-gray-300 my-4 md:mt-8">
|
||||
{{ post.description }}
|
||||
</h3>
|
||||
<div class="flex flex-row justify-between w-full md:w-2/3 mb-12">
|
||||
<div>
|
||||
<p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-100">Date</p>
|
||||
<p class="uppercase text-sm font-bold text-gray-800 dark:text-gray-400">Date</p>
|
||||
<p>{{ formatDate }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="uppercase text-sm font-bold text-gray-800 dark:text-dark-100">{{ $t('blog.read.time') }}</p>
|
||||
<p class="uppercase text-sm font-bold text-gray-800 dark:text-gray-400">{{ $t('blog.read.time') }}</p>
|
||||
<p>{{ post.reading_time }} min</p>
|
||||
</div>
|
||||
<div>
|
||||
<p :class="post.tags.length === 0 ? 'opacity-0': 'opacity-100'" class="uppercase text-sm font-bold text-gray-800 dark:text-dark-100">Tags</p>
|
||||
<p :class="post.tags.length === 0 ? 'opacity-0': 'opacity-100'" class="uppercase text-sm font-bold text-gray-800 dark:text-gray-400">Tags</p>
|
||||
<p>{{ formatTags }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,30 +1,20 @@
|
||||
<template>
|
||||
<main v-if="guestbook_messages" class="flex flex-col mb-8 px-5 xl:px-64">
|
||||
<PageTitle class="self-center" title="part.guestbook"/>
|
||||
<section @click="log" class="flex flex-col 2xl:flex-row items-center py-8">
|
||||
<section class="flex flex-col 2xl:flex-row items-center py-8">
|
||||
<div class="ml-2 text-lg leading-6 text-justify dark:text-gray-400 text-gray-700">
|
||||
<p>{{ $t('guestbook.description') }}</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="md:w-2/3 p-6 border border-indigo-300 dark:border-indigo-700 rounded-lg text-justify">
|
||||
<h1 class="text-black font-bold dark:text-white text-2xl">{{ $t('guestbook.signin') }}</h1>
|
||||
<h3 class="text-gray-500 dark:text-gray-400">{{ $t('guestbook.share') }}</h3>
|
||||
<div class="flex space-x-4 my-3">
|
||||
<div class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
|
||||
<GoogleIcon />
|
||||
</div>
|
||||
<div class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
|
||||
<GithubIcon />
|
||||
</div>
|
||||
<div class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
|
||||
<TwitterIcon />
|
||||
</div>
|
||||
<GuestBookLogin />
|
||||
<section class="flex flex-col py-8">
|
||||
<div v-for="message in guestbook_messages">
|
||||
<GuestbookMessage
|
||||
:message="message.message"
|
||||
:author="message.user.username"
|
||||
:date="message.created_at"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300">{{ $t('guestbook.infos') }}</p>
|
||||
</section>
|
||||
<section class="flex flex-col 2xl:flex-row justify-center items-center py-8">
|
||||
FETCH messages
|
||||
{{ guestbook_messages }}
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
@@ -46,7 +36,7 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const { $axios } = useContext()
|
||||
const { $axios, $sentry } = useContext()
|
||||
const guestbook_messages = ref([])
|
||||
|
||||
useAsync(async () => {
|
||||
@@ -59,17 +49,12 @@ export default defineComponent({
|
||||
guestbook_messages.value = response.data.guestbook_messages
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("error", error)
|
||||
$sentry.captureEvent(error)
|
||||
})
|
||||
})
|
||||
|
||||
const log = () => {
|
||||
console.log(guestbook_messages)
|
||||
}
|
||||
|
||||
return {
|
||||
guestbook_messages,
|
||||
log
|
||||
guestbook_messages
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
1061
tsconfig.tsbuildinfo
1061
tsconfig.tsbuildinfo
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user