Skip to content

Commit 2dcac46

Browse files
nDriaDevnDriaDev
committed
[FIX] homePage
1 parent ee658c4 commit 2dcac46

8 files changed

Lines changed: 1656 additions & 1605 deletions

File tree

‎apps/react-tools-demo/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@
2020

2121
<!-- Open Graph / Facebook -->
2222
<meta property="og:type" content="website">
23-
<meta property="og:url" content="https://ndriadev.github.io/react-tools/">
23+
<meta property="og:url" content="https://libraries.ndria.dev/react-tools/">
2424
<meta property="og:title" content="React Tools">
2525
<meta property="og:description" content="A collection of Hooks, Components, Utilities and Types for React">
2626
<meta property="og:image" content="/react-red.webp">
2727

2828
<!-- Twitter -->
2929
<meta property="twitter:card" content="summary_large_image">
30-
<meta property="twitter:url" content="https://ndriadev.github.io/react-tools/">
30+
<meta property="twitter:url" content="https://libraries.ndria.dev/react-tools/">
3131
<meta property="twitter:title" content="React Tools">
3232
<meta property="twitter:description" content="A collection of Hooks, Components, Utilities and Types for React">
3333
<meta property="twitter:image" content="/react-red.webp">

‎apps/react-tools-demo/public/CNAME‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎apps/react-tools-demo/public/sitemap.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99

1010
<url>
11-
<loc>https://ndriadev.github.io/react-tools/</loc>
11+
<loc>https://libraries.ndria.dev/react-tools/</loc>
1212
<lastmod>2024-03-20T23:30:00+00:00</lastmod>
1313
</url>
1414

‎apps/react-tools-demo/scripts/generateMainLayout.js‎

