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

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>
 

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);
             }
         }

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

site/AntBlazor.Docs/Resources/zh-CN.yml

@@ -60,7 +60,9 @@ Statistic: 统计数值
 Rate: 评分
 Select: 选择器
 Table: 表格
+AutoComplete: 自动完成
 Upload: 文件上传
 AutoComplete: 自动完成
 Anchor: 锚点
 Affix: 固钉
+DocSearch: 在Ant Design Blazor中搜索

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">
+                <div id="search-box">
-                    <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>
+                    <Icon Type="search" Theme="outline" />
-                    <span class="algolia-autocomplete" style="position: relative; display: inline-block; direction: ltr;">
+                    <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>
-                        <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>
 
                 @*<Menu Mode="MenuMode.Horizontal" Id="nav" Class="menu-site">

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);
         }
 

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}`]
+    }
+};

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>

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>