Skip to content

Commit 9f329c8

Browse files
bcakmakoglubcakmakoglu
committed
feat(docs): Add docs index page
Signed-off-by: Braks <[email protected]>
1 parent 066155b commit 9f329c8

File tree

10 files changed

+157
-17
lines changed

10 files changed

+157
-17
lines changed

‎docs/app.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
<template>
22
<Header />
33
<div id="app" class="flex">
4-
<Sidebar />
5-
<div id="vue-flow-docs" class="flex-1">
6-
<NuxtPage />
7-
</div>
4+
<NuxtPage />
85
</div>
96
</template>
107
<style>
118
@import 'assets/index.css';
9+
1210
/* these are necessary styles for vue flow */
1311
@import 'node_modules/@braks/vue-flow/dist/style.css';
1412

‎docs/assets/index.css‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
#__nuxt {
2-
text-transform: uppercase;
3-
font-family: 'JetBrains Mono', monospace;
42
-webkit-font-smoothing: antialiased;
53
-moz-osx-font-smoothing: grayscale;
64
text-align: center;
@@ -13,7 +11,7 @@ body,
1311
#__nuxt {
1412
position: relative;
1513
margin: 0;
16-
height: 100%;
14+
min-height: 100%;
1715
color: #111;
1816
background-position: center;
1917
background-size: cover;
@@ -65,8 +63,38 @@ body,
6563
}
6664
}
6765

66+
#vue-flow-examples {
67+
@apply flex m-0 bg-white h-full;
68+
height: 100vh;
69+
text-transform: uppercase;
70+
font-family: 'JetBrains Mono', monospace;
71+
-webkit-font-smoothing: antialiased;
72+
-moz-osx-font-smoothing: grayscale;
73+
}
74+
6875
#vue-flow-docs {
6976
@apply flex m-0 bg-white h-full;
77+
78+
h1 {
79+
@apply text-4xl mb-4 font-bold;
80+
}
81+
82+
p {
83+
@apply text-lg font-qtype;
84+
}
85+
86+
p ~ h1 {
87+
@apply mt-6;
88+
}
89+
90+
a {
91+
@apply text-green-500 font-semibold hover:text-green-300;
92+
}
93+
94+
li {
95+
@apply mt-2;
96+
list-style-type: circle;
97+
}
7098
}
7199

72100
.button {

‎docs/components/DocsSidebar.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script lang="ts" setup>
2+
const examples = [
3+
{
4+
path: '/',
5+
label: 'Introduction',
6+
},
7+
]
8+
</script>
9+
<template>
10+
<aside>
11+
<div class="flex flex-col text-left items-start">
12+
<router-link v-for="(e, i) of examples" :key="`docs-link-${i}`" class="docs-link" :to="`/docs${e.path}`">
13+
{{ e.label }}
14+
</router-link>
15+
</div>
16+
</aside>
17+
</template>
18+
<style scoped>
19+
.docs-link {
20+
@apply w-full text-lg text-white hover:text-yellow-500 px-3 py-2;
21+
}
22+
.router-link-active {
23+
@apply rounded-lg bg-white font-semibold text-yellow-500;
24+
}
25+
aside {
26+
@apply w-[280px] px-[10px] py-[15px];
27+
background: rgba(0, 0, 0, 0.25) !important;
28+
overflow-x: hidden; /* Disable horizontal scroll */
29+
}
30+
</style>

‎docs/components/Sidebar.vue‎ renamed to ‎docs/components/ExamplesSidebar.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -112,19 +112,18 @@ const examples = [
112112
{{ e.label }}
113113
</router-link>
114114
</div>
115-
<slot></slot>
116115
</aside>
117116
</template>
118117
<style scoped>
119118
.example-link {
120-
@apply w-full text-lg text-white hover:text-yellow-500 px-3 py-2;
119+
@apply w-full text-lg text-white hover:text-yellow-500 px-3 py-2 leading-tight;
121120
}
122121
.router-link-active {
123-
@apply rounded-lg bg-white font-semibold text-yellow-500;
122+
@apply rounded-lg bg-white font-semibold text-yellow-500 shadow-lg;
124123
}
125124
aside {
126-
@apply w-[280px] h-full px-[10px] py-[15px];
127-
background: rgba(0, 0, 0, 0.25);
125+
@apply relative w-[280px] h-full px-[10px] py-[15px];
126+
background: rgba(0, 0, 0, 0.25) !important;
128127
overflow-x: hidden; /* Disable horizontal scroll */
129128
}
130129
</style>

‎docs/components/Header.vue‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,27 @@
1+
<script setup>
2+
import { useStore } from '@braks/vue-flow'
3+
const store = useStore()
4+
</script>
15
<template>
26
<header class="flex border-b-1 border-black border-solid items-center py-4 px-8 font-semibold text-white">
37
<div class="flex flex-col">
4-
<a class="logo text-xl" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow </a>
8+
<a class="logo text-xl" href="https://github.com/bcakmakoglu/vue-flow">
9+
Vue Flow <span class="text-xs">v{{ store.vueFlowVersion }}</span></a
10+
>
511
<span class="text-xs text-gray-800 mt-2"
612
>An open source library by <a href="https://github.com/bcakmakoglu/bcakmakoglu">Braks</a> <br />
713
Based on <a href="https://reactflow.dev">React Flow</a>
814
</span>
915
</div>
10-
<div class="flex-1"><span class="button text-gray-400">Docs</span></div>
1116
<div class="flex-1">
12-
<router-link class="link" to="/examples"> Examples</router-link>
17+
<router-link class="link" to="/docs">Docs</router-link>
18+
</div>
19+
<div class="flex-1">
20+
<router-link class="link" to="/examples">Examples</router-link>
21+
</div>
22+
<div class="flex-1">
23+
<a class="link" href="https://github.com/bcakmakoglu/vue-flow">Github</a>
1324
</div>
14-
<div class="flex-1"><a class="link" href="https://github.com/bcakmakoglu/vue-flow">Github</a></div>
1525
</header>
1626
</template>
1727
<style scoped>

‎docs/layouts/default.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<template>
2+
<ExamplesSidebar />
3+
<div id="vue-flow-examples" class="flex-1">
4+
<slot />
5+
</div>
6+
</template>

‎docs/layouts/docs.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<DocsSidebar />
3+
<div id="vue-flow-docs" class="flex-1 flex flex-col items-center justify-center">
4+
<div class="p-6 text-left gap-2 w-1/2">
5+
<slot />
6+
</div>
7+
</div>
8+
</template>

‎docs/nuxt.config.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ export default defineNuxtConfig({
1818
preserveSymlinks: false,
1919
},
2020
},
21-
target: 'server',
2221
ssr: true,
2322
buildModules: ['nuxt-windicss'],
2423
})

