alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docs): Add docs index page

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-06 15:42:05 +01:00
parent 066155b9f7
commit 9f329c8802
10 changed files with 157 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/DocsSidebar.vue
+30
View File
@@ -0,0 +1,30 @@
<script lang="ts" setup>
const examples = [
{
path: '/',
label: 'Introduction',
},
]
</script>
<template>
<aside>
<div class="flex flex-col text-left items-start">
<router-link v-for="(e, i) of examples" :key="`docs-link-${i}`" class="docs-link" :to="`/docs${e.path}`">
{{ e.label }}
</router-link>
</div>
</aside>
</template>
<style scoped>
.docs-link {
@apply w-full text-lg text-white hover:text-yellow-500 px-3 py-2;
}
.router-link-active {
@apply rounded-lg bg-white font-semibold text-yellow-500;
}
aside {
@apply w-[280px] px-[10px] py-[15px];
background: rgba(0, 0, 0, 0.25) !important;
overflow-x: hidden; /* Disable horizontal scroll */
}
</style>
docs/components/Sidebar.vue → docs/components/ExamplesSidebar.vue
+4 -5
View File
@@ -112,19 +112,18 @@ const examples = [
{{ e.label }}
</router-link>
</div>
<slot></slot>
</aside>
</template>
<style scoped>
.example-link {
@apply w-full text-lg text-white hover:text-yellow-500 px-3 py-2;
@apply w-full text-lg text-white hover:text-yellow-500 px-3 py-2 leading-tight;
}
.router-link-active {
@apply rounded-lg bg-white font-semibold text-yellow-500;
@apply rounded-lg bg-white font-semibold text-yellow-500 shadow-lg;
}
aside {
@apply w-[280px] h-full px-[10px] py-[15px];
background: rgba(0, 0, 0, 0.25);
@apply relative w-[280px] h-full px-[10px] py-[15px];
background: rgba(0, 0, 0, 0.25) !important;
overflow-x: hidden; /* Disable horizontal scroll */
}
</style>
docs/components/Header.vue
+14 -4
View File
@@ -1,17 +1,27 @@
<script setup>
import { useStore } from '@braks/vue-flow'
const store = useStore()
</script>
<template>
<header class="flex border-b-1 border-black border-solid items-center py-4 px-8 font-semibold text-white">
<div class="flex flex-col">
<a class="logo text-xl" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow </a>
<a class="logo text-xl" href="https://github.com/bcakmakoglu/vue-flow">
Vue Flow <span class="text-xs">v{{ store.vueFlowVersion }}</span></a
>
<span class="text-xs text-gray-800 mt-2"
>An open source library by <a href="https://github.com/bcakmakoglu/bcakmakoglu">Braks</a> <br />
Based on <a href="https://reactflow.dev">React Flow</a>
</span>
</div>
<div class="flex-1"><span class="button text-gray-400">Docs</span></div>
<div class="flex-1">
<router-link class="link" to="/examples"> Examples</router-link>
<router-link class="link" to="/docs">Docs</router-link>
</div>
<div class="flex-1">
<router-link class="link" to="/examples">Examples</router-link>
</div>
<div class="flex-1">
<a class="link" href="https://github.com/bcakmakoglu/vue-flow">Github</a>
</div>
<div class="flex-1"><a class="link" href="https://github.com/bcakmakoglu/vue-flow">Github</a></div>
</header>
</template>
<style scoped>