feat: add algolia search (#271)

* feat: add algolia search fix: component url with # at the end causing a crash * refactor: seperate docsearch to seperate js file for code reuse * fix: reorder css stylesheet so that search style is overwritten fix: clean up mainlayout a bit
2024-11-30 02:58:13 +08:00 · 2020-07-09 07:20:29 +01:00 · 2020-07-09 07:20:29 +01:00 · 37be19ffea
commit 37be19ffea
parent daf05d6832
9 changed files with 65 additions and 12 deletions
--- a/scripts/gh-pages/index.html
+++ b/scripts/gh-pages/index.html
@ -8,6 +8,7 @@
    <title>Ant Design of Blazor</title>
    <base href="/" />
    <link rel="icon" href="logo.png" type="image/x-icon">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2.6.3/dist/cdn/docsearch.min.css"/>
    <link href="_content/AntDesign.Docs/css/docs.css" rel="stylesheet">
    <link href="manifest.json" rel="manifest" />
 </head>
@ -239,6 +240,8 @@
            Prism.highlightAll();
        }
    </script>
+    <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2.6.3/dist/cdn/docsearch.min.js" integrity="sha256-qybEsgf0PGiQS22AmoozPs09oRnSC7Gu7eBu4fbS2Ac=" crossorigin="anonymous"></script>
+    <script src="_content/AntDesign.Docs/js/docsearch.js"></script>
    <script>navigator.serviceWorker.register('service-worker.js');</script>
 </body>

--- a/site/AntBlazor.Docs/Pages/Components.razor.cs
+++ b/site/AntBlazor.Docs/Pages/Components.razor.cs
@ -31,6 +31,7 @@ namespace AntDesign.Docs.Pages
            {
                if (!string.IsNullOrEmpty(Name))
                {
+                    if (Name.IndexOf('#') > 0) Name = Name.Substring(0, Name.IndexOf('#'));
                    _demoComponent = await DemoService.GetComponentAsync(Name);
                    await InvokeAsync(StateHasChanged);
                }
@ -53,6 +54,7 @@ namespace AntDesign.Docs.Pages
        {
            if (!string.IsNullOrEmpty(Name))
            {
+                if (Name.IndexOf('#') > 0) Name = Name.Substring(0, Name.IndexOf('#'));
                _demoComponent = await DemoService.GetComponentAsync(Name);
            }
        }
--- a/site/AntBlazor.Docs/Resources/en-US.yml
+++ b/site/AntBlazor.Docs/Resources/en-US.yml
@ -57,7 +57,9 @@ Rate: Rate
 Select: Select
 Collapse: Collapse
 Table: Table
+AutoComplete: AutoComplete
 Upload: Upload
 AutoComplete: AutoComplete
 Anchor: Anchor
 Affix: Affix
+DocSearch: Search in Ant Design Blazor
--- a/site/AntBlazor.Docs/Resources/zh-CN.yml
+++ b/site/AntBlazor.Docs/Resources/zh-CN.yml
@ -60,7 +60,9 @@ Statistic: 统计数值
 Rate: 评分
 Select: 选择器
 Table: 表格
+AutoComplete: 自动完成
 Upload: 文件上传
 AutoComplete: 自动完成
 Anchor: 锚点
 Affix: 固钉
+DocSearch: 在Ant Design Blazor中搜索
--- a/site/AntBlazor.Docs/Shared/MainLayout.razor
+++ b/site/AntBlazor.Docs/Shared/MainLayout.razor
@ -11,14 +11,9 @@
                </h1>
            </div>
            <div class="ant-col menu-row ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-18 ant-col-xl-19 ant-col-xxl-20">
-                <div id="search-box" class="narrow-mode">
-                    <span role="img" aria-label="search" class="anticon anticon-search"><svg viewBox="64 64 896 896" focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span>
-                    <span class="algolia-autocomplete" style="position: relative; display: inline-block; direction: ltr;">
-                        <input placeholder="在 ant.design 中搜索" type="text" class="ant-input ds-input" value="" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-label="search input" aria-owns="algolia-autocomplete-listbox-0" dir="auto" style="position: relative; vertical-align: top;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: -apple-system, BlinkMacSystemFont, &quot;segoe ui&quot;, Roboto, &quot;helvetica neue&quot;, Arial, &quot;noto sans&quot;, sans-serif, &quot;apple color emoji&quot;, &quot;segoe ui emoji&quot;, &quot;segoe ui symbol&quot;, &quot;noto color emoji&quot;; font-size: 14px; font-style: normal; font-variant: tabular-nums; font-weight: 400; word-spacing: 0px; letter-spacing: normal; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
-                        <span class="ds-dropdown-menu" role="listbox" id="algolia-autocomplete-listbox-0" style="position: absolute; top: 100%; z-index: 100; display: none; left: 0px; right: auto;">
-                            <div class="ds-dataset-1"></div>
-                        </span>
-                    </span>
+                <div id="search-box">
+                    <Icon Type="search" Theme="outline" />
+                    <input placeholder="@(LanguageService.Resources["DocSearch"])" type="text" class="ant-input ds-input" value="" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-label="search input" aria-owns="algolia-autocomplete-listbox-0" dir="auto" style="position: relative; vertical-align: top;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: -apple-system, BlinkMacSystemFont, &quot;segoe ui&quot;, Roboto, &quot;helvetica neue&quot;, Arial, &quot;noto sans&quot;, sans-serif, &quot;apple color emoji&quot;, &quot;segoe ui emoji&quot;, &quot;segoe ui symbol&quot;, &quot;noto color emoji&quot;; font-size: 14px; font-style: normal; font-variant: tabular-nums; font-weight: 400; word-spacing: 0px; letter-spacing: normal; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
                </div>

                @*<Menu Mode="MenuMode.Horizontal" Id="nav" Class="menu-site">
--- a/site/AntBlazor.Docs/Shared/MainLayout.razor.cs
+++ b/site/AntBlazor.Docs/Shared/MainLayout.razor.cs
@ -5,6 +5,7 @@ using System.Threading.Tasks;
 using AntDesign.Docs.Localization;
 using AntDesign.Docs.Services;
 using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;

 namespace AntDesign.Docs.Shared
 {
@ -29,11 +30,13 @@ namespace AntDesign.Docs.Shared
        [Inject]
        public DemoService DemoService { get; set; }

+        [Inject] 
+        public IJSRuntime JsInterop { get; set; }
+
        protected override async Task OnInitializedAsync()
        {
            //await GetCurrentMenuItems();
            //StateHasChanged();
-
            await DemoService.InitializeDemos();

            LanguageService.LanguageChanged += OnLanguageChanged;
@ -43,7 +46,15 @@ namespace AntDesign.Docs.Shared
                StateHasChanged();
            };
        }
-
+        
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            if (firstRender)
+            {
+                await JsInterop.InvokeVoidAsync("window.AntDesign.DocSearch.init", CurrentLanguage);
+            }
+        }
+        
        private async ValueTask GetCurrentMenuItems()
        {
            var currentUrl = NavigationManager.ToBaseRelativePath(NavigationManager.Uri);
@ -74,9 +85,10 @@ namespace AntDesign.Docs.Shared
            NavigationManager.NavigateTo($"{language}/{newUrl}");
        }

