Skip to content

Commit a2b99b4

Browse files
Vojtěch Václav Portešvojtechportes
Vojtěch Václav Porteš
authored and
vojtechportes
committed
feat: Added documentation website, reduced readme
1 parent 06e07ef commit a2b99b4

38 files changed

Lines changed: 3701 additions & 1544 deletions

‎README.md‎

Lines changed: 33 additions & 990 deletions
Large diffs are not rendered by default.

‎example/index.html‎

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,64 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>React Query Builder Example</title>
6+
<meta
7+
name="description"
8+
content="React Query Builder documentation, API reference, and interactive demo."
9+
/>
10+
<meta
11+
name="robots"
12+
content="index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1"
13+
/>
14+
<meta name="theme-color" content="#3f51b5" />
15+
<meta property="og:type" content="website" />
16+
<meta property="og:site_name" content="React Query Builder" />
17+
<meta property="og:title" content="React Query Builder" />
18+
<meta
19+
property="og:description"
20+
content="React Query Builder documentation, API reference, and interactive demo."
21+
/>
22+
<meta
23+
property="og:url"
24+
content="https://vojtechportes.github.io/react-query-builder/"
25+
/>
26+
<meta
27+
property="og:image"
28+
content="https://vojtechportes.github.io/react-query-builder/favicon.png"
29+
/>
30+
<meta name="twitter:card" content="summary" />
31+
<meta name="twitter:title" content="React Query Builder" />
32+
<meta
33+
name="twitter:description"
34+
content="React Query Builder documentation, API reference, and interactive demo."
35+
/>
36+
<meta
37+
name="twitter:image"
38+
content="https://vojtechportes.github.io/react-query-builder/favicon.png"
39+
/>
40+
<link
41+
rel="canonical"
42+
href="https://vojtechportes.github.io/react-query-builder/"
43+
/>
44+
<link rel="icon" type="image/png" href="/favicon.png" />
45+
<title>React Query Builder</title>
46+
<script>
47+
(function (l) {
48+
if (l.search[1] === '/') {
49+
var decoded = l.search
50+
.slice(1)
51+
.split('&')
52+
.map(function (s) {
53+
return s.replace(/~and~/g, '&');
54+
})
55+
.join('?');
56+
window.history.replaceState(
57+
null,
58+
null,
59+
l.pathname.slice(0, -1) + decoded + l.hash
60+
);
61+
}
62+
})(window.location);
63+
</script>
764
</head>
865
<body>
966
<div id="root"></div>

