use vite-plugin-ssr
This commit is contained in:
@@ -1,16 +0,0 @@
|
|||||||
import { resolve } from "node:path"
|
|
||||||
import { build } from "vite"
|
|
||||||
|
|
||||||
await build({
|
|
||||||
build: { outDir: "dist/client" },
|
|
||||||
})
|
|
||||||
|
|
||||||
await build({
|
|
||||||
build: {
|
|
||||||
ssr: resolve("src/entry.server.tsx"),
|
|
||||||
outDir: "dist/server",
|
|
||||||
rollupOptions: {
|
|
||||||
output: { format: "es" },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="bg-slate-900 text-slate-100">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
|
|
||||||
<link
|
|
||||||
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
|
|
||||||
rel="stylesheet"
|
|
||||||
/>
|
|
||||||
<link href="/src/styles/tailwind.css" rel="stylesheet" />
|
|
||||||
<link href="/src/styles/prism-theme.css" rel="stylesheet" />
|
|
||||||
<!--inject-head-->
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app" class="contents">
|
|
||||||
<!--inject-body-->
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -4,22 +4,23 @@
|
|||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "esmo server.ts",
|
"dev": "esmo server.ts",
|
||||||
"build": "esmo build.ts",
|
"build": "vite build && vite build --ssr",
|
||||||
"start": "NODE_ENV=production esmo server.ts"
|
"start": "NODE_ENV=production esmo server.ts"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"express": "^4.17.2",
|
|
||||||
"reacord": "workspace:*",
|
|
||||||
"react": "^18.0.0-rc.0",
|
|
||||||
"react-dom": "^18.0.0-rc.0",
|
|
||||||
"react-head": "^3.4.0",
|
|
||||||
"react-router": "^6.2.1",
|
|
||||||
"react-router-dom": "^6.2.1",
|
|
||||||
"@heroicons/react": "^1.0.5",
|
"@heroicons/react": "^1.0.5",
|
||||||
"@reach/rect": "^0.16.0",
|
"@reach/rect": "^0.16.0",
|
||||||
"clsx": "^1.1.1",
|
"clsx": "^1.1.1",
|
||||||
|
"express": "^4.17.2",
|
||||||
"gray-matter": "^4.0.3",
|
"gray-matter": "^4.0.3",
|
||||||
"react-focus-on": "^3.5.4"
|
"reacord": "workspace:*",
|
||||||
|
"react": "^18.0.0-rc.0",
|
||||||
|
"react-dom": "^18.0.0-rc.0",
|
||||||
|
"react-focus-on": "^3.5.4",
|
||||||
|
"react-head": "^3.4.0",
|
||||||
|
"react-router": "^6.2.1",
|
||||||
|
"react-router-dom": "^6.2.1",
|
||||||
|
"vite-plugin-ssr": "^0.3.42"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@mapbox/rehype-prism": "^0.8.0",
|
"@mapbox/rehype-prism": "^0.8.0",
|
||||||
|
|||||||
@@ -1,76 +1,39 @@
|
|||||||
import compression from "compression"
|
import express from "express"
|
||||||
import express, { Router } from "express"
|
import { dirname, join } from "node:path"
|
||||||
import { readFile } from "node:fs/promises"
|
import { fileURLToPath } from "node:url"
|
||||||
import { join, resolve } from "node:path"
|
import { createPageRenderer } from "vite-plugin-ssr"
|
||||||
import { createServer as createViteServer } from "vite"
|
|
||||||
import type * as entryModule from "./src/entry.server"
|
|
||||||
|
|
||||||
async function createDevelopmentRouter() {
|
const isProduction = process.env.NODE_ENV === "production"
|
||||||
const vite = await createViteServer({
|
const root = dirname(fileURLToPath(import.meta.url))
|
||||||
server: { middlewareMode: "ssr" },
|
|
||||||
})
|
|
||||||
|
|
||||||
return Router()
|
|
||||||
.use(vite.middlewares)
|
|
||||||
.use("*", async (req, res) => {
|
|
||||||
const url = req.originalUrl
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { render } = (await vite.ssrLoadModule(
|
|
||||||
"/src/entry.server.tsx",
|
|
||||||
)) as typeof entryModule
|
|
||||||
|
|
||||||
const htmlTemplate = await readFile(
|
|
||||||
join(vite.config.root, "index.html"),
|
|
||||||
"utf8",
|
|
||||||
)
|
|
||||||
|
|
||||||
const html = await vite.transformIndexHtml(
|
|
||||||
url,
|
|
||||||
render(url, htmlTemplate),
|
|
||||||
)
|
|
||||||
|
|
||||||
res.status(200).set({ "Content-Type": "text/html" }).end(html)
|
|
||||||
} catch (error: any) {
|
|
||||||
vite.ssrFixStacktrace(error)
|
|
||||||
console.error(error)
|
|
||||||
res.status(500).end(error.stack || error.message)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function createProductionRouter() {
|
|
||||||
return Router()
|
|
||||||
.use(compression())
|
|
||||||
.use(express.static(resolve("dist/client"), { index: false }))
|
|
||||||
.use("*", async (req, res) => {
|
|
||||||
try {
|
|
||||||
const { render }: typeof entryModule = await import(
|
|
||||||
"./dist/server/entry.server"
|
|
||||||
)
|
|
||||||
|
|
||||||
const htmlTemplate = await readFile("dist/client/index.html", "utf8")
|
|
||||||
|
|
||||||
res
|
|
||||||
.status(200)
|
|
||||||
.set({ "Content-Type": "text/html" })
|
|
||||||
.end(render(req.originalUrl, htmlTemplate))
|
|
||||||
} catch (error: any) {
|
|
||||||
console.error(error)
|
|
||||||
res.status(500).end(error.stack || error.message)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const app = express()
|
const app = express()
|
||||||
|
|
||||||
if (process.env.NODE_ENV === "production") {
|
let viteDevServer
|
||||||
app.use(createProductionRouter())
|
if (isProduction) {
|
||||||
|
app.use(express.static(join(root, "dist/client")))
|
||||||
} else {
|
} else {
|
||||||
app.use(await createDevelopmentRouter())
|
const vite = await import("vite")
|
||||||
|
viteDevServer = await vite.createServer({
|
||||||
|
root,
|
||||||
|
server: { middlewareMode: "ssr" },
|
||||||
|
})
|
||||||
|
app.use(viteDevServer.middlewares)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const renderPage = createPageRenderer({ viteDevServer, isProduction, root })
|
||||||
|
app.get("*", async (req, res, next) => {
|
||||||
|
const url = req.originalUrl
|
||||||
|
const pageContextInit = {
|
||||||
|
url,
|
||||||
|
}
|
||||||
|
const pageContext = await renderPage(pageContextInit)
|
||||||
|
const { httpResponse } = pageContext
|
||||||
|
if (!httpResponse) return next()
|
||||||
|
const { body, statusCode, contentType } = httpResponse
|
||||||
|
res.status(statusCode).type(contentType).send(body)
|
||||||
|
})
|
||||||
|
|
||||||
const port = process.env.PORT || 3000
|
const port = process.env.PORT || 3000
|
||||||
app.listen(port, () => {
|
app.listen(port, () => {
|
||||||
console.log(`listening on http://localhost:${port}`)
|
console.info(`Server running at http://localhost:${port}`)
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,14 +1,18 @@
|
|||||||
|
import React from "react"
|
||||||
import { createRoot } from "react-dom"
|
import { createRoot } from "react-dom"
|
||||||
import { HeadProvider } from "react-head"
|
import { HeadProvider } from "react-head"
|
||||||
import { BrowserRouter } from "react-router-dom"
|
import type { PageContextBuiltInClient } from "vite-plugin-ssr/client"
|
||||||
|
import { getPage } from "vite-plugin-ssr/client"
|
||||||
import { App } from "./app"
|
import { App } from "./app"
|
||||||
|
|
||||||
|
const context = await getPage<PageContextBuiltInClient>()
|
||||||
|
|
||||||
createRoot(document.querySelector("#app")!).render(
|
createRoot(document.querySelector("#app")!).render(
|
||||||
<BrowserRouter>
|
<HeadProvider>
|
||||||
<HeadProvider>
|
<App>
|
||||||
<App />
|
<context.Page />
|
||||||
</HeadProvider>
|
</App>
|
||||||
</BrowserRouter>,
|
</HeadProvider>,
|
||||||
)
|
)
|
||||||
|
|
||||||
declare module "react-dom" {
|
declare module "react-dom" {
|
||||||
46
packages/docs-new/src/_default.page.server.tsx
Normal file
46
packages/docs-new/src/_default.page.server.tsx
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
import React from "react"
|
||||||
|
import { renderToStaticMarkup, renderToString } from "react-dom/server.js"
|
||||||
|
import { HeadProvider } from "react-head"
|
||||||
|
import type { PageContextBuiltIn } from "vite-plugin-ssr"
|
||||||
|
import { dangerouslySkipEscape, escapeInject } from "vite-plugin-ssr"
|
||||||
|
import { App } from "./app"
|
||||||
|
|
||||||
|
export const passToClient = ["routeParams"]
|
||||||
|
|
||||||
|
export function render(context: PageContextBuiltIn) {
|
||||||
|
const headTags: React.ReactElement[] = []
|
||||||
|
|
||||||
|
const pageHtml = renderToString(
|
||||||
|
<HeadProvider headTags={headTags}>
|
||||||
|
<App>
|
||||||
|
<context.Page />
|
||||||
|
</App>
|
||||||
|
</HeadProvider>,
|
||||||
|
)
|
||||||
|
|
||||||
|
const documentHtml = escapeInject/* HTML */ `
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="bg-slate-900 text-slate-100">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link
|
||||||
|
rel="preconnect"
|
||||||
|
href="https://fonts.gstatic.com"
|
||||||
|
crossorigin=""
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
${dangerouslySkipEscape(renderToStaticMarkup(<>{headTags}</>))}
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app" class="contents">${dangerouslySkipEscape(pageHtml)}</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
`
|
||||||
|
|
||||||
|
return { documentHtml }
|
||||||
|
}
|
||||||
@@ -1,41 +1,14 @@
|
|||||||
import { description } from "reacord/package.json"
|
import { description } from "reacord/package.json"
|
||||||
import { lazy, Suspense } from "react"
|
|
||||||
import { Meta, Title } from "react-head"
|
import { Meta, Title } from "react-head"
|
||||||
import { Route, Routes } from "react-router-dom"
|
import "tailwindcss/tailwind.css"
|
||||||
import { GuidePageLayout } from "./components/guide-page-layout"
|
import "./styles/prism-theme.css"
|
||||||
import { LandingPage } from "./pages/landing-page"
|
|
||||||
|
|
||||||
export function App() {
|
export function App({ children }: { children: React.ReactNode }) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Title>Reacord</Title>
|
<Title>Reacord</Title>
|
||||||
<Meta name="description" content={description} />
|
<Meta name="description" content={description} />
|
||||||
<Routes>
|
{children}
|
||||||
<Route path="/" element={<LandingPage />} />
|
|
||||||
<Route path="docs" element={<GuidePageLayout />}>
|
|
||||||
{docs.map(({ route, component: Component }) => (
|
|
||||||
<Route
|
|
||||||
key={route}
|
|
||||||
path={route}
|
|
||||||
element={
|
|
||||||
<Suspense fallback={<></>}>
|
|
||||||
<Component />
|
|
||||||
</Suspense>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Route>
|
|
||||||
</Routes>
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const docs = Object.entries(import.meta.glob("./docs/*.md")).map(
|
|
||||||
([path, loadModule]) => ({
|
|
||||||
route: path.replace("./docs/", "").replace(/\.md$/, ""),
|
|
||||||
component: lazy(async () => {
|
|
||||||
const m = await loadModule()
|
|
||||||
return { default: m.default || m }
|
|
||||||
}),
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
import { Link } from "react-router-dom"
|
|
||||||
import { ExternalLink } from "./external-link"
|
import { ExternalLink } from "./external-link"
|
||||||
|
|
||||||
export type AppLinkProps = {
|
export type AppLinkProps = {
|
||||||
type: "router" | "internal" | "external"
|
type: "internal" | "external"
|
||||||
label: React.ReactNode
|
label: React.ReactNode
|
||||||
to: string
|
to: string
|
||||||
className?: string
|
className?: string
|
||||||
@@ -10,13 +9,6 @@ export type AppLinkProps = {
|
|||||||
|
|
||||||
export function AppLink(props: AppLinkProps) {
|
export function AppLink(props: AppLinkProps) {
|
||||||
switch (props.type) {
|
switch (props.type) {
|
||||||
case "router":
|
|
||||||
return (
|
|
||||||
<Link className={props.className} to={props.to}>
|
|
||||||
{props.label}
|
|
||||||
</Link>
|
|
||||||
)
|
|
||||||
|
|
||||||
case "internal":
|
case "internal":
|
||||||
return (
|
return (
|
||||||
<a className={props.className} href={props.to}>
|
<a className={props.className} href={props.to}>
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import clsx from "clsx"
|
import clsx from "clsx"
|
||||||
import { Outlet } from "react-router"
|
|
||||||
import { guideLinks } from "../data/guide-links"
|
import { guideLinks } from "../data/guide-links"
|
||||||
import { useScrolled } from "../hooks/dom/use-scrolled"
|
import { useScrolled } from "../hooks/dom/use-scrolled"
|
||||||
import {
|
import {
|
||||||
@@ -30,7 +29,7 @@ export function GuidePageLayout() {
|
|||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<section className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}>
|
<section className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}>
|
||||||
<Outlet />
|
{/* todo */}
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
import { Link } from "react-router-dom"
|
|
||||||
import { AppLink } from "../components/app-link"
|
import { AppLink } from "../components/app-link"
|
||||||
import { guideLinks } from "../data/guide-links"
|
import { guideLinks } from "../data/guide-links"
|
||||||
import { mainLinks } from "../data/main-links"
|
import { mainLinks } from "../data/main-links"
|
||||||
@@ -8,9 +7,9 @@ import { PopoverMenu } from "./popover-menu"
|
|||||||
export function MainNavigation() {
|
export function MainNavigation() {
|
||||||
return (
|
return (
|
||||||
<nav className="flex justify-between items-center h-16">
|
<nav className="flex justify-between items-center h-16">
|
||||||
<Link to="/">
|
<a href="/">
|
||||||
<h1 className="text-3xl font-light">reacord</h1>
|
<h1 className="text-3xl font-light">reacord</h1>
|
||||||
</Link>
|
</a>
|
||||||
<div className="hidden md:flex gap-4">
|
<div className="hidden md:flex gap-4">
|
||||||
{mainLinks.map((link) => (
|
{mainLinks.map((link) => (
|
||||||
<AppLink {...link} key={link.to} className={linkClass} />
|
<AppLink {...link} key={link.to} className={linkClass} />
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ import { inlineIconClass } from "../styles/components"
|
|||||||
|
|
||||||
export const mainLinks: AppLinkProps[] = [
|
export const mainLinks: AppLinkProps[] = [
|
||||||
{
|
{
|
||||||
type: "router",
|
type: "internal",
|
||||||
to: "/docs/getting-started",
|
to: "/docs/getting-started",
|
||||||
label: (
|
label: (
|
||||||
<>
|
<>
|
||||||
|
|||||||
@@ -1,34 +0,0 @@
|
|||||||
import { renderToString } from "react-dom/server"
|
|
||||||
import { HeadProvider } from "react-head"
|
|
||||||
import { StaticRouter } from "react-router-dom/server"
|
|
||||||
import { App } from "./app"
|
|
||||||
|
|
||||||
export function render(url: string, htmlTemplate: string) {
|
|
||||||
const headTags: React.ReactElement[] = []
|
|
||||||
|
|
||||||
const app = (
|
|
||||||
<StaticRouter location={url}>
|
|
||||||
<HeadProvider headTags={headTags}>
|
|
||||||
<App />
|
|
||||||
</HeadProvider>
|
|
||||||
</StaticRouter>
|
|
||||||
)
|
|
||||||
|
|
||||||
const appHtml = renderToString(app)
|
|
||||||
|
|
||||||
const scriptSource = import.meta.env.PROD
|
|
||||||
? "/entry.client.js"
|
|
||||||
: "/src/entry.client.tsx"
|
|
||||||
|
|
||||||
return htmlTemplate
|
|
||||||
.replace(
|
|
||||||
"<!--inject-head-->",
|
|
||||||
renderToString(
|
|
||||||
<>
|
|
||||||
{headTags}
|
|
||||||
<script type="module" src={scriptSource} />
|
|
||||||
</>,
|
|
||||||
),
|
|
||||||
)
|
|
||||||
.replace("<!--inject-body-->", appHtml)
|
|
||||||
}
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
export function html({
|
|
||||||
head,
|
|
||||||
body,
|
|
||||||
scriptSource,
|
|
||||||
}: {
|
|
||||||
head: string
|
|
||||||
body: string
|
|
||||||
scriptSource: string
|
|
||||||
}): string {
|
|
||||||
return /* HTML */ `
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" class="bg-slate-900 text-slate-100">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
||||||
<link
|
|
||||||
rel="preconnect"
|
|
||||||
href="https://fonts.gstatic.com"
|
|
||||||
crossorigin=""
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
|
|
||||||
rel="stylesheet"
|
|
||||||
/>
|
|
||||||
<link href="/src/styles/tailwind.css" rel="stylesheet" />
|
|
||||||
<link href="/src/styles/prism-theme.css" rel="stylesheet" />
|
|
||||||
${head}
|
|
||||||
<script type="module" src="${scriptSource}"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app" class="contents">${body}</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
1
packages/docs-new/src/pages/docs.page.route.tsx
Normal file
1
packages/docs-new/src/pages/docs.page.route.tsx
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export default "/docs/*"
|
||||||
50
packages/docs-new/src/pages/docs.page.tsx
Normal file
50
packages/docs-new/src/pages/docs.page.tsx
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
import clsx from "clsx"
|
||||||
|
import { AppLink } from "../components/app-link"
|
||||||
|
import { MainNavigation } from "../components/main-navigation"
|
||||||
|
import { guideLinks } from "../data/guide-links"
|
||||||
|
import { useScrolled } from "../hooks/dom/use-scrolled"
|
||||||
|
import {
|
||||||
|
docsProseClass,
|
||||||
|
linkClass,
|
||||||
|
maxWidthContainer,
|
||||||
|
} from "../styles/components"
|
||||||
|
|
||||||
|
export { DocsPage as Page }
|
||||||
|
|
||||||
|
function DocsPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<HeaderPanel>
|
||||||
|
<div className={maxWidthContainer}>
|
||||||
|
<MainNavigation />
|
||||||
|
</div>
|
||||||
|
</HeaderPanel>
|
||||||
|
<main className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}>
|
||||||
|
<nav className="w-48 sticky top-24 hidden md:block">
|
||||||
|
<h2 className="text-2xl">Guides</h2>
|
||||||
|
<ul className="mt-3 flex flex-col gap-2 items-start">
|
||||||
|
{guideLinks.map((link) => (
|
||||||
|
<li key={link.to}>
|
||||||
|
<AppLink {...link} className={linkClass} />
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<section className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}>
|
||||||
|
{/* todo */}
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function HeaderPanel({ children }: { children: React.ReactNode }) {
|
||||||
|
const isScrolled = useScrolled()
|
||||||
|
|
||||||
|
const className = clsx(
|
||||||
|
isScrolled ? "bg-slate-700/30" : "bg-slate-800",
|
||||||
|
"shadow sticky top-0 backdrop-blur-sm transition z-10 flex",
|
||||||
|
)
|
||||||
|
|
||||||
|
return <header className={className}>{children}</header>
|
||||||
|
}
|
||||||
@@ -1,10 +1,11 @@
|
|||||||
import packageJson from "reacord/package.json"
|
import packageJson from "reacord/package.json"
|
||||||
import { Link } from "react-router-dom"
|
|
||||||
import LandingExample from "../components/landing-example.md"
|
import LandingExample from "../components/landing-example.md"
|
||||||
import { MainNavigation } from "../components/main-navigation"
|
import { MainNavigation } from "../components/main-navigation"
|
||||||
import { maxWidthContainer } from "../styles/components"
|
import { maxWidthContainer } from "../styles/components"
|
||||||
|
|
||||||
export function LandingPage() {
|
export { LandingPage as Page }
|
||||||
|
|
||||||
|
function LandingPage() {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col min-w-0 min-h-screen text-center">
|
<div className="flex flex-col min-w-0 min-h-screen text-center">
|
||||||
<header className={maxWidthContainer}>
|
<header className={maxWidthContainer}>
|
||||||
@@ -17,12 +18,12 @@ export function LandingPage() {
|
|||||||
<LandingExample />
|
<LandingExample />
|
||||||
</section>
|
</section>
|
||||||
<p className="text-2xl font-light">{packageJson.description}</p>
|
<p className="text-2xl font-light">{packageJson.description}</p>
|
||||||
<Link
|
<a
|
||||||
to="/docs/getting-started"
|
href="/docs/getting-started"
|
||||||
className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow"
|
className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow"
|
||||||
>
|
>
|
||||||
Get Started
|
Get Started
|
||||||
</Link>
|
</a>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -3,10 +3,12 @@ import rehypePrism from "@mapbox/rehype-prism"
|
|||||||
import react from "@vitejs/plugin-react"
|
import react from "@vitejs/plugin-react"
|
||||||
import remarkFrontmatter from "remark-frontmatter"
|
import remarkFrontmatter from "remark-frontmatter"
|
||||||
import { defineConfig } from "vite"
|
import { defineConfig } from "vite"
|
||||||
|
import ssr from "vite-plugin-ssr/plugin"
|
||||||
import xdm from "xdm/rollup"
|
import xdm from "xdm/rollup"
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [
|
plugins: [
|
||||||
|
ssr(),
|
||||||
react(),
|
react(),
|
||||||
xdm({
|
xdm({
|
||||||
remarkPlugins: [remarkFrontmatter],
|
remarkPlugins: [remarkFrontmatter],
|
||||||
|
|||||||
43
pnpm-lock.yaml
generated
43
pnpm-lock.yaml
generated
@@ -141,6 +141,7 @@ importers:
|
|||||||
tailwindcss: ^3.0.8
|
tailwindcss: ^3.0.8
|
||||||
typescript: ^4.5.4
|
typescript: ^4.5.4
|
||||||
vite: ^2.7.10
|
vite: ^2.7.10
|
||||||
|
vite-plugin-ssr: ^0.3.42
|
||||||
xdm: ^3.3.1
|
xdm: ^3.3.1
|
||||||
dependencies:
|
dependencies:
|
||||||
'@heroicons/react': 1.0.5_react@18.0.0-rc.0
|
'@heroicons/react': 1.0.5_react@18.0.0-rc.0
|
||||||
@@ -155,6 +156,7 @@ importers:
|
|||||||
react-head: 3.4.0_757a802188413a36d4f24237d13b8e90
|
react-head: 3.4.0_757a802188413a36d4f24237d13b8e90
|
||||||
react-router: 6.2.1_react@18.0.0-rc.0
|
react-router: 6.2.1_react@18.0.0-rc.0
|
||||||
react-router-dom: 6.2.1_757a802188413a36d4f24237d13b8e90
|
react-router-dom: 6.2.1_757a802188413a36d4f24237d13b8e90
|
||||||
|
vite-plugin-ssr: 0.3.42_vite@2.7.10
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@mapbox/rehype-prism': 0.8.0
|
'@mapbox/rehype-prism': 0.8.0
|
||||||
'@tailwindcss/typography': 0.5.0_tailwindcss@3.0.8
|
'@tailwindcss/typography': 0.5.0_tailwindcss@3.0.8
|
||||||
@@ -672,6 +674,14 @@ packages:
|
|||||||
resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
|
resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/@brillout/json-s/0.3.1:
|
||||||
|
resolution: {integrity: sha512-k/0UCWdywjMCIqCZUMrqibNh63dDJx1KXOyfmlMJqpRjtFkQyTnxhA5ThQS8BiC1Ww52xLjWJabgCXBy5Ha5iw==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
|
/@brillout/libassert/0.5.2:
|
||||||
|
resolution: {integrity: sha512-TG2GK3hOsQ9IOpnpOxP4PyZAs4UvYE43aonAlOXY3esr9BzXUV9cetpaYeMTH1lsuBesZo57/YdTNm+KpPX/zw==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/@cnakazawa/watch/1.0.4:
|
/@cnakazawa/watch/1.0.4:
|
||||||
resolution: {integrity: sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==}
|
resolution: {integrity: sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==}
|
||||||
engines: {node: '>=0.1.95'}
|
engines: {node: '>=0.1.95'}
|
||||||
@@ -2471,7 +2481,6 @@ packages:
|
|||||||
/cac/6.7.12:
|
/cac/6.7.12:
|
||||||
resolution: {integrity: sha512-rM7E2ygtMkJqD9c7WnFU6fruFcN3xe4FM5yUmgxhZzIKJk4uHl9U/fhwdajGFQbQuv43FAUo1Fe8gX/oIKDeSA==}
|
resolution: {integrity: sha512-rM7E2ygtMkJqD9c7WnFU6fruFcN3xe4FM5yUmgxhZzIKJk4uHl9U/fhwdajGFQbQuv43FAUo1Fe8gX/oIKDeSA==}
|
||||||
engines: {node: '>=8'}
|
engines: {node: '>=8'}
|
||||||
dev: true
|
|
||||||
|
|
||||||
/cacache/15.3.0:
|
/cacache/15.3.0:
|
||||||
resolution: {integrity: sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==}
|
resolution: {integrity: sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==}
|
||||||
@@ -3465,6 +3474,10 @@ packages:
|
|||||||
string.prototype.trimstart: 1.0.4
|
string.prototype.trimstart: 1.0.4
|
||||||
unbox-primitive: 1.0.1
|
unbox-primitive: 1.0.1
|
||||||
|
|
||||||
|
/es-module-lexer/0.9.3:
|
||||||
|
resolution: {integrity: sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/es-to-primitive/1.2.1:
|
/es-to-primitive/1.2.1:
|
||||||
resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
|
resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
|
||||||
engines: {node: '>= 0.4'}
|
engines: {node: '>= 0.4'}
|
||||||
@@ -6384,6 +6397,10 @@ packages:
|
|||||||
resolution: {integrity: sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA==}
|
resolution: {integrity: sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA==}
|
||||||
engines: {node: '>=6'}
|
engines: {node: '>=6'}
|
||||||
|
|
||||||
|
/kolorist/1.5.1:
|
||||||
|
resolution: {integrity: sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/language-subtag-registry/0.3.21:
|
/language-subtag-registry/0.3.21:
|
||||||
resolution: {integrity: sha512-L0IqwlIXjilBVVYKFT37X9Ih11Um5NEl9cbJIuU/SwP/zEEAbBPOnEeeuxVMf45ydWQRDQN3Nqc96OgbH1K+Pg==}
|
resolution: {integrity: sha512-L0IqwlIXjilBVVYKFT37X9Ih11Um5NEl9cbJIuU/SwP/zEEAbBPOnEeeuxVMf45ydWQRDQN3Nqc96OgbH1K+Pg==}
|
||||||
dev: true
|
dev: true
|
||||||
@@ -7639,7 +7656,6 @@ packages:
|
|||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
dependencies:
|
dependencies:
|
||||||
yocto-queue: 0.1.0
|
yocto-queue: 0.1.0
|
||||||
dev: true
|
|
||||||
|
|
||||||
/p-locate/2.0.0:
|
/p-locate/2.0.0:
|
||||||
resolution: {integrity: sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=}
|
resolution: {integrity: sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=}
|
||||||
@@ -10203,6 +10219,28 @@ packages:
|
|||||||
unist-util-stringify-position: 3.0.0
|
unist-util-stringify-position: 3.0.0
|
||||||
vfile-message: 3.1.0
|
vfile-message: 3.1.0
|
||||||
|
|
||||||
|
/vite-plugin-import-build/0.1.2:
|
||||||
|
resolution: {integrity: sha512-Jh4wanyvJ5QLDrVtw6VsTqT+1yISp1Fa+5v7VSwf5xyRiYZ0VeffMrSQFrQlt50D7g3CpO/aX9/X/SVWCVCa0w==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
|
/vite-plugin-ssr/0.3.42_vite@2.7.10:
|
||||||
|
resolution: {integrity: sha512-oKRv95/kMUmpIxObc+p9Pp6QKt7XYMGbbEwYaOo9AwVq3mOMDHRICHMlfivTuNavjQVoyMWTOPmShUdhVHqsew==}
|
||||||
|
engines: {node: '>=12.19.0'}
|
||||||
|
hasBin: true
|
||||||
|
peerDependencies:
|
||||||
|
vite: ^2.5.0
|
||||||
|
dependencies:
|
||||||
|
'@brillout/json-s': 0.3.1
|
||||||
|
'@brillout/libassert': 0.5.2
|
||||||
|
cac: 6.7.12
|
||||||
|
es-module-lexer: 0.9.3
|
||||||
|
fast-glob: 3.2.7
|
||||||
|
kolorist: 1.5.1
|
||||||
|
p-limit: 3.1.0
|
||||||
|
vite: 2.7.10
|
||||||
|
vite-plugin-import-build: 0.1.2
|
||||||
|
dev: false
|
||||||
|
|
||||||
/vite/2.7.10:
|
/vite/2.7.10:
|
||||||
resolution: {integrity: sha512-KEY96ntXUid1/xJihJbgmLZx7QSC2D4Tui0FdS0Old5OokYzFclcofhtxtjDdGOk/fFpPbHv9yw88+rB93Tb8w==}
|
resolution: {integrity: sha512-KEY96ntXUid1/xJihJbgmLZx7QSC2D4Tui0FdS0Old5OokYzFclcofhtxtjDdGOk/fFpPbHv9yw88+rB93Tb8w==}
|
||||||
engines: {node: '>=12.2.0'}
|
engines: {node: '>=12.2.0'}
|
||||||
@@ -10603,7 +10641,6 @@ packages:
|
|||||||
/yocto-queue/0.1.0:
|
/yocto-queue/0.1.0:
|
||||||
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
|
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
|
||||||
engines: {node: '>=10'}
|
engines: {node: '>=10'}
|
||||||
dev: true
|
|
||||||
|
|
||||||
/zod/3.11.6:
|
/zod/3.11.6:
|
||||||
resolution: {integrity: sha512-daZ80A81I3/9lIydI44motWe6n59kRBfNzTuS2bfzVh1nAXi667TOTWWtatxyG+fwgNUiagSj/CWZwRRbevJIg==}
|
resolution: {integrity: sha512-daZ80A81I3/9lIydI44motWe6n59kRBfNzTuS2bfzVh1nAXi667TOTWWtatxyG+fwgNUiagSj/CWZwRRbevJIg==}
|
||||||
|
|||||||
Reference in New Issue
Block a user