Skip to content

Commit cc8e4dc

Browse files
pavanpodilapavanpodila
committed
feat: updated readme
1 parent bd9ca79 commit cc8e4dc

File tree

19 files changed

+1019
-998
lines changed

19 files changed

+1019
-998
lines changed

‎packages/vyuh_node_flow/README.md‎

Lines changed: 136 additions & 175 deletions
Large diffs are not rendered by default.

‎website/.vitepress/theme/HomePage.vue‎

Lines changed: 51 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -106,17 +106,51 @@ const codeMarkers = [
106106
// Marquee content
107107
const marqueeLines = [
108108
{
109-
items: ['Annotations & Sticky Notes', 'Keyboard Shortcuts', 'Read-Only Viewer', 'Multi-touch Gestures', 'Undo/Redo Support', 'Auto Pan', 'Bezier Curves', 'Straight Lines'],
109+
items: [
110+
'High Performance',
111+
'Annotations & Sticky Notes',
112+
'Keyboard Shortcuts',
113+
'Read-Only Viewer',
114+
'Multi-touch Gestures',
115+
'Undo/Redo Support',
116+
'Auto Pan',
117+
'Bezier Curves',
118+
'Straight Lines',
119+
'Smooth Step Lines',
120+
],
110121
color: 'blue' as const,
122+
duration: 40,
111123
},
112124
{
113-
items: ['Dark & Light Themes', 'Snap to Grid', 'Zoom Controls', 'Drag Selection', 'Viewport Animations', 'Infinite Canvas', 'Custom Markers', 'Gradient Flow'],
125+
items: [
126+
'Dark & Light Themes',
127+
'Snap to Grid',
128+
'Zoom Controls',
129+
'Drag Selection',
130+
'Viewport Animations',
131+
'Infinite Canvas',
132+
'Custom Markers',
133+
'Gradient Flow',
134+
],
114135
color: 'purple' as const,
115136
reverse: true,
137+
duration: 50, // Slower
116138
},
117139
{
118-
items: ['Port Validation', 'Event Callbacks', 'Viewport Controls', 'Grid Styles', 'Node Resizing', 'Connection Effects', 'JSON Serialization', 'Reactive State'],
140+
items: [
141+
'Port Validation',
142+
'Event Callbacks',
143+
'Viewport Controls',
144+
'Grid Styles',
145+
'Node Resizing',
146+
'Connection Effects',
147+
'JSON Serialization',
148+
'Reactive State',
149+
'Level of Detail',
150+
'Viewport Culling',
151+
],
119152
color: 'teal' as const,
153+
duration: 35, // Faster
120154
},
121155
];
122156
@@ -378,17 +412,25 @@ const heroBlinkCells = generateBlinkCells(20, 42);
378412
<!-- Hero Section -->
379413
<HeroSection>
380414
<template #text>
381-
<Badge icon="simple-icons:flutter" color="blue">Built for Flutter</Badge>
415+
<Badge icon="simple-icons:flutter" color="blue"
416+
>Built for Flutter</Badge
417+
>
382418
<h1 class="hero-title">
383-
<span class="block text-5xl sm:text-6xl lg:text-7xl mb-2">Visualize any</span>
384-
<WordFlipper :words="flipperWords" :interval="1500" />
419+
<span class="block text-5xl sm:text-6xl lg:text-7xl mb-2"
420+
>Visualize any</span
421+
>
422+
<WordFlipper :words="flipperWords" :interval="1250" />
385423
</h1>
386-
<p class="text-xl font-medium text-slate-600 dark:text-zinc-300 leading-relaxed max-w-lg hero-animate-3 opacity-0 max-lg:mx-auto">
424+
<p
425+
class="text-xl font-medium text-slate-600 dark:text-zinc-300 leading-relaxed max-w-lg hero-animate-3 opacity-0 max-lg:mx-auto"
426+
>
387427
A flexible, high-performance node-based flow editor for
388428
<FlutterBrand />. Build workflow editors, visual programming
389429
interfaces, and interactive diagrams.
390430
</p>
391-
<div class="flex gap-4 flex-wrap hero-animate-4 opacity-0 max-lg:justify-center mt-12">
431+
<div
432+
class="flex gap-4 flex-wrap hero-animate-4 opacity-0 max-lg:justify-center mt-12"
433+
>
392434
<CtaButton
393435
href="/docs/getting-started/installation"
394436
variant="primary"
@@ -409,10 +451,7 @@ const heroBlinkCells = generateBlinkCells(20, 42);
409451
</template>
410452

411453
<template #visual>
412-
<DemoFrame
413-
url="flow.demo.vyuh.tech"
414-
title="Vyuh Node Flow Demo"
415-
/>
454+
<DemoFrame url="flow.demo.vyuh.tech" title="Vyuh Node Flow Demo" />
416455
</template>
417456
</HeroSection>
418457

‎website/.vitepress/theme/ProPage.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,7 @@ const marqueeLines = [
173173
'Collaboration',
174174
],
175175
color: 'purple' as const,
176+
duration: 40,
176177
},
177178
{
178179
items: [
@@ -187,6 +188,7 @@ const marqueeLines = [
187188
],
188189
color: 'teal' as const,
189190
reverse: true,
191+
duration: 50, // Slower
190192
},
191193
{
192194
items: [
@@ -200,6 +202,7 @@ const marqueeLines = [
200202
'SLA Guarantee',
201203
],
202204
color: 'purple' as const,
205+
duration: 35, // Faster
203206
},
204207
];
205208
</script>

‎website/.vitepress/theme/components/BentoGrid.vue‎

Lines changed: 21 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -16,41 +16,35 @@
1616
1717
.bento-grid {
1818
@apply grid gap-6 max-w-7xl mx-auto;
19-
grid-template-columns: repeat(5, 1fr);
19+
@apply max-md:grid-cols-1 md:max-lg:grid-cols-3 lg:grid-cols-5;
2020
}
2121
22-
/* Bento layout pattern - varied column spans */
23-
.bento-grid > :nth-child(1) { grid-column: span 2; }
24-
.bento-grid > :nth-child(2) { grid-column: span 2; }
25-
.bento-grid > :nth-child(3) { grid-column: span 1; }
26-
.bento-grid > :nth-child(4) { grid-column: span 1; }
27-
.bento-grid > :nth-child(5) { grid-column: span 2; }
28-
.bento-grid > :nth-child(6) { grid-column: span 2; }
29-
.bento-grid > :nth-child(7) { grid-column: span 2; }
30-
.bento-grid > :nth-child(8) { grid-column: span 1; }
31-
.bento-grid > :nth-child(9) { grid-column: span 2; }
32-
.bento-grid > :nth-child(10) { grid-column: span 2; }
33-
.bento-grid > :nth-child(11) { grid-column: span 1; }
34-
.bento-grid > :nth-child(12) { grid-column: span 2; }
22+
/* Mobile: single column - all items span 1 */
23+
.bento-grid > * {
24+
@apply max-md:col-span-1;
25+
}
3526
36-
/* Tablet: 3-column layout */
37-
@media (max-width: 1100px) and (min-width: 768px) {
38-
.bento-grid {
39-
grid-template-columns: repeat(3, 1fr);
40-
}
27+
/* Tablet (md to lg): 3-column layout with repeating pattern */
28+
@media (min-width: 768px) and (max-width: 1023px) {
4129
.bento-grid > :nth-child(4n + 1) { grid-column: span 2; }
4230
.bento-grid > :nth-child(4n + 2) { grid-column: span 1; }
4331
.bento-grid > :nth-child(4n + 3) { grid-column: span 1; }
4432
.bento-grid > :nth-child(4n) { grid-column: span 2; }
4533
}
4634
47-
/* Mobile: single column */
48-
@media (max-width: 767px) {
49-
.bento-grid {
50-
@apply grid-cols-1;
51-
}
52-
.bento-grid > :nth-child(n) {
53-
grid-column: span 1;
54-
}
35+
/* Desktop (lg+): 5-column layout with custom spans */
36+
@media (min-width: 1024px) {
37+
.bento-grid > :nth-child(1) { grid-column: span 2; }
38+
.bento-grid > :nth-child(2) { grid-column: span 2; }
39+
.bento-grid > :nth-child(3) { grid-column: span 1; }
40+
.bento-grid > :nth-child(4) { grid-column: span 1; }
41+
.bento-grid > :nth-child(5) { grid-column: span 2; }
42+
.bento-grid > :nth-child(6) { grid-column: span 2; }
43+
.bento-grid > :nth-child(7) { grid-column: span 2; }
44+
.bento-grid > :nth-child(8) { grid-column: span 1; }
45+
.bento-grid > :nth-child(9) { grid-column: span 2; }
46+
.bento-grid > :nth-child(10) { grid-column: span 2; }
47+
.bento-grid > :nth-child(11) { grid-column: span 1; }
48+
.bento-grid > :nth-child(12) { grid-column: span 2; }
5549
}
5650
</style>

‎website/.vitepress/theme/components/CtaButton.vue‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ defineProps<{
3030
3131
.hero-btn {
3232
@apply inline-flex items-center gap-2 px-7 py-3.5 font-semibold text-sm rounded-xl cursor-pointer no-underline;
33+
@apply max-md:justify-center max-md:w-full;
3334
font-family: var(--vn-font-display);
3435
transition: all 0.3s var(--vn-ease-out);
3536
}
@@ -64,11 +65,4 @@ defineProps<{
6465
.hero-btn-lg {
6566
@apply px-10 py-4 text-base;
6667
}
67-
68-
/* Mobile responsiveness */
69-
@media (max-width: 767px) {
70-
.hero-btn {
71-
@apply justify-center w-full;
72-
}
73-
}
7468
</style>

‎website/.vitepress/theme/components/CtaSection.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@ defineProps<{
2525
<div class="cta-blur cta-blur-1" />
2626
<div class="cta-blur cta-blur-2" />
2727
<div class="cta-content">
28-
<Badge :icon="badgeIcon" :color="badgeColor || 'amber'">{{ badge }}</Badge>
28+
<Badge :icon="badgeIcon" :color="badgeColor || 'amber'">{{
29+
badge
30+
}}</Badge>
2931
<h2 class="cta-title">{{ title }}</h2>
3032
<p v-if="subtitle" class="cta-subtitle">
3133
{{ subtitle }}
@@ -87,10 +89,10 @@ defineProps<{
8789
}
8890
8991
.cta-subtitle {
90-
@apply text-lg text-slate-600 dark:text-zinc-400 leading-relaxed mb-10;
92+
@apply text-lg text-slate-600 dark:text-zinc-400 leading-relaxed mb-14;
9193
}
9294
9395
.cta-actions {
94-
@apply flex flex-col sm:flex-row justify-center gap-4 flex-wrap;
96+
@apply flex flex-col sm:flex-row justify-center gap-4 flex-wrap mt-16;
9597
}
9698
</style>

‎website/.vitepress/theme/components/FeatureSection.vue‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ defineProps<{
5252
5353
.feature-section {
5454
@apply grid grid-cols-2 gap-16 items-center py-16;
55+
@apply max-lg:grid-cols-1 max-lg:gap-10;
5556
}
5657
5758
.feature-section-reverse {
@@ -62,12 +63,9 @@ defineProps<{
6263
direction: ltr;
6364
}
6465
65-
@media (max-width: 900px) {
66-
.feature-section,
67-
.feature-section-reverse {
68-
@apply grid-cols-1 gap-10;
69-
direction: ltr;
70-
}
66+
/* On mobile, reset RTL to LTR */
67+
.feature-section-reverse {
68+
@apply max-lg:[direction:ltr];
7169
}
7270
7371
.feature-section-content {

‎website/.vitepress/theme/components/HeroSection.vue‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,7 @@ defineProps<{
4646
/* Split layout - two columns */
4747
.hero-content-split {
4848
@apply relative z-10 max-w-7xl w-full grid lg:grid-cols-[1fr_1.4fr] gap-16 items-center;
49-
}
50-
51-
@media (max-width: 1100px) {
52-
.hero-content-split {
53-
@apply grid-cols-1 text-center justify-items-center;
54-
}
49+
@apply max-lg:grid-cols-1 max-lg:text-center max-lg:justify-items-center;
5550
}
5651
5752
.hero-text {

‎website/.vitepress/theme/components/MarqueeGroup.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export interface MarqueeLineConfig {
55
items: string[];
66
color: 'blue' | 'purple' | 'teal' | 'amber';
77
reverse?: boolean;
8+
duration?: number; // Duration in seconds (default: 40)
89
}
910
1011
defineProps<{
@@ -20,6 +21,7 @@ defineProps<{
2021
:items="line.items"
2122
:color="line.color"
2223
:reverse="line.reverse"
24+
:duration="line.duration"
2325
/>
2426
</section>
2527
</template>

‎website/.vitepress/theme/components/MarqueeLine.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,16 @@ defineProps<{
33
items: string[];
44
color: 'blue' | 'purple' | 'teal';
55
reverse?: boolean;
6+
duration?: number; // Duration in seconds (default: 40)
67
}>();
78
</script>
89

910
<template>
10-
<div class="marquee-track" :class="['marquee-' + color, { reverse }]">
11+
<div
12+
class="marquee-track"
13+
:class="['marquee-' + color, { reverse }]"
14+
:style="duration ? { '--marquee-duration': `${duration}s` } : undefined"
15+
>
1116
<div class="marquee-content">
1217
<span v-for="(item, i) in [...items, ...items]" :key="i" class="marquee-item">
1318
{{ item }}
@@ -20,14 +25,15 @@ defineProps<{
2025
@reference "../style.css";
2126
2227
.marquee-track {
28+
--marquee-duration: 40s; /* Default duration, can be overridden via style prop */
2329
@apply relative py-2 overflow-hidden whitespace-nowrap;
2430
mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
2531
-webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
2632
}
2733
2834
.marquee-content {
2935
@apply inline-flex;
30-
animation: marqueeScroll 40s linear infinite;
36+
animation: marqueeScroll var(--marquee-duration) linear infinite;
3137
}
3238
3339
.marquee-track.reverse .marquee-content {

0 commit comments

Comments
 (0)