Feature: Add language navigation

2 years ago · 0a6ff000d2
parent 6cbe6aa8b9
commit 0a6ff000d2
3 changed files with 33 additions and 0 deletions
--- a/docs/_navbar.md
+++ b/docs/_navbar.md
@ -0,0 +1,20 @@
+- Translations
+  - [:uk: English](./README)
+  - [<img class="emoji" src="https://github.githubassets.com/images/icons/emoji/unicode/1f1e7-1f1e9.png"/> বাংলা](./README.bn)
+  - [:cn: 中文(中国)](./README.zh-cn)
+  - [:cn: 中文(台湾)](./README.zh-tw)
+  - [:es: Español](./README.es)
+  - [<img class="emoji" src="https://github.githubassets.com/images/icons/emoji/unicode/1f1eb-1f1f7.png"/> Français](./README.fr)
+  - [<img class="emoji" src="https://github.githubassets.com/images/icons/emoji/unicode/1f1ec-1f1f7.png"/> Greek](./README.el)
+  - [<img class="emoji" src="https://github.githubassets.com/images/icons/emoji/unicode/1f1ee-1f1f3.png"/> हिन्दी](./README.hi)
+  - [<img class="emoji" src="https://github.githubassets.com/images/icons/emoji/unicode/1f1f2-1f1fe.png"/> Bahasa Melayu](./README.ms)
+  - [<img class="emoji" src="https://github.githubassets.com/images/icons/emoji/unicode/1f1ee-1f1f3.png"/> മലയാളം](./README.ml)
+  - [<img class="emoji" src="https://github.githubassets.com/images/icons/emoji/unicode/1f1ee-1f1f3.png"/> தமிழ்](./README.ta)
+  - [<img class="emoji" src="https://github.githubassets.com/images/icons/emoji/unicode/1f1ee-1f1f3.png"/> తెలుగు](./README.te)
+  - [<img class="emoji" src="https://github.githubassets.com/images/icons/emoji/unicode/1f1ee-1f1e9.png"/> Bahasa Indonesia](./README.id)
+  - [:it: Italiano](./README.it)
+  - [:jp: 日本語](./README.ja)
+  - [<img class="emoji" src="https://github.githubassets.com/images/icons/emoji/unicode/1f1f3-1f1f1.png"/> Nederlands](./README.nl)
+  - [<img class="emoji" src="https://github.githubassets.com/images/icons/emoji/unicode/1f1f3-1f1f5.png"/> नेपाली](./README.np)
+  - [<img class="emoji" src="https://github.githubassets.com/images/icons/emoji/unicode/1f1f5-1f1f9.png"/> Português](./README.pt)
+  - [:ru: Русский](./README.ru)
--- a/index.css
+++ b/index.css
@ -0,0 +1,3 @@
+.app-nav ul li {
+  width: max-content;
+}
--- a/index.html
+++ b/index.html
@ -8,6 +8,7 @@
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="icon" type="image/png" href="images/favicon.png">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"></head>
+  <link rel="stylesheet" href="/index.css"></head>
 <body>
  <div id="app"></div>
  <script type="text/javascript">
@ -18,10 +19,19 @@
    })(window, document, "clarity", "script", "ekxr1n6fgy");

    window.$docsify = {
+      loadNavbar: 'docs/_navbar.md',
      name: 'Web Development for Beginners: A Curriculum',
      repo: 'https://github.com/microsoft/Web-Dev-For-Beginners',
      relativePath: true,
      auto2top: false,
+      alias: {
+        '/(README.*)': '/translations/$1',
+        '/((?!README).*)/README.(.*)': '$1/translations/README.$2',
+
+        // handle english file, since English files isn't in translation folders
+        '/(README$)': '/$1',
+        '/((?!README).*)/(README$)': '$1/$2'
+      }
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>