docs: publish package usage examples for 0.2.24
This commit is contained in:
+27
-22
@@ -10,12 +10,12 @@ page wrnexusssr {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.23</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.24</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="page package-page">
|
||||
<aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Runtime</span><h2>@wrnexus/ssr</h2><p>Secure HTML document rendering and SEO metadata.</p><span class="status status-beta">Private preview · 0.2.23</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
|
||||
<article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Runtime · Preview</span><h1>@wrnexus/ssr</h1><p>Secure HTML document rendering and SEO metadata.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/ssr@0.2.23</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>Server-side rendering: wraps a page's HTML body in a complete HTML document with a metadata-driven <code><head></code>.</blockquote>
|
||||
<aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Runtime</span><h2>@wrnexus/ssr</h2><p>Secure HTML document rendering and SEO metadata.</p><span class="status status-beta">Private preview · 0.2.24</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
|
||||
<article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Runtime · Preview</span><h1>@wrnexus/ssr</h1><p>Secure HTML document rendering and SEO metadata.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/ssr@0.2.24</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>Server-side rendering: wraps a page's HTML body in a complete HTML document with a metadata-driven <code><head></code>.</blockquote>
|
||||
<p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
|
||||
<h3 id="overview">Overview</h3>
|
||||
<p>Pages in WRNexusJS return an HTML string for the body. <code>@wrnexus/ssr</code> takes that body and produces a full HTML document — building the <code><head></code> from page metadata and global SEO defaults, resolving canonical/Open Graph/Twitter tags, and injecting module preloads and <code><script type="module"></code> tags. It is deliberately server-only: nothing in this package touches the DOM or ships to the browser, keeping server code genuinely server-only. Reach for it on the server when turning a rendered page body into a response document.</p>
|
||||
@@ -56,6 +56,7 @@ page wrnexusssr {
|
||||
<li><strong>Emitted tags</strong>: <code><title></code>, and as applicable <code>description</code>, <code>robots</code>, <code>keywords</code>, <code>theme-color</code>, and <code>canonical</code> link, plus Open Graph (<code>og:title</code>, <code>og:description</code>, <code>og:type</code>, <code>og:url</code>, <code>og:site_name</code>, <code>og:locale</code>, <code>og:image</code>) and Twitter (<code>twitter:card</code>, <code>twitter:title</code>, <code>twitter:description</code>, <code>twitter:image</code>, <code>twitter:site</code>) meta tags. The document always includes <code>charset</code>, <code>viewport</code>, and a <code>/favicon.ico</code> icon link.</li>
|
||||
</ul>
|
||||
<h3 id="usage">Usage</h3>
|
||||
<h4 id="render-an-seo-ready-application-page">Render an SEO-ready application page</h4>
|
||||
<pre data-language="ts"><code>import { renderDocument } from "@wrnexus/ssr";
|
||||
|
||||
const html = renderDocument({
|
||||
@@ -79,6 +80,17 @@ return new Response(html, {
|
||||
headers: { "content-type": "text/html; charset=utf-8" },
|
||||
});</code></pre>
|
||||
<p>The produced document has <code><title>About Us — Acme</title></code>, the SEO/Open Graph/Twitter tags derived from the merged metadata, a <code>modulepreload</code> link and module <code><script></code> for each entry in <code>scripts</code>, and the body wrapped in <code><div id="app"></code>.</p>
|
||||
<h4 id="add-trusted-framework-assets-and-boot-data">Add trusted framework assets and boot data</h4>
|
||||
<p>Use <code>extraHead</code> and <code>extraBody</code> only for HTML generated by your application or the framework. User-provided values belong in <code>meta</code>, where they are escaped.</p>
|
||||
<pre data-language="ts"><code>const html = renderDocument({
|
||||
meta: { title: "Dashboard", robots: "noindex" },
|
||||
body: dashboardHtml,
|
||||
url: ctx.url,
|
||||
extraHead: '<link rel="stylesheet" href="/_wrnexus/admin.css">',
|
||||
extraBody: `<script type="application/json" id="boot">${JSON.stringify(bootData).replaceAll("<", "\\u003c")}</script>`,
|
||||
});
|
||||
|
||||
return new Response(html, { headers: { "content-type": "text/html; charset=utf-8" } });</code></pre>
|
||||
<h3 id="requirements-notes">Requirements / Notes</h3>
|
||||
<ul>
|
||||
<li><strong>Server-only.</strong> This module never imports or touches the DOM and is safe to keep out of client bundles.</li>
|
||||
@@ -127,22 +139,7 @@ interface RenderOptions {
|
||||
declare function renderDocument(opts: RenderOptions): string;
|
||||
|
||||
export { type RenderOptions, renderDocument };
|
||||
</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Example 1</h3><pre data-language="bash"><code>bun add @wrnexus/ssr</code></pre></article><article class="example-card"><h3>Example 2</h3><pre data-language="ts"><code>type SeoConfig = {
|
||||
title?: string;
|
||||
titleTemplate?: string; // e.g. "%s — My Site"; %s is replaced with the page title
|
||||
description?: string;
|
||||
canonical?: string;
|
||||
canonicalBase?: string; // origin used to absolutize canonical/image URLs
|
||||
robots?: string;
|
||||
keywords?: string | string[];
|
||||
image?: string;
|
||||
siteName?: string;
|
||||
type?: string; // Open Graph type; defaults to "website"
|
||||
locale?: string;
|
||||
twitterCard?: string; // defaults to "summary"
|
||||
twitterSite?: string;
|
||||
themeColor?: string;
|
||||
};</code></pre></article><article class="example-card"><h3>Example 3</h3><pre data-language="ts"><code>import { renderDocument } from "@wrnexus/ssr";
|
||||
</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Render an SEO-ready application page</h3><pre data-language="ts"><code>import { renderDocument } from "@wrnexus/ssr";
|
||||
|
||||
const html = renderDocument({
|
||||
meta: {
|
||||
@@ -163,10 +160,18 @@ const html = renderDocument({
|
||||
|
||||
return new Response(html, {
|
||||
headers: { "content-type": "text/html; charset=utf-8" },
|
||||
});</code></pre></article></div></section></article>
|
||||
<aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#renderdocument-opts-renderoptions-string">renderDocument(opts: RenderOptions): string</a><a class="toc-level-4" href="#renderoptions">RenderOptions</a><a class="toc-level-4" href="#metadata-resolution">Metadata resolution</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
|
||||
});</code></pre></article><article class="example-card"><h3>Add trusted framework assets and boot data</h3><pre data-language="ts"><code>const html = renderDocument({
|
||||
meta: { title: "Dashboard", robots: "noindex" },
|
||||
body: dashboardHtml,
|
||||
url: ctx.url,
|
||||
extraHead: '<link rel="stylesheet" href="/_wrnexus/admin.css">',
|
||||
extraBody: `<script type="application/json" id="boot">${JSON.stringify(bootData).replaceAll("<", "\\u003c")}</script>`,
|
||||
});
|
||||
|
||||
return new Response(html, { headers: { "content-type": "text/html; charset=utf-8" } });</code></pre></article></div></section></article>
|
||||
<aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#renderdocument-opts-renderoptions-string">renderDocument(opts: RenderOptions): string</a><a class="toc-level-4" href="#renderoptions">RenderOptions</a><a class="toc-level-4" href="#metadata-resolution">Metadata resolution</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-4" href="#render-an-seo-ready-application-page">Render an SEO-ready application page</a><a class="toc-level-4" href="#add-trusted-framework-assets-and-boot-data">Add trusted framework assets and boot data</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
|
||||
</main>
|
||||
<footer>WRNexusJS 0.2.23 · Private Developer Preview · Bun-native · Documentation generated from installed package APIs.</footer>
|
||||
<footer>WRNexusJS 0.2.24 · Private Developer Preview · Bun-native · Documentation generated from installed package APIs.</footer>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user