‎docs/pages/docs/getting-started.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script>
2+
export default {
3+
layout: 'docs',
4+
}
5+
</script>
6+
<template>
7+
<h1>Getting started</h1>
8+
<p>
9+
Vue Flow, just like React Flow, is a library for building node-based applications. These can be simple static diagrams or
10+
complex node-based editors. You can implement custom node types and edge types and it comes with components like a mini-map
11+
and graph controls. Feel free to check out the <router-link to="/examples">examples</router-link>.
12+
</p>
13+
</template>

‎docs/pages/docs/index.vue‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<script>
2+
export default {
3+
layout: 'docs',
4+
}
5+
</script>
6+
<template>
7+
<div class="p-4 bg-yellow-200 rounded-xl mb-4">
8+
<p class="italic font-bold">
9+
Vue Flow is not ready for production use yet. If you want to contribute getting the library ready, feel free to do so!
10+
Improvements need to be made on perfomance, documentation and testing.
11+
</p>
12+
</div>
13+
14+
<h1>Introduction</h1>
15+
<p>
16+
Vue Flow, just like React Flow, is a library for building node-based applications. These can be simple static diagrams or
17+
complex node-based editors. You can implement custom node types and edge types and it comes with components like a mini-map
18+
and graph controls. Feel free to check out the <router-link to="/examples">examples</router-link>.
19+
</p>
20+
21+
<h1>Key Features</h1>
22+
<ul>
23+
<li>
24+
<span class="font-semibold">👶 Easy to use</span>: Seamless zooming & panning behaviour and single and multi-selections of
25+
elements
26+
</li>
27+
<li>
28+
<span class="font-semibold">🎨 Customizable</span>: Different <router-link to="/docs/api/node-types">node</router-link> and
29+
<router-link to="/docs/api/edge-types">edge types</router-link> and support for custom nodes with multiple handles and
30+
custom edges
31+
</li>
32+
<li>
33+
<span class="font-semibold">(🚧 Kinda, it's a work in progress) Fast rendering</span>: Only nodes that have changed are
34+
re-rendered and only those that are in the viewport are displayed (optionally)
35+
</li>
36+
<li>
37+
<span class="font-semibold">🧲 Utils</span>: Snap-to-grid and graph
38+
<router-link to="/docs/api/helper-functions">helper functions</router-link>
39+
</li>
40+
<li>
41+
<span class="font-semibold">📦 Components</span>: <router-link to="/docs/api/background">Background</router-link>,
42+
<router-link to="/docs/api/minimap">Minimap</router-link> and <router-link to="/docs/api/controls">Controls</router-link>
43+
</li>
44+
<li>
45+
<span class="font-semibold">🦾 Reliable</span>: Written in <a href="https://www.typescriptlang.org/">TypeScript</a>(🚧 and
46+
not yet tested with <a href="https://cypress.io">Cypress</a>)
47+
</li>
48+
</ul>
49+
</template>

0 commit comments

Comments
 (0)