Lines changed: 87 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -38,81 +38,94 @@ async function generateImport(router) {
3838
* @param {string[]} apiDomFiles
3939
*/
4040
function createLinkHooksRoutes(router, stateFiles, lifecycleFiles, performanceFiles, eventsFiles, apiDomFiles,) {
41-
router.add(' <p className="sub-type">State</p>');
41+
router.add(" <details open className='type'>");
42+
router.add(" <summary>Hooks</summary>");
43+
router.add(" <details open className='sub-type'>");
44+
router.add(" <summary>State</summary>");
4245
stateFiles.forEach(f => {
4346
const [name] = f.split(".");
44-
router.add(' <Link');
45-
router.add(` className={pathname === "/hooks/state/${name}" ? 'active' : ''}`);
46-
router.add(` ref={node => linksRef.current["${name}"] = node}`);
47-
router.add(` to="/hooks/state/${name}"`);
48-
router.add(' onClick={() => {');
49-
router.add(' containerRef.current?.scrollTo(0, 0);');
50-
router.add(' window.innerWidth < 1190 && closeNav();');
51-
router.add(' }}');
52-
router.add(' >');
53-
router.add(` ${name}`);
54-
router.add(' </Link>');
47+
router.add(' <Link');
48+
router.add(` className={pathname === "/hooks/state/${name}" ? 'active' : ''}`);
49+
router.add(` ref={node => linksRef.current["${name}"] = node}`);
50+
router.add(` to="/hooks/state/${name}"`);
51+
router.add(' onClick={() => {');
52+
router.add(' containerRef.current?.scrollTo(0, 0);');
53+
router.add(' window.innerWidth < 1190 && closeNav();');
54+
router.add(' }}');
55+
router.add(' >');
56+
router.add(` ${name}`);
57+
router.add(' </Link>');
5558
});
56-
router.add(' <p className="sub-type">Lifecycle</p>');
59+
router.add(" </details>");
60+
router.add(" <details open className='sub-type'>");
61+
router.add(" <summary>Lifecycle</summary>");
5762
lifecycleFiles.forEach(f => {
5863
const [name] = f.split(".");
59-
router.add(' <Link');
60-
router.add(` className={pathname === "/hooks/lifecycle/${name}" ? 'active' : ''}`);
61-
router.add(` ref={node => linksRef.current["${name}"] = node}`);
62-
router.add(` to="/hooks/lifecycle/${name}"`);
63-
router.add(' onClick={() => {');
64-
router.add(' containerRef.current?.scrollTo(0, 0);');
65-
router.add(' window.innerWidth < 1190 && closeNav();');
66-
router.add(' }}');
67-
router.add(' >');
68-
router.add(` ${name}`);
69-
router.add(' </Link>');
64+
router.add(' <Link');
65+
router.add(` className={pathname === "/hooks/lifecycle/${name}" ? 'active' : ''}`);
66+
router.add(` ref={node => linksRef.current["${name}"] = node}`);
67+
router.add(` to="/hooks/lifecycle/${name}"`);
68+
router.add(' onClick={() => {');
69+
router.add(' containerRef.current?.scrollTo(0, 0);');
70+
router.add(' window.innerWidth < 1190 && closeNav();');
71+
router.add(' }}');
72+
router.add(' >');
73+
router.add(` ${name}`);
74+
router.add(' </Link>');
7075
});
71-
router.add(' <p className="sub-type">Performance</p>');
76+
router.add(" </details>");
77+
router.add(" <details open className='sub-type'>");
78+
router.add(" <summary>Performance</summary>");
7279
performanceFiles.forEach(f => {
7380
const [name] = f.split(".");
74-
router.add(' <Link');
75-
router.add(` className={pathname === "/hooks/performance/${name}" ? 'active' : ''}`);
76-
router.add(` ref={node => linksRef.current["${name}"] = node}`);
77-
router.add(` to="/hooks/performance/${name}"`);
78-
router.add(' onClick={() => {');
79-
router.add(' containerRef.current?.scrollTo(0, 0);');
80-
router.add(' window.innerWidth < 1190 && closeNav();');
81-
router.add(' }}');
82-
router.add(' >');
83-
router.add(` ${name}`);
84-
router.add(' </Link>');
81+
router.add(' <Link');
82+
router.add(` className={pathname === "/hooks/performance/${name}" ? 'active' : ''}`);
83+
router.add(` ref={node => linksRef.current["${name}"] = node}`);
84+
router.add(` to="/hooks/performance/${name}"`);
85+
router.add(' onClick={() => {');
86+
router.add(' containerRef.current?.scrollTo(0, 0);');
87+
router.add(' window.innerWidth < 1190 && closeNav();');
88+
router.add(' }}');
89+
router.add(' >');
90+
router.add(` ${name}`);
91+
router.add(' </Link>');
8592
});
86-
router.add(' <p className="sub-type">Events</p>');
93+
router.add(" </details>");
94+
router.add(" <details open className='sub-type'>");
95+
router.add(" <summary>Events</summary>");
8796
eventsFiles.forEach(f => {
8897
const [name] = f.split(".");
89-
router.add(' <Link');
90-
router.add(` className={pathname === "/hooks/events/${name}" ? 'active' : ''}`);
91-
router.add(` ref={node => linksRef.current["${name}"] = node}`);
92-
router.add(` to="/hooks/events/${name}"`);
93-
router.add(' onClick={() => {');
94-
router.add(' containerRef.current?.scrollTo(0, 0);');
95-
router.add(' window.innerWidth < 1190 && closeNav();');
96-
router.add(' }}');
97-
router.add(' >');
98-
router.add(` ${name}`);
99-
router.add(' </Link>');
98+
router.add(' <Link');
99+
router.add(` className={pathname === "/hooks/events/${name}" ? 'active' : ''}`);
100+
router.add(` ref={node => linksRef.current["${name}"] = node}`);
101+
router.add(` to="/hooks/events/${name}"`);
102+
router.add(' onClick={() => {');
103+
router.add(' containerRef.current?.scrollTo(0, 0);');
104+
router.add(' window.innerWidth < 1190 && closeNav();');
105+
router.add(' }}');
106+
router.add(' >');
107+
router.add(` ${name}`);
108+
router.add(' </Link>');
100109
});
101-
router.add(' <p className="sub-type">API DOM</p>');
110+
router.add(" </details>");
111+
router.add(" <details open className='sub-type'>");
112+
router.add(" <summary>API DOM</summary>");
102113
apiDomFiles.forEach(f => {
103114
const [name] = f.split(".");
104-
router.add(' <Link');
105-
router.add(` className={pathname === "/hooks/api-${name}" ? 'active' : ''}`);
106-
router.add(` ref={node => linksRef.current["${name}"] = node}`);
107-
router.add(` to="/hooks/api-dom/${name}"`);
108-
router.add(' onClick={() => {');
109-
router.add(' containerRef.current?.scrollTo(0, 0);');
110-
router.add(' window.innerWidth < 1190 && closeNav();');
111-
router.add(' }}');
112-
router.add(' >');
113-
router.add(` ${name}`);
114-
router.add(' </Link>');
115+
router.add(' <Link');
116+
router.add(` className={pathname === "/hooks/api-${name}" ? 'active' : ''}`);
117+
router.add(` ref={node => linksRef.current["${name}"] = node}`);
118+
router.add(` to="/hooks/api-dom/${name}"`);
119+
router.add(' onClick={() => {');
120+
router.add(' containerRef.current?.scrollTo(0, 0);');
121+
router.add(' window.innerWidth < 1190 && closeNav();');
122+
router.add(' }}');
123+
router.add(' >');
124+
router.add(` ${name}`);
125+
router.add(' </Link>');
115126
});
127+
router.add(" </details>");
128+
router.add(" </details>");
116129
}
117130

118131
/**
@@ -122,21 +135,23 @@ function createLinkHooksRoutes(router, stateFiles, lifecycleFiles, performanceFi
122135
* @param {string} parentRoot
123136
*/
124137
function createLinkRoutes(router, componentsFiles, parentRoot) {
125-
router.add(` <p className="sub-type">${parentRoot.charAt(0).toUpperCase()+parentRoot.substring(1)}</p>`);
138+
router.add(" <details open className='type'>");
139+
router.add(` <summary>${parentRoot.charAt(0).toUpperCase() + parentRoot.substring(1)}</summary>`);
126140
componentsFiles.forEach(f => {
127141
const [name] = f.split(".");
128-
router.add(' <Link');
129-
router.add(` className={pathname === "/${parentRoot}/${name}" ? 'active' : ''}`);
130-
router.add(` ref={node => linksRef.current["${name}"] = node}`);
131-
router.add(` to="/${parentRoot}/${name}"`);
132-
router.add(' onClick={() => {');
133-
router.add(' containerRef.current?.scrollTo(0, 0);');
134-
router.add(' window.innerWidth < 1190 && closeNav();');
135-
router.add(' }}');
136-
router.add(' >');
137-
router.add(` ${name}`);
138-
router.add(' </Link>');
142+
router.add(' <Link');
143+
router.add(` className={pathname === "/${parentRoot}/${name}" ? 'active' : ''}`);
144+
router.add(` ref={node => linksRef.current["${name}"] = node}`);
145+
router.add(` to="/${parentRoot}/${name}"`);
146+
router.add(' onClick={() => {');
147+
router.add(' containerRef.current?.scrollTo(0, 0);');
148+
router.add(' window.innerWidth < 1190 && closeNav();');
149+
router.add(' }}');
150+
router.add(' >');
151+
router.add(` ${name}`);
152+
router.add(' </Link>');
139153
});
154+
router.add(" </details>");
140155
}
141156

142157
/**
@@ -154,7 +169,6 @@ async function createLinkRouter(router) {
154169
fs.readFile((path.join(PATH_LIB_SRC, COMPONENTS_DIR_NAME, "index.ts")), { encoding: "utf8" }).then(res => res.replaceAll("export { ", "").replaceAll("export ", "").split("\n").map(el => el.substring(0, el.indexOf(" } from") !== -1 ? el.indexOf(" } from") : el.indexOf(" from"))).filter(el => !!el && libSrcIndexFile.includes(el)).sort((a, b) => a.localeCompare(b, 'en'))),
155170
fs.readFile((path.join(PATH_LIB_SRC, UTILS_DIR_NAME, "index.ts")), { encoding: "utf8" }).then(res => res.replaceAll("export { ", "").replaceAll("export ", "").split("\n").map(el => el.substring(0, el.indexOf(" } from") !== -1 ? el.indexOf(" } from") : el.indexOf(" from"))).filter(el => !!el && libSrcIndexFile.includes(el)).sort((a, b) => a.localeCompare(b, 'en')))
156171
]);
157-
router.add(" <p className='type'>Hooks</p>");
158172
createLinkHooksRoutes(router, HOOKS_STATE_FILES, HOOKS_LIFECYCLE_FILES, HOOKS_PERFORMANCE_FILES, HOOKS_EVENTS_FILES, HOOKS_APIDOM_FILES);
159173
createLinkRoutes(router, COMPONENTS_FILES, "components")
160174
createLinkRoutes(router, UTILS_FILES, "utils")

‎apps/react-tools-demo/src/App.css‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -198,23 +198,43 @@ code {
198198
}
199199

200200
.nav>.type {
201+
display: flex;
202+
flex-direction: column;
201203
margin: 1em 0;
202204
padding-left: 1em;
203205
font-size: 1em;
204206
}
207+
.nav>.type ~ .type {
208+
margin-top: 0em;
209+
}
205210

206-
.nav>.sub-type {
207-
margin: 0 0 0.5em;
208-
padding-left: 1.55em;
209-
font-size: .95em;
211+
.nav>.type>.sub-type {
212+
display: flex;
213+
flex-direction: column;
214+
height: inherit;
215+
overflow-y: auto;
216+
margin: 0.5em 0;
217+
padding-left: .75em;
218+
font-size: 1em;
210219
}
211220

212-
.nav>.sub-type ~ .sub-type {
221+
.nav>.type>.sub-type ~ .sub-type {
213222
margin-top: 1em;
214223
}
215-
.nav>a {
224+
225+
.nav>.type>a {
216226
font-size: .875em;
217-
padding: 1em 2.5em;
227+
padding: 1em 1em 1em 2.5em;
228+
}
229+
230+
.nav>.type>.sub-type>a {
231+
font-size: .875em;
232+
padding: 1em 1em 1em 1.75em;
233+
}
234+
235+
summary:hover {
236+
/* color: #f53340; */
237+
color: #9c2129;
218238
}
219239

220240
.docs {
@@ -366,7 +386,7 @@ blockquote>ul>li>strong {
366386
}
367387

368388
.title {
369-
margin-top: 0;
389+
margin-top: 40px;
370390
}
371391

372392
.npm-container {
@@ -375,7 +395,7 @@ blockquote>ul>li>strong {
375395
position: relative;
376396

377397
.npm-command {
378-
font-size: 1.25em;
398+
font-size: 1.4em;
379399
padding: 0 1em;
380400
display: flex;
381401
justify-content: center;
@@ -403,7 +423,7 @@ blockquote>ul>li>strong {
403423
background-color: #1a1a1a;
404424
cursor: pointer;
405425
transition: border-color 0.25s;
406-
margin: 50px 0px;
426+
margin: 40px 0px;
407427
font-size: 1.5em;
408428
color: initial;
409429
}

0 commit comments

Comments
 (0)