Add static search to isolated documentation builds

.gitignore

@@ -42,8 +42,8 @@ bld/
 
 # Visual Studio 2015/2017 cache/options directory
 .vs/
-# Uncomment if you have tasks that create the project's static files in wwwroot
-#wwwroot/
+# Pagefind.Net.Frontend auto-extraction output (disabled via PagefindFrontendDisableExtract)
+wwwroot/
 
 # Visual Studio 2017 auto generated files
 Generated\ Files/

Directory.Build.props

@@ -23,6 +23,7 @@
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>
     <EnforceCodeStyleInBuild>true</EnforceCodeStyleInBuild>
+    <PagefindFrontendDisableExtract>true</PagefindFrontendDisableExtract>
   </PropertyGroup>
 
   <ItemGroup>

Directory.Packages.props

@@ -45,6 +45,8 @@
     <PackageVersion Include="Microsoft.Extensions.Configuration.Abstractions" Version="10.0.8" />
     <PackageVersion Include="Microsoft.Extensions.Telemetry.Abstractions" Version="10.6.0" />
     <PackageVersion Include="Nullean.ScopedFileSystem" Version="0.4.0" />
+    <PackageVersion Include="Pagefind.Net" Version="0.3.0" />
+    <PackageVersion Include="Pagefind.Net.Frontend" Version="0.3.0" />
     <PackageVersion Include="OpenTelemetry.Instrumentation.AspNetCore" Version="1.15.2" />
     <PackageVersion Include="Generator.Equals" Version="4.0.0" PrivateAssets="all" IncludeAssets="runtime; build; native; contentfiles; analyzers; buildtransitive" />
     <PackageVersion Include="KubernetesClient" Version="19.0.2" />

NOTICE.txt

@@ -26,6 +26,29 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
 
+License notice for Pagefind (v1.5.2)
+-----------------------------------
+Copyright 2022 Pagefind
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
 License notice for Errata (v0.13.0)
 ------------------------------------
 MIT License

docs/configure/content-set/index.md

@@ -13,6 +13,18 @@ A content set in `docs-builder` is equivalent to an AsciiDoc book. At this level
 | **Content source files** --> A whole bunch of markup files as well as any other assets used in the docs (for example, images, videos, and diagrams).   | **Markup**: AsciiDoc files **Assets**: Images, videos, and diagrams                                                                                   | **Markup**: MD files **Assets**: Images, videos, and diagrams |
 | **Information architecture** --> A way to specify the order in which these text-based files should appear in the information architecture of the book. | `index.asciidoc` file (this can be spread across several AsciiDoc files, but generally starts with the index file specified in the `conf.yaml` file)) | `docset.yml` and/or `toc.yml` file(s)                         |
 
