Skip to content

Commit

Permalink
Merge pull request #12587 from jbonnier/dev/jubo/docsearch-by-algolia
Browse files Browse the repository at this point in the history
chore(docsearch): Implement DocSearch by Algolia
  • Loading branch information
jeromelaban authored Jun 9, 2023
2 parents 1e99acd + 6ebb0b5 commit 4d550c1
Show file tree
Hide file tree
Showing 9 changed files with 2,068 additions and 84 deletions.
2 changes: 1 addition & 1 deletion doc/docfx.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
"disableGitFeatures": false,
"globalMetadata": {
"_appLogoPath": "images/uno-logo.png",
"_enableSearch": "true",
"_enableSearch": false,
"_appFaviconPath": "images/UnoLogoSmall.png",
"_disableContribution": false,
"_gitContribute": {
Expand Down
4 changes: 0 additions & 4 deletions doc/gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ const concat = require('gulp-concat');
const postcss = require('gulp-postcss');
const gulpif = require('gulp-if');
const del = require('del');
const sassLint = require('gulp-sass-lint');
const sourcemaps = require('gulp-sourcemaps');
const stripImportExport = require('gulp-strip-import-export');
const browserSync = require('browser-sync').create();
Expand All @@ -26,9 +25,6 @@ function styles(done) {

src([`${assets}/**/*.scss`, `${assets}/**/*.sass`])
.pipe(gulpif(isDebug, sourcemaps.init()))
.pipe(gulpif(isDebug, sassLint()))
.pipe(gulpif(isDebug, sassLint.format()))
.pipe(gulpif(isDebug, sassLint.failOnError()))
.pipe(
sass({includePaths: ['./node_modules/'], outputStyle: output}).on(
'error',
Expand Down
1 change: 0 additions & 1 deletion doc/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
"gulp-postcss": "^9.0.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.1.0",
"gulp-sass-lint": "^1.3.4",
"gulp-sourcemaps": "^2.6.4",
"gulp-strip-import-export": "^1.0.0",
"gulp-uglify": "^3.0.2",
Expand Down
17 changes: 16 additions & 1 deletion doc/templates/uno/partials/scripts.tmpl.partial
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,19 @@ mermaid.initialize({
startOnLoad: false
});
mermaid.init(undefined, ".lang-mermaid");
</script>
</script>
<!-- Algolia DocSearch -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
docsearch({
container: '#docsearch',
appId: 'PHB9D8WS99',
indexName: 'platform',
apiKey: '7877394996f96cde1a9b795dce3f7787',
placeholder: 'Search Docs...'
});
console.log(docsearch);
});
</script>
94 changes: 32 additions & 62 deletions doc/templates/uno/service/search.scss
Original file line number Diff line number Diff line change
@@ -1,75 +1,45 @@
@import "../variables";

:root {
--docsearch-primary-color: #{$blue} !important;
--docsearch-logo-color: #{$blue} !important;
}

.sidefilter {
top: 116px;
z-index: 2;
padding: 10px;
background-color: transparent!important;

#search {
display: block;
border-radius: 10px;
input:focus {
outline: none;
border:2px solid #159bff;
}
}
background-color: transparent;
height: 60px;
padding: 10px;

#search-query {
.DocSearch-Button {
background: transparent;
border: 2px inset $darkgray;
border-radius: 6px;
height: 45px;
width: 100%;
margin: 0;
min-height: 45px;
padding: 10px;
width: 100%;
}

#search-results {
background: white;
position: absolute;
margin:5px 0 0 0;
width:560px;
max-height: calc(100vh - 250px);
border: 1px solid rgba(0,0,0,0.15);
border-radius: 10px;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
z-index: 1;
overflow-y: auto;

.sr-items {
a {
color: black;
&:last-child {
margin-bottom: 0;
}
}

p {
margin: 10px;
}

.sr-item {
display: block;
padding: 15px;
margin-bottom: 10px;
&:hover{
background-image:linear-gradient(to bottom, rgba(21,155,255, 0.11) 0%, rgba(21,155,255, 0.11) 100%), linear-gradient(to bottom, rgba(21,155,255, 0.11) 0%, rgba(21,155,255, 0.11) 100%);
}
}

.item-title {
font-size: 16px;
font-weight: bold;
}
.DocSearch-Button:active, .DocSearch-Button:focus, .DocSearch-Button:hover {
border: 2px solid $blue;
box-shadow: none;
}

.item-brief {
font-size: 16px;
color: black;
}
}
.DocSearch-Button .DocSearch-Search-Icon {
display: none;
}

@media (max-width: 767px) {
width: 95%;
overflow-y: scroll;
max-height: 400px;
}
.DocSearch-Button-Placeholder {
color: rgb(117, 117, 117);
font-family: "Open Sans", sans-serif;
font-size: 14px;
line-height: 20px;
padding: 10px;
display: block;
}
}

.DocSearch.DocSearch-Container {
z-index: 9999;
}
1,463 changes: 1,462 additions & 1 deletion doc/templates/uno/styles/docfx.js

Large diffs are not rendered by default.

534 changes: 529 additions & 5 deletions doc/templates/uno/styles/main.css

Large diffs are not rendered by default.

27 changes: 26 additions & 1 deletion doc/templates/uno/styles/main.js
Original file line number Diff line number Diff line change
@@ -1 +1,26 @@
document.addEventListener("DOMContentLoaded",function(){initializeNavbar(),document.addEventListener("click",function(e){var n=e.target;980<=window.innerWidth||!n.matches("#navbar .has-children a")||(e.stopImmediatePropagation(),n.parentElement.classList.toggle("open"))},!0)},!1);
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.

document.addEventListener(
"DOMContentLoaded",
function () {

initializeNavbar();

document.addEventListener(
"click",
function (e) {
const t = e.target;
if (
window.innerWidth >= 980 ||
!t.matches("#navbar .has-children a")
)
return;
e.stopImmediatePropagation();
t.parentElement.classList.toggle("open");
},
true
);
},
false
);

10 changes: 2 additions & 8 deletions doc/templates/uno/toc.html.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,12 @@
<div id="sidetoggle">
<div>
<div class="sidefilter">
<form role="search" id="search">
<input type="text" id="search-query" aria-label="search box" autocomplete="off"
placeholder="Search Docs..." onsubmit="if(e.key === 'Enter') {return false;}">
</form>
<div id="search-results">
<div class="sr-items"></div>
</div>
<div id="docsearch"></div>
</div>
<div class="sidetoc">
<div class="toc" id="toc">
{{^leaf}}
{{>partials/li}}
{{>partials/li}}
{{/leaf}}
</div>
</div>
Expand Down

0 comments on commit 4d550c1

Please sign in to comment.