pulumi-package-docs 0.8.0 → 0.9.1

package/examples/github-pages.yml

@@ -0,0 +1,56 @@
+# Publishes the local provider docs for this Pulumi project to GitHub Pages.
+# Copy to .github/workflows/docs.yml in your Pulumi project's repo, then enable
+# Pages for the repo with "Source: GitHub Actions" (Settings -> Pages).
+name: Docs
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# One deployment at a time; don't cancel one that's already publishing.
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+
+      - uses: actions/setup-node@v7
+        with:
+          node-version: 24
+
+      # Puts the `pulumi` CLI on PATH; the docs are generated from the schemas
+      # it fetches for each package in Pulumi.yaml.
+      - uses: pulumi/actions@v7
+
+      # A project site is served from https://<owner>.github.io/<repo>/, so the
+      # site is built for that path. For a user/org site (<owner>.github.io),
+      # drop --base.
+      - name: Generate docs
+        run: npx -y pulumi-package-docs static --out ./site --base "/${GITHUB_REPOSITORY#*/}/"
+
+      - uses: actions/upload-pages-artifact@v5
+        with:
+          path: ./site
+          # The generated site includes a `.nojekyll` file, and this action
+          # drops dotfiles unless asked not to.
+          include-hidden-files: true
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@v5

package/examples/gitlab-ci.yml

@@ -0,0 +1,22 @@
+# Publishes the local provider docs for this Pulumi project to GitLab Pages.
+# Copy this job into your Pulumi project's .gitlab-ci.yml.
+pages:
+  image: node:24
+  stage: deploy
+  before_script:
+    # Puts the `pulumi` CLI on PATH; the docs are generated from the schemas
+    # it fetches for each package in Pulumi.yaml.
+    - curl -fsSL https://get.pulumi.com | sh
+    - export PATH="$PATH:$HOME/.pulumi/bin"
+  script:
+    # CI_PAGES_URL is where this site will be served from — its path is what
+    # the docs have to be built for ("/" with unique domains enabled, "/<project>/"
+    # otherwise).
+    - export DOCS_BASE="$(node -e 'console.log(new URL(process.env.CI_PAGES_URL).pathname)')"
+    - npx -y pulumi-package-docs static --out public --base "$DOCS_BASE"
+  artifacts:
+    paths:
+      # GitLab Pages publishes this directory, and only under this name.
+      - public
+  rules:
+    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulumi-package-docs",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "description": "Local documentation viewer for the parameterized/local Pulumi providers used by a Pulumi project.",
   "type": "module",
   "license": "MIT",
