p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(react): add 404 redirection and update build script

Browse Source 
Added a 404.html file that contains a redirection script in the 'react' package. Also updated the build script in package.json to copy the 404.html into the dist folder when building.
This commit is contained in:
p-sw 2024-06-08 09:11:38 +09:00
parent e1999266dd
commit 7d2aa1d7f0
3 changed files with 50 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/react/404.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
const l = window.location;
l.replace(
l.origin +
l.pathname.split('/').slice(0, 1).join('/') + '/?/' +
l.pathname.slice(1).split('/').join('/').replace(/&/g, '~and~') +
(l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
l.hash
);
</script>
</head>
<body>
</body>
</html>

2
packages/react/package.json
View File

@ -5,7 +5,7 @@
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "tsc && vite build", "build": "tsc && vite build && cp ./404.html ./dist",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview" "preview": "vite preview"
}, },

41
packages/react/src/App.tsx
View File

@ -59,7 +59,7 @@ function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
root: null, root: null,
rootMargin: "0px", rootMargin: "0px",
threshold: buildThresholdList(), threshold: buildThresholdList(),
} },
); );
if (internalRef.current) { if (internalRef.current) {
observer.observe(internalRef.current); observer.observe(internalRef.current);
@ -87,13 +87,24 @@ function HashedHeaders(Level: `h${1 | 2 | 3 | 4 | 5 | 6}`) {
} }
const overrideComponents = { const overrideComponents = {
pre: forwardRef<HTMLDivElement, { children: React.ReactElement }>((props, ref) => { pre: forwardRef<HTMLDivElement, { children: React.ReactElement }>(
const { props: { children, className } } = React.cloneElement(React.Children.only(props.children)); (props, ref) => {
const {
props: { children, className },
} = React.cloneElement(React.Children.only(props.children));
const language = (typeof className !== "string" || !className.includes("language-") ? "typescript" : /language-([a-z]+)/.exec(className)![1]) ?? "typescript" const language =
(typeof className !== "string" || !className.includes("language-")
? "typescript"
: /language-([a-z]+)/.exec(className)![1]) ?? "typescript";
return <Code ref={ref} language={language}>{children as string}</Code>; return (
}), <Code ref={ref} language={language}>
{children as string}
</Code>
);
},
),
code: forwardRef<HTMLElement, any>((props: any, ref) => ( code: forwardRef<HTMLElement, any>((props: any, ref) => (
<code <code
ref={ref} ref={ref}
@ -139,10 +150,20 @@ const routes = Object.keys(docsModules).map((path) => {
); );
}); });
const REDIRECTED_404 = /^\?(\/([a-zA-Z0-9\-_]+\/?)+)(&.*)*$/;
const router = createBrowserRouter( const router = createBrowserRouter(
createRoutesFromElements( createRoutesFromElements(
<Route path="/" element={<MainLayout />} errorElement={<ErrorBoundary />}> <Route path="/" element={<MainLayout />} errorElement={<ErrorBoundary />}>
<Route index element={<Home />} /> <Route
index
loader={() =>
REDIRECTED_404.test(window.location.search)
? redirect(REDIRECTED_404.exec(window.location.search)?.[1] ?? "/")
: true
}
element={<Home />}
/>
<Route path="docs" element={<DocsLayout />}> <Route path="docs" element={<DocsLayout />}>
<Route index loader={() => redirect("/docs/introduction")} /> <Route index loader={() => redirect("/docs/introduction")} />
<Route <Route
@ -169,15 +190,15 @@ const router = createBrowserRouter(
`/docs/components/${Object.keys(docsModules)[0] `/docs/components/${Object.keys(docsModules)[0]
.split("/") .split("/")
.pop() .pop()
?.replace(".mdx", "")}` ?.replace(".mdx", "")}`,
) )
} }
/> />
{routes} {routes}
</Route> </Route>
</Route> </Route>
</Route> </Route>,
) ),
); );
function App() { function App() {