mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-12-21 15:41:59 +01:00
Switch to Algolia DocSearch (#85)
* Add Algolia * Overhaul the search * Add sitemap.xml generator * Remove SCSS files * Eject components * Algolia styling * More styling x2
This commit is contained in:
Soitora
GitHub
parent
c49576fcee
commit
486f12a80e
60
package-lock.json
generated
60
package-lock.json
generated
@ -9371,6 +9371,11 @@
|
|||||||
"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
|
"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"lodash.chunk": {
|
||||||
|
"version": "4.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.chunk/-/lodash.chunk-4.2.0.tgz",
|
||||||
|
"integrity": "sha1-ZuXOH3btJ7QwPYxlEujRIW6BBrw="
|
||||||
|
},
|
||||||
"lodash.clonedeep": {
|
"lodash.clonedeep": {
|
||||||
"version": "4.5.0",
|
"version": "4.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
|
||||||
@ -9406,6 +9411,11 @@
|
|||||||
"integrity": "sha1-5pfwTOXXhSL1TZM4syuBozk+TrM=",
|
"integrity": "sha1-5pfwTOXXhSL1TZM4syuBozk+TrM=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"lodash.padstart": {
|
||||||
|
"version": "4.6.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.padstart/-/lodash.padstart-4.6.1.tgz",
|
||||||
|
"integrity": "sha1-0uPuv/DZ05rVD1y9G1KnvOa7YRs="
|
||||||
|
},
|
||||||
"lodash.sortby": {
|
"lodash.sortby": {
|
||||||
"version": "4.7.0",
|
"version": "4.7.0",
|
||||||
"resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
|
||||||
@ -11635,8 +11645,7 @@
|
|||||||
"punycode": {
|
"punycode": {
|
||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
|
||||||
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
|
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"pupa": {
|
"pupa": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
@ -12536,6 +12545,17 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"sitemap": {
|
||||||
|
"version": "3.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/sitemap/-/sitemap-3.2.2.tgz",
|
||||||
|
"integrity": "sha512-TModL/WU4m2q/mQcrDgNANn0P4LwprM9MMvG4hu5zP4c6IIKs2YLTu6nXXnNr8ODW/WFtxKggiJ1EGn2W0GNmg==",
|
||||||
|
"requires": {
|
||||||
|
"lodash.chunk": "^4.2.0",
|
||||||
|
"lodash.padstart": "^4.6.1",
|
||||||
|
"whatwg-url": "^7.0.0",
|
||||||
|
"xmlbuilder": "^13.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"slash": {
|
"slash": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
|
||||||
@ -13566,6 +13586,14 @@
|
|||||||
"punycode": "^2.1.1"
|
"punycode": "^2.1.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"tr46": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
|
||||||
|
"integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=",
|
||||||
|
"requires": {
|
||||||
|
"punycode": "^2.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"trim-newlines": {
|
"trim-newlines": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
|
||||||
@ -14327,6 +14355,14 @@
|
|||||||
"markdown-it-container": "^2.0.0"
|
"markdown-it-container": "^2.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"vuepress-plugin-sitemap": {
|
||||||
|
"version": "2.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/vuepress-plugin-sitemap/-/vuepress-plugin-sitemap-2.3.1.tgz",
|
||||||
|
"integrity": "sha512-n+8lbukhrKrsI9H/EX0EBgkE1pn85LAQFvQ5dIvrZP4Kz6JxPOPPNTQmZMhahQV1tXbLZQCEN7A1WZH4x+arJQ==",
|
||||||
|
"requires": {
|
||||||
|
"sitemap": "^3.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"vuepress-plugin-smooth-scroll": {
|
"vuepress-plugin-smooth-scroll": {
|
||||||
"version": "0.0.3",
|
"version": "0.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/vuepress-plugin-smooth-scroll/-/vuepress-plugin-smooth-scroll-0.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/vuepress-plugin-smooth-scroll/-/vuepress-plugin-smooth-scroll-0.0.3.tgz",
|
||||||
@ -14356,6 +14392,11 @@
|
|||||||
"minimalistic-assert": "^1.0.0"
|
"minimalistic-assert": "^1.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"webidl-conversions": {
|
||||||
|
"version": "4.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
|
||||||
|
"integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="
|
||||||
|
},
|
||||||
"webpack": {
|
"webpack": {
|
||||||
"version": "4.43.0",
|
"version": "4.43.0",
|
||||||
"resolved": "https://registry.npmjs.org/webpack/-/webpack-4.43.0.tgz",
|
"resolved": "https://registry.npmjs.org/webpack/-/webpack-4.43.0.tgz",
|
||||||
@ -14852,6 +14893,16 @@
|
|||||||
"integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
|
"integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"whatwg-url": {
|
||||||
|
"version": "7.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
|
||||||
|
"integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==",
|
||||||
|
"requires": {
|
||||||
|
"lodash.sortby": "^4.7.0",
|
||||||
|
"tr46": "^1.0.1",
|
||||||
|
"webidl-conversions": "^4.0.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"when": {
|
"when": {
|
||||||
"version": "3.6.4",
|
"version": "3.6.4",
|
||||||
"resolved": "https://registry.npmjs.org/when/-/when-3.6.4.tgz",
|
"resolved": "https://registry.npmjs.org/when/-/when-3.6.4.tgz",
|
||||||
@ -14998,6 +15049,11 @@
|
|||||||
"integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
|
"integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"xmlbuilder": {
|
||||||
|
"version": "13.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-13.0.2.tgz",
|
||||||
|
"integrity": "sha512-Eux0i2QdDYKbdbA6AM6xE4m6ZTZr4G4xF9kahI2ukSEMCzwce2eX9WlTI5J3s+NU7hpasFsr8hWIONae7LluAQ=="
|
||||||
|
},
|
||||||
"xtend": {
|
"xtend": {
|
||||||
"version": "4.0.2",
|
"version": "4.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
|
||||||
|
|||||||
@ -34,6 +34,7 @@
|
|||||||
"lodash.groupby": "^4.6.0",
|
"lodash.groupby": "^4.6.0",
|
||||||
"lodash.sortby": "^4.7.0",
|
"lodash.sortby": "^4.7.0",
|
||||||
"material-design-icons": "^3.0.1",
|
"material-design-icons": "^3.0.1",
|
||||||
"vue-sweetalert2": "^3.0.3"
|
"vue-sweetalert2": "^3.0.3",
|
||||||
|
"vuepress-plugin-sitemap": "^2.3.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -11,6 +11,11 @@ module.exports = {
|
|||||||
docsRepo: 'tachiyomiorg/website',
|
docsRepo: 'tachiyomiorg/website',
|
||||||
docsDir: 'src',
|
docsDir: 'src',
|
||||||
logo: '/assets/media/logo.svg',
|
logo: '/assets/media/logo.svg',
|
||||||
|
algolia: {
|
||||||
|
apiKey: 'fc1c45b5a3835e1882cbbf0751dfe705',
|
||||||
|
indexName: 'tachiyomi'
|
||||||
|
},
|
||||||
|
searchPlaceholder: 'Search...',
|
||||||
editLinks: true,
|
editLinks: true,
|
||||||
editLinkText: 'Help us improve this page',
|
editLinkText: 'Help us improve this page',
|
||||||
nav: require('./config/nav'),
|
nav: require('./config/nav'),
|
||||||
|
|||||||
@ -43,4 +43,10 @@ module.exports = [
|
|||||||
defaultTitle: ""
|
defaultTitle: ""
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
[
|
||||||
|
"vuepress-plugin-sitemap",
|
||||||
|
{
|
||||||
|
hostname: "https://tachiyomi.org"
|
||||||
|
}
|
||||||
|
]
|
||||||
];
|
];
|
||||||
|
|||||||
70
src/.vuepress/public/assets/search-icon.svg
Normal file
70
src/.vuepress/public/assets/search-icon.svg
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.2" width="4.23mm" height="4.23mm" viewBox="0 0 423 423" preserveAspectRatio="xMidYMid" fill-rule="evenodd" stroke-width="28.222" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:presentation="http://sun.com/xmlns/staroffice/presentation" xmlns:smil="http://www.w3.org/2001/SMIL20/" xmlns:anim="urn:oasis:names:tc:opendocument:xmlns:animation:1.0" xml:space="preserve">
|
||||||
|
<defs class="ClipPathGroup">
|
||||||
|
<clipPath id="presentation_clip_path" clipPathUnits="userSpaceOnUse">
|
||||||
|
<rect x="0" y="0" width="423" height="423"/>
|
||||||
|
</clipPath>
|
||||||
|
<clipPath id="presentation_clip_path_shrink" clipPathUnits="userSpaceOnUse">
|
||||||
|
<rect x="0" y="0" width="423" height="423"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
<defs class="TextShapeIndex">
|
||||||
|
<g ooo:slide="id1" ooo:id-list="id3"/>
|
||||||
|
</defs>
|
||||||
|
<defs class="EmbeddedBulletChars">
|
||||||
|
<g id="bullet-char-template-57356" transform="scale(0.00048828125,-0.00048828125)">
|
||||||
|
<path d="M 580,1141 L 1163,571 580,0 -4,571 580,1141 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="bullet-char-template-57354" transform="scale(0.00048828125,-0.00048828125)">
|
||||||
|
<path d="M 8,1128 L 1137,1128 1137,0 8,0 8,1128 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="bullet-char-template-10146" transform="scale(0.00048828125,-0.00048828125)">
|
||||||
|
<path d="M 174,0 L 602,739 174,1481 1456,739 174,0 Z M 1358,739 L 309,1346 659,739 1358,739 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="bullet-char-template-10132" transform="scale(0.00048828125,-0.00048828125)">
|
||||||
|
<path d="M 2015,739 L 1276,0 717,0 1260,543 174,543 174,936 1260,936 717,1481 1274,1481 2015,739 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="bullet-char-template-10007" transform="scale(0.00048828125,-0.00048828125)">
|
||||||
|
<path d="M 0,-2 C -7,14 -16,27 -25,37 L 356,567 C 262,823 215,952 215,954 215,979 228,992 255,992 264,992 276,990 289,987 310,991 331,999 354,1012 L 381,999 492,748 772,1049 836,1024 860,1049 C 881,1039 901,1025 922,1006 886,937 835,863 770,784 769,783 710,716 594,584 L 774,223 C 774,196 753,168 711,139 L 727,119 C 717,90 699,76 672,76 641,76 570,178 457,381 L 164,-76 C 142,-110 111,-127 72,-127 30,-127 9,-110 8,-76 1,-67 -2,-52 -2,-32 -2,-23 -1,-13 0,-2 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="bullet-char-template-10004" transform="scale(0.00048828125,-0.00048828125)">
|
||||||
|
<path d="M 285,-33 C 182,-33 111,30 74,156 52,228 41,333 41,471 41,549 55,616 82,672 116,743 169,778 240,778 293,778 328,747 346,684 L 369,508 C 377,444 397,411 428,410 L 1163,1116 C 1174,1127 1196,1133 1229,1133 1271,1133 1292,1118 1292,1087 L 1292,965 C 1292,929 1282,901 1262,881 L 442,47 C 390,-6 338,-33 285,-33 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="bullet-char-template-9679" transform="scale(0.00048828125,-0.00048828125)">
|
||||||
|
<path d="M 813,0 C 632,0 489,54 383,161 276,268 223,411 223,592 223,773 276,916 383,1023 489,1130 632,1184 813,1184 992,1184 1136,1130 1245,1023 1353,916 1407,772 1407,592 1407,412 1353,268 1245,161 1136,54 992,0 813,0 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="bullet-char-template-8226" transform="scale(0.00048828125,-0.00048828125)">
|
||||||
|
<path d="M 346,457 C 273,457 209,483 155,535 101,586 74,649 74,723 74,796 101,859 155,911 209,963 273,989 346,989 419,989 480,963 531,910 582,859 608,796 608,723 608,648 583,586 532,535 482,483 420,457 346,457 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="bullet-char-template-8211" transform="scale(0.00048828125,-0.00048828125)">
|
||||||
|
<path d="M -4,459 L 1135,459 1135,606 -4,606 -4,459 Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="bullet-char-template-61548" transform="scale(0.00048828125,-0.00048828125)">
|
||||||
|
<path d="M 173,740 C 173,903 231,1043 346,1159 462,1274 601,1332 765,1332 928,1332 1067,1274 1183,1159 1299,1043 1357,903 1357,740 1357,577 1299,437 1183,322 1067,206 928,148 765,148 601,148 462,206 346,322 231,437 173,577 173,740 Z"/>
|
||||||
|
</g>
|
||||||
|
</defs>
|
||||||
|
<defs class="TextEmbeddedBitmaps"/>
|
||||||
|
<g>
|
||||||
|
<g id="id2" class="Master_Slide">
|
||||||
|
<g id="bg-id2" class="Background"/>
|
||||||
|
<g id="bo-id2" class="BackgroundObjects"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g class="SlideGroup">
|
||||||
|
<g>
|
||||||
|
<g id="container-id1">
|
||||||
|
<g id="id1" class="Slide" clip-path="url(#presentation_clip_path)">
|
||||||
|
<g class="Page">
|
||||||
|
<g class="Graphic">
|
||||||
|
<g id="id3">
|
||||||
|
<rect class="BoundingBox" stroke="none" fill="none" x="0" y="0" width="423" height="423"/>
|
||||||
|
<path fill="rgb(0,0,0)" stroke="none" d="M 278,300 C 249,324 213,337 175,337 86,337 13,265 13,175 13,86 86,13 175,13 265,13 337,86 337,175 337,214 323,250 300,278 L 404,382 C 410,388 410,398 404,404 398,410 389,410 382,404 L 278,300 278,300 Z M 175,306 C 248,306 306,248 306,175 306,103 248,44 175,44 103,44 44,103 44,175 44,248 103,306 175,306 L 175,306 Z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.7 KiB |
182
src/.vuepress/theme/components/AlgoliaSearchBox.vue
Normal file
182
src/.vuepress/theme/components/AlgoliaSearchBox.vue
Normal file
@ -0,0 +1,182 @@
|
|||||||
|
<template>
|
||||||
|
<form
|
||||||
|
id="search-form"
|
||||||
|
class="algolia-search-wrapper search-box"
|
||||||
|
role="search"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
id="algolia-search-input"
|
||||||
|
class="search-query"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'AlgoliaSearchBox',
|
||||||
|
|
||||||
|
props: ['options'],
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
placeholder: undefined
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
$lang (newValue) {
|
||||||
|
this.update(this.options, newValue)
|
||||||
|
},
|
||||||
|
|
||||||
|
options (newValue) {
|
||||||
|
this.update(newValue, this.$lang)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted () {
|
||||||
|
this.initialize(this.options, this.$lang)
|
||||||
|
this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
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')
|
||||||
|
]).then(([docsearch]) => {
|
||||||
|
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),
|
||||||
|
handleSelected: (input, event, suggestion) => {
|
||||||
|
const { pathname, hash } = new URL(suggestion.url)
|
||||||
|
const routepath = pathname.replace(this.$site.base, '/')
|
||||||
|
this.$router.push(`${routepath}${hash}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
))
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
update (options, lang) {
|
||||||
|
this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">'
|
||||||
|
this.initialize(options, lang)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus">
|
||||||
|
.algolia-search-wrapper
|
||||||
|
& > span
|
||||||
|
vertical-align middle
|
||||||
|
&.search-box
|
||||||
|
input
|
||||||
|
border-radius 6px
|
||||||
|
.algolia-autocomplete
|
||||||
|
line-height normal
|
||||||
|
.ds-dropdown-menu
|
||||||
|
background-color #fff
|
||||||
|
border 1px solid #dde0e5
|
||||||
|
border-radius 4px
|
||||||
|
font-size 16px
|
||||||
|
margin 6px 0 0
|
||||||
|
padding 12px
|
||||||
|
text-align left
|
||||||
|
&:before
|
||||||
|
border-color #dde0e5
|
||||||
|
[class*=ds-dataset-]
|
||||||
|
border none
|
||||||
|
padding 0
|
||||||
|
.ds-suggestions
|
||||||
|
margin-top 0
|
||||||
|
.ds-suggestion
|
||||||
|
border-bottom none
|
||||||
|
.algolia-docsearch-suggestion--text
|
||||||
|
font-size 0.7em
|
||||||
|
.algolia-docsearch-suggestion--highlight
|
||||||
|
color $accentColor
|
||||||
|
font-weight 600
|
||||||
|
background rgba(143,187,237,0.05)
|
||||||
|
padding 0
|
||||||
|
.algolia-docsearch-suggestion
|
||||||
|
border-color $borderColor
|
||||||
|
padding 0
|
||||||
|
.algolia-docsearch-suggestion--category-header
|
||||||
|
border 0px
|
||||||
|
border-bottom 1px solid #EAECEF
|
||||||
|
padding 5px 10px
|
||||||
|
margin-top 0
|
||||||
|
background transparent
|
||||||
|
color $textColor
|
||||||
|
font-weight 400
|
||||||
|
.algolia-docsearch-suggestion--highlight
|
||||||
|
background rgba(255, 255, 255, 0.6)
|
||||||
|
.algolia-docsearch-suggestion--wrapper
|
||||||
|
padding 0
|
||||||
|
padding-top 0.5rem
|
||||||
|
.algolia-docsearch-suggestion--title
|
||||||
|
font-weight 500
|
||||||
|
margin-bottom 0
|
||||||
|
color $textColor
|
||||||
|
.algolia-docsearch-suggestion--subcategory-column
|
||||||
|
vertical-align top
|
||||||
|
padding 5px 7px 5px 5px
|
||||||
|
border-color $borderColor
|
||||||
|
background #fff
|
||||||
|
&:after
|
||||||
|
display none
|
||||||
|
.algolia-docsearch-suggestion--subcategory-column-text
|
||||||
|
color lighten($accentColorSecondary, 40%)
|
||||||
|
font-weight 400
|
||||||
|
.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>
|
||||||
140
src/.vuepress/theme/components/Navbar.vue
Normal file
140
src/.vuepress/theme/components/Navbar.vue
Normal file
@ -0,0 +1,140 @@
|
|||||||
|
<template>
|
||||||
|
<header class="navbar">
|
||||||
|
<SidebarButton @toggle-sidebar="$emit('toggle-sidebar')" />
|
||||||
|
|
||||||
|
<RouterLink
|
||||||
|
:to="$localePath"
|
||||||
|
class="home-link"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
v-if="$site.themeConfig.logo"
|
||||||
|
class="logo"
|
||||||
|
:src="$withBase($site.themeConfig.logo)"
|
||||||
|
:alt="$siteTitle"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-if="$siteTitle"
|
||||||
|
ref="siteName"
|
||||||
|
class="site-name"
|
||||||
|
:class="{ 'can-hide': $site.themeConfig.logo }"
|
||||||
|
>{{ $siteTitle }}</span>
|
||||||
|
</RouterLink>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="links"
|
||||||
|
:style="linksWrapMaxWidth ? {
|
||||||
|
'max-width': linksWrapMaxWidth + 'px'
|
||||||
|
} : {}"
|
||||||
|
>
|
||||||
|
<AlgoliaSearchBox
|
||||||
|
v-if="isAlgoliaSearch"
|
||||||
|
:options="algolia"
|
||||||
|
/>
|
||||||
|
<SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
|
||||||
|
<NavLinks class="can-hide" />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import AlgoliaSearchBox from './AlgoliaSearchBox.vue'
|
||||||
|
import SearchBox from '@SearchBox'
|
||||||
|
import SidebarButton from '@theme/components/SidebarButton.vue'
|
||||||
|
import NavLinks from '@theme/components/NavLinks.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Navbar',
|
||||||
|
|
||||||
|
components: {
|
||||||
|
SidebarButton,
|
||||||
|
NavLinks,
|
||||||
|
SearchBox,
|
||||||
|
AlgoliaSearchBox
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
linksWrapMaxWidth: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
algolia () {
|
||||||
|
return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
|
||||||
|
},
|
||||||
|
|
||||||
|
isAlgoliaSearch () {
|
||||||
|
return this.algolia && this.algolia.apiKey && this.algolia.indexName
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted () {
|
||||||
|
const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
|
||||||
|
const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))
|
||||||
|
const handleLinksWrapWidth = () => {
|
||||||
|
if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
|
||||||
|
this.linksWrapMaxWidth = null
|
||||||
|
} else {
|
||||||
|
this.linksWrapMaxWidth = this.$el.offsetWidth - NAVBAR_VERTICAL_PADDING
|
||||||
|
- (this.$refs.siteName && this.$refs.siteName.offsetWidth || 0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
handleLinksWrapWidth()
|
||||||
|
window.addEventListener('resize', handleLinksWrapWidth, false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function css (el, property) {
|
||||||
|
// NOTE: Known bug, will return 'auto' if style value is 'auto'
|
||||||
|
const win = el.ownerDocument.defaultView
|
||||||
|
// null means not to return pseudo styles
|
||||||
|
return win.getComputedStyle(el, null)[property]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus">
|
||||||
|
$navbar-vertical-padding = 0.7rem
|
||||||
|
$navbar-horizontal-padding = 1.5rem
|
||||||
|
|
||||||
|
.navbar
|
||||||
|
padding $navbar-vertical-padding $navbar-horizontal-padding
|
||||||
|
line-height $navbarHeight - 1.4rem
|
||||||
|
a, span, img
|
||||||
|
display inline-block
|
||||||
|
.logo
|
||||||
|
height $navbarHeight - 1.4rem
|
||||||
|
min-width $navbarHeight - 1.4rem
|
||||||
|
margin-right 0.8rem
|
||||||
|
vertical-align top
|
||||||
|
.site-name
|
||||||
|
font-size 1.3rem
|
||||||
|
font-weight 600
|
||||||
|
color $textColor
|
||||||
|
position relative
|
||||||
|
.links
|
||||||
|
padding-left 1.5rem
|
||||||
|
box-sizing border-box
|
||||||
|
background-color white
|
||||||
|
white-space nowrap
|
||||||
|
font-size 0.9rem
|
||||||
|
position absolute
|
||||||
|
right $navbar-horizontal-padding
|
||||||
|
top $navbar-vertical-padding
|
||||||
|
display flex
|
||||||
|
.search-box
|
||||||
|
flex: 0 0 auto
|
||||||
|
vertical-align top
|
||||||
|
|
||||||
|
@media (max-width: $MQMobile)
|
||||||
|
.navbar
|
||||||
|
padding-left 4rem
|
||||||
|
.can-hide
|
||||||
|
display none
|
||||||
|
.links
|
||||||
|
padding-left 1.5rem
|
||||||
|
.site-name
|
||||||
|
width calc(100vw - 9.4rem)
|
||||||
|
overflow hidden
|
||||||
|
white-space nowrap
|
||||||
|
text-overflow ellipsis
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user