@@ -18,6 +18,7 @@
   "files": [
     "bin",
     "dist",
+    "examples",
     "src",
     "tsconfig.json",
     "vite.config.ts"
@@ -28,11 +29,14 @@
   "scripts": {
     "dev": "vite dev --port 3000",
     "generate-routes": "tsr generate",
-    "build": "vite build",
+    "build": "vite build && npm run build:mcp",
+    "build:mcp": "vite build --config vite.mcp.config.ts",
     "preview": "vite preview",
     "start": "node bin/cli.js",
+    "static": "node bin/cli.js static",
     "compile:bun": "node bin/generate-embedded-assets.js && bun build ./bin/cli-bun.js --compile --outfile pulumi-package-docs",
     "test": "vitest run",
+    "test:stdio": "node scripts/smoke-test-stdio.js node bin/cli.js --stdio && node scripts/smoke-test-stdio.js ./pulumi-package-docs --stdio",
     "test:watch": "vitest",
     "lint": "oxlint",
     "format": "oxfmt . && oxlint --fix",
@@ -54,7 +58,7 @@
     "@types/node": "^26.6.1",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
-    "oxfmt": "^0.68.0",
+    "oxfmt": "^0.70.0",
     "oxlint": "^1.83.0",
     "typescript": "^7.0.2",
     "vitest": "^5.0.1"

package/src/components/ThemeToggle.tsx

@@ -119,3 +119,40 @@ function MonitorIcon() {
     </IconSvg>
   )
 }
+
+// Wires the static build's theme switch up without hydration: one delegated
+// click listener, using the same `data-theme` + localStorage contract as
+// ThemeToggle above (and as the pre-hydration script in `__root.tsx`).
+const staticThemeScript = `(function(){var g=document.currentScript.previousElementSibling;if(!g)return;
+function apply(m){try{if(m==='system'){delete document.documentElement.dataset.theme;localStorage.removeItem('theme')}else{document.documentElement.dataset.theme=m;localStorage.setItem('theme',m)}}catch(e){if(m==='system'){delete document.documentElement.dataset.theme}else{document.documentElement.dataset.theme=m}}sync(m)}
+function sync(m){var b=g.querySelectorAll('button[data-theme-mode]');for(var i=0;i<b.length;i++){b[i].setAttribute('aria-pressed',String(b[i].getAttribute('data-theme-mode')===m))}}
+g.addEventListener('click',function(e){var b=e.target.closest('button[data-theme-mode]');if(b){apply(b.getAttribute('data-theme-mode'))}});
+var s=null;try{s=localStorage.getItem('theme')}catch(e){}
+sync(s==='light'||s==='dark'?s:'system')})()`
+
+/**
+ * The theme switch for the static build. Same markup as `ThemeToggle`, but
+ * driven by an inline script rather than React, since static pages ship
+ * without the hydration bundle.
+ */
+export function StaticThemeToggle() {
+  return (
+    <>
+      <div className="theme-switch" role="group" aria-label="Theme">
+        {OPTIONS.map(({ mode, label, Icon }) => (
+          <button
+            key={mode}
+            type="button"
+            className="theme-switch-option"
+            data-theme-mode={mode}
+            aria-pressed={mode === 'system'}
+            aria-label={label}
+          >
+            <Icon />
+          </button>
+        ))}
+      </div>
+      <script dangerouslySetInnerHTML={{ __html: staticThemeScript }} />
+    </>
+  )
+}

package/src/lib/pulumi/api.ts

@@ -1,77 +1,26 @@
 import { createServerFn } from '@tanstack/react-start'
 
-import { getTargetDir, loadPulumiProject } from '@/lib/pulumi/discovery.server'
-import { resolveProviderSchema } from '@/lib/pulumi/schema.server'
-import type { ProviderEntry, PulumiProject } from '@/lib/pulumi/types'
-
-export interface ProviderSummary {
-  name: string
-  source: string
-  version?: string
-  parameters?: string[]
-  resourceCount: number
-  functionCount: number
-  origin: ProviderEntry['origin']
-  error?: string
-}
-
-export interface ProjectSummary {
-  targetDir: string
-  project: Pick<PulumiProject, 'root' | 'name' | 'runtime'> | null
-  providers: ProviderSummary[]
-}
+import {
+  loadProjectSummary,
+  loadProviderDetail,
+} from '@/lib/pulumi/providers.server'
+import type {
+  ProjectSummary,
+  ProviderDetail,
+} from '@/lib/pulumi/providers.server'
+
+export type {
+  ProjectSummary,
+  ProviderDetail,
+  ProviderSummary,
+} from '@/lib/pulumi/providers.server'
 
 export const listProviders = createServerFn({ method: 'GET' }).handler(
-  async (): Promise<ProjectSummary> => {
-    const targetDir = getTargetDir()
-    const project = loadPulumiProject(targetDir)
-
-    if (!project) {
-      return { targetDir, project: null, providers: [] }
-    }
-
-    const entries = await Promise.all(
-      project.packages.map((ref) => resolveProviderSchema(project.root, ref)),
-    )
-
-    const providers: ProviderSummary[] = entries.map((entry) => ({
-      name: entry.ref.name,
-      source: entry.ref.source,
-      version: entry.ref.version,
-      parameters: entry.ref.parameters,
-      resourceCount: Object.keys(entry.schema?.resources ?? {}).length,
-      functionCount: Object.keys(entry.schema?.functions ?? {}).length,
-      origin: entry.origin,
-      error: entry.error,
-    }))
-
-    return {
-      targetDir,
-      project: {
-        root: project.root,
-        name: project.name,
-        runtime: project.runtime,
-      },
-      providers,
-    }
-  },
+  (): Promise<ProjectSummary> => loadProjectSummary(),
 )
 
-export interface ProviderDetail extends ProviderEntry {
-  /** The Pulumi project's runtime (e.g. "nodejs", "python", "go"), used to render Inputs/Outputs names in that language's casing. */
-  runtime?: string
-}
-
 export const getProvider = createServerFn({ method: 'GET' })
   .validator((name: string) => name)
-  .handler(async ({ data: name }): Promise<ProviderDetail | null> => {
-    const targetDir = getTargetDir()
-    const project = loadPulumiProject(targetDir)
-    if (!project) return null
-
-    const ref = project.packages.find((p) => p.name === name)
-    if (!ref) return null
-
-    const entry = await resolveProviderSchema(project.root, ref)
-    return { ...entry, runtime: project.runtime }
-  })
+  .handler(({ data: name }): Promise<ProviderDetail | null> =>
+    loadProviderDetail(name),
+  )

package/src/lib/pulumi/mcp.server.test.ts

@@ -0,0 +1,112 @@
+import { mkdtempSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+
+import { Client } from '@modelcontextprotocol/sdk/client/index.js'
+import { InMemoryTransport } from '@modelcontextprotocol/sdk/inMemory.js'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+
+import { createMcpServer } from '@/lib/pulumi/mcp.server'
+
+let projectDir: string
+const originalEnv = process.env.PULUMI_LOCAL_DOCS_DIR
+
+beforeEach(() => {
+  projectDir = mkdtempSync(join(tmpdir(), 'pulumi-package-docs-mcp-test-'))
+  writeFileSync(
+    join(projectDir, 'Pulumi.yaml'),
+    `name: my-project\nruntime: nodejs\n`,
+  )
+  process.env.PULUMI_LOCAL_DOCS_DIR = projectDir
+})
+
+afterEach(() => {
+  rmSync(projectDir, { recursive: true, force: true })
+  if (originalEnv === undefined) delete process.env.PULUMI_LOCAL_DOCS_DIR
+  else process.env.PULUMI_LOCAL_DOCS_DIR = originalEnv
+})
+
+/**
+ * Drives the MCP server the same way the stdio entry point does — a plain in-process
+ * server with a transport attached, no HTTP server and no TanStack Start runtime.
+ */
+async function connectClient(): Promise<Client> {
+  const [clientTransport, serverTransport] =
+    InMemoryTransport.createLinkedPair()
+  const client = new Client({ name: 'test-client', version: '0.0.0' })
+  await Promise.all([
+    createMcpServer().connect(serverTransport),
+    client.connect(clientTransport),
+  ])
+  return client
+}
+
+function parseTextResult(result: unknown): unknown {
+  const { content } = result as {
+    content?: Array<{ type: string; text: string }>
+  }
+  expect(content?.[0]?.type).toBe('text')
+  return JSON.parse(content![0]!.text)
+}
+
+describe('createMcpServer', () => {
+  it('advertises the provider docs tools', async () => {
+    const client = await connectClient()
+
+    const { tools } = await client.listTools()
+
+    expect(tools.map((tool) => tool.name).sort()).toEqual([
+      'get_function',
+      'get_resource',
+      'list_functions',
+      'list_providers',
+      'list_resources',
+      'search_members',
+    ])
+    await client.close()
+  })
+
+  it('reports the discovered project from list_providers', async () => {
+    const client = await connectClient()
+
+    const result = await client.callTool({ name: 'list_providers' })
+
+    expect(parseTextResult(result)).toMatchObject({
+      targetDir: projectDir,
+      project: { root: projectDir, name: 'my-project', runtime: 'nodejs' },
+      providers: [],
+    })
+    await client.close()
+  })
+
+  it('returns no matches from search_members when the project has no packages', async () => {
+    const client = await connectClient()
+
+    const result = await client.callTool({
+      name: 'search_members',
+      arguments: { query: 'bucket' },
+    })
+
+    expect(parseTextResult(result)).toEqual({
+      query: 'bucket',
+      matchCount: 0,
+      matches: [],
+    })
+    await client.close()
+  })
+
+  it('surfaces a tool error for a provider that is not declared in Pulumi.yaml', async () => {
+    const client = await connectClient()
+
+    const result = await client.callTool({
+      name: 'list_resources',
+      arguments: { provider: 'nope' },
+    })
+
+    expect(result.isError).toBe(true)
+    expect(JSON.stringify(result.content)).toContain(
+      'No local provider named \\"nope\\"',
+    )
+    await client.close()
+  })
+})

package/src/lib/pulumi/mcp.server.ts

@@ -2,8 +2,6 @@ import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
 import type { CallToolResult } from '@modelcontextprotocol/sdk/types.js'
 import { z } from 'zod'
 
-import { getProvider, listProviders } from '@/lib/pulumi/api'
-import type { ProviderDetail } from '@/lib/pulumi/api'
 import { resolveDescription } from '@/lib/pulumi/description'
 import { getTargetDir, loadPulumiProject } from '@/lib/pulumi/discovery.server'
 import {
@@ -14,6 +12,11 @@ import {
 } from '@/lib/pulumi/examples'
 import { formatType } from '@/lib/pulumi/format'
 import { formatPropertyName } from '@/lib/pulumi/naming'
+import {
+  loadProjectSummary,
+  loadProviderDetail,
+} from '@/lib/pulumi/providers.server'
+import type { ProviderDetail } from '@/lib/pulumi/providers.server'
 import { resolveProviderSchema } from '@/lib/pulumi/schema.server'
 import { tokenDisplayName } from '@/lib/pulumi/token'
 import type {
@@ -30,7 +33,7 @@ function textResult(data: unknown): CallToolResult {
 async function requireProvider(
   providerName: string,
 ): Promise<ProviderDetail & { schema: NonNullable<ProviderDetail['schema']> }> {
-  const detail = await getProvider({ data: providerName })
+  const detail = await loadProviderDetail(providerName)
   if (!detail) {
     throw new Error(
       `No local provider named "${providerName}" was found. Call list_providers to see the providers declared in this project's Pulumi.yaml.`,
@@ -100,8 +103,10 @@ function memberDetail(
 }
 
 /**
- * Builds a fresh MCP server with the local-provider-docs tools registered. Called once
- * per HTTP request (see `src/routes/mcp.ts`) so concurrent requests never share state.
+ * Builds a fresh MCP server with the local-provider-docs tools registered. Transport
+ * agnostic: `src/routes/mcp.ts` calls it once per HTTP request (so concurrent requests
+ * never share state), and `src/lib/pulumi/stdio.server.ts` calls it once for the
+ * lifetime of a stdio process.
  */
 export function createMcpServer(): McpServer {
   const server = new McpServer({
@@ -116,7 +121,7 @@ export function createMcpServer(): McpServer {
       description:
         "List the local/parameterized Pulumi providers declared in this project's Pulumi.yaml (added with `pulumi package add`), with their source, version, and resource/function counts.",
     },
-    async () => textResult(await listProviders()),
+    async () => textResult(await loadProjectSummary()),
   )
 
   server.registerTool(

package/src/lib/pulumi/providers.server.ts

@@ -0,0 +1,80 @@
+import { getTargetDir, loadPulumiProject } from '@/lib/pulumi/discovery.server'
+import { resolveProviderSchema } from '@/lib/pulumi/schema.server'
+import type { ProviderEntry, PulumiProject } from '@/lib/pulumi/types'
+
+export interface ProviderSummary {
+  name: string
+  source: string
+  version?: string
+  parameters?: string[]
+  resourceCount: number
+  functionCount: number
+  origin: ProviderEntry['origin']
+  error?: string
+}
+
+export interface ProjectSummary {
+  targetDir: string
+  project: Pick<PulumiProject, 'root' | 'name' | 'runtime'> | null
+  providers: ProviderSummary[]
+}
+
+export interface ProviderDetail extends ProviderEntry {
+  /** The Pulumi project's runtime (e.g. "nodejs", "python", "go"), used to render Inputs/Outputs names in that language's casing. */
+  runtime?: string
+}
+
+/**
+ * The project + provider summaries shown on the index route and by the MCP
+ * `list_providers` tool. Plain async functions (no TanStack Start server-fn
+ * wrapper) so they can run either inside the web server or in the stdio MCP
+ * process, which has no HTTP server at all.
+ */
+export async function loadProjectSummary(): Promise<ProjectSummary> {
+  const targetDir = getTargetDir()
+  const project = loadPulumiProject(targetDir)
+
+  if (!project) {
+    return { targetDir, project: null, providers: [] }
+  }
+
+  const entries = await Promise.all(
+    project.packages.map((ref) => resolveProviderSchema(project.root, ref)),
+  )
+
+  const providers: ProviderSummary[] = entries.map((entry) => ({
+    name: entry.ref.name,
+    source: entry.ref.source,
+    version: entry.ref.version,
+    parameters: entry.ref.parameters,
+    resourceCount: Object.keys(entry.schema?.resources ?? {}).length,
+    functionCount: Object.keys(entry.schema?.functions ?? {}).length,
+    origin: entry.origin,
+    error: entry.error,
+  }))
+
+  return {
+    targetDir,
+    project: {
+      root: project.root,
+      name: project.name,
+      runtime: project.runtime,
+    },
+    providers,
+  }
+}
+
+/** The fully resolved schema for one local provider, or null if the project or provider isn't found. */
+export async function loadProviderDetail(
+  name: string,
+): Promise<ProviderDetail | null> {
+  const targetDir = getTargetDir()
+  const project = loadPulumiProject(targetDir)
+  if (!project) return null
+
+  const ref = project.packages.find((p) => p.name === name)
+  if (!ref) return null
+
+  const entry = await resolveProviderSchema(project.root, ref)
+  return { ...entry, runtime: project.runtime }
+}

package/src/lib/pulumi/stdio.server.ts

@@ -0,0 +1,16 @@
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
+
+import { createMcpServer } from '@/lib/pulumi/mcp.server'
+
+/**
+ * Serves the same provider-docs tools as the `/mcp` HTTP route over stdio, for MCP
+ * clients that spawn a server process instead of connecting to a URL.
+ *
+ * Unlike the HTTP route this is a single long-lived server (one process, one client),
+ * and stdout is the protocol channel — nothing on this path may write to it, so any
+ * diagnostics belong on stderr.
+ */
+export async function runStdioMcpServer(): Promise<void> {
+  const server = createMcpServer()
+  await server.connect(new StdioServerTransport())
+}

package/src/lib/pulumi/token.test.ts

@@ -1,6 +1,10 @@
 import { describe, expect, it } from 'vitest'
 
-import { tokenDisplayName } from '@/lib/pulumi/token'
+import {
+  findTokenBySlug,
+  tokenDisplayName,
+  tokenSlug,
+} from '@/lib/pulumi/token'
 
 describe('tokenDisplayName', () => {
   it('returns the segment after the last colon for a resource token', () => {
@@ -19,3 +23,42 @@ describe('tokenDisplayName', () => {
     expect(tokenDisplayName('plainName')).toBe('plainName')
   })
 })
+
+describe('tokenSlug', () => {
+  it('replaces the token separators with dashes', () => {
+    expect(tokenSlug('random:index/randomString:RandomString')).toBe(
+      'random-index-randomString-RandomString',
+    )
+  })
+
+  it('leaves an already-safe token unchanged', () => {
+    expect(tokenSlug('plainName')).toBe('plainName')
+  })
+
+  it('collapses a run of unsafe characters into a single dash', () => {
+    expect(tokenSlug('aws:s3//bucket:Bucket')).toBe('aws-s3-bucket-Bucket')
+  })
+})
+
+describe('findTokenBySlug', () => {
+  const tokens = [
+    'random:index/randomString:RandomString',
+    'random:index/randomPet:RandomPet',
+  ]
+
+  it('finds the token a slug was made from', () => {
+    expect(findTokenBySlug(tokens, 'random-index-randomPet-RandomPet')).toBe(
+      'random:index/randomPet:RandomPet',
+    )
+  })
+
+  it('also accepts the raw token', () => {
+    expect(
+      findTokenBySlug(tokens, 'random:index/randomString:RandomString'),
+    ).toBe('random:index/randomString:RandomString')
+  })
+
+  it('returns undefined when nothing matches', () => {
+    expect(findTokenBySlug(tokens, 'nope')).toBeUndefined()
+  })
+})

package/src/lib/pulumi/token.ts

@@ -8,3 +8,31 @@ export function tokenDisplayName(token: string): string {
   const short = token.split(':').pop()
   return short && short.length > 0 ? short : token
 }
+
+/**
+ * A URL- and filesystem-safe form of a token, used as the `$token` route param.
+ *
+ * Tokens contain `:` and `/`, which only survive a URL as percent-escapes —
+ * and static hosts (GitHub/GitLab Pages) decode those before matching a file,
+ * so `random%3Aindex%2FrandomString%3ARandomString` would never resolve to the
+ * page generated for it. Replacing the separators keeps one URL shape that
+ * works both when served dynamically and as prerendered files on disk.
+ */
+export function tokenSlug(token: string): string {
+  return token.replace(/[^a-zA-Z0-9._~-]+/g, '-')
+}
+
+/**
+ * Resolves a `$token` route param back to the schema token it names. Accepts
+ * either a slug (what links produce) or the raw token, so a URL pasted from
+ * schema output still works.
+ */
+export function findTokenBySlug(
+  tokens: Iterable<string>,
+  slug: string,
+): string | undefined {
+  for (const token of tokens) {
+    if (token === slug || tokenSlug(token) === slug) return token
+  }
+  return undefined
+}

package/src/lib/static-docs.ts

@@ -0,0 +1,15 @@
+/**
+ * True when the app is being built as a static site (`pulumi-package-docs
+ * static`), for publishing to GitHub/GitLab Pages.
+ *
+ * A static build has no server behind it, so its pages can't call the server
+ * functions in `@/lib/pulumi/api` on the client. Every page is prerendered
+ * with its data already baked in and shipped without the hydration script:
+ * links then behave as ordinary anchors and each page load is self-contained,
+ * which also keeps a large provider's schema out of the pages that don't need
+ * it.
+ *
+ * Vite inlines `import.meta.env.VITE_*` at build time, so this folds away to a
+ * constant in both builds.
+ */
+export const isStaticDocs = import.meta.env.VITE_STATIC_DOCS === 'true'

package/src/router.tsx

@@ -4,6 +4,9 @@ import { routeTree } from './routeTree.gen'
 export function getRouter() {
   const router = createTanStackRouter({
     routeTree,
+    // Set from Vite's `base`, so a static build published under a project
+    // path (e.g. https://<user>.github.io/<repo>/) still links correctly.
+    basepath: import.meta.env.BASE_URL,
     scrollRestoration: true,
     defaultPreload: 'intent',
     defaultPreloadStaleTime: 0,

package/src/routes/__root.tsx

@@ -6,7 +6,8 @@ import {
 } from '@tanstack/react-router'
 
 import { PulumiLogo } from '@/components/PulumiLogo'
-import { ThemeToggle } from '@/components/ThemeToggle'
+import { StaticThemeToggle, ThemeToggle } from '@/components/ThemeToggle'
+import { isStaticDocs } from '@/lib/static-docs'
 import appCss from '../styles.css?url'
 
 // Runs before hydration so an explicit theme choice applies before first
@@ -57,12 +58,14 @@ function RootDocument({ children }: { children: React.ReactNode }) {
               <span className="site-brand-divider" aria-hidden="true" />
               <span className="site-brand-name">Package Docs</span>
             </Link>
-            <ThemeToggle />
+            {isStaticDocs ? <StaticThemeToggle /> : <ThemeToggle />}
           </div>
         </header>
         {children}
 
-        <Scripts />
+        {/* A static build has no server to call back into, so it ships
+            without the hydration script and navigates as plain links. */}
+        {isStaticDocs ? null : <Scripts />}
       </body>
     </html>
   )