Skip to content

Commit 7ecf37b

Browse files
bcakmakoglubcakmakoglu
committed
docs: add showcase section to home page
1 parent aa2bbd6 commit 7ecf37b

File tree

8 files changed

+64
-30
lines changed

8 files changed

+64
-30
lines changed

‎docs/components/home/Acknowledgement.vue

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,34 @@ import Heart from '~icons/mdi/heart'
44

55
<template>
66
<div id="acknowledgement">
7-
<div class="max-w-3/4 md:max-w-4xl mx-auto py-4 md:(pb-12 pt-6) text-center">
8-
<h1 class="md:mb-8 flex justify-center items-center"><Heart class="text-red-500 mr-2" /> Acknowledgement</h1>
7+
<div class="bg-black text-white dark:(bg-gray-100 text-black)">
8+
<div class="max-w-3/4 md:max-w-4xl mx-auto py-4 md:py-12 lg:py-12 text-center">
9+
<h1 class="md:(!mb-8) flex justify-center items-center gap-2"><Heart class="text-red-500" /> Acknowledgement</h1>
910

10-
<p>
11-
<strong>First off</strong>: A big thank you to the developers of
12-
<a href="https://webkid.io" target="_blank" class="text-green-500">Webkid</a>. Their amazing work made it possible for me
13-
to create this port to Vue 3 - without them there is no Vue Flow.
14-
</p>
11+
<p>
12+
<span class="underline">First and foremost</span>: A huge <span class="font-semibold text-red-400">Thank you</span> to
13+
the developers of <a href="https://webkid.io" target="_blank" class="text-green-500">Webkid</a>.
1514

16-
<br />
15+
<span class="inline-block">
16+
Without their continuous, amazing, open-source work, this project would not have been possible.
17+
</span>
18+
</p>
1719

18-
<p>
19-
Vue Flow is built on top of existing features and code taken from
20-
<a href="https://reactflow.dev" target="_blank" class="text-green-500">React Flow</a>. It replicates the basic features
21-
found in React Flow (zoom, pan, graph, additional components and more) and brings them to the Vue 3 experience, with all
22-
the fun reactivity and features like template slots etc. you know and love from Vue. If you're happy with Vue Flow,
23-
<br />
24-
<a href="https://github.com/sponsors/wbkd" target="_blank" class="text-lg font-bold text-green-500">
25-
please consider supporting Webkid by donating.
26-
</a>
27-
</p>
20+
<p>
21+
<span class="font-semibold text-secondary">Vue Flow</span> is built on top of existing features and code taken from
22+
<a href="https://reactflow.dev" target="_blank" class="text-green-500">React Flow</a>. It replicates the features found
23+
in React Flow and brings them to the Vue 3 experience, with all the fun reactivity and features like template slots etc.
24+
you know and love from Vue. If you're happy with Vue Flow,
25+
26+
<span class="inline-block text-xl font-medium">
27+
please consider supporting <a href="https://webkid.io" target="_blank" class="text-green-500">Webkid</a> by
28+
<a href="https://github.com/sponsors/wbkd" target="_blank" class="font-bold text-green-500"> donating </a> or
29+
<a href="https://pro.reactflow.dev/" target="_blank" class="font-bold text-green-500">
30+
subscribing to React Flow Pro.
31+
</a>
32+
</span>
33+
</p>
34+
</div>
2835
</div>
2936
</div>
3037
</template>

