Skip to content

Commit 6b487a4

Browse files
devvsakibdevvsakib
authored
Merge pull request #272 from devvsakib/development
various changes : #273
2 parents 282c3ad + b33f3b8 commit 6b487a4

File tree

7 files changed

+626
-12
lines changed

7 files changed

+626
-12
lines changed

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"prettier": "^3.3.3",
2121
"react": "^18.2.0",
2222
"react-dom": "^18.2.0",
23+
"react-flow-renderer": "^10.3.17",
2324
"react-hot-toast": "^2.4.0",
2425
"react-icons": "^4.7.1",
2526
"react-json-pretty": "^2.2.0",
@@ -29,7 +30,8 @@
2930
"react-syntax-highlighter": "^15.5.0",
3031
"react-transition-group": "^4.4.5",
3132
"remark-gfm": "^4.0.0",
32-
"sonner": "^1.5.0"
33+
"sonner": "^1.5.0",
34+
"uuid": "^10.0.0"
3335
},
3436
"devDependencies": {
3537
"@types/react": "^18.0.26",

‎src/index.css‎

Lines changed: 146 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -170,9 +170,9 @@ html {
170170

171171
.white {
172172
max-height: 63px;
173-
max-width: 307px;
173+
max-width: 507px;
174174
border-radius: 10px;
175-
filter: blur(2px);
175+
filter: blur(3px);
176176
}
177177

178178
.white::before {
@@ -453,4 +453,148 @@ html {
453453
max-height: 130px;
454454
max-width: 340px;
455455
}
456+
}
457+
458+
459+
460+
/*# sourceMappingURL=index.css.map */
461+
.loader svg {
462+
display: inline-block;
463+
width: 64px;
464+
height: 64px;
465+
}
466+
467+
.inline-block {
468+
display: inline-block;
469+
}
470+
471+
.loader {
472+
display: flex;
473+
margin: 0.25em 0;
474+
}
475+
476+
.w-2 {
477+
width: 0.5em;
478+
}
479+
480+
.dash {
481+
animation: dashArray 2s ease-in-out infinite,
482+
dashOffset 2s linear infinite;
483+
}
484+
485+
.spin {
486+
animation: spinDashArray 2s ease-in-out infinite,
487+
spin 8s ease-in-out infinite,
488+
dashOffset 2s linear infinite;
489+
transform-origin: center;
490+
}
491+
492+
@keyframes dashArray {
493+
0% {
494+
stroke-dasharray: 0 1 359 0;
495+
}
496+
497+
50% {
498+
stroke-dasharray: 0 359 1 0;
499+
}
500+
501+
100% {
502+
stroke-dasharray: 359 1 0 0;
503+
}
504+
}
505+
506+
@keyframes spinDashArray {
507+
0% {
508+
stroke-dasharray: 270 90;
509+
}
510+
511+
50% {
512+
stroke-dasharray: 0 360;
513+
}
514+
515+
100% {
516+
stroke-dasharray: 270 90;
517+
}
518+
}
519+
520+
@keyframes dashOffset {
521+
0% {
522+
stroke-dashoffset: 365;
523+
}
524+
525+
100% {
526+
stroke-dashoffset: 5;
527+
}
528+
}
529+
530+
@keyframes spin {
531+
0% {
532+
rotate: 0deg;
533+
}
534+
535+
12.5%,
536+
25% {
537+
rotate: 270deg;
538+
}
539+
540+
37.5%,
541+
50% {
542+
rotate: 540deg;
543+
}
544+
545+
62.5%,
546+
75% {
547+
rotate: 810deg;
548+
}
549+
550+
87.5%,
551+
100% {
552+
rotate: 1080deg;
553+
}
554+
}
555+
556+
/* flow */
557+
.flow-designer {
558+
display: flex;
559+
height: 100vh;
560+
}
561+
562+
.sidebar {
563+
width: 200px;
564+
background-color: #f0f0f0;
565+
padding: 20px;
566+
}
567+
568+
.action-item {
569+
margin-bottom: 10px;
570+
padding: 10px;
571+
background-color: #ddd;
572+
cursor: move;
573+
}
574+
575+
.canvas {
576+
flex-grow: 1;
577+
position: relative;
578+
background-color: #fff;
579+
}
580+
581+
.flow-node {
582+
position: absolute;
583+
padding: 10px;
584+
border-radius: 5px;
585+
user-select: none;
586+
}
587+
588+
.action {
589+
background-color: #66cc66;
590+
}
591+
592+
.condition {
593+
background-color: #ff9966;
594+
}
595+
596+
.branch {
597+
margin-top: 5px;
598+
padding: 5px;
599+
background-color: rgba(255, 255, 255, 0.2);
456600
}

‎src/main.jsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import DocDetail from "./pages/Doc/single doc";
1414
import Resources from "./pages/Resources";
1515
import DevArea from "./pages/DevArea";
1616
import DevTools from "./pages/DevArea/DevTools";
17+
import Flow from "./pages/Flow";
1718

1819
const router = createBrowserRouter(
1920
[
@@ -45,6 +46,10 @@ const router = createBrowserRouter(
4546
path: '/contributors',
4647
element: <Contributors />
4748
},
49+
{
50+
path: '/flow',
51+
element: <Flow />
52+
},
4853
{
4954
path: '*',
5055
element: <NotFound />

‎src/pages/Doc/single doc/index.jsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const DocDetail = () => {
3030
const [error, setError] = useState(null);
3131
const [activeSection, setActiveSection] = useState(null);
3232
const [headings, setHeadings] = useState([]);
33-
33+
console.log(content)
3434
useEffect(() => {
3535
const fetchContent = async () => {
3636
try {
@@ -80,8 +80,6 @@ const DocDetail = () => {
8080
}
8181
}, [content]);
8282

83-
if (loading) return <div className="flex justify-center items-center h-screen"><Spin size="large" /></div>;
84-
if (error) return <Alert message="Error" description={error} type="error" />;
8583
const headingToId = (children) => String(children).toLowerCase().replace(/\s+/g, '-');
8684
return (
8785
<Layout>

‎src/pages/Flow/index.jsx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import React, { useState, useEffect } from 'react';
2+
import { v4 as uuidv4 } from 'uuid';
3+
4+
const EventTransform = ({ id, x, y, label, color }) => (
5+
<g transform={`translate(${x},${y})`} id={id}>
6+
<rect width="120" height="60" rx="5" fill={color} />
7+
<text x="60" y="30" textAnchor="middle" fill="white">{label}</text>
8+
</g>
9+
);
10+
11+
const Trigger = ({ id, x, y, label, color }) => (
12+
<g transform={`translate(${x},${y})`} id={id}>
13+
<rect width="120" height="60" rx="5" fill={color} />
14+
<text x="60" y="30" textAnchor="middle" fill="white">{label}</text>
15+
</g>
16+
);
17+
18+
const Connection = ({ startX, startY, endX, endY, gradientId }) => (
19+
<path
20+
d={`M${startX},${startY} C${(startX + endX) / 2},${startY} ${(startX + endX) / 2},${endY} ${endX},${endY}`}
21+
fill="none"
22+
stroke={`url(#${gradientId})`}
23+
strokeWidth="2"
24+
/>
25+
);
26+
27+
const Flow = () => {
28+
const [nodes, setNodes] = useState([
29+
{ id: uuidv4(), type: 'eventTransform', x: 100, y: 50, label: 'Event', color: 'red' },
30+
{ id: uuidv4(), type: 'eventTransform', x: 100, y: 200, label: 'Event', color: 'blue' },
31+
{ id: uuidv4(), type: 'eventTransform', x: 100, y: 400, label: 'Event', color: 'green' },
32+
{ id: uuidv4(), type: 'trigger', x: 400, y: 300, label: 'Trigger', color: 'orange' },
33+
]);
34+
35+
const [connections, setConnections] = useState([]);
36+
37+
// Dynamically calculate the connections once the nodes are set up
38+
useEffect(() => {
39+
const newConnections = nodes.slice(0, nodes.length - 1).map((node, index) => ({
40+
start: node.id,
41+
end: nodes[index + 1].id,
42+
gradientId: `grad-${node.id}-${nodes[index + 1].id}`,
43+
}));
44+
45+
setConnections(newConnections); // Update the state with new connections
46+
}, [nodes]); // Trigger this effect whenever nodes change
47+
48+
return (
49+
<svg width="800" height="600" style={{ background: '#333' }}>
50+
{/* Render nodes */}
51+
{nodes.map(node =>
52+
node.type === 'eventTransform'
53+
? <EventTransform key={node.id} {...node} />
54+
: <Trigger key={node.id} {...node} />
55+
)}
56+
<defs>
57+
{connections.map(conn => {
58+
const startNode = nodes.find(n => n.id === conn.start);
59+
const endNode = nodes.find(n => n.id === conn.end);
60+
61+
return (
62+
<linearGradient key={conn.gradientId} id={conn.gradientId}>
63+
<stop offset="0%" stopColor={startNode.color} />
64+
<stop offset="100%" stopColor={endNode.color} />
65+
</linearGradient>
66+
);
67+
})}
68+
</defs>
69+
70+
{/* Render connections before nodes */}
71+
{connections.map(conn => {
72+
const start = nodes.find(n => n.id === conn.start);
73+
const end = nodes.find(n => n.id === conn.end);
74+
return (
75+
<Connection
76+
key={`${conn.start}-${conn.end}`}
77+
startX={start.x + 60} startY={start.y + 30}
78+
endX={end.x + 60} endY={end.y + 30}
79+
gradientId={conn.gradientId}
80+
/>
81+
);
82+
})}
83+
84+
85+
</svg>
86+
);
87+
};
88+
89+
export default Flow;

‎src/pages/Resources.jsx‎

Lines changed: 64 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,64 @@ const Resources = () => {
5757
return (
5858
<Layout>
5959
<div className="container mx-auto p-4">
60+
{/* <div className="loader h-24 w-full">
61+
<svg height="0" width="0" viewBox="0 0 64 64" className="absolute">
62+
<defs>
63+
<linearGradient gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="b">
64+
<stop stop-color="#973BED"></stop>
65+
<stop stop-color="#007CFF" offset="1"></stop>
66+
</linearGradient>
67+
<linearGradient gradientUnits="userSpaceOnUse" y2="0" x2="0" y1="64" x1="0" id="c">
68+
<stop stop-color="#FFC800"></stop>
69+
<stop stop-color="#F0F" offset="1"></stop>
70+
</linearGradient>
71+
<linearGradient gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="d">
72+
<stop stop-color="#00E0ED"></stop>
73+
<stop stop-color="#00DA72" offset="1"></stop>
74+
</linearGradient>
75+
</defs>
76+
</svg>
77+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
78+
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 10,4 H 32 C 48,4 54,20 54,32 54,44 48,60 32,60 H 10 Z" className="dash" id="d" pathLength="360"></path>
79+
</svg>
80+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
81+
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 54,32 C 54,18 43,4 28,4 13,4 4,18 4,32 4,46 13,60 28,60 43,60 54,46 54,32 Z M 54,32 H 4" className="dash" id="e" pathLength="360"></path>
82+
</svg>
83+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
84+
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,4 L 32,60 L 60,4" className="dash" id="v" pathLength="360"></path>
85+
</svg>
86+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
87+
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 4,4 H 60 M 32,4 V 60" className="dash" id="t" pathLength="360"></path>
88+
</svg>
89+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style={{ "--rotation-duration": "0ms", "--rotation-direction": "normal" }} viewBox="0 0 64 64" height="64" width="64" className="inline-block">
90+
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 32 32 m 0 -28 a 28 28 0 1 1 0 56 a 28 28 0 1 1 0 -56" className="spin" id="o" pathLength="360"></path>
91+
</svg>
92+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style={{ "--rotation-duration": "0ms", "--rotation-direction": "normal" }} viewBox="0 0 64 64" height="64" width="64" className="inline-block">
93+
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 32 32 m 0 -28 a 28 28 0 1 1 0 56 a 28 28 0 1 1 0 -56" className="spin" id="o2" pathLength="360"></path>
94+
</svg>
95+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
96+
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 32,4 V 60" className="dash" id="l" pathLength="360"></path>
97+
</svg>
98+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
99+
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 60,16 C 60,8 52,4 32,4 12,4 4,8 4,16 4,24 12,28 32,28 52,28 60,32 60,40 60,48 52,52 32,52 12,52 4,48 4,40" className="dash" id="s" pathLength="360"></path>
100+
</svg>
101+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
102+
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,60 L 32,4 L 60,60 M 16,40 H 48" className="dash" id="a" pathLength="360"></path>
103+
</svg>
104+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
105+
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 4,32 V 60 M 4,32 C 4,16 16,16 32,16" className="dash" id="r" pathLength="360"></path>
106+
</svg>
107+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
108+
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 54,32 C 54,18 43,4 28,4 13,4 4,18 4,32 4,46 13,60 28,60 43,60 54,46 54,32 Z M 54,32 H 4" className="dash" id="e2" pathLength="360"></path>
109+
</svg>
110+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
111+
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,60 V 16 C 4,8 12,4 32,4 52,4 60,8 60,16 V 60" className="dash" id="n" pathLength="360"></path>
112+
</svg>
113+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
114+
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 60,44 C 60,52 52,60 32,60 12,60 4,52 4,44 V 32 C 4,24 12,16 32,16 52,16 60,24 60,32 V 60" className="dash" id="a2" pathLength="360"></path>
115+
</svg>
116+
</div> */}
117+
60118
<MainTitle
61119
title="Free Resources for"
62120
highlight="Web Development"
@@ -74,15 +132,15 @@ const Resources = () => {
74132
</div>
75133
</div>
76134
{Object.keys(filteredResources).map((key, index) => (
77-
<ResourceSection
78-
key={index}
79-
id={key}
135+
<ResourceSection
136+
key={index}
137+
id={key}
80138
title={
81139
key
82-
.replace(/(^[a-z])/g,($1)=>{return $1.toUpperCase()})
83-
.replace(/([A-Z])/g," $1")
140+
.replace(/(^[a-z])/g, ($1) => { return $1.toUpperCase() })
141+
.replace(/([A-Z])/g, " $1")
84142
}
85-
resources={filteredResources[key]}
143+
resources={filteredResources[key]}
86144
/>
87145
))}
88146
</div>

0 commit comments

Comments
 (0)