kris/reacord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use vite-plugin-ssr

Browse Source
This commit is contained in:
MapleLeaf
2022-01-02 17:10:29 -06:00
committed by Darius
parent 336e680b6e
commit bfe12c9bcd
18 changed files with 203 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/docs-new/src/entry.client.tsx → packages/docs-new/src/_default.page.client.tsx
View File

@@ -1,14 +1,18 @@
import React from "react"
import { createRoot } from "react-dom"
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"
const context = await getPage<PageContextBuiltInClient>()
createRoot(document.querySelector("#app")!).render(
<BrowserRouter>
<HeadProvider>
<App />
</HeadProvider>
</BrowserRouter>,
<HeadProvider>
<App>
<context.Page />
</App>
</HeadProvider>,
)
declare module "react-dom" {

46
packages/docs-new/src/_default.page.server.tsx Normal file
View 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 }
}

35
packages/docs-new/src/app.tsx
View File

@@ -1,41 +1,14 @@
import { description } from "reacord/package.json"
import { lazy, Suspense } from "react"
import { Meta, Title } from "react-head"
import { Route, Routes } from "react-router-dom"
import { GuidePageLayout } from "./components/guide-page-layout"
import { LandingPage } from "./pages/landing-page"
import "tailwindcss/tailwind.css"
import "./styles/prism-theme.css"
export function App() {
export function App({ children }: { children: React.ReactNode }) {
return (
<>
<Title>Reacord</Title>
<Meta name="description" content={description} />
<Routes>
<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>
{children}
</>
)
}
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 }
}),
}),
)

10
packages/docs-new/src/components/app-link.tsx
View File

@@ -1,8 +1,7 @@
import { Link } from "react-router-dom"
import { ExternalLink } from "./external-link"
export type AppLinkProps = {
type: "router" | "internal" | "external"
type: "internal" | "external"
label: React.ReactNode
to: string
className?: string
@@ -10,13 +9,6 @@ export type AppLinkProps = {
export function AppLink(props: AppLinkProps) {
switch (props.type) {
case "router":
return (
<Link className={props.className} to={props.to}>
{props.label}
</Link>
)
case "internal":
return (
<a className={props.className} href={props.to}>

3
packages/docs-new/src/components/guide-page-layout.tsx
View File

@@ -1,5 +1,4 @@
import clsx from "clsx"
import { Outlet } from "react-router"
import { guideLinks } from "../data/guide-links"
import { useScrolled } from "../hooks/dom/use-scrolled"
import {
@@ -30,7 +29,7 @@ export function GuidePageLayout() {
</ul>
</nav>
<section className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}>
<Outlet />
{/* todo */}
</section>
</main>
</>

5
packages/docs-new/src/components/main-navigation.tsx
View File

@@ -1,4 +1,3 @@
import { Link } from "react-router-dom"
import { AppLink } from "../components/app-link"
import { guideLinks } from "../data/guide-links"
import { mainLinks } from "../data/main-links"
@@ -8,9 +7,9 @@ import { PopoverMenu } from "./popover-menu"
export function MainNavigation() {
return (
<nav className="flex justify-between items-center h-16">
<Link to="/">
<a href="/">
<h1 className="text-3xl font-light">reacord</h1>
</Link>
</a>
<div className="hidden md:flex gap-4">
{mainLinks.map((link) => (
<AppLink {...link} key={link.to} className={linkClass} />

2
packages/docs-new/src/data/main-links.tsx
View File

@@ -8,7 +8,7 @@ import { inlineIconClass } from "../styles/components"
export const mainLinks: AppLinkProps[] = [
{
type: "router",
type: "internal",
to: "/docs/getting-started",
label: (
<>

34
packages/docs-new/src/entry.server.tsx
View File

@@ -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)
}

36
packages/docs-new/src/html.ts
View File

@@ -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
View File

@@ -0,0 +1 @@
export default "/docs/*"

50
packages/docs-new/src/pages/docs.page.tsx Normal file
View 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>
}

11
packages/docs-new/src/pages/landing-page.tsx → packages/docs-new/src/pages/index.page.tsx
View File

@@ -1,10 +1,11 @@
import packageJson from "reacord/package.json"
import { Link } from "react-router-dom"
import LandingExample from "../components/landing-example.md"
import { MainNavigation } from "../components/main-navigation"
import { maxWidthContainer } from "../styles/components"
export function LandingPage() {
export { LandingPage as Page }
function LandingPage() {
return (
<div className="flex flex-col min-w-0 min-h-screen text-center">
<header className={maxWidthContainer}>
@@ -17,12 +18,12 @@ export function LandingPage() {
<LandingExample />
</section>
<p className="text-2xl font-light">{packageJson.description}</p>
<Link
to="/docs/getting-started"
<a
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"
>
Get Started
</Link>
</a>
</main>
</div>
</div>