Merge pull request #167 from scalar-labs/add-language-dropdown

Add language dropdown menu to see docs in Japanese
scalar-labs · Feb 26, 2024 · cf9235a · cf9235a
2 parents f9f2ac5 + 297711c
commit cf9235a
Show file tree

Hide file tree

Showing 13 changed files with 378 additions and 27 deletions.
diff --git a/_data/navigation.yml b/_data/navigation.yml
@@ -24,6 +24,14 @@ main:
   - title: "&nbsp;&nbsp;&nbsp;Support&nbsp;&nbsp;&nbsp;"
     url: https://www.scalar-labs.com/support/
 
+languages:
+  - language-title-top: ""
+    language-children:
+      - language-title: "English"
+        language-url: /docs/
+      - language-ja-jp-title: "日本語"
+        language-ja-jp-url: /docs/ja-jp/
+
 # This navigation is for adding product editions that appear in the dropdown menu.
 editions:
   - edition-top-title: "" # This title is taken from the `edition_label` in `_data/ui-text.yml`.

diff --git a/_home/ja-jp/404.md b/_home/ja-jp/404.md
@@ -0,0 +1,12 @@
+---
+excerpt: "申し訳ありませんが、お探しのページは見つかりませんでした。"
+sitemap: false
+permalink: /ja-jp/404.html
+toc: false
+---
+
+# 404 - ページが見つかりません
+
+申し訳ありませんが、お探しのページは見つかりませんでした。
+
+[トップページに戻る](/docs/ja-jp/){: .btn .btn--primary}
diff --git a/_home/ja-jp/home.md b/_home/ja-jp/home.md
@@ -0,0 +1,63 @@
+---
+layout: parent-product-home
+permalink: /docs/ja-jp/
+hidden: true
+toc: false
+product_row:
+  - image_path: 
+    alt: ""
+    title: "Supported Databases" # This title will appear in the header for the feature item on the home page; space is limited, so keep it short but descriptive; try to keep all feature item titles around the same length
+    excerpt: "Databases that ScalarDB supports" # Add a brief product description (approximately 8 words)
+    url: "docs/latest/scalardb-supported-databases" # Add a relative URL to the product home page doc that is within this parent product docs site
+    btn_class: "btn--primary"
+    btn_label: "Get started" # This can be any other type of call to action
+  - image_path: 
+    alt: ""
+    title: "ScalarDB Schema Loader" # This title will appear in the header for the feature item on the home page; space is limited, so keep it short but descriptive; try to keep all feature item titles around the same length
+    excerpt: "Tool for creating schema" # Add a brief product description (approximately 8 words)
+    url: "docs/latest/schema-loader" # Add a relative URL to the product home page doc that is within this parent product docs site
+    btn_class: "btn--primary"
+    btn_label: "Get started" # This can be any other type of call to action
+  - image_path: 
+    alt: ""
+    title: "ScalarDB Cluster" # This title will appear in the header for the feature item on the home page; space is limited, so keep it short but descriptive; try to keep all feature item titles around the same length
+    excerpt: "Clustering solution for ScalarDB" # Add a brief product description (approximately 8 words)
+    url: "docs/latest/scalardb-cluster/" # Add a relative URL to the product home page doc that is within this parent product docs site
+    btn_class: "btn--primary"
+    btn_label: "Get started" # This can be any other type of call to action
+recommended_row:
+  - image_path: assets/images/book-green.svg # Choose the appropriate icon for the doc recommended here: (`book-green.svg`, `cloud-purple.svg`, `page-blue.svg`)
+    alt: ""
+    title: "Getting Started with ScalarDB" # The title for a recommended doc will appear in the header for the feature item on the home page; space is limited, so keep it short but descriptive; try to keep all feature item titles around the same length
+    excerpt: "Set up a simple electronic money app" # Add a brief description about the doc (approximately 8 words)
+    url: "docs/latest/getting-started-with-scalardb" # Add a relative URL to the product home page doc that is within this parent product docs site
+    btn_class: "btn--primary"
+    btn_label: "Learn more" # This can be any other type of call to action
+  - image_path: assets/images/book-green.svg # Choose the appropriate icon for the doc recommended here: (`book-green.svg`, `cloud-purple.svg`, `page-blue.svg`)
+    alt: ""
+    title: "ScalarDB Samples" # The title for a recommended doc will appear in the header for the feature item on the home page; space is limited, so keep it short but descriptive; try to keep all feature item titles around the same length
+    excerpt: "Set up sample applications" # Add a brief description about the doc (approximately 8 words)
+    url: "docs/latest/scalardb-samples/README" # Add a relative URL to the product home page doc that is within this parent product docs site
+    btn_class: "btn--primary"
+    btn_label: "Learn more" # This can be any other type of call to action
+  - image_path: assets/images/page-blue.svg # Choose the appropriate icon for the doc recommended here: (`book-green.svg`, `cloud-purple.svg`, `page-blue.svg`)
+    alt: ""
+    title: "ScalarDB Benchmarks" # The title for a recommended doc will appear in the header for the feature item on the home page; space is limited, so keep it short but descriptive; try to keep all feature item titles around the same length
+    excerpt: "Run benchmark programs for ScalarDB" # Add a brief description about the doc (approximately 8 words)
+    url: "docs/latest/scalardb-benchmarks/README" # Add a relative URL to the product home page doc that is within this parent product docs site
+    btn_class: "btn--primary"
+    btn_label: "Learn more" # This can be any other type of call to action
+---
+
+# ScalarDB Enterprise Documentation
+
+ScalarDB is a universal transaction manager that achieves:
+
+* Database/storage-agnostic ACID transactions in a scalable manner even if an underlying database or storage is not ACID compliant.
+* Multi-storage/database/service ACID transactions that can span multiple (possibly different) databases, storages, and services.
+
+{% include product_row %}
+
+## Recommended
+
+{% include recommended_row %}
diff --git a/_home/ja-jp/index.md b/_home/ja-jp/index.md
@@ -0,0 +1,6 @@
+---
+title: 
+permalink: /ja-jp/
+redirect_to:
+  - http://scalardb.scalar-labs.com/docs/ja-jp/
+---
diff --git a/_home/ja-jp/terms.md b/_home/ja-jp/terms.md
@@ -0,0 +1,8 @@
+---
+permalink: /ja-jp/terms/
+toc: false
+---
+
+# プライバシーポリシー
+
+株式会社スカラーのプライバシーポリシーの詳細については、[株式会社Scalarのプライバシーポリシー](https://www.scalar-labs.com/ja/privacy-policy/)をご覧ください。
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
@@ -22,9 +22,15 @@
             <ul class="version-dropdown-content">
               {% for version-children in link.version-children %}
                 <li>
-                  <a href="{{ site.baseurl }}{{ version-children.version-url }}">
-                    <span>{{ version-children.version-title }}</span>
-                  </a>
+                  {% if page.url contains '/docs/ja-jp/' %}
+                    <a href="{{ site.baseurl }}{{ version-children.version-ja-jp-url }}">
+                      <span>{{ version-children.version-ja-jp-title }}</span>
+                    </a>
+                  {% else %}
+                    <a href="{{ site.baseurl }}{{ version-children.version-url }}">
+                      <span>{{ version-children.version-title }}</span>
+                    </a>
+                  {% endif %}
                 </li>
               {% endfor %}
             </ul>

diff --git a/_layouts/page.html b/_layouts/page.html
@@ -3,8 +3,17 @@
 permalink: /:collection/:path/
 ---
 
-<div id="main" role="main">
+{% assign breadcrumbs_enabled = site.breadcrumbs %}
+{% if page.breadcrumbs != null %}
+  {% assign breadcrumbs_enabled = page.breadcrumbs %}
+{% endif %}
+{% if page.url != "/" and breadcrumbs_enabled %}
+  {% unless paginator %}
+    {% include breadcrumbs.html %}
+  {% endunless %}
+{% endif %}
 
+<div id="main" role="main">
   {% include sidebar.html %}
 
   <article class="page h-entry" itemscope itemtype="https://schema.org/CreativeWork">
@@ -13,17 +22,6 @@
     {% if page.date %}<meta itemprop="datePublished" content="{{ page.date | date_to_xmlschema }}">{% endif %}
     {% if page.last_modified_at %}<meta itemprop="dateModified" content="{{ page.last_modified_at | date_to_xmlschema }}">{% endif %}
 
-    <!-- The following breadcrumb section was above the `<div id="main" role="main">` section, which caused the breadcrumbs to be hidden behind the masthead (modified by josh-wong). -->
-    {% assign breadcrumbs_enabled = site.breadcrumbs %}
-    {% if page.breadcrumbs != null %}
-      {% assign breadcrumbs_enabled = page.breadcrumbs %}
-    {% endif %}
-    {% if page.url != "/" and breadcrumbs_enabled %}
-      {% unless paginator %}
-        {% include breadcrumbs.html %}
-      {% endunless %}
-    {% endif %}
-
     <div class="page__inner-wrap">
       {% unless page.header.overlay_color or page.header.overlay_image %}
         <header>
@@ -35,6 +33,38 @@
       {% endunless %}
 
       <section class="page__content e-content" itemprop="text">
+         <!-- Adds support for the language dropdown menu for the languages listed in `_data/navigation.yml`. For some reason, adding this dropdown menu to `_includes.masthead.html` results in broken links, regardless of trying to use a variety of logic in the  Liquid language (added by josh-wong). -->
+        <!-- ATTENTION: The following content within the `nav` tag contains the language dropdown. Enable this dropdown after we have added all Japanese docs to the ScalarDB docs site.
+        <nav id="site-nav" class="language-greedy-nav">
+          <ul class="language-visible-links">
+            {%- for link in site.data.navigation.languages -%}
+            {% assign class = nil %}
+            {% if page.language-url contains link.language-url %}
+            {% assign class = 'active' %}
+            {% endif %}
+            {% if link.language-children %}
+            <li class="language-dropdown {{ class }}">
+              <label for="touch-language"><a data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fas fa-globe fa-lg language-toggle" aria-hidden="true"></i><span class="language-dropdown-text">{% if page.url contains "docs/ja-jp" %}言語{% else %}Language{% endif %}<svg class="language-dropdown-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path></svg></span></a></label>
+              <input type="checkbox" id="touch-language">
+              <ul class="language-dropdown-content">
+                {% for language-children in link.language-children %}
+                <li>
+                  <a href="{{ page.url | replace: 'docs/ja-jp', 'docs' }}">
+                    <span>{{ language-children.language-title }}</span>
+                  </a>
+                </li>
+                <li>
+                  <a href="{{ page.url | replace: 'docs', 'docs/ja-jp' | replace: 'docs/ja-jp/ja-jp', 'docs/ja-jp' }}">
+                    <span>{{ language-children.language-ja-jp-title }}</span>
+                  </a>
+                </li>
+                {% endfor %}
+              </ul>
+            </li>
+            {% endif %}
+            {% endfor %}
+          </ul>
+        </nav> -->
         {% if page.toc %}
           <aside class="sidebar__right {% if page.toc_sticky %}sticky{% endif %}">
             <nav class="toc">

diff --git a/_layouts/parent-product-home.html b/_layouts/parent-product-home.html
@@ -3,6 +3,16 @@
 permalink: /:collection/:path/
 ---
 
+{% assign breadcrumbs_enabled = site.breadcrumbs %}
+{% if page.breadcrumbs != null %}
+  {% assign breadcrumbs_enabled = page.breadcrumbs %}
+{% endif %}
+{% if page.url != "/" and breadcrumbs_enabled %}
+  {% unless paginator %}
+    {% include breadcrumbs.html %}
+  {% endunless %}
+{% endif %}
+
 <div id="main" role="main">
   {% include sidebar.html %}
 
@@ -12,17 +22,6 @@
     {% if page.date %}<meta itemprop="datePublished" content="{{ page.date | date_to_xmlschema }}">{% endif %}
     {% if page.last_modified_at %}<meta itemprop="dateModified" content="{{ page.last_modified_at | date_to_xmlschema }}">{% endif %}
 
-    <!-- The following breadcrumb section was above the `<div id="main" role="main">` section, which caused the breadcrumbs to be hidden behind the masthead (modified by josh-wong). -->
-      {% assign breadcrumbs_enabled = site.breadcrumbs %}
-      {% if page.breadcrumbs != null %}
-        {% assign breadcrumbs_enabled = page.breadcrumbs %}
-      {% endif %}
-      {% if page.url != "/" and breadcrumbs_enabled %}
-        {% unless paginator %}
-          {% include breadcrumbs.html %}
-        {% endunless %}
-      {% endif %}
-
     <div class="page__inner-wrap">
       {% unless page.header.overlay_color or page.header.overlay_image %}
         <header>
@@ -43,6 +42,39 @@
           </aside>
         {% endif %}
         {{ content }}
+        <!-- Adds support for the language dropdown menu for the languages listed in `_data/navigation.yml`. For some reason, adding this dropdown menu to `_includes.masthead.html` results in broken links, regardless of trying to use a variety of logic in the  Liquid language (added by josh-wong). -->
+         <!-- ATTENTION: The following content within the `nav` tag contains the language dropdown. Enable this dropdown after we have added all Japanese docs to the ScalarDB docs site.
+        <nav id="site-nav" class="language-greedy-nav">
+          <ul class="language-visible-links">
+            {%- for link in site.data.navigation.languages -%}
+            {% assign class = nil %}
+            {% if page.language-url contains link.language-url %}
+            {% assign class = 'active' %}
+            {% endif %}
+            {% if link.language-children %}
+            <li class="language-dropdown {{ class }}">
+              <label for="touch-language"><a data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fas fa-globe fa-lg language-toggle" aria-hidden="true"></i><span class="language-dropdown-text">{% if page.url contains "docs/ja-jp" %}言語{% else %}Language{% endif %}<svg class="language-dropdown-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path></svg></span></a></label>
+              <input type="checkbox" id="touch-language">
+              <ul class="language-dropdown-content">
+                {% for language-children in link.language-children %}
+                <li>
+                  <a href="{{ page.url | replace: 'docs/ja-jp', 'docs' }}">
+                    <span>{{ language-children.language-title }}</span>
+                  </a>
+                </li>
+                <li>
+                  <a href="{{ page.url | replace: 'docs', 'docs/ja-jp' | replace: 'docs/ja-jp/ja-jp', 'docs/ja-jp' }}">
+                    <span>{{ language-children.language-ja-jp-title }}</span>
+                  </a>
+                </li>
+                {% endfor %}
+              </ul>
+            </li>
+            {% endif %}
+            {% endfor %}
+          </ul>
+        </nav>
+        -->
         {% if page.link %}<div><a href="{{ page.link }}" class="btn btn--primary">{{ site.data.ui-text[site.locale].ext_link_label | default: "Direct Link" }}</a></div>{% endif %}
       </section>
 

diff --git a/_sass/minimal-mistakes.scss b/_sass/minimal-mistakes.scss
@@ -30,6 +30,7 @@
 @import "minimal-mistakes/search";
 @import "minimal-mistakes/syntax";
 @import "minimal-mistakes/tabbed-content"; /* Added to support tabbed content (added by josh-wong) */
+@import "minimal-mistakes/language-dropdown"; /* Added to support the language dropdown (added by josh-wong) */
 
 /* Utility classes */
 @import "minimal-mistakes/utilities";