-        private async void OnLanguageChanged(object sender, CultureInfo args)
+        private async void OnLanguageChanged(object sender, CultureInfo culture)
        {
            await GetCurrentMenuItems();
+            await JsInterop.InvokeVoidAsync("window.AntDesign.DocSearch.localeChange", culture.Name);
            await InvokeAsync(StateHasChanged);
        }

--- a/site/AntBlazor.Docs/wwwroot/js/docsearch.js
+++ b/site/AntBlazor.Docs/wwwroot/js/docsearch.js
@ -0,0 +1,31 @@
+window.AntDesign.DocSearch = {
+    instance: {},
+    init: locale => {
+        if (!docsearch) {
+            return;
+        }
+        const lang = locale === 'zh-CN' ? 'cn' : 'en';
+        window.AntDesign.DocSearch.instance = docsearch({
+            apiKey: '872d29d519c3c2bd32a37398b6a85e0f',
+            indexName: 'ant_design_blazor',
+            appId: 'V29CUJY3QP',
+            inputSelector: '#search-box input',
+            algoliaOptions: { facetFilters: [`tags:${lang}`] },
+            transformData(hits) {
+                hits.forEach(hit => {
+                    hit.url = hit.url.replace('ant-design-blazor.github.io', window.location.host);
+                    hit.url = hit.url.replace('https:', window.location.protocol);
+                });
+                return hits;
+            },
+            debug: false
+        });
+    },
+    localeChange: locale => {
+        if (!docsearch || !window.AntDesign.DocSearch.instance) {
+            return;
+        }
+        const lang = locale === 'zh-CN' ? 'cn' : 'en';
+        window.AntDesign.DocSearch.instance.algoliaOptions.facetFilters = [`tags:${lang}`]
+    }
+};
--- a/site/AntDesign.Docs.Server/Pages/_Host.cshtml
+++ b/site/AntDesign.Docs.Server/Pages/_Host.cshtml
@ -11,6 +11,7 @@
    <base href="~/" />
    <link rel="icon" href="logo.png" type="image/x-icon">
    @*<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet">*@
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2.6.3/dist/cdn/docsearch.min.css"/>
    <link href="_content/AntDesign.Docs/css/docs.css" rel="stylesheet">
 </head>
 <body>
@ -21,7 +22,7 @@
    <script src="_framework/blazor.server.js"></script>
    <script src="_content/AntDesign/js/ant-design-blazor.js"></script>
    <script src="_content/AntDesign.Docs/js/prism.js"></script>
-    <script>
+<script>
        window.AntDesign.Prism = {};
        window.AntDesign.Prism.highlight = function (code, language) {
            return Prism.highlight(code, Prism.languages[language], language);
@ -31,5 +32,7 @@
            Prism.highlightAll();
        }
    </script>
+    <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2.6.3/dist/cdn/docsearch.min.js" integrity="sha256-qybEsgf0PGiQS22AmoozPs09oRnSC7Gu7eBu4fbS2Ac=" crossorigin="anonymous"></script>    
+    <script src="_content/AntDesign.Docs/js/docsearch.js"></script>
 </body>
 </html>
--- a/site/AntDesign.Docs.Wasm/wwwroot/index.html
+++ b/site/AntDesign.Docs.Wasm/wwwroot/index.html
@ -8,6 +8,7 @@
    <title>Ant Design of Blazor</title>
    <base href="/" />
    <link rel="icon" href="logo.png" type="image/x-icon">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2.6.3/dist/cdn/docsearch.min.css"/>
    <link href="_content/AntDesign.Docs/css/docs.css" rel="stylesheet">
 </head>

@ -209,6 +210,8 @@
            Prism.highlightAll();
        }
    </script>
+    <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2.6.3/dist/cdn/docsearch.min.js" integrity="sha256-qybEsgf0PGiQS22AmoozPs09oRnSC7Gu7eBu4fbS2Ac=" crossorigin="anonymous"></script>
+    <script src="_content/AntDesign.Docs/js/docsearch.js"></script>
 </body>

 </html>