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

docs: replace vuepress specific components

Browse Source
This commit is contained in:
braks
2022-07-30 16:30:59 +02:00
committed by Braks
parent af78b52233
commit f386ea454c
26 changed files with 99 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/components/home/Features.vue
View File

@@ -1,10 +1,11 @@
<script lang="ts" setup>
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
import type { VueFlowStore } from '@braks/vue-flow'
import Basic from './flows/Basic.vue'
import RGB from './flows/RGB.vue'
import Nested from './flows/Nested.vue'
import Additional from './flows/Additional.vue'
const breakpoints = useBreakpoints(breakpointsTailwind)
const el = ref()
const el = ref<HTMLDivElement>()
const instances: VueFlowStore[] = []
const onLoad = (instance: VueFlowStore) => {

2
docs/components/home/flows/Additional.vue
View File

@@ -106,7 +106,7 @@ onPaneReady((i) => emit('pane', i))
<br />
Plus it's built for composition, making the access of the internal state easy as can be!
</p>
<router-link class="docs-button max-w-max" to="/guide/"> Documentation </router-link>
<a class="docs-button max-w-max" href="/guide/"> Documentation </a>
</div>
</div>
</template>

2
docs/components/home/flows/Basic.vue
View File

@@ -111,7 +111,7 @@ onConnect((param) => {
Vue Flow comes with built-in features like zoom & pan and dedicated controls, single & multi-selections, draggable
elements, customizable nodes and edges and a bunch of event handlers.
</p>
<router-link class="docs-button max-w-max" to="/guide/"> Documentation </router-link>
<a class="docs-button max-w-max" href="/guide/"> Documentation </a>
</div>
</div>
<div

2
docs/components/home/flows/Nested.vue
View File

@@ -65,7 +65,7 @@ onPaneReady((i) => emit('pane', i))
<br />
No worries! Vue Flow supports creating nested nodes and nested graphs out-of-the-box.
</p>
<router-link class="docs-button max-w-max" to="/guide/"> Documentation </router-link>
<a class="docs-button max-w-max" href="/guide/"> Documentation </a>
</div>
</div>
<div

2
docs/components/home/flows/RGB.vue
View File

@@ -108,7 +108,7 @@ const nodeColor: MiniMapNodeFunc = (node) => {
You can expand on the existing features by using your own custom nodes and edges and implement any design and
functionality you want.
</p>
<router-link class="docs-button max-w-max" to="/guide/">Documentation</router-link>
<a class="docs-button max-w-max" href="/guide/">Documentation</a>
</div>
</div>
</template>

4
docs/src/examples/dnd.md
View File

@@ -16,9 +16,9 @@ This example shows another key feature of Vue Flow. You can initialize the Flow
is actually mounted. This can be achieved by using the [`useVueFlow`](/guide/composables.html#usevueflow) composable.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="dnd"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>

4
docs/src/examples/edges/connection-line.md
View File

@@ -11,9 +11,9 @@ functionality you can use your own custom connection line.
Simply pass a component in the designated template slot, and you're good to go.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="connectionline"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>

4
docs/src/examples/edges/index.md
View File

@@ -9,9 +9,9 @@ Vue Flow comes with four pre-defined edge types - bezier-, step-, smoothstep and
In addition to the built-in edge types you can create your own custom edges. You can find more information on edge types [here](/guide/edge.html#default-edge-types).
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="edges"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>

4
docs/src/examples/edges/updatable-edge.md
View File

@@ -14,9 +14,9 @@ for specific edges by using the `updatable` attribute.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="updateEdge"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>

4
docs/src/examples/edges/validation.md
View File

@@ -31,9 +31,9 @@ const nodes = [
```
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="validation"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>

4
docs/src/examples/empty.md
View File

@@ -9,9 +9,9 @@ Similar to the drag and drop example, we can also add nodes to an empty graph on
which triggers a push into our elements / nodes array.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="empty"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>

4
docs/src/examples/hidden.md
View File

@@ -16,9 +16,9 @@ This can save you some time on initial renders but consider that moving the pane
which can cause performance spikes depending on the complexity of the components that have to be mounted.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="hidden"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>

4
docs/src/examples/horizontal.md
View File

@@ -11,9 +11,9 @@ You can use horizontal layouts with the default node types as well.
You can define where source or target handle positions are with the `sourcePosition` or `targetPosition` properties of nodes.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="horizontal"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>

4
docs/src/examples/index.md
View File

@@ -11,9 +11,9 @@ On the bottom left you see the viewport-controls and on the bottom right the min
You can also see the built-in node (default, input, output) and edge (bezier, straight, step, smoothstep) types.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="basic"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>

4
docs/src/examples/interaction.md
View File

@@ -10,9 +10,9 @@ This includes enabling/disabling zoom-scroll, pan-scroll, dragging etc.
In the sandbox below you can find an example showing you how to toggle interaction options.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="interaction"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>

4
docs/src/examples/multi.md
View File

@@ -10,9 +10,9 @@ Vue Flow is not limited to a single instance on a page.
You can use as many component instances as you like.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="multi"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>

4
docs/src/examples/nodes/index.md
View File

@@ -11,9 +11,9 @@ You can display any content and functionality inside a custom node. More documen
up a custom node can be found on the [custom nodes page](/guide/node.html#custom-nodes).
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="customNode"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>

4
docs/src/examples/nodes/nesting.md
View File

@@ -12,9 +12,9 @@ You can also define the boundaries of a node, i.e. if the node can be dragged ou
or even let Vue Flow extend the area of a node to fit all it's children.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="nested"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>

4
docs/src/examples/nodes/update-node.md
View File

@@ -14,9 +14,9 @@ That means you can manipulate any property of your original nodes, and it will t
You can of course also access the nodes directly from the state and change their properties from there.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="updateNode"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>

4
docs/src/examples/save.md
View File

@@ -17,9 +17,9 @@ You can extend on this basic idea however you like, i.e. fetch data that you tra
some other business logic you would like to handle.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="saveRestore"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>

4
docs/src/examples/stress.md
View File

@@ -10,9 +10,9 @@ Vue Flow is built to be fast but there are limits.
Try out how many nodes you can get to render before your browser crashes.
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="stress"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>

4
docs/src/examples/teleport.md
View File

@@ -8,9 +8,9 @@ layout: page
Teleport your nodes to another dom element using Vue 3 [`Teleport`](https://vuejs.org/guide/built-ins/teleport.html).
<div class="mt-6">
<client-only>
<ClientOnly>
<Suspense>
<Repl example="teleport"></Repl>
</Suspense>
</client-only>
</ClientOnly>
</div>

44
docs/src/guide/getting-started.md
View File

@@ -7,24 +7,13 @@
## Installation
<CodeGroup>
<CodeGroupItem title="YARN" active>
```bash
yarn add @braks/vue-flow
```
</CodeGroupItem>
<CodeGroupItem title="NPM">
```bash
npm i --save @braks/vue-flow
```
</CodeGroupItem>
</CodeGroup>
yarn i @braks/vue-flow
pnpm i @braks/vue-flow
```
## Usage
@@ -66,31 +55,6 @@ const elements = ref([
</template>
```
## Quickstart
The recommended method of using Vue Flow is the composition API as it allows for full control of the state, thanks to
composables and the power of [provide/inject](https://vuejs.org/guide/components/provide-inject). You can even
access the state outside the context and manipulate it to your liking. However, using the options API is possible,
though more limited it will probably satisfy most of your needs if you are not looking for too advanced handling of
states.
A basic setup would look like this:
<CodeGroup>
<CodeGroupItem title="Composition API" active>
@[code vue](../../../examples/vite/src/Basic/Basic.vue)
</CodeGroupItem>
<CodeGroupItem title="Options API">
@[code vue](../../../examples/vite/src/Basic/BasicOptionsAPI.vue)
</CodeGroupItem>
</CodeGroup>
## TypeScript
Vue Flow is fully written in [TypeScript](https://www.typescriptlang.org/), so it is highly recommended to use TypeScript to have the best possible DX and

11
docs/src/guide/utils/instance.md
View File

@@ -8,8 +8,7 @@ Viewport Functions can be accessed via the [`useVueFlow`](/guide/composables#use
utility or with the [`VueFlowStore`](/typedocs/types/VueFlowStore)
instance provided by [`onPaneReady`](/typedocs/interfaces/FlowEvents#paneready).
<CodeGroup>
<CodeGroupItem title="Composition API" active>
- Using Event Hooks (Composable)
```vue
<script setup>
@@ -22,10 +21,7 @@ onPaneReady((instance) => instance.fitView())
</script>
```
</CodeGroupItem>
<CodeGroupItem title="Options API">
- Using Event Listener
```vue
<script>
@@ -51,9 +47,6 @@ export default defineComponent({
</template>
```
</CodeGroupItem>
</CodeGroup>
### [project](/typedocs/types/Project)
- Details:

112
docs/src/guide/vue-flow/config.md
View File

@@ -4,8 +4,7 @@ Vue Flow allows you to configure zoom, graph and flow behavior.
Configuration can be passed either as props to the `VueFlow` component or
as options to the [`useVueFlow`](/guide/composables#usevueflow) composable.
<CodeGroup>
<CodeGroupItem title="Props" active>
- Using Component Props
```vue
<!-- Pass configuration as props -->
@@ -14,10 +13,7 @@ as options to the [`useVueFlow`](/guide/composables#usevueflow) composable.
</template>
```
</CodeGroupItem>
<CodeGroupItem title="Composable">
- Using Composable Options
```vue
<script setup>
@@ -31,16 +27,12 @@ useVueFlow({
</script>
```
</CodeGroupItem>
</CodeGroup>
## Updating Config
You can update the configuration at any point, either by having them bound as props or using the state values returned
by `useVueFlow`.
<CodeGroup>
<CodeGroupItem title="Props" active>
- Using Component Props
```vue{2,5-6,10}
<script setup>
@@ -56,10 +48,7 @@ onMounted(() => {
</template>
```
</CodeGroupItem>
<CodeGroupItem title="Composable">
- Using State (Composable)
```vue{2,7-8}
<script setup>
@@ -74,12 +63,9 @@ onMounted(() => {
</script>
```
</CodeGroupItem>
</CodeGroup>
## Basic Options
### id <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### id (optional)
- Type: `string`
@@ -89,7 +75,7 @@ onMounted(() => {
It is used for the lookup and injection of the state instance.
### modelValue <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### modelValue (optional)
- Type: [`Elements`](/typedocs/types/Elements)
@@ -121,7 +107,7 @@ const elements = ref([
</template>
```
### nodes <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### nodes (optional)
- Type: [`Node[]`](/typedocs/interfaces/Node)
@@ -151,7 +137,7 @@ const nodes = ref([
</template>
```
### edges <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### edges (optional)
- Type: [`Edge[]`](/typedocs/interfaces/Edge)
@@ -186,7 +172,7 @@ const edges = ref([
</template>
```
### node-types <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### node-types (optional)
- Type: [`Record<string, NodeComponent>`](/typedocs/types/NodeComponent)
@@ -223,7 +209,7 @@ const edges = ref([
</template>
```
### edge-types <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### edge-types (optional)
- Type: [`Record<string, EdgeComponent>`](/typedocs/types/EdgeComponent)
@@ -260,7 +246,7 @@ const edges = ref([
</template>
```
### apply-default <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### apply-default (optional)
- Type: `boolean`
@@ -295,7 +281,7 @@ const edges = ref([
</template>
```
### connection-mode <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### connection-mode (optional)
- Type: [`ConnectionMode`](/typedocs/enums/ConnectionMode)
@@ -315,7 +301,7 @@ const edges = ref([
The options include the connection line type, style and possible marker types (marker-end/marker-start).
### connection-line-type <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> <Badge type="warning" class="text-white" style="line-height: inherit" text="deprecated" vertical="top" />
### connection-line-type (optional) (deprecated)
- Type: [`ConnectionLineType`](/typedocs/enums/ConnectionLineType)
@@ -327,7 +313,7 @@ const edges = ref([
When using a custom connection line this prop does nothing.
### connection-line-style <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" /> <Badge type="warning" class="text-white" style="line-height: inherit" text="deprecated" vertical="top" />
### connection-line-style (optional) (deprecated)
- Type: `CSSProperties` | `null`
@@ -335,7 +321,7 @@ const edges = ref([
Additional styles to add to the default connection-line.
### fit-view-on-init <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### fit-view-on-init (optional)
- Type: `boolean`
@@ -347,7 +333,7 @@ const edges = ref([
## Viewport Options
### zoom-activation-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### zoom-activation-key-code (optional)
- Type: `KeyCode`
@@ -359,7 +345,7 @@ const edges = ref([
Overwrites zoom-on-scroll or pan-on-scroll behavior as long as the key is pressed.
### zoom-on-scroll <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### zoom-on-scroll (optional)
- Type: `boolean`
@@ -369,7 +355,7 @@ const edges = ref([
Whether to allow zooming in and out when scrolling inside the Vue Flow container.
### zoom-on-pinch <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### zoom-on-pinch (optional)
- Type: `boolean`
@@ -379,7 +365,7 @@ const edges = ref([
Whether to allow zooming in and out when pinching (touch or trackpad) inside the Vue Flow container.
### zoom-on-double-click <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### zoom-on-double-click (optional)
- Type: `boolean`
@@ -389,7 +375,7 @@ const edges = ref([
Whether to allow zooming in and out when double-clicking (or tapping) inside the Vue Flow container.
### pan-on-scroll <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### pan-on-scroll (optional)
- Type: `boolean`
@@ -401,13 +387,13 @@ const edges = ref([
Does not work together with `zoom-on-scroll` but will work together with `zoom-activation-key-code`.
### pan-on-scroll-speed <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### pan-on-scroll-speed (optional)
- Type: `number`
- Default: `0.5`
### pan-on-scroll-mode <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### pan-on-scroll-mode (optional)
- Type: [`PanOnScrollMode`](/typedocs/enums/PanOnScrollMode)
@@ -417,7 +403,7 @@ const edges = ref([
Specify on which axis panning is allowed (x, y or both).
### pan-on-drag <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### pan-on-drag (optional)
- Old name: `paneMovable`
@@ -429,7 +415,7 @@ const edges = ref([
Whether to allow moving the pane when dragging inside the Vue Flow container.
### prevent-scrolling <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### prevent-scrolling (optional)
- Type: `boolean`
@@ -439,7 +425,7 @@ const edges = ref([
Enable this to prevent vue flow from scrolling inside its container, i.e. allow for the page to scroll.
### no-wheel-class-name <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### no-wheel-class-name (optional)
- Type: `string`
@@ -452,7 +438,7 @@ const edges = ref([
Useful if you want to allow for scrolling _inside_ a node
### no-pan-class-name <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### no-pan-class-name (optional)
- Type: `string`
@@ -462,25 +448,25 @@ const edges = ref([
Set a class name which prevents elements from triggering pan-scroll events.
### min-zoom <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### min-zoom (optional)
- Type: `number`
- Default: `0.5`
### max-zoom <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### max-zoom (optional)
- Type: `number`
- Default: `2`
### default-zoom <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### default-zoom (optional)
- Type: `number`
- Default: `1`
### default-position <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### default-position (optional)
- Type: `[x: number, y: number]`
@@ -490,7 +476,7 @@ const edges = ref([
Default viewport position on initial load.
### translate-extent <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### translate-extent (optional)
- Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent)
@@ -509,7 +495,7 @@ const edges = ref([
## Selection Options
### selection-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### selection-key-code (optional)
- Type: `KeyCode`
@@ -519,7 +505,7 @@ const edges = ref([
Define a key which can be used to activate the selection rect.
### multi-selection-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### multi-selection-key-code (optional)
- Type: `KeyCode`
@@ -531,7 +517,7 @@ const edges = ref([
Multi-selection can be used to select multiple nodes with clicks.
### delete-key-code <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### delete-key-code (optional)
- Type: `KeyCode`
@@ -543,7 +529,7 @@ const edges = ref([
## Global Node Options
### nodes-draggable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### nodes-draggable (optional)
- Type: `boolean`
@@ -571,7 +557,7 @@ const elements = ref([
</template>
```
### nodes-connectable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### nodes-connectable (optional)
- Type: `boolean`
@@ -599,7 +585,7 @@ const elements = ref([
</template>
```
### nodes-extent <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### nodes-extent (optional)
- Type: [`CoordinateExtent`](/typedocs/types/CoordinateExtent)
@@ -634,13 +620,13 @@ const elements = ref([
</template>
```
### select-nodes-on-drag <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### select-nodes-on-drag (optional)
- Type: `boolean`
- Default: `true`
### snap-to-grid <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### snap-to-grid (optional)
- Type: `boolean`
@@ -650,7 +636,7 @@ const elements = ref([
If enabled, nodes will be placed and moved in a grid-like fashion.
### snap-grid <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### snap-grid (optional)
- Type: [`SnapGrid`](/typedocs/types/SnapGrid)
@@ -662,7 +648,7 @@ const elements = ref([
## Global Edge Options
### edges-updatable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### edges-updatable (optional)
- Type: `boolean`
@@ -692,7 +678,7 @@ const elements = ref([
</template>
```
### default-marker-color <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### default-marker-color (optional)
- Type: `string`
@@ -702,7 +688,7 @@ const elements = ref([
The default color value which is used when presenting edge-markers (arrowheads).
### edge-updater-radius <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### edge-updater-radius (optional)
- Type: `number`
@@ -712,7 +698,7 @@ const elements = ref([
The radius at which an edge-updater can be triggered.
### connect-on-click <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### connect-on-click (optional)
- Type: `boolean`
@@ -724,7 +710,7 @@ const elements = ref([
Useful if you want to enable creating edges on a touch device.
### default-edge-options <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### default-edge-options (optional)
- Type: [`DefaultEdgeOptions`](/typedocs/types/DefaultEdgeOptions)
@@ -734,7 +720,7 @@ const elements = ref([
Does not work for the `addEdge` utility!
### auto-connect <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### auto-connect (optional)
- Type: `boolean` | [`Connector`](/typedocs/types/Connector)
@@ -787,7 +773,7 @@ const connector = (params) => {
</template>
```
### elevate-edges-on-select <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### elevate-edges-on-select (optional)
- Type: `boolean`
@@ -803,7 +789,7 @@ const connector = (params) => {
## Global Element Options
### only-render-visible-elements <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### only-render-visible-elements (optional)
- Type: `boolean`
@@ -813,7 +799,7 @@ const connector = (params) => {
Skip rendering elements that are not visible currently (either hidden or outside the current pane dimensions).
### elements-selectable <Badge class="text-white" style="line-height: inherit" text="optional" vertical="top" />
### elements-selectable (optional)
- Type: `boolean`

3
docs/src/index.md
View File

@@ -1,7 +1,6 @@
---
layout: home
heroText: null
tagline: null
---
<Home />