diff --git a/packages/docs-new/package.json b/packages/docs-new/package.json index 4ec9a73..6a6fc50 100644 --- a/packages/docs-new/package.json +++ b/packages/docs-new/package.json @@ -13,7 +13,6 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-head": "^3.4.0", - "react-router": "^6.2.1", "react-router-dom": "^6.2.1" }, "devDependencies": { @@ -29,6 +28,7 @@ "compression": "^1.7.4", "esno": "^0.13.0", "postcss": "^8.4.5", + "react-location": "^3.3.0", "rehype-highlight": "^5.0.2", "remark-frontmatter": "^4.0.1", "tailwindcss": "^3.0.8", diff --git a/packages/docs-new/src/app.tsx b/packages/docs-new/src/app.tsx index 611e704..46db0b2 100644 --- a/packages/docs-new/src/app.tsx +++ b/packages/docs-new/src/app.tsx @@ -1,13 +1,12 @@ import { description } from "reacord/package.json" import { Meta, Title } from "react-head" -import { Route, Routes } from "react-router" -import { Link } from "react-router-dom" -import { DocumentPage } from "./pages/document-page" -import { LandingPage } from "./pages/landing-page" +import type { ReactLocation } from "react-location" +import { Link, Outlet, Router } from "react-location" +import { routes } from "./routes" -export function App() { +export function App({ location }: { location: ReactLocation }) { return ( - <> + Reacord - - } /> - } /> - - + + ) } diff --git a/packages/docs-new/src/entry.client.tsx b/packages/docs-new/src/entry.client.tsx index f7215cf..cdac2d0 100644 --- a/packages/docs-new/src/entry.client.tsx +++ b/packages/docs-new/src/entry.client.tsx @@ -1,13 +1,13 @@ import { hydrate } from "react-dom" import { HeadProvider } from "react-head" -import { BrowserRouter } from "react-router-dom" +import { ReactLocation } from "react-location" import { App } from "./app" +const location = new ReactLocation() + hydrate( - - - - - , + + + , document.querySelector("#app"), ) diff --git a/packages/docs-new/src/entry.server.tsx b/packages/docs-new/src/entry.server.tsx index 1103988..bc41508 100644 --- a/packages/docs-new/src/entry.server.tsx +++ b/packages/docs-new/src/entry.server.tsx @@ -1,17 +1,19 @@ import { renderToString } from "react-dom/server" import { HeadProvider } from "react-head" -import { StaticRouter } from "react-router-dom/server" +import { createMemoryHistory, ReactLocation } from "react-location" import { App } from "./app" export async function render(url: string) { const headTags: React.ReactElement[] = [] + const location = new ReactLocation({ + history: createMemoryHistory({ initialEntries: [url] }), + }) + const app = renderToString( - - - - - , + + + , ) const scriptSource = import.meta.env.PROD diff --git a/packages/docs-new/src/pages/document-page.tsx b/packages/docs-new/src/pages/document-page.tsx index 513a2da..04c755e 100644 --- a/packages/docs-new/src/pages/document-page.tsx +++ b/packages/docs-new/src/pages/document-page.tsx @@ -1,10 +1,10 @@ -import GettingStarted from "../docs/getting-started.md" +import { Outlet } from "react-location" export function DocumentPage() { return ( <>

Docs

