docs: add github, discord and react flow icons to header

docs/src/.vuepress/theme/index.ts

@@ -41,7 +41,6 @@ const typedocSidebarEntries = (): SidebarConfigArray => {
 export default {
   name: 'vuepress-theme-local',
   extends: defaultTheme({
-    repo: 'bcakmakoglu/vue-flow',
     docsDir: 'docs/src/',
     docsBranch: 'master',
     lastUpdated: true,

docs/src/.vuepress/theme/layouts/default.vue

@@ -7,9 +7,49 @@ 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>