Add version view & modify theme

docs/.vuepress/components/versions.vue

@@ -0,0 +1,75 @@
+<template>
+  <span class="nav-item" v-if="options && options.length > 0">
+    Version:
+    <select v-model="selected" @change="onChange">
+      <option v-for="option in options" :value="option.value">
+        {{ option.text }}
+      </option>
+    </select>
+  </span>
+</template>
+
+<script>
+import Axios from "axios";
+export default {
+  data() {
+    return {
+      selected: undefined,
+      options: [],
+    };
+  },
+  created: async function () {
+    try {
+      let res = await Axios.get(
+        "https://api.github.com/repos/airbus/scikit-decide/git/trees/gh-pages"
+      );
+      const versionNode = res.data.tree.find((e) => {
+        return e.path.toLowerCase() === "version";
+      });
+      res = await Axios.get(versionNode.url);
+      this.options = res.data.tree.map((e) => {
+        return { value: e.path, text: e.path };
+      });
+      this.options.sort((e1, e2) => {
+        const e1Arr = e1.text.split(".");
+        const e2Arr = e2.text.split(".");
+        for (let i = 0; i < e1Arr.length && i < e2Arr.length; i++) {
+          const e1V = parseInt(e1Arr[i]);
+          const e2V = parseInt(e2Arr[i]);
+          if (e1V !== e2V) return e2V - e1V;
+          if (e1Arr[i] !== e2Arr[i]) return e2Arr[i] - e1Arr[i];
+        }
+        return e1.text === e2.text ? 0 : e2.text < e1.text ? -1 : 1;
+      });
+      this.options.unshift({ value: "main", text: "main" });
+      const path = window.location.pathname.toLowerCase();
+      if (path.startsWith("/scikit-decide/version/")) {
+        const start = 23;
+        const end = path.indexOf("/", start);
+        this.selected = path.substring(start, end);
+      } else {
+        this.selected = "main";
+      }
+    } catch (ex) {}
+  },
+  methods: {
+    onChange(event) {
+      const targetVersionPath =
+        this.selected === "main" ? "" : `/version/${this.selected}`;
+      const path = window.location.pathname.toLowerCase();
+      let startIdx = 14; // len("/scikit-decide")
+      const versionIdx = path.indexOf("/version/");
+      if (versionIdx >= 0) {
+        startIdx = versionIdx + 9; // len("/version/")
+      }
+
+      const endIdx = path.indexOf("/", startIdx);
+
+      window.location.pathname =
+        window.location.pathname.substring(0, 14) +
+        targetVersionPath +
+        window.location.pathname.substring(endIdx);
+    },
+  },
+};
+</script>

docs/.vuepress/config.js

@@ -0,0 +1,55 @@
+module.exports = {
+    lang: 'en-US',
+    title: 'Scikit-decide',
+    description: 'This is scikit-decide documentation site',
+    base: `/scikit-decide/${process.env.DOCS_VERSION_PATH || '/'}`,
+
+    head: [
+        ['script', {}, `console.log('base -> ' + process.env.DOCS_VERSION_PATH);`],
+    ],
+
+    locales: {
+        '/': {
+            lang: 'en-US',
+            title: 'Scikit-decide',
+            description: 'This is scikit-decide documentation',
+        },
+    },
+
+    themeConfig: {
+        repo: 'airbus/scikit-decide',
+        logo: '/logo.svg',
+        editLinks: false,
+        docsDir: '',
+        editLinkText: '',
+        lastUpdated: false,
+        locales: {
+            '/': {
+                selectLanguageName: 'en-US',
+            },
+        },
+        nav: [
+            {
+                text: 'Home',
+                link: '/'
+            },
+            {
+                text: 'Guide',
+                link: '/guide/'
+            },
+            {
+                text: 'Reference',
+                link: '/reference/'
+            },
+        ],
+        sidebar: 'auto',
+    },
+
+    plugins: {
+        '@vuepress/plugin-back-to-top': {},
+        'mathjax': {
+            target: 'svg',
+            macros: { '*': '\\times' }
+        },
+    },
+}

docs/.vuepress/theme/components/AlgoliaSearchBox.vue

@@ -0,0 +1,178 @@
+<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('/NotifyBC', '');
+              const _hash = decodeURIComponent(hash);
+              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
+  .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-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>