- + ) } diff --git a/packages/docs-new/src/routes.tsx b/packages/docs-new/src/routes.tsx new file mode 100644 index 0000000..ac2a609 --- /dev/null +++ b/packages/docs-new/src/routes.tsx @@ -0,0 +1,21 @@ +import type { Route } from "react-location" + +export const routes: Route[] = [ + { + path: "/", + element: () => + import("./pages/landing-page").then((m) => ), + }, + { + path: "docs", + element: () => + import("./pages/document-page").then((m) => ), + children: [ + { + path: "*", + element: ({ params }) => + import(`./docs/${params["*"]}.md`).then((m) => ), + }, + ], + }, +] diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7d4f508..3bb2435 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -129,7 +129,7 @@ importers: react: ^17.0.2 react-dom: ^17.0.2 react-head: ^3.4.0 - react-router: ^6.2.1 + react-location: ^3.3.0 react-router-dom: ^6.2.1 rehype-highlight: ^5.0.2 remark-frontmatter: ^4.0.1 @@ -143,7 +143,6 @@ importers: react: 17.0.2 react-dom: 17.0.2_react@17.0.2 react-head: 3.4.0_react-dom@17.0.2+react@17.0.2 - react-router: 6.2.1_react@17.0.2 react-router-dom: 6.2.1_react-dom@17.0.2+react@17.0.2 devDependencies: '@mapbox/rehype-prism': 0.8.0 @@ -158,6 +157,7 @@ importers: compression: 1.7.4 esno: 0.13.0_typescript@4.5.4 postcss: 8.4.5 + react-location: 3.3.0_react-dom@17.0.2+react@17.0.2 rehype-highlight: 5.0.2 remark-frontmatter: 4.0.1 tailwindcss: 3.0.8_cefe482e8d38053bbf3d5815e0c551b3 @@ -2171,6 +2171,12 @@ packages: babel-preset-current-node-syntax: 1.0.1_@babel+core@7.16.5 dev: true + /babylon/7.0.0-beta.47: + resolution: {integrity: sha512-+rq2cr4GDhtToEzKFD6KZZMDBXhjFAr9JjPw9pAppZACeEWqNM294j+NdBzkSHYXwzzBmVjZ3nEVJlOhbR2gOQ==} + engines: {node: '>=6.0.0'} + hasBin: true + dev: true + /bail/2.0.2: resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==} @@ -2922,6 +2928,11 @@ packages: requiresBuild: true dev: true + /core-js/3.20.1: + resolution: {integrity: sha512-btdpStYFQScnNVQ5slVcr858KP0YWYjV16eGJQw8Gg7CWtu/2qNvIM3qVRIR3n1pK2R9NNOrTevbvAYxajwEjg==} + requiresBuild: true + dev: true + /core-util-is/1.0.3: resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==} dev: true @@ -4197,6 +4208,16 @@ packages: to-regex: 3.0.2 dev: true + /fast-async/7.0.6: + resolution: {integrity: sha512-/iUa3eSQC+Xh5tN6QcVLsEsN7b1DaPIoTZo++VpLLIxtdNW2tEmMZex4TcrMeRnBwMOpZwue2CB171wjt5Kgqg==} + dependencies: + '@babel/generator': 7.16.5 + '@babel/helper-module-imports': 7.16.7 + babylon: 7.0.0-beta.47 + nodent-runtime: 3.2.1 + nodent-transform: 3.2.9 + dev: true + /fast-deep-equal/3.1.3: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} dev: true @@ -4893,7 +4914,6 @@ packages: resolution: {integrity: sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==} dependencies: '@babel/runtime': 7.16.5 - dev: false /homedir-polyfill/1.0.3: resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==} @@ -7280,6 +7300,15 @@ packages: update-notifier: 5.1.0 dev: true + /nodent-runtime/3.2.1: + resolution: {integrity: sha512-7Ws63oC+215smeKJQCxzrK21VFVlCFBkwl0MOObt0HOpVQXs3u483sAmtkF33nNqZ5rSOQjB76fgyPBmAUrtCA==} + requiresBuild: true + dev: true + + /nodent-transform/3.2.9: + resolution: {integrity: sha512-4a5FH4WLi+daH/CGD5o/JWRR8W5tlCkd3nrDSkxbOzscJTyTUITltvOJeQjg3HJ1YgEuNyiPhQbvbtRjkQBByQ==} + dev: true + /nopt/1.0.10: resolution: {integrity: sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=} hasBin: true @@ -8164,6 +8193,21 @@ packages: resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} dev: true + /react-location/3.3.0_react-dom@17.0.2+react@17.0.2: + resolution: {integrity: sha512-0ME2sVcldYcTGB4DxbD+00wuXHY9NeACjhub3+MKOsBxnTSMQ5P2XWZZwql5IyL9Fj9IL1CjdUnoT4hCL1bCCQ==} + peerDependencies: + react: '>=16' + react-dom: '>=16' + dependencies: + '@babel/runtime': 7.16.5 + core-js: 3.20.1 + fast-async: 7.0.6 + history: 5.2.0 + react: 17.0.2 + react-dom: 17.0.2_react@17.0.2 + ts-toolbelt: 9.6.0 + dev: true + /react-reconciler/0.26.2_react@17.0.2: resolution: {integrity: sha512-nK6kgY28HwrMNwDnMui3dvm3rCFjZrcGiuwLc5COUipBK5hWHLOxMJhSnSomirqWwjPBJKV1QcbkI0VJr7Gl1Q==} engines: {node: '>=0.10.0'} @@ -9457,6 +9501,10 @@ packages: resolution: {integrity: sha512-nXIb1fvdY5CBSrDIblLn73NW0qRDk5yJ0Sk1qPBF560OdJfQp9jhl+0tzcY09OZ9U+6GpeoI9RjwoIKFIoB9MQ==} dev: true + /ts-toolbelt/9.6.0: + resolution: {integrity: sha512-nsZd8ZeNUzukXPlJmTBwUAuABDe/9qtVDelJeT/qW0ow3ZS3BsQJtNkan1802aM9Uf68/Y8ljw86Hu0h5IUW3w==} + dev: true + /tsconfig-paths/3.12.0: resolution: {integrity: sha512-e5adrnOYT6zqVnWqZu7i/BQ3BnhzvGbjEjejFXO20lKIKpwTaupkCPgEfv4GZK1IBciJUEhYs3J3p75FdaTFVg==} dependencies: