mirror of
https://github.com/pomerium/pomerium.git
synced 2025-05-10 07:37:33 +02:00
docs: enable algolia
Signed-off-by: Bobby DeSimone <bobbydesimone@gmail.com>
This commit is contained in:
Bobby DeSimone
parent
b3fa7023f6
commit
7d1c8ecc55
2 changed files with 186 additions and 128 deletions
|
|
@ -26,7 +26,10 @@ module.exports = {
|
|||
{ text: "Recipes", link: "/recipes/" },
|
||||
{ text: "Community", link: "/community/" }
|
||||
],
|
||||
|
||||
algolia: {
|
||||
apiKey: "1653e881f3a6c17d3ad37f4d4c428e20",
|
||||
indexName: "pomerium"
|
||||
},
|
||||
sidebar: {
|
||||
"/docs/": [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,158 +1,213 @@
|
|||
<template>
|
||||
<form
|
||||
id="search-form"
|
||||
class="algolia-search-wrapper search-box"
|
||||
role="search"
|
||||
>
|
||||
<input
|
||||
id="algolia-search-input"
|
||||
class="search-query"
|
||||
>
|
||||
<form id="search-form" class="algolia-search-wrapper search-box" role="search">
|
||||
<input id="algolia-search-input" class="search-query" />
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['options'],
|
||||
props: ["options"],
|
||||
|
||||
mounted () {
|
||||
this.initialize(this.options, this.$lang)
|
||||
mounted() {
|
||||
this.initialize(this.options, this.$lang);
|
||||
},
|
||||
|
||||
methods: {
|
||||
initialize (userOptions, lang) {
|
||||
initialize(userOptions, lang) {
|
||||
Promise.all([
|
||||
import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.js'),
|
||||
import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.css')
|
||||
import(
|
||||
/* webpackChunkName: "docsearch" */ "docsearch.js/dist/cdn/docsearch.min.js"
|
||||
),
|
||||
import(
|
||||
/* webpackChunkName: "docsearch" */ "docsearch.js/dist/cdn/docsearch.min.css"
|
||||
)
|
||||
]).then(([docsearch]) => {
|
||||
docsearch = docsearch.default
|
||||
const { algoliaOptions = {}} = userOptions
|
||||
docsearch(Object.assign(
|
||||
{},
|
||||
userOptions,
|
||||
{
|
||||
inputSelector: '#algolia-search-input',
|
||||
docsearch = docsearch.default;
|
||||
const { algoliaOptions = {} } = userOptions;
|
||||
docsearch(
|
||||
Object.assign({}, userOptions, {
|
||||
inputSelector: "#algolia-search-input",
|
||||
// #697 Make docsearch work well at i18n mode.
|
||||
algoliaOptions: Object.assign({
|
||||
'facetFilters': [`lang:${lang}`].concat(algoliaOptions.facetFilters || [])
|
||||
}, algoliaOptions),
|
||||
algoliaOptions: Object.assign(
|
||||
{
|
||||
facetFilters: [`lang:${lang}`].concat(
|
||||
algoliaOptions.facetFilters || []
|
||||
)
|
||||
},
|
||||
algoliaOptions
|
||||
),
|
||||
handleSelected: (input, event, suggestion) => {
|
||||
this.$router.push(new URL(suggestion.url).pathname)
|
||||
const { pathname, hash } = new URL(suggestion.url);
|
||||
this.$router.push(`${pathname}${hash}`);
|
||||
}
|
||||
}
|
||||
))
|
||||
})
|
||||
})
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
update (options, lang) {
|
||||
this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">'
|
||||
this.initialize(options, lang)
|
||||
update(options, lang) {
|
||||
this.$el.innerHTML =
|
||||
'<input id="algolia-search-input" class="search-query">';
|
||||
this.initialize(options, lang);
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
$lang (newValue) {
|
||||
this.update(this.options, newValue)
|
||||
$lang(newValue) {
|
||||
this.update(this.options, newValue);
|
||||
},
|
||||
|
||||
options (newValue) {
|
||||
this.update(newValue, this.$lang)
|
||||
options(newValue) {
|
||||
this.update(newValue, this.$lang);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.algolia-search-wrapper
|
||||
& > span
|
||||
vertical-align middle
|
||||
.algolia-autocomplete
|
||||
line-height normal
|
||||
.ds-dropdown-menu
|
||||
background-color #fff
|
||||
border 1px solid #999
|
||||
border-radius 4px
|
||||
font-size 16px
|
||||
margin 6px 0 0
|
||||
padding 4px
|
||||
text-align left
|
||||
&:before
|
||||
border-color #999
|
||||
[class*=ds-dataset-]
|
||||
border none
|
||||
padding 0
|
||||
.ds-suggestions
|
||||
margin-top 0
|
||||
.ds-suggestion
|
||||
border-bottom 1px solid $borderColor
|
||||
.algolia-docsearch-suggestion--highlight
|
||||
color #2c815b
|
||||
.algolia-docsearch-suggestion
|
||||
border-color $borderColor
|
||||
padding 0
|
||||
.algolia-docsearch-suggestion--category-header
|
||||
padding 5px 10px
|
||||
margin-top 0
|
||||
background $accentColor
|
||||
color #fff
|
||||
font-weight 600
|
||||
.algolia-docsearch-suggestion--highlight
|
||||
background rgba(255, 255, 255, 0.6)
|
||||
.algolia-docsearch-suggestion--wrapper
|
||||
padding 0
|
||||
.algolia-docsearch-suggestion--title
|
||||
font-weight 600
|
||||
margin-bottom 0
|
||||
color $textColor
|
||||
.algolia-docsearch-suggestion--subcategory-column
|
||||
vertical-align top
|
||||
padding 5px 7px 5px 5px
|
||||
border-color $borderColor
|
||||
background #f1f3f5
|
||||
&:after
|
||||
display none
|
||||
.algolia-docsearch-suggestion--subcategory-column-text
|
||||
color #555
|
||||
.algolia-docsearch-footer
|
||||
border-color $borderColor
|
||||
.ds-cursor .algolia-docsearch-suggestion--content
|
||||
background-color #e7edf3 !important
|
||||
color $textColor
|
||||
.algolia-search-wrapper {
|
||||
& > span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@media (min-width: $MQMobile)
|
||||
.algolia-search-wrapper
|
||||
.algolia-autocomplete
|
||||
.algolia-docsearch-suggestion
|
||||
.algolia-docsearch-suggestion--subcategory-column
|
||||
float none
|
||||
width 150px
|
||||
min-width 150px
|
||||
display table-cell
|
||||
.algolia-docsearch-suggestion--content
|
||||
float none
|
||||
display table-cell
|
||||
width 100%
|
||||
vertical-align top
|
||||
.ds-dropdown-menu
|
||||
min-width 515px !important
|
||||
.algolia-autocomplete {
|
||||
line-height: normal;
|
||||
|
||||
@media (max-width: $MQMobile)
|
||||
.algolia-search-wrapper
|
||||
.ds-dropdown-menu
|
||||
min-width calc(100vw - 4rem) !important
|
||||
max-width calc(100vw - 4rem) !important
|
||||
.algolia-docsearch-suggestion--wrapper
|
||||
padding 5px 7px 5px 5px !important
|
||||
.algolia-docsearch-suggestion--subcategory-column
|
||||
padding 0 !important
|
||||
background white !important
|
||||
.algolia-docsearch-suggestion--subcategory-column-text:after
|
||||
content " > "
|
||||
font-size 10px
|
||||
line-height 14.4px
|
||||
display inline-block
|
||||
width 5px
|
||||
margin -3px 3px 0
|
||||
vertical-align middle
|
||||
.ds-dropdown-menu {
|
||||
background-color: #fff;
|
||||
border: 1px solid #999;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
margin: 6px 0 0;
|
||||
padding: 4px;
|
||||
text-align: left;
|
||||
|
||||
</style>
|
||||
&:before {
|
||||
border-color: #999;
|
||||
}
|
||||
|
||||
[class*=ds-dataset-] {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ds-suggestions {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ds-suggestion {
|
||||
border-bottom: 1px solid $borderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--highlight {
|
||||
color: #2c815b;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion {
|
||||
border-color: $borderColor;
|
||||
padding: 0;
|
||||
|
||||
.algolia-docsearch-suggestion--category-header {
|
||||
padding: 5px 10px;
|
||||
margin-top: 0;
|
||||
background: $accentColor;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
|
||||
.algolia-docsearch-suggestion--highlight {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0;
|
||||
color: $textColor;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--subcategory-column {
|
||||
vertical-align: top;
|
||||
padding: 5px 7px 5px 5px;
|
||||
border-color: $borderColor;
|
||||
background: #f1f3f5;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--subcategory-column-text {
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-docsearch-footer {
|
||||
border-color: $borderColor;
|
||||
}
|
||||
|
||||
.ds-cursor .algolia-docsearch-suggestion--content {
|
||||
background-color: #e7edf3 !important;
|
||||
color: $textColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $MQMobile) {
|
||||
.algolia-search-wrapper {
|
||||
.algolia-autocomplete {
|
||||
.algolia-docsearch-suggestion {
|
||||
.algolia-docsearch-suggestion--subcategory-column {
|
||||
float: none;
|
||||
width: 150px;
|
||||
min-width: 150px;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--content {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ds-dropdown-menu {
|
||||
min-width: 515px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $MQMobile) {
|
||||
.algolia-search-wrapper {
|
||||
.ds-dropdown-menu {
|
||||
min-width: calc(100vw - 4rem) !important;
|
||||
max-width: calc(100vw - 4rem) !important;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--wrapper {
|
||||
padding: 5px 7px 5px 5px !important;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--subcategory-column {
|
||||
padding: 0 !important;
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--subcategory-column-text:after {
|
||||
content: ' > ';
|
||||
font-size: 10px;
|
||||
line-height: 14.4px;
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
margin: -3px 3px 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue