Enable Algolia DocSearch

opengsq · Feb 13, 2024 · df63969 · df63969
1 parent 9a845c1
commit df63969
Show file tree

Hide file tree

Showing 3 changed files with 210 additions and 2 deletions.
diff --git a/docs/docfx.json b/docs/docfx.json
@@ -44,7 +44,14 @@
     "globalMetadata": {
       "_appName": "OpenGSQ .NET",
       "_appTitle": "OpenGSQ .NET",
-      "_enableSearch": true,
+      "_enableSearch": false,
+      "_docSearch": {
+        "enabled": true,
+        "container": "#docsearch",
+        "appId": "KWL1XULD5J",
+        "apiKey": "102640797dc889088bb60007dfe7ddf9",
+        "indexName": "docsearch"
+      },
       "_appLogoPath": "images/logo.png",
       "_appFaviconPath": "images/favicon.ico",
       "_googleAnalyticsTagId": "G-EBNPX27LWD",

diff --git a/docs/template/layout/_master.tmpl b/docs/template/layout/_master.tmpl
@@ -0,0 +1,189 @@
+{{!Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the
+MIT license.}}
+{{!include(/^public/.*/)}}
+{{!include(favicon.ico)}}
+{{!include(logo.svg)}}
+<!DOCTYPE html>
+<html {{#_lang}}lang="{{_lang}}" {{/_lang}}>
+
+<head>
+    <meta charset="utf-8">
+    {{#redirect_url}}
+    <meta http-equiv="refresh" content="0;URL='{{redirect_url}}'">
+    {{/redirect_url}}
+    {{^redirect_url}}
+    <title>{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}} {{#_appTitle}}| {{_appTitle}}
+        {{/_appTitle}}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="title"
+        content="{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}} {{#_appTitle}}| {{_appTitle}} {{/_appTitle}}">
+    {{#_description}}
+    <meta name="description" content="{{_description}}">{{/_description}}
+    {{#description}}
+    <meta name="description" content="{{description}}">{{/description}}
+    <link rel="icon" href="{{_rel}}{{{_appFaviconPath}}}{{^_appFaviconPath}}favicon.ico{{/_appFaviconPath}}">
+    <link rel="stylesheet" href="{{_rel}}public/docfx.min.css">
+    <link rel="stylesheet" href="{{_rel}}public/main.css">
+    {{#_docSearch.enabled}}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
+    <link rel="preconnect" href="https://{{_docSearch.appId}}-dsn.algolia.net" crossorigin />
+    {{/_docSearch.enabled}}
+    <meta name="docfx:navrel" content="{{_navRel}}">
+    <meta name="docfx:tocrel" content="{{_tocRel}}">
+    {{#_noindex}}
+    <meta name="searchOption" content="noindex">{{/_noindex}}
+    {{#_enableSearch}}
+    <meta name="docfx:rel" content="{{_rel}}">{{/_enableSearch}}
+    {{#_disableNewTab}}
+    <meta name="docfx:disablenewtab" content="true">{{/_disableNewTab}}
+    {{#_disableTocFilter}}
+    <meta name="docfx:disabletocfilter" content="true">{{/_disableTocFilter}}
+    {{#docurl}}
+    <meta name="docfx:docurl" content="{{docurl}}">{{/docurl}}
+    <meta name="loc:inThisArticle" content="{{__global.inThisArticle}}">
+    <meta name="loc:searchResultsCount" content="{{__global.searchResultsCount}}">
+    <meta name="loc:searchNoResults" content="{{__global.searchNoResults}}">
+    <meta name="loc:tocFilter" content="{{__global.tocFilter}}">
+    <meta name="loc:nextArticle" content="{{__global.nextArticle}}">
+    <meta name="loc:prevArticle" content="{{__global.prevArticle}}">
+    <meta name="loc:themeLight" content="{{__global.themeLight}}">
+    <meta name="loc:themeDark" content="{{__global.themeDark}}">
+    <meta name="loc:themeAuto" content="{{__global.themeAuto}}">
+    <meta name="loc:changeTheme" content="{{__global.changeTheme}}">
+    <meta name="loc:copy" content="{{__global.copy}}">
+    <meta name="loc:downloadPdf" content="{{__global.downloadPdf}}">
+    {{/redirect_url}}
+</head>
+
+{{^redirect_url}}
+<script type="module" src="./{{_rel}}public/docfx.min.js"></script>
+
+<script>
+    const theme = localStorage.getItem('theme') || 'auto'
+    document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : theme)
+</script>
+
+{{#_googleAnalyticsTagId}}
+<script async src="https://www.googletagmanager.com/gtag/js?id={{_googleAnalyticsTagId}}"></script>
+<script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+    gtag('config', '{{_googleAnalyticsTagId}}');
+</script>
+{{/_googleAnalyticsTagId}}
+
+<body class="tex2jax_ignore" data-layout="{{_layout}}{{layout}}" data-yaml-mime="{{yamlmime}}">
+    <header class="bg-body border-bottom">
+        <nav id="autocollapse" class="navbar navbar-expand-md" role="navigation">
+            <div class="container-xxl flex-nowrap">
+                <a class="navbar-brand" href="{{_appLogoUrl}}{{^_appLogoUrl}}{{_rel}}index.html{{/_appLogoUrl}}">
+                    <img id="logo" class="svg"
+                        src="{{_rel}}{{{_appLogoPath}}}{{^_appLogoPath}}logo.svg{{/_appLogoPath}}" alt="{{_appName}}">
+                    {{_appName}}
+                </a>
+                <button class="btn btn-lg d-md-none border-0" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#navpanel" aria-controls="navpanel" aria-expanded="false"
+                    aria-label="Toggle navigation">
+                    <i class="bi bi-three-dots"></i>
+                </button>
+                <div class="collapse navbar-collapse" id="navpanel">
+                    <div id="navbar">
+                        {{#_enableSearch}}
+                        <form class="search" role="search" id="search">
+                            <i class="bi bi-search"></i>
+                            <input class="form-control" id="search-query" type="search" disabled
+                                placeholder="{{__global.search}}" autocomplete="off" aria-label="Search">
+                        </form>
+                        {{/_enableSearch}}
+                        {{#_docSearch.enabled}}
+                        <form class="search" role="search" id="search">
+                            <div id="docsearch"></div>
+                        </form>
+                        {{/_docSearch.enabled}}
+                    </div>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <main class="container-xxl">
+        <div class="toc-offcanvas">
+            <div class="offcanvas-md offcanvas-start" tabindex="-1" id="tocOffcanvas"
+                aria-labelledby="tocOffcanvasLabel">
+                <div class="offcanvas-header">
+                    <h5 class="offcanvas-title" id="tocOffcanvasLabel">Table of Contents</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#tocOffcanvas"
+                        aria-label="Close"></button>
+                </div>
+                <div class="offcanvas-body">
+                    <nav class="toc" id="toc"></nav>
+                </div>
+            </div>
+        </div>
+
+        <div class="content">
+            <div class="actionbar">
+                <button class="btn btn-lg border-0 d-md-none" style="margin-top: -.65em; margin-left: -.8em"
+                    type="button" data-bs-toggle="offcanvas" data-bs-target="#tocOffcanvas" aria-controls="tocOffcanvas"
+                    aria-expanded="false" aria-label="Show table of contents">
+                    <i class="bi bi-list"></i>
+                </button>
+
+                <nav id="breadcrumb"></nav>
+            </div>
+
+            <article data-uid="{{uid}}">
+                {{!body}}
+            </article>
+
+            {{^_disableContribution}}
+            <div class="contribution d-print-none">
+                {{#sourceurl}}
+                <a href="{{sourceurl}}" class="edit-link">{{__global.improveThisDoc}}</a>
+                {{/sourceurl}}
+                {{^sourceurl}}{{#docurl}}
+                <a href="{{docurl}}" class="edit-link">{{__global.improveThisDoc}}</a>
+                {{/docurl}}{{/sourceurl}}
+            </div>
+            {{/_disableContribution}}
+
+            {{^_disableNextArticle}}
+            <div class="next-article d-print-none border-top" id="nextArticle"></div>
+            {{/_disableNextArticle}}
+
+        </div>
+
+        <div class="affix">
+            <nav id="affix"></nav>
+        </div>
+    </main>
+
+    {{#_enableSearch}}
+    <div class="container-xxl search-results" id="search-results"></div>
+    {{/_enableSearch}}
+
+    <footer class="border-top text-secondary">
+        <div class="container-xxl">
+            <div class="flex-fill">
+                {{{_appFooter}}}{{^_appFooter}}<span>Made with <a
+                        href="https://dotnet.github.io/docfx">docfx</a></span>{{/_appFooter}}
+            </div>
+        </div>
+    </footer>
+
+    {{#_docSearch.enabled}}
+    <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
+    <script>
+        docsearch({
+            container: "{{_docSearch.container}}",
+            appId: "{{_docSearch.appId}}",
+            indexName: "{{_docSearch.indexName}}",
+            apiKey: "{{_docSearch.apiKey}}",
+        });
+    </script>
+    {{/_docSearch.enabled}}
+</body>
+{{/redirect_url}}
+
+</html>
diff --git a/docs/template/public/main.css b/docs/template/public/main.css
@@ -1,5 +1,17 @@
-/* Checkout https://getbootstrap.com/docs/5.3/customize/color/ for more customization options */
+/*
+    For more customization options, visit:
+    https://getbootstrap.com/docs/5.3/customize/color/
+*/
 body {
     --bs-link-color-rgb: 235, 69, 158 !important;
     --bs-link-hover-color-rgb: 211, 62, 142 !important;
+}
+
+/*
+    The z-index for the selectors '@media (min-width: 768px) body>header' and 'body[data-layout=landing]>header' is set to 1030.
+    To ensure that the '.DocSearch-Container' appears above these elements, its z-index is set to a higher value (1040).
+    The '!important' rule is used to override any other conflicting declarations.
+*/
+.DocSearch-Container {
+    z-index: 1040 !important;
 }