mirror of
https://github.com/pomerium/pomerium.git
synced 2025-05-10 15:47:36 +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: "Recipes", link: "/recipes/" },
|
||||||
{ text: "Community", link: "/community/" }
|
{ text: "Community", link: "/community/" }
|
||||||
],
|
],
|
||||||
|
algolia: {
|
||||||
|
apiKey: "1653e881f3a6c17d3ad37f4d4c428e20",
|
||||||
|
indexName: "pomerium"
|
||||||
|
},
|
||||||
sidebar: {
|
sidebar: {
|
||||||
"/docs/": [
|
"/docs/": [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -1,158 +1,213 @@
|
||||||
<template>
|
<template>
|
||||||
<form
|
<form id="search-form" class="algolia-search-wrapper search-box" role="search">
|
||||||
id="search-form"
|
<input id="algolia-search-input" class="search-query" />
|
||||||
class="algolia-search-wrapper search-box"
|
|
||||||
role="search"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
id="algolia-search-input"
|
|
||||||
class="search-query"
|
|
||||||
>
|
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: ['options'],
|
props: ["options"],
|
||||||
|
|
||||||
mounted () {
|
mounted() {
|
||||||
this.initialize(this.options, this.$lang)
|
this.initialize(this.options, this.$lang);
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
initialize (userOptions, lang) {
|
initialize(userOptions, lang) {
|
||||||
Promise.all([
|
Promise.all([
|
||||||
import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.js'),
|
import(
|
||||||
import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.css')
|
/* webpackChunkName: "docsearch" */ "docsearch.js/dist/cdn/docsearch.min.js"
|
||||||
|
),
|
||||||
|
import(
|
||||||
|
/* webpackChunkName: "docsearch" */ "docsearch.js/dist/cdn/docsearch.min.css"
|
||||||
|
)
|
||||||
]).then(([docsearch]) => {
|
]).then(([docsearch]) => {
|
||||||
docsearch = docsearch.default
|
docsearch = docsearch.default;
|
||||||
const { algoliaOptions = {}} = userOptions
|
const { algoliaOptions = {} } = userOptions;
|
||||||
docsearch(Object.assign(
|
docsearch(
|
||||||
{},
|
Object.assign({}, userOptions, {
|
||||||
userOptions,
|
inputSelector: "#algolia-search-input",
|
||||||
{
|
|
||||||
inputSelector: '#algolia-search-input',
|
|
||||||
// #697 Make docsearch work well at i18n mode.
|
// #697 Make docsearch work well at i18n mode.
|
||||||
algoliaOptions: Object.assign({
|
algoliaOptions: Object.assign(
|
||||||
'facetFilters': [`lang:${lang}`].concat(algoliaOptions.facetFilters || [])
|
{
|
||||||
}, algoliaOptions),
|
facetFilters: [`lang:${lang}`].concat(
|
||||||
|
algoliaOptions.facetFilters || []
|
||||||
|
)
|
||||||
|
},
|
||||||
|
algoliaOptions
|
||||||
|
),
|
||||||
handleSelected: (input, event, suggestion) => {
|
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) {
|
update(options, lang) {
|
||||||
this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">'
|
this.$el.innerHTML =
|
||||||
this.initialize(options, lang)
|
'<input id="algolia-search-input" class="search-query">';
|
||||||
|
this.initialize(options, lang);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
$lang (newValue) {
|
$lang(newValue) {
|
||||||
this.update(this.options, newValue)
|
this.update(this.options, newValue);
|
||||||
},
|
},
|
||||||
|
|
||||||
options (newValue) {
|
options(newValue) {
|
||||||
this.update(newValue, this.$lang)
|
this.update(newValue, this.$lang);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus">
|
<style lang="stylus">
|
||||||
.algolia-search-wrapper
|
.algolia-search-wrapper {
|
||||||
& > span
|
& > span {
|
||||||
vertical-align middle
|
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
|
|
||||||
|
|
||||||
@media (min-width: $MQMobile)
|
.algolia-autocomplete {
|
||||||
.algolia-search-wrapper
|
line-height: normal;
|
||||||
.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)
|
.ds-dropdown-menu {
|
||||||
.algolia-search-wrapper
|
background-color: #fff;
|
||||||
.ds-dropdown-menu
|
border: 1px solid #999;
|
||||||
min-width calc(100vw - 4rem) !important
|
border-radius: 4px;
|
||||||
max-width calc(100vw - 4rem) !important
|
font-size: 16px;
|
||||||
.algolia-docsearch-suggestion--wrapper
|
margin: 6px 0 0;
|
||||||
padding 5px 7px 5px 5px !important
|
padding: 4px;
|
||||||
.algolia-docsearch-suggestion--subcategory-column
|
text-align: left;
|
||||||
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
|
|
||||||
|
|
||||||
|
&: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>
|
</style>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue