69 lines
2.9 KiB
Vue
69 lines
2.9 KiB
Vue
<script>
|
|
import 'virtual:windi.css'
|
|
import '@animxyz/core'
|
|
import '@braks/vue-flow/dist/style.css'
|
|
import '@braks/vue-flow/dist/theme-default.css'
|
|
import '../../assets/index.css'
|
|
</script>
|
|
<script setup>
|
|
import ParentLayout from '@vuepress/theme-default/lib/client/layouts/Layout.vue'
|
|
import ReactIcon from '~icons/logos/react'
|
|
import GithubIcon from '~icons/carbon/logo-github'
|
|
import DiscordIcon from '~icons/logos/discord-icon'
|
|
</script>
|
|
<template>
|
|
<ParentLayout>
|
|
<template #navbar-after>
|
|
<div class="flex justify-center items-center ml-4 gap-3">
|
|
<a
|
|
href="https://github.com/bcakmakoglu/vue-flow"
|
|
target="_blank" rel="noopener noreferrer"
|
|
aria-label="GitHub"
|
|
class="relative group cursor-pointer flex justify-center items-center"
|
|
>
|
|
<GithubIcon class="text-2xl transform group-hover:scale-125 transition transition-all ease duration-300" />
|
|
<span class="transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute top-[25px] right-0 mt-2 mr-2 text-xs">
|
|
Contribute on GitHub!
|
|
</span>
|
|
</a>
|
|
<a
|
|
href="https://discord.gg/F4v6qE4Fuq"
|
|
target="_blank" rel="noopener noreferrer"
|
|
aria-label="Discord"
|
|
class="relative group cursor-pointer flex justify-center items-center"
|
|
>
|
|
<DiscordIcon class="text-2xl transform group-hover:scale-125 transition transition-all ease duration-300" />
|
|
<span class="transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute top-[25px] right-0 mt-2 mr-2 text-xs">
|
|
Join the Discord server!
|
|
</span>
|
|
</a>
|
|
<a
|
|
href="https://reactflow.dev/"
|
|
target="_blank" rel="noopener noreferrer"
|
|
aria-label="React Flow"
|
|
class="relative group cursor-pointer flex justify-center items-center"
|
|
>
|
|
<ReactIcon class="text-2xl transform group-hover:scale-125 transition transition-all ease duration-300" />
|
|
<span class="transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute top-[25px] right-0 mt-2 text-xs">
|
|
Check out the original React Flow by Wbkd!
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</template>
|
|
<template #page-bottom>
|
|
<div class="page-footer">MIT Licensed | Copyright © 2021-present Burak Cakmakoglu</div>
|
|
</template>
|
|
</ParentLayout>
|
|
</template>
|
|
<style>
|
|
.page-footer {
|
|
@apply dark:(text-white bg-black) pt-[2rem] text-center;
|
|
border-top: 1px solid var(--c-border);
|
|
transition: border-color var(--t-color);
|
|
}
|
|
|
|
.theme-default-content:not(.custom) h1:first-of-type {
|
|
margin-top: var(--navbar-height);
|
|
}
|
|
</style>
|