‎docs/components/home/Showcase.vue

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script lang="ts" setup></script>
2+
3+
<template>
4+
<div class="w-full">
5+
<div class="max-w-3/4 md:max-w-4xl mx-auto py-4 md:py-12 lg:py-12 text-center">
6+
<div class="flex flex-col items-center justify-center gap-2">
7+
<h1>Showcase</h1>
8+
9+
<p class="text-lg">Vue Flow is used in a variety of projects and applications. Here are some of them:</p>
10+
11+
<div class="grid grid-cols-2 mt-8">
12+
<div class="flex flex-col justify-center">
13+
<div class="self-center w-full shadow-xl rounded-xl font-mono uppercase border-1 border-gray overflow-hidden">
14+
<img src="/assets/octai.png" alt="Octai" />
15+
</div>
16+
17+
<a href="https://octai.com" target="_blank">
18+
<h2 class="text-3xl mt-6 font-semibold text-[#2196f3]">Octai</h2>
19+
</a>
20+
21+
<h3 class="text-lg">Machine Learning NoCode Platform for Data Scientists and Developers.</h3>
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
</div>
27+
</template>

‎docs/src/.vitepress/theme/layouts/default.vue

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,3 @@ watch(
3030
<template>
3131
<ParentLayout></ParentLayout>
3232
</template>
33-
34-
<style>
35-
.page-footer {
36-
@apply py-4 text-center;
37-
}
38-
</style>

‎docs/src/assets/index.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
--vp-c-accent: #BB86FC;
66
}
77

8+
.VPHome {
9+
padding-bottom: 0 !important;
10+
}
11+
812
.VPNavBar.has-sidebar .content, .VPNav {
913
background-color: rgba(var(--vp-c-bg), 0.75);
1014
backdrop-filter: blur(1px);

‎docs/src/assets/octai.png

54.2 KB
Loading

‎docs/src/auto-imports.d.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* eslint-disable */
22
/* prettier-ignore */
33
// @ts-nocheck
4+
// noinspection JSUnusedGlobalSymbols
45
// Generated by unplugin-auto-import
56
export {}
67
declare global {
@@ -89,9 +90,9 @@ declare global {
8990
const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
9091
const toRaw: typeof import('vue')['toRaw']
9192
const toReactive: typeof import('@vueuse/core')['toReactive']
92-
const toRef: typeof import('@vueuse/core')['toRef']
93+
const toRef: typeof import('vue')['toRef']
9394
const toRefs: typeof import('vue')['toRefs']
94-
const toValue: typeof import('@vueuse/core')['toValue']
95+
const toValue: typeof import('vue')['toValue']
9596
const triggerRef: typeof import('vue')['triggerRef']
9697
const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
9798
const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
@@ -278,5 +279,5 @@ declare global {
278279
// for type re-export
279280
declare global {
280281
// @ts-ignore
281-
export type { Component,ComponentPublicInstance,ComputedRef,InjectionKey,PropType,Ref,VNode } from 'vue'
282+
export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
282283
}

‎docs/src/components.d.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,9 @@
33
// @ts-nocheck
44
// Generated by unplugin-vue-components
55
// Read more: https://github.com/vuejs/core/pull/3399
6-
import '@vue/runtime-core'
7-
86
export {}
97

10-
declare module '@vue/runtime-core' {
8+
declare module 'vue' {
119
export interface GlobalComponents {
1210
Acknowledgement: typeof import('./../components/home/Acknowledgement.vue')['default']
1311
Additional: typeof import('./../components/home/flows/Additional.vue')['default']
@@ -37,6 +35,7 @@ declare module '@vue/runtime-core' {
3735
RGB: typeof import('./../components/home/flows/RGB.vue')['default']
3836
RouterLink: typeof import('vue-router')['RouterLink']
3937
RouterView: typeof import('vue-router')['RouterView']
38+
Showcase: typeof import('./../components/home/Showcase.vue')['default']
4039
Sidebar: typeof import('./../components/examples/dnd/Sidebar.vue')['default']
4140
SnappableConnectionLine: typeof import('./../components/examples/connection-radius/SnappableConnectionLine.vue')['default']
4241
Team: typeof import('./../components/home/Team.vue')['default']

‎docs/src/index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,6 @@ layout: home
99

1010
<Features />
1111

12+
<Showcase />
13+
1214
<Acknowledgement />

0 commit comments

Comments
 (0)