test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-11-30 02:58:13 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

feat: add algolia search (#271)

Browse Source 
* 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
This commit is contained in:
Kieran Coldron 2020-07-09 07:20:29 +01:00 committed by GitHub
parent daf05d6832
commit 37be19ffea
9 changed files with 65 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
scripts/gh-pages/index.html
View File

@ -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>

2
site/AntBlazor.Docs/Pages/Components.razor.cs
View File

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

2
site/AntBlazor.Docs/Resources/en-US.yml
View File

@ -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

2
site/AntBlazor.Docs/Resources/zh-CN.yml
View File

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

11
site/AntBlazor.Docs/Shared/MainLayout.razor
View File

@ -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">

16
site/AntBlazor.Docs/Shared/MainLayout.razor.cs
View File

@ -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;
@ -44,6 +47,14 @@ namespace AntDesign.Docs.Shared
};
}
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);
}

31
site/AntBlazor.Docs/wwwroot/js/docsearch.js Normal file
View File

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

3
site/AntDesign.Docs.Server/Pages/_Host.cshtml
View File

@ -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>
@ -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>

3
site/AntDesign.Docs.Wasm/wwwroot/index.html
View File

@ -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>