‎example/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,11 @@
88
"preview": "vite preview"
99
},
1010
"dependencies": {
11+
"minisearch": "^7.2.0",
12+
"prism-react-renderer": "^2.4.1",
1113
"react": "^18.3.1",
1214
"react-dom": "^18.3.1",
15+
"react-router-dom": "^7.15.1",
1316
"styled-components": "^4.4.1"
1417
},
1518
"devDependencies": {

‎example/public/404.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>React Query Builder</title>
6+
<script>
7+
var pathSegmentsToKeep = 1;
8+
var l = window.location;
9+
l.replace(
10+
l.protocol +
11+
'//' +
12+
l.hostname +
13+
(l.port ? ':' + l.port : '') +
14+
l.pathname
15+
.split('/')
16+
.slice(0, 1 + pathSegmentsToKeep)
17+
.join('/') +
18+
'/?/' +
19+
l.pathname
20+
.slice(1)
21+
.split('/')
22+
.slice(pathSegmentsToKeep)
23+
.join('/')
24+
.replace(/&/g, '~and~') +
25+
(l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
26+
l.hash
27+
);
28+
</script>
29+
</head>
30+
<body></body>
31+
</html>

‎example/public/favicon.png‎

2.25 KB
Loading

‎example/public/query-builder-logo.png‎

-7.83 KB
Binary file not shown.

‎example/public/robots.txt‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
User-agent: *
2+
Allow: /
3+
4+
Sitemap: https://vojtechportes.github.io/react-query-builder/sitemap.xml

‎example/public/sitemap.xml‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
3+
<url>
4+
<loc>https://vojtechportes.github.io/react-query-builder/</loc>
5+
</url>
6+
<url>
7+
<loc>https://vojtechportes.github.io/react-query-builder/documentation</loc>
8+
</url>
9+
<url>
10+
<loc>https://vojtechportes.github.io/react-query-builder/documentation/installation</loc>
11+
</url>
12+
<url>
13+
<loc>https://vojtechportes.github.io/react-query-builder/documentation/usage</loc>
14+
</url>
15+
<url>
16+
<loc>https://vojtechportes.github.io/react-query-builder/documentation/parsing-and-formatting</loc>
17+
</url>
18+
<url>
19+
<loc>https://vojtechportes.github.io/react-query-builder/documentation/parsing-and-formatting/supported-formats</loc>
20+
</url>
21+
<url>
22+
<loc>https://vojtechportes.github.io/react-query-builder/documentation/components</loc>
23+
</url>
24+
<url>
25+
<loc>https://vojtechportes.github.io/react-query-builder/documentation/theming</loc>
26+
</url>
27+
<url>
28+
<loc>https://vojtechportes.github.io/react-query-builder/documentation/localization</loc>
29+
</url>
30+
<url>
31+
<loc>https://vojtechportes.github.io/react-query-builder/api</loc>
32+
</url>
33+
<url>
34+
<loc>https://vojtechportes.github.io/react-query-builder/api/builder</loc>
35+
</url>
36+
<url>
37+
<loc>https://vojtechportes.github.io/react-query-builder/api/fields</loc>
38+
</url>
39+
<url>
40+
<loc>https://vojtechportes.github.io/react-query-builder/api/data</loc>
41+
</url>
42+
<url>
43+
<loc>https://vojtechportes.github.io/react-query-builder/api/components</loc>
44+
</url>
45+
<url>
46+
<loc>https://vojtechportes.github.io/react-query-builder/api/theming</loc>
47+
</url>
48+
<url>
49+
<loc>https://vojtechportes.github.io/react-query-builder/api/format-query</loc>
50+
</url>
51+
<url>
52+
<loc>https://vojtechportes.github.io/react-query-builder/api/parse-query</loc>
53+
</url>
54+
<url>
55+
<loc>https://vojtechportes.github.io/react-query-builder/demo</loc>
56+
</url>
57+
</urlset>

‎example/src/app/app.tsx‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import * as React from 'react';
2+
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
3+
import { SiteShell } from '../components/site-shell';
4+
5+
const HomePage = React.lazy(() =>
6+
import('../pages/home-page/home-page').then(module => ({
7+
default: module.HomePage,
8+
}))
9+
);
10+
const DocumentationPage = React.lazy(() =>
11+
import('../pages/documentation-page/documentation-page').then(module => ({
12+
default: module.DocumentationPage,
13+
}))
14+
);
15+
const ApiPage = React.lazy(() =>
16+
import('../pages/api-page/api-page').then(module => ({
17+
default: module.ApiPage,
18+
}))
19+
);
20+
const DemoPage = React.lazy(() =>
21+
import('../pages/demo-page/demo-page').then(module => ({
22+
default: module.DemoPage,
23+
}))
24+
);
25+
26+
const basename =
27+
import.meta.env.BASE_URL === '/'
28+
? undefined
29+
: import.meta.env.BASE_URL.replace(/\/$/, '');
30+
31+
export const App: React.FC = () => (
32+
<BrowserRouter basename={basename}>
33+
<React.Suspense fallback={null}>
34+
<Routes>
35+
<Route element={<SiteShell />}>
36+
<Route path="/" element={<HomePage />} />
37+
<Route path="/demo" element={<DemoPage />} />
38+
<Route path="/api" element={<ApiPage />} />
39+
<Route path="/api/builder" element={<ApiPage />} />
40+
<Route path="/api/fields" element={<ApiPage />} />
41+
<Route path="/api/data" element={<ApiPage />} />
42+
<Route path="/api/builder-props" element={<Navigate to="/api/builder" replace />} />
43+
<Route path="/api/components" element={<ApiPage />} />
44+
<Route path="/api/theming" element={<ApiPage />} />
45+
<Route path="/api/format-query" element={<ApiPage />} />
46+
<Route path="/api/parse-query" element={<ApiPage />} />
47+
<Route path="/documentation" element={<DocumentationPage />} />
48+
<Route path="/documentation/installation" element={<DocumentationPage />} />
49+
<Route path="/documentation/usage" element={<DocumentationPage />} />
50+
<Route path="/documentation/components" element={<DocumentationPage />} />
51+
<Route
52+
path="/documentation/parsing-and-formatting"
53+
element={<DocumentationPage />}
54+
/>
55+
<Route
56+
path="/documentation/parsing-and-formatting/sql"
57+
element={
58+
<Navigate
59+
to="/documentation/parsing-and-formatting/supported-formats"
60+
replace
61+
/>
62+
}
63+
/>
64+
<Route
65+
path="/documentation/parsing-and-formatting/mongo"
66+
element={
67+
<Navigate
68+
to="/documentation/parsing-and-formatting/supported-formats"
69+
replace
70+
/>
71+
}
72+
/>
73+
<Route
74+
path="/documentation/parsing-and-formatting/other-formats"
75+
element={
76+
<Navigate
77+
to="/documentation/parsing-and-formatting/supported-formats"
78+
replace
79+
/>
80+
}
81+
/>
82+
<Route
83+
path="/documentation/parsing-and-formatting/supported-formats"
84+
element={<DocumentationPage />}
85+
/>
86+
<Route
87+
path="/documentation/configuration/fields"
88+
element={<Navigate to="/api/fields" replace />}
89+
/>
90+
<Route
91+
path="/documentation/configuration/data"
92+
element={<Navigate to="/api/data" replace />}
93+
/>
94+
<Route
95+
path="/documentation/configuration/builder-props"
96+
element={<Navigate to="/api/builder" replace />}
97+
/>
98+
<Route
99+
path="/documentation/configuration/components"
100+
element={<Navigate to="/documentation/components" replace />}
101+
/>
102+
<Route path="/documentation/theming" element={<DocumentationPage />} />
103+
<Route
104+
path="/documentation/localization"
105+
element={<DocumentationPage />}
106+
/>
107+
<Route path="*" element={<Navigate to="/" replace />} />
108+
</Route>
109+
</Routes>
110+
</React.Suspense>
111+
</BrowserRouter>
112+
);

‎example/src/components/alert-box.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import * as React from 'react';
2+
import styled, { css } from 'styled-components';
3+
import { siteTheme } from '../constants/site-theme';
4+
5+
const variants = {
6+
info: css`
7+
background: ${siteTheme.primarySurface};
8+
border-color: ${siteTheme.primaryBorder};
9+
color: ${siteTheme.primaryDark};
10+
`,
11+
tip: css`
12+
background: #ecfdf5;
13+
border-color: #a7f3d0;
14+
color: #166534;
15+
`,
16+
warning: css`
17+
background: #fff7ed;
18+
border-color: #fdba74;
19+
color: #9a3412;
20+
`,
21+
};
22+
23+
const Root = styled.div<{ $variant: keyof typeof variants }>`
24+
margin-bottom: 1rem;
25+
padding: 1rem 1.1rem;
26+
border: 1px solid;
27+
border-radius: 16px;
28+
${({ $variant }) => variants[$variant]}
29+
`;
30+
31+
const Title = styled.strong`
32+
display: block;
33+
margin-bottom: 0.35rem;
34+
font-size: 0.95rem;
35+
`;
36+
37+
const Body = styled.div`
38+
font-size: 0.95rem;
39+
line-height: 1.65;
40+
41+
p {
42+
margin: 0;
43+
}
44+
`;
45+
46+
export interface IAlertBoxProps {
47+
title: string;
48+
variant?: keyof typeof variants;
49+
children: React.ReactNode;
50+
}
51+
52+
export const AlertBox: React.FC<IAlertBoxProps> = ({
53+
title,
54+
variant = 'info',
55+
children,
56+
}) => (
57+
<Root $variant={variant}>
58+
<Title>{title}</Title>
59+
<Body>{children}</Body>
60+
</Root>
61+
);

0 commit comments

Comments
 (0)