Skip to content

Commit 22b1a00

Browse files
nicofrettinicofretti
committed
edit: format website
1 parent 8243595 commit 22b1a00

File tree

16 files changed

+820
-789
lines changed

16 files changed

+820
-789
lines changed

‎website/src/App.tsx‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
1-
import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom'
2-
import { useEffect } from 'react'
3-
import Landing from './pages/Landing'
4-
import Docs from './pages/Docs'
5-
6-
function RedirectHandler() {
7-
const navigate = useNavigate()
8-
9-
useEffect(() => {
10-
// handle redirect from 404.html
11-
const params = new URLSearchParams(window.location.search)
12-
const redirect = params.get('redirect')
13-
14-
if (redirect) {
15-
// remove the redirect parameter and navigate to the intended path
16-
window.history.replaceState({}, '', window.location.pathname)
17-
navigate(redirect, { replace: true })
18-
}
19-
}, [navigate])
20-
21-
return null
22-
}
23-
24-
function App() {
25-
const basename = import.meta.env.BASE_URL
26-
27-
return (
28-
<Router basename={basename}>
29-
<RedirectHandler />
30-
<Routes>
31-
<Route path="/" element={<Landing />} />
32-
<Route path="/docs/*" element={<Docs />} />
33-
</Routes>
34-
</Router>
35-
)
36-
}
37-
38-
export default App
1+
import { BrowserRouter as Router, Routes, Route, useNavigate } from "react-router-dom";
2+
import { useEffect } from "react";
3+
import Landing from "./pages/Landing";
4+
import Docs from "./pages/Docs";
5+
6+
function RedirectHandler() {
7+
const navigate = useNavigate();
8+
9+
useEffect(() => {
10+
// handle redirect from 404.html
11+
const params = new URLSearchParams(window.location.search);
12+
const redirect = params.get("redirect");
13+
14+
if (redirect) {
15+
// remove the redirect parameter and navigate to the intended path
16+
window.history.replaceState({}, "", window.location.pathname);
17+
navigate(redirect, { replace: true });
18+
}
19+
}, [navigate]);
20+
21+
return null;
22+
}
23+
24+
function App() {
25+
const basename = import.meta.env.BASE_URL;
26+
27+
return (
28+
<Router basename={basename}>
29+
<RedirectHandler />
30+
<Routes>
31+
<Route path="/" element={<Landing />} />
32+
<Route path="/docs/*" element={<Docs />} />
33+
</Routes>
34+
</Router>
35+
);
36+
}
37+
38+
export default App;

‎website/src/components/docs/Sidebar.tsx‎