+## Static search
+
+Isolated builds and `docs-builder serve` automatically include a [Pagefind](https://pagefind.app) search index that runs entirely in the browser. No configuration is needed — the `pagefind` exporter is included by default.
+
+To use it with a static build, serve the output over HTTP:
+
+```sh
+python3 -m http.server --directory .artifacts/docs/html
+```
+
+Static search does not require a search API. It does not work when pages are opened directly with `file://`.
+
 ## Learn more
 
 * [File structure](./file-structure.md).

src/Elastic.Codex/CodexGenerator.cs

@@ -72,11 +72,9 @@ private async Task ExtractEmbeddedStaticResources(Cancel ctx)
 	{
 		_logger.LogInformation("Copying static files to codex output directory");
 		var assembly = typeof(EmbeddedOrPhysicalFileProvider).Assembly;
-		var embeddedStaticFiles = assembly
-			.GetManifestResourceNames()
-			.ToList();
 
-		foreach (var resourceName in embeddedStaticFiles)
+		foreach (var resourceName in assembly.GetManifestResourceNames()
+			.Where(r => r.StartsWith("Elastic.Documentation.Site._static.", StringComparison.Ordinal)))
 		{
 			await using var resourceStream = assembly.GetManifestResourceStream(resourceName);
 			if (resourceStream == null)

src/Elastic.Documentation.Site/Assets/web-components/Header/DeploymentInfo.tsx

@@ -72,9 +72,14 @@ export const DeploymentInfo = ({
             <button
                 type="button"
                 onClick={() => setIsOpen((prev) => !prev)}
+                aria-label={`Deployment info for branch ${gitBranch}, commit ${gitCommit}`}
                 css={css`
                     ${headerButtonCss(euiTheme)};
                     margin-inline: ${euiTheme.size.s};
+                    @media (max-width: 768px) {
+                        margin-inline: ${euiTheme.size.xs};
+                        padding-inline: ${euiTheme.size.s};
+                    }
                 `}
             >
                 <span
@@ -85,13 +90,24 @@ export const DeploymentInfo = ({
                     `}
                 >
                     <EuiIcon type="branch" color="inherit" />
-                    {gitBranch}
+                    <span
+                        css={css`
+                            @media (max-width: 768px) {
+                                display: none;
+                            }
+                        `}
+                    >
+                        {gitBranch}
+                    </span>
                 </span>
                 <span
                     css={css`
                         display: inline-flex;
                         align-items: center;
                         gap: ${euiTheme.size.xs};
+                        @media (max-width: 768px) {
+                            display: none;
+                        }
                     `}
                 >
                     <EuiIcon type={commitSvg} color="inherit" />

src/Elastic.Documentation.Site/Assets/web-components/Header/Header.tsx

@@ -1,5 +1,8 @@
+import { config } from '../../config'
 import '../../eui-icons-cache'
+import { ModalSearch } from '../ModalSearch/ModalSearch'
 import { useHtmxContainer } from '../shared/htmx/useHtmxContainer'
+import { sharedQueryClient } from '../shared/queryClient'
 import { DeploymentInfo, headerButtonCss } from './DeploymentInfo'
 import {
     EuiHeader,
@@ -10,6 +13,7 @@ import {
 } from '@elastic/eui'
 import { css } from '@emotion/react'
 import r2wc from '@r2wc/react-to-web-component'
+import { QueryClientProvider } from '@tanstack/react-query'
 import { useRef } from 'react'
 
 interface Props {
@@ -169,6 +173,28 @@ export const Header = ({
                     {
                         items: [logoSection],
                     },
+                    ...(config.buildType === 'isolated'
+                        ? [
+                              {
+                                  items: [
+                                      <QueryClientProvider
+                                          client={sharedQueryClient}
+                                      >
+                                          <div
+                                              css={css`
+                                                  width: min(22rem, 35vw);
+                                              `}
+                                          >
+                                              <ModalSearch
+                                                  size="s"
+                                                  placeholder="Search"
+                                              />
+                                          </div>
+                                      </QueryClientProvider>,
+                                  ],
+                              },
+                          ]
+                        : []),
                     ...(!airGapped
                         ? [
                               {

src/Elastic.Documentation.Site/Assets/web-components/ModalSearch/ModalSearch.test.tsx

@@ -71,4 +71,16 @@ describe('ModalSearch', () => {
             screen.queryByRole('button', { name: 'Close search modal' })
         ).not.toBeInTheDocument()
     })
+
+    it('does not offer Ask AI in an isolated build', () => {
+        renderModalSearch()
+
+        act(() => {
+            modalSearchStore.getState().actions.openModal()
+            modalSearchStore.getState().actions.setSearchTerm('logging')
+        })
+
+        expect(screen.queryByText('Ask AI Assistant')).not.toBeInTheDocument()
+        expect(screen.queryByText('Tell me more about')).not.toBeInTheDocument()
+    })
 })

src/Elastic.Documentation.Site/Assets/web-components/ModalSearch/ModalSearch.tsx

@@ -1,3 +1,4 @@
+import { config } from '../../config'
 import '../../eui-icons-cache'
 import { ElasticAiAssistantButton } from '../AskAi/ElasticAiAssistantButton'
 import { InfoBanner } from '../AskAi/InfoBanner'
@@ -209,7 +210,7 @@ const ModalSearchContent = ({
 
             {<EuiHorizontalRule margin="none" />}
 
-            {searchTerm && (
+            {config.buildType !== 'isolated' && searchTerm && (
                 <div
                     css={css`
                         padding-inline: ${euiTheme.size.base};
@@ -251,7 +252,7 @@ const ModalSearchContent = ({
                 </div>
             )}
 
-            <InfoBanner />
+            {config.buildType !== 'isolated' && <InfoBanner />}
             <KeyboardShortcutsFooter shortcuts={SEARCH_KEYBOARD_SHORTCUTS} />
         </div>
     )
@@ -311,6 +312,10 @@ const ModalSearchTrigger = ({
                 color: ${euiTheme.colors.textDisabled};
                 cursor: pointer;
 
+                @media (max-width: 768px) {
+                    padding-right: ${euiTheme.size.s};
+                }
+
                 &:hover {
                     border-color: ${euiTheme.colors.borderBasePlain};
                 }
@@ -344,6 +349,9 @@ const ModalSearchTrigger = ({
                     right: ${euiTheme.size.m};
                     color: ${euiTheme.colors.textDisabled};
                     font-size: ${euiTheme.font.scale.s * euiTheme.base}px;
+                    @media (max-width: 768px) {
+                        display: none;
+                    }
                 `}
             >
                 {isMac ? '⌘K' : 'Ctrl+K'}

src/Elastic.Documentation.Site/Assets/web-components/ModalSearch/ModalSearchResultsList.tsx

@@ -177,6 +177,9 @@ const ModalSearchResultRow = ({
         if (config.buildType === 'codex') {
             return result.parents.map((p) => p.title)
         }
+        if (config.buildType === 'isolated') {
+            return result.parents.slice(1).map((p) => p.title)
+        }
 
         const typePrefix = 'Docs'
         return [typePrefix, ...result.parents.slice(1).map((p) => p.title)]

src/Elastic.Documentation.Site/Assets/web-components/ModalSearch/pagefind.test.ts

@@ -0,0 +1,85 @@
+import { mapPagefindResults } from './pagefind'
+
+describe('mapPagefindResults', () => {
+    it('maps matching pages into modal results', () => {
+        const results = mapPagefindResults([
+            {
+                score: 0.9,
+                data: {
+                    url: '/guide/',
+                    excerpt: 'Guide excerpt',
+                    meta: {
+                        title: 'Guide',
+                        breadcrumbs: JSON.stringify({
+                            itemListElement: [
+                                {
+                                    name: 'Docs',
+                                    item: 'https://example.com/',
+                                },
+                                {
+                                    name: 'Syntax guide',
+                                    item: 'https://example.com/syntax',
+                                },
+                                {
+                                    name: 'Mermaid diagrams',
+                                },
+                            ],
+                        }),
+                    },
+                },
+            },
+        ])
+
+        expect(results).toEqual([
+            {
+                type: 'docs',
+                url: '/guide/',
+                title: 'Guide',
+                description: 'Guide excerpt',
+                score: 0.9,
+                parents: [
+                    {
+                        title: 'Docs',
+                        url: 'https://example.com/',
+                    },
+                    {
+                        title: 'Syntax guide',
+                        url: 'https://example.com/syntax',
+                    },
+                ],
+            },
+        ])
+    })
+
+    it('falls back to page metadata when no sections are returned', () => {
+        const [result] = mapPagefindResults([
+            {
+                score: 0.5,
+                data: {
+                    url: '/guide/',
+                    excerpt: 'Guide excerpt',
+                    meta: { title: 'Guide' },
+                },
+            },
+        ])
+
+        expect(result.title).toBe('Guide')
+        expect(result.description).toBe('Guide excerpt')
+    })
+
+    it('falls back to the page URL when title metadata is missing', () => {
+        const [result] = mapPagefindResults([
+            {
+                score: 0.5,
+                data: {
+                    url: '/guide/',
+                    excerpt: 'Guide excerpt',
+                    meta: {},
+                },
+            },
+        ])
+
+        expect(result.title).toBe('/guide/')
+        expect(result.url).toBe('/guide/')
+    })
+})