Skip to content

docs: cover screen with intro flow #410

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 8, 2022
Merged

docs: cover screen with intro flow #410

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
facab39
docs: cover screen with intro flow
bcakmakoglu Nov 8, 2022
cc8e925
docs: update node internals on resize
bcakmakoglu Nov 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/components/home/Home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ onMounted(() => {
</script>

<template>
<div class="relative h-[90vh] md:h-[75vh]">
<div class="relative h-[calc(100vh-var(--vp-nav-height-mobile))] lg:h-[calc(100vh-var(--vp-nav-height))]">
<Intro />
</div>
</template>
Expand Down
36 changes: 20 additions & 16 deletions docs/components/home/flows/Intro.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,22 +54,23 @@ const initialEdges = [
style: { strokeWidth: 4, stroke: '#0ea5e9' },
},
]
const { dimensions, onNodeClick, getNodes, fitView, getNode, getEdge, updateEdge, edges, setEdges } = useVueFlow({
nodes: [
{ id: 'intro', type: 'box', position: { x: 0, y: 0 } },
{ id: 'examples', type: 'box', position: { x: -50, y: 400 } },
{ id: 'documentation', type: 'box', position: { x: 300, y: 400 } },
{ id: 'acknowledgement', type: 'box', position: { x: 150, y: 500 } },
],
edges: initialEdges,
elementsSelectable: true,
panOnDrag: false,
zoomOnScroll: false,
zoomOnDoubleClick: false,
zoomOnPinch: false,
preventScrolling: false,
elevateEdgesOnSelect: true,
})
const { dimensions, onNodeClick, getNodes, fitView, getNode, getEdge, updateEdge, edges, setEdges, updateNodeInternals } =
useVueFlow({
nodes: [
{ id: 'intro', type: 'box', position: { x: 0, y: 0 } },
{ id: 'examples', type: 'box', position: { x: -50, y: 400 } },
{ id: 'documentation', type: 'box', position: { x: 300, y: 400 } },
{ id: 'acknowledgement', type: 'box', position: { x: 150, y: 500 } },
],
edges: initialEdges,
elementsSelectable: true,
panOnDrag: false,
zoomOnScroll: false,
zoomOnDoubleClick: false,
zoomOnPinch: false,
preventScrolling: false,
elevateEdgesOnSelect: true,
})

const clickInterval = ref()
const clicks = ref(0)
Expand Down Expand Up @@ -121,6 +122,7 @@ const el = templateRef<HTMLDivElement>('el', null)
const setNodes = () => {
if (breakpoints.isSmaller('md')) {
const mainNode = getNode.value('intro')!

getNodes.value.forEach((node) => {
switch (node.id) {
case 'intro':
Expand Down Expand Up @@ -201,6 +203,8 @@ const setNodes = () => {
setEdges(initialEdges)
}

updateNodeInternals(getNodes.value.map((n) => n.id))

nextTick(() => {
fitView()
})
Expand Down
38 changes: 3 additions & 35 deletions docs/src/assets/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,15 @@
--secondary: #03dac5;
--vp-c-brand: #10b981;
--vp-c-accent: #BB86FC;
--vp-c-bg-alt: rgb(249, 249, 249, 75%);
}

.dark {
--vp-c-bg: rgba(0, 0, 0, 100%);
--vp-c-bg-alt: rgb(22, 27, 34, 75%);
--vp-c-bg-soft: rgb(22, 27, 34, 100%);
}

.VPNavBar.has-sidebar .content, .VPNav {
background-color: var(--vp-c-bg-alt) !important;
background-image: radial-gradient(transparent 1px, var(--vp-c-bg-alt) 1px) !important;
background-size: 4px 4px !important;
}

.dark .DocSearch {
@apply border shadow bg-zinc-800;
}

.dark .VPNavBarTitle.has-sidebar {
background-color: transparent !important;
background-color: rgba(var(--vp-c-bg), 0.75);
backdrop-filter: blur(1px);
}

.VPPage {
@apply px-12 py-6 md:(px-24);
@apply px-8 py-6 md:px-12 lg:px-24;
}

html, body {
Expand Down Expand Up @@ -55,22 +39,6 @@ ul li {
@apply z-1 shadow-lg transition-colors duration-200 text-white font-semibold text-lg mt-4 px-5 py-3 rounded-lg bg-green-500;
}

.vue-flow__node.dark {
@apply bg-gray-800 text-white;
}

.vue-flow__node-selector {
font-size: 14px;
background: #f0f2f3;
border: 1px solid #555;
border-radius: 5px;
text-align: center;
}

.vue-flow__node-selector .vue-flow__handle {
border-color: #f0f2f3;
}

.slider {
--color: red;
@apply bg-gray-200 w-full h-[10px] outline-none rounded-full;
Expand Down
20 changes: 4 additions & 16 deletions docs/src/auto-imports.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,9 @@ declare global {
const isReactive: typeof import('vue')['isReactive']
const isReadonly: typeof import('vue')['isReadonly']
const isRef: typeof import('vue')['isRef']
const logicAnd: typeof import('@vueuse/core')['logicAnd']
const logicNot: typeof import('@vueuse/core')['logicNot']
const logicOr: typeof import('@vueuse/core')['logicOr']
const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
const markRaw: typeof import('vue')['markRaw']
const nextTick: typeof import('vue')['nextTick']
Expand Down Expand Up @@ -96,14 +99,6 @@ declare global {
const unrefElement: typeof import('@vueuse/core')['unrefElement']
const until: typeof import('@vueuse/core')['until']
const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
const useArraySome: typeof import('@vueuse/core')['useArraySome']
const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
const useAttrs: typeof import('vue')['useAttrs']
Expand All @@ -114,8 +109,8 @@ declare global {
const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
const useCached: typeof import('@vueuse/core')['useCached']
const useClamp: typeof import('@vueuse/core')['useClamp']
const useClipboard: typeof import('@vueuse/core')['useClipboard']
const useCloned: typeof import('@vueuse/core')['useCloned']
const useColorMode: typeof import('@vueuse/core')['useColorMode']
const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
const useCounter: typeof import('@vueuse/core')['useCounter']
Expand Down Expand Up @@ -188,10 +183,8 @@ declare global {
const usePointer: typeof import('@vueuse/core')['usePointer']
const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
const useRafFn: typeof import('@vueuse/core')['useRafFn']
const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
Expand All @@ -203,17 +196,14 @@ declare global {
const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
const useShare: typeof import('@vueuse/core')['useShare']
const useSlots: typeof import('vue')['useSlots']
const useSorted: typeof import('@vueuse/core')['useSorted']
const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
const useStepper: typeof import('@vueuse/core')['useStepper']
const useStorage: typeof import('@vueuse/core')['useStorage']
const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
const useSupported: typeof import('@vueuse/core')['useSupported']
const useSwipe: typeof import('@vueuse/core')['useSwipe']
const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
const useThrottle: typeof import('@vueuse/core')['useThrottle']
Expand All @@ -225,8 +215,6 @@ declare global {
const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
const useTitle: typeof import('@vueuse/core')['useTitle']
const useToNumber: typeof import('@vueuse/core')['useToNumber']
const useToString: typeof import('@vueuse/core')['useToString']
const useToggle: typeof import('@vueuse/core')['useToggle']
const useTransition: typeof import('@vueuse/core')['useTransition']
const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
Expand Down