Lines changed: 141 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -1,138 +1,141 @@
1-
import { Link, useLocation } from 'react-router-dom'
2-
import { useEffect, useState } from 'react'
3-
import { getDocsNav } from '@/lib/docs'
4-
import { DocNav } from '@/lib/types'
5-
6-
export default function Sidebar() {
7-
const [docs, setDocs] = useState<DocNav[]>([])
8-
const [isMenuOpen, setIsMenuOpen] = useState(false)
9-
const location = useLocation()
10-
11-
useEffect(() => {
12-
getDocsNav().then(setDocs)
13-
}, [])
14-
15-
useEffect(() => {
16-
setIsMenuOpen(false)
17-
}, [location.pathname])
18-
19-
const currentSlug = location.pathname.replace('/docs/', '')
20-
const currentDoc = docs.find(doc => doc.slug === currentSlug)
21-
22-
return (
23-
<>
24-
{/* mobile menu button */}
25-
<div className="lg:hidden fixed left-0 right-0 z-40 bg-background border-b border-gray-800">
26-
<div className="flex items-center justify-between px-6 py-4">
27-
<Link to="/" className="flex items-center">
28-
<img
29-
src={`${import.meta.env.BASE_URL}images/logo/logo_name_empty.svg`}
30-
alt="DataGenFlow"
31-
className="h-8"
32-
/>
33-
</Link>
34-
<button
35-
onClick={() => setIsMenuOpen(!isMenuOpen)}
36-
className="flex items-center gap-2 text-gray-300 hover:text-primary transition-colors"
37-
>
38-
<span className="text-sm font-medium">
39-
{currentDoc?.title || 'Documentation'}
40-
</span>
41-
<svg
42-
className={`w-5 h-5 transition-transform ${isMenuOpen ? 'rotate-180' : ''}`}
43-
fill="none"
44-
viewBox="0 0 24 24"
45-
stroke="currentColor"
46-
>
47-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
48-
</svg>
49-
</button>
50-
</div>
51-
52-
{isMenuOpen && (
53-
<div className="border-t border-gray-800 bg-background-dark max-h-96 overflow-y-auto">
54-
<nav className="p-4">
55-
<h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4">
56-
Documentation
57-
</h3>
58-
<ul className="space-y-1">
59-
{docs.map((doc) => {
60-
const isActive = currentSlug === doc.slug
61-
62-
return (
63-
<li key={doc.slug}>
64-
<Link
65-
to={`/docs/${doc.slug}`}
66-
className={`block px-3 py-2.5 rounded-lg text-sm transition-all ${
67-
isActive
68-
? 'bg-primary/20 text-primary font-semibold border-l-2 border-primary pl-3'
69-
: 'text-gray-400 hover:text-white hover:bg-gray-800/50 border-l-2 border-transparent hover:border-gray-700 pl-3'
70-
}`}
71-
>
72-
{doc.title}
73-
</Link>
74-
</li>
75-
)
76-
})}
77-
</ul>
78-
</nav>
79-
</div>
80-
)}
81-
</div>
82-
83-
{/* desktop sidebar */}
84-
<aside className="w-64 border-r border-gray-800 h-screen sticky top-0 overflow-y-auto bg-background-dark hidden lg:block">
85-
<div className="p-6">
86-
<Link to="/" className="flex items-center mb-10 group">
87-
<img
88-
src={`${import.meta.env.BASE_URL}images/logo/logo_name_empty.svg`}
89-
alt="DataGenFlow"
90-
className="h-8 w-full transition-opacity group-hover:opacity-80"
91-
/>
92-
</Link>
93-
94-
<nav>
95-
<h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4 px-3">
96-
Documentation
97-
</h3>
98-
99-
<ul className="space-y-1">
100-
{docs.map((doc) => {
101-
const isActive = currentSlug === doc.slug
102-
103-
return (
104-
<li key={doc.slug}>
105-
<Link
106-
to={`/docs/${doc.slug}`}
107-
className={`block px-3 py-2.5 rounded-lg text-sm transition-all ${
108-
isActive
109-
? 'bg-primary/20 text-primary font-semibold border-l-2 border-primary pl-3'
110-
: 'text-gray-400 hover:text-white hover:bg-gray-800/50 border-l-2 border-transparent hover:border-gray-700 pl-3'
111-
}`}
112-
>
113-
{doc.title}
114-
</Link>
115-
</li>
116-
)
117-
})}
118-
</ul>
119-
</nav>
120-
121-
<div className="mt-8 pt-6 border-t border-gray-800">
122-
<a
123-
href="https://github.com/nicofretti/DataGenFlow"
124-
target="_blank"
125-
rel="noopener noreferrer"
126-
className="flex items-center gap-2 px-3 py-2 text-sm text-gray-400 hover:text-primary transition-colors"
127-
>
128-
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
129-
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
130-
</svg>
131-
<span>View on GitHub</span>
132-
</a>
133-
</div>
134-
</div>
135-
</aside>
136-
</>
137-
)
138-
}
1+
import { Link, useLocation } from "react-router-dom";
2+
import { useEffect, useState } from "react";
3+
import { getDocsNav } from "@/lib/docs";
4+
import { DocNav } from "@/lib/types";
5+
6+
export default function Sidebar() {
7+
const [docs, setDocs] = useState<DocNav[]>([]);
8+
const [isMenuOpen, setIsMenuOpen] = useState(false);
9+
const location = useLocation();
10+
11+
useEffect(() => {
12+
getDocsNav().then(setDocs);
13+
}, []);
14+
15+
useEffect(() => {
16+
setIsMenuOpen(false);
17+
}, [location.pathname]);
18+
19+
const currentSlug = location.pathname.replace("/docs/", "");
20+
const currentDoc = docs.find((doc) => doc.slug === currentSlug);
21+
22+
return (
23+
<>
24+
{/* mobile menu button */}
25+
<div className="lg:hidden fixed left-0 right-0 z-40 bg-background border-b border-gray-800">
26+
<div className="flex items-center justify-between px-6 py-4">
27+
<Link to="/" className="flex items-center">
28+
<img
29+
src={`${import.meta.env.BASE_URL}images/logo/logo_name_empty.svg`}
30+
alt="DataGenFlow"
31+
className="h-8"
32+
/>
33+
</Link>
34+
<button
35+
onClick={() => setIsMenuOpen(!isMenuOpen)}
36+
className="flex items-center gap-2 text-gray-300 hover:text-primary transition-colors"
37+
>
38+
<span className="text-sm font-medium">{currentDoc?.title || "Documentation"}</span>
39+
<svg
40+
className={`w-5 h-5 transition-transform ${isMenuOpen ? "rotate-180" : ""}`}
41+
fill="none"
42+
viewBox="0 0 24 24"
43+
stroke="currentColor"
44+
>
45+
<path
46+
strokeLinecap="round"
47+
strokeLinejoin="round"
48+
strokeWidth={2}
49+
d="M19 9l-7 7-7-7"
50+
/>
51+
</svg>
52+
</button>
53+
</div>
54+
55+
{isMenuOpen && (
56+
<div className="border-t border-gray-800 bg-background-dark max-h-96 overflow-y-auto">
57+
<nav className="p-4">
58+
<h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4">
59+
Documentation
60+
</h3>
61+
<ul className="space-y-1">
62+
{docs.map((doc) => {
63+
const isActive = currentSlug === doc.slug;
64+
65+
return (
66+
<li key={doc.slug}>
67+
<Link
68+
to={`/docs/${doc.slug}`}
69+
className={`block px-3 py-2.5 rounded-lg text-sm transition-all ${
70+
isActive
71+
? "bg-primary/20 text-primary font-semibold border-l-2 border-primary pl-3"
72+
: "text-gray-400 hover:text-white hover:bg-gray-800/50 border-l-2 border-transparent hover:border-gray-700 pl-3"
73+
}`}
74+
>
75+
{doc.title}
76+
</Link>
77+
</li>
78+
);
79+
})}
80+
</ul>
81+
</nav>
82+
</div>
83+
)}
84+
</div>
85+
86+
{/* desktop sidebar */}
87+
<aside className="w-64 border-r border-gray-800 h-screen sticky top-0 overflow-y-auto bg-background-dark hidden lg:block">
88+
<div className="p-6">
89+
<Link to="/" className="flex items-center mb-10 group">
90+
<img
91+
src={`${import.meta.env.BASE_URL}images/logo/logo_name_empty.svg`}
92+
alt="DataGenFlow"
93+
className="h-8 w-full transition-opacity group-hover:opacity-80"
94+
/>
95+
</Link>
96+
97+
<nav>
98+
<h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4 px-3">
99+
Documentation
100+
</h3>
101+
102+
<ul className="space-y-1">
103+
{docs.map((doc) => {
104+
const isActive = currentSlug === doc.slug;
105+
106+
return (
107+
<li key={doc.slug}>
108+
<Link
109+
to={`/docs/${doc.slug}`}
110+
className={`block px-3 py-2.5 rounded-lg text-sm transition-all ${
111+
isActive
112+
? "bg-primary/20 text-primary font-semibold border-l-2 border-primary pl-3"
113+
: "text-gray-400 hover:text-white hover:bg-gray-800/50 border-l-2 border-transparent hover:border-gray-700 pl-3"
114+
}`}
115+
>
116+
{doc.title}
117+
</Link>
118+
</li>
119+
);
120+
})}
121+
</ul>
122+
</nav>
123+
124+
<div className="mt-8 pt-6 border-t border-gray-800">
125+
<a
126+
href="https://github.com/nicofretti/DataGenFlow"
127+
target="_blank"
128+
rel="noopener noreferrer"
129+
className="flex items-center gap-2 px-3 py-2 text-sm text-gray-400 hover:text-primary transition-colors"
130+
>
131+
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
132+
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
133+
</svg>
134+
<span>View on GitHub</span>
135+
</a>
136+
</div>
137+
</div>
138+
</aside>
139+
</>
140+
);
141+
}

‎website/src/components/docs/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
export { default as Sidebar } from './Sidebar'
2-
export { default as Content } from './Content'
1+
export { default as Sidebar } from "./Sidebar";
2+
export { default as Content } from "./Content";

0 commit comments

Comments
 (0)