From 486f12a80e558addb2b82376218e3fb4e6a6a1e8 Mon Sep 17 00:00:00 2001
From: Soitora <simon.mattila@protonmail.com>
Date: Thu, 30 Apr 2020 18:53:10 +0200
Subject: [PATCH] Switch to Algolia DocSearch (#85)

* Add Algolia

* Overhaul the search

* Add sitemap.xml generator

* Remove SCSS files

* Eject components

* Algolia styling

* More styling x2
---
 package-lock.json                             |  60 +++++-
 package.json                                  |   3 +-
 src/.vuepress/config.js                       |   5 +
 src/.vuepress/config/plugins.js               |   6 +
 src/.vuepress/public/assets/search-icon.svg   |  70 +++++++
 .../theme/components/AlgoliaSearchBox.vue     | 182 ++++++++++++++++++
 src/.vuepress/theme/components/Navbar.vue     | 140 ++++++++++++++
 7 files changed, 463 insertions(+), 3 deletions(-)
 create mode 100644 src/.vuepress/public/assets/search-icon.svg
 create mode 100644 src/.vuepress/theme/components/AlgoliaSearchBox.vue
 create mode 100644 src/.vuepress/theme/components/Navbar.vue

diff --git a/package-lock.json b/package-lock.json
index 9191aa032..d9af56046 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9371,6 +9371,11 @@
 			"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
 			"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": {
 			"version": "4.5.0",
 			"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
@@ -9406,6 +9411,11 @@
 			"integrity": "sha1-5pfwTOXXhSL1TZM4syuBozk+TrM=",
 			"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": {
 			"version": "4.7.0",
 			"resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -11635,8 +11645,7 @@
 		"punycode": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-			"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-			"dev": true
+			"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
 		},
 		"pupa": {
 			"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": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
@@ -13566,6 +13586,14 @@
 				"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": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
@@ -14327,6 +14355,14 @@
 				"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": {
 			"version": "0.0.3",
 			"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"
 			}
 		},
+		"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": {
 			"version": "4.43.0",
 			"resolved": "https://registry.npmjs.org/webpack/-/webpack-4.43.0.tgz",
@@ -14852,6 +14893,16 @@
 			"integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
 			"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": {
 			"version": "3.6.4",
 			"resolved": "https://registry.npmjs.org/when/-/when-3.6.4.tgz",
@@ -14998,6 +15049,11 @@
 			"integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
 			"dev": true
 		},
+		"xmlbuilder": {
+			"version": "13.0.2",
+			"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-13.0.2.tgz",
+			"integrity": "sha512-Eux0i2QdDYKbdbA6AM6xE4m6ZTZr4G4xF9kahI2ukSEMCzwce2eX9WlTI5J3s+NU7hpasFsr8hWIONae7LluAQ=="
+		},
 		"xtend": {
 			"version": "4.0.2",
 			"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index fe200f5c6..d34f9c0ff 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
 		"lodash.groupby": "^4.6.0",
 		"lodash.sortby": "^4.7.0",
 		"material-design-icons": "^3.0.1",
-		"vue-sweetalert2": "^3.0.3"
+		"vue-sweetalert2": "^3.0.3",
+		"vuepress-plugin-sitemap": "^2.3.1"
 	}
 }
diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index 25b517f31..010cc2148 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -11,6 +11,11 @@ module.exports = {
 		docsRepo: 'tachiyomiorg/website',
 		docsDir: 'src',
 		logo: '/assets/media/logo.svg',
+		algolia: {
+			apiKey: 'fc1c45b5a3835e1882cbbf0751dfe705',
+			indexName: 'tachiyomi'
+		},
+		searchPlaceholder: 'Search...',
 		editLinks: true,
 		editLinkText: 'Help us improve this page',
 		nav: require('./config/nav'),
diff --git a/src/.vuepress/config/plugins.js b/src/.vuepress/config/plugins.js
index 591a2b935..ee9c5052d 100644
--- a/src/.vuepress/config/plugins.js
+++ b/src/.vuepress/config/plugins.js
@@ -43,4 +43,10 @@ module.exports = [
 			defaultTitle: ""
 		}
 	],
+	[
+		"vuepress-plugin-sitemap",
+		{
+			hostname: "https://tachiyomi.org"
+		}
+	]
 ];
diff --git a/src/.vuepress/public/assets/search-icon.svg b/src/.vuepress/public/assets/search-icon.svg
new file mode 100644
index 000000000..b206aba78
--- /dev/null
+++ b/src/.vuepress/public/assets/search-icon.svg
@@ -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>
\ No newline at end of file
diff --git a/src/.vuepress/theme/components/AlgoliaSearchBox.vue b/src/.vuepress/theme/components/AlgoliaSearchBox.vue
new file mode 100644
index 000000000..b075d77a4
--- /dev/null
+++ b/src/.vuepress/theme/components/AlgoliaSearchBox.vue
@@ -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>
diff --git a/src/.vuepress/theme/components/Navbar.vue b/src/.vuepress/theme/components/Navbar.vue
new file mode 100644
index 000000000..4fdd6028c
--- /dev/null
+++ b/src/.vuepress/theme/components/Navbar.vue
@@ -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>