create shortcode for markdown tabs

titusfortner · titusfortner · commit 5a43877326ec · 2021-12-10T22:02:13.000-06:00
diff --git a/website_and_docs/assets/scss/_tabpane-md.scss b/website_and_docs/assets/scss/_tabpane-md.scss
@@ -0,0 +1,8 @@
+.tabpane-md {
+  border-style: outset;
+  border-width: thin;
+}
+
+.tabpane-md .tab-pane {
+  padding: 10px;
+}
diff --git a/website_and_docs/assets/scss/main.scss b/website_and_docs/assets/scss/main.scss
@@ -7,4 +7,5 @@
 @import "images";
 @import "links";
 @import "logo";
-@import "screen";
+@import "screen";
+@import "tabpane-md";
diff --git a/website_and_docs/content/documentation/webdriver/getting_started/install_selenium_library.en.md b/website_and_docs/content/documentation/webdriver/getting_started/install_selenium_library.en.md
@@ -10,10 +10,10 @@ aliases: [
 ]
 ---
 
-First you need to install the Selenium bindings for your automation project.
-The installation process for libraries depends on the language you choose to use.
+The installation process for libraries depends on the language you choose to use:
 
-### Java
+{{< tabpane-md  paneID="2" tabCount="6" headerTab1="Java" headerTab2="Python" headerTab3="CSharp" headerTab4="Ruby" headerTab5="JavaScript" headerTab6="Kotlin" >}}
+{{< tab-md ID="1" >}}
 Installation of Selenium libraries for Java is accomplished using a build tool.
 You can find the latest version on [Selenium Downloads](/downloads/) and see all available versions on
 [Maven Repository](https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java)
@@ -28,14 +28,14 @@ For Maven, add the _selenium-java_ dependency in your project `pom.xml` file:
 </dependency>
 ```
 
-For Gradle, add the _selenium-java_ dependency in your project `build.gradle` file: 
+For Gradle, add the _selenium-java_ dependency in your project `build.gradle` file:
 
 ```text
 dependencies {
     compile group: 'org.seleniumhq.selenium', name: 'selenium-java', version: '4.0.0'
 ```
-
-### Python
+{{< /tab-md >}}
+{{< tab-md ID="2" >}}
 Installation of Selenium libraries for Python can be done using pip:
 
 ```shell
@@ -49,7 +49,8 @@ Alternatively you can download the [PyPI source archive](https://pypi.org/projec
 python setup.py install
 ```
 
-### C#
+{{< /tab-md >}}
+{{< tab-md ID="3" >}}
 Installation of Selenium libraries for C# can be done using NuGet:
 
 ```shell
@@ -58,8 +59,8 @@ Install-Package Selenium.WebDriver
 # or using .Net CLI
 dotnet add package Selenium.WebDriver
 ```
-
-### Ruby
+{{< /tab-md >}}
+{{< tab-md ID="4" >}}
 Installation of Selenium libraries for Ruby can be done using gem:
 
 ```shell
@@ -72,13 +73,17 @@ Or add it to your `Gemfile`:
 gem 'selenium-webdriver', '~> 4.0'
 ```
 
-### JavaScript
+{{< /tab-md >}}
+{{< tab-md ID="5" >}}
 Installation of Selenium libraries for JavaScript can be done using npm:
 
 ```shell
 npm install selenium-webdriver
 ```
 
-### Kotlin
-Due to missing native language bindings for Kotlin, you have to use the 
+{{< /tab-md >}}
+{{< tab-md ID="6" >}}
+Due to missing native language bindings for Kotlin, you have to use the
 Java Bindings, e.g. with maven [Java](#java)
+{{< /tab-md >}}
+{{< /tabpane-md >}}
diff --git a/website_and_docs/content/documentation/webdriver/getting_started/install_selenium_library.ja.md b/website_and_docs/content/documentation/webdriver/getting_started/install_selenium_library.ja.md
@@ -14,7 +14,8 @@ aliases: [
 最初にあなたの自動化プロジェクトにSeleniumのバインディングをインストールする必要があります。
 インストールの方法は選択した言語によって異なります。
 
-### Java
+{{< tabpane-md  paneID="2" tabCount="6" headerTab1="Java" headerTab2="Python" headerTab3="CSharp" headerTab4="Ruby" headerTab5="JavaScript" headerTab6="Kotlin" >}}
+{{< tab-md ID="1" >}}
 JavaへのSeleniumライブラリのインストールはMavenを使います。
 プロジェクトのpom.xmlに _selenium-java_ の依存関係を追加してください。
 
@@ -48,7 +49,8 @@ _selenium-java_ 依存関係は、Seleniumがサポートする全てのブラ
 </dependency>
 ```
 
-### Python
+{{< /tab-md >}}
+{{< tab-md ID="2" >}}
 PythonへのSeleniumライブラリのインストールはpipを使います。
 
 ```shell
@@ -62,7 +64,8 @@ pip install selenium
 python setup.py install
 ```
 
-### C#
+{{< /tab-md >}}
+{{< tab-md ID="3" >}}
 C#へのSeleniumライブラリのインストールはNuGetを使います。
 
 ```shell
@@ -72,21 +75,25 @@ Install-Package Selenium.WebDriver
 dotnet add package Selenium.WebDriver
 ```
 
-### Ruby
+{{< /tab-md >}}
+{{< tab-md ID="4" >}}
 RubyへのSeleniumライブラリのインストールはgemを使います。
 
 ```shell
 gem install selenium-webdriver
 ```
 
-## _JavaScript_
+{{< /tab-md >}}
+{{< tab-md ID="5" >}}
 JavaScriptへのSeleniumライブラリのインストールはnpmを使います。
 
 ```shell
 npm install selenium-webdriver
 ```
 
-### Kotlin
-Due to missing native language bindings for Kotlin, you have to use the 
+{{< /tab-md >}}
+{{< tab-md ID="6" >}}
+Due to missing native language bindings for Kotlin, you have to use the
 Java Bindings, e.g. with maven [Java](#java)
 
+{{< /tabpane-md >}}
diff --git a/website_and_docs/content/documentation/webdriver/getting_started/install_selenium_library.pt-br.md b/website_and_docs/content/documentation/webdriver/getting_started/install_selenium_library.pt-br.md
@@ -14,7 +14,8 @@ aliases: [
 Primeiro você precisa instalar as ligações Selenium para seu projeto de automação.
 O processo de instalação de bibliotecas depende da linguagem que você escolher usar.
 
-### Java
+{{< tabpane-md  paneID="2" tabCount="6" headerTab1="Java" headerTab2="Python" headerTab3="CSharp" headerTab4="Ruby" headerTab5="JavaScript" headerTab6="Kotlin" >}}
+{{< tab-md ID="1" >}}
 A instalação de bibliotecas Selenium para Java pode ser feita usando Maven.
 Adicione a dependência selenium-java em seu pom.xml:
 
@@ -26,7 +27,7 @@ Adicione a dependência selenium-java em seu pom.xml:
 </dependency>
 ```
 
-A dependência _selenium-java_ suporta a execução de sua automação com todos os navegadores 
+A dependência _selenium-java_ suporta a execução de sua automação com todos os navegadores
 com suporte Selenium. Se você quiser fazer testes
 apenas em um navegador específico, você pode adicionar a dependência para esse navegador
 em seu arquivo _pom.xml_.
@@ -40,7 +41,7 @@ arquivo para executar seus testes apenas no Firefox:
   <version>4.X</version>
 </dependency>
 ```
-   
+
 De maneira semelhante, se você deseja executar testes apenas no Chrome,
 você deve adicionar a seguinte dependência:
 
@@ -51,8 +52,8 @@ você deve adicionar a seguinte dependência:
   <version>4.X</version>
 </dependency>
 ```
-
-### Python
+{{< /tab-md >}}
+{{< tab-md ID="2" >}}
 A instalação de bibliotecas Selenium para Python pode ser feita usando pip:
 
 ```shell
@@ -66,7 +67,8 @@ Como alternativa, você pode baixar o [arquivo de origem do PyPI](https://pypi.o
 python setup.py install
 ```
 
-### C#
+{{< /tab-md >}}
+{{< tab-md ID="3" >}}
 A instalação de bibliotecas Selenium para C# pode ser feita usando NuGet:
 
 ```shell
@@ -76,20 +78,22 @@ Install-Package Selenium.WebDriver
 dotnet add package Selenium.WebDriver
 ```
 
-### Ruby
+{{< /tab-md >}}
+{{< tab-md ID="4" >}}
 A instalação de bibliotecas Selenium para Ruby pode ser feita usando gem:
 
 ```shell
 gem install selenium-webdriver
 ```
 
-### JavaScript
+{{< /tab-md >}}
+{{< tab-md ID="5" >}}
 A instalação de bibliotecas Selenium para JavaScript pode ser feita usando npm:
 
 ```shell
 npm install selenium-webdriver
 ```
-
-### Kotlin
+{{< /tab-md >}}
+{{< tab-md ID="6" >}}
 Devido à ausência de vínculos de linguagem nativo para Kotlin, você deve usar vínculos Java, por exemplo, com Maven [Java](#java)
-
+{{< /tabpane-md >}}
diff --git a/website_and_docs/content/documentation/webdriver/getting_started/install_selenium_library.zh-cn.md b/website_and_docs/content/documentation/webdriver/getting_started/install_selenium_library.zh-cn.md
@@ -14,8 +14,8 @@ aliases: [
 首先，您需要为自动化项目安装 Selenium 绑定库。
 库的安装过程取决于您选择使用的语言。
 
-### Java
-
+{{< tabpane-md  paneID="2" tabCount="6" headerTab1="Java" headerTab2="Python" headerTab3="CSharp" headerTab4="Ruby" headerTab5="JavaScript" headerTab6="Kotlin" >}}
+{{< tab-md ID="1" >}}
 可以使用 Maven 安装 Java 的 Selenium 库。
 在项目 pom.xml 中添加 _selenium-java_ 依赖项：
 
@@ -49,8 +49,8 @@ _selenium-java_ 依赖项支持在所有 Selenium 支持的浏览器中运行自
 </dependency>
 ```
 
-### Python
-
+{{< /tab-md >}}
+{{< tab-md ID="2" >}}
 可以使用 pip 安装 Python 的 Selenium 库：
 
 ```shell
@@ -64,8 +64,8 @@ pip install selenium
 python setup.py install
 ```
 
-### C#
-
+{{< /tab-md >}}
+{{< tab-md ID="3" >}}
 可以使用 NuGet 安装 C# 的 Selenium 库：
 
 ```shell
@@ -75,21 +75,24 @@ Install-Package Selenium.WebDriver
 dotnet add package Selenium.WebDriver
 ```
 
-### Ruby
-
+{{< /tab-md >}}
+{{< tab-md ID="4" >}}
 可以使用 gem 安装 Ruby 的 Selenium 库：
 
 ```shell
 gem install selenium-webdriver
 ```
 
-### JavaScript
-
+{{< /tab-md >}}
+{{< tab-md ID="5" >}}
 可以使用 npm 安装 JavaScript 的 Selenium 库
 
 ```shell
 npm install selenium-webdriver
 ```
 
-### Kotlin
+{{< /tab-md >}}
+{{< tab-md ID="6" >}}
 由于缺少Kotlin的原生语言的绑定, 您不得不借助Java的生态环境, 例如Maven [Java](#java)
+
+{{< /tabpane-md >}}
diff --git a/website_and_docs/layouts/shortcodes/tab-md.html b/website_and_docs/layouts/shortcodes/tab-md.html
@@ -0,0 +1,14 @@
+<!--https://github.com/google/docsy/commit/51a208b49d876ae0995d4b18e6779374b35ff2fa-->
+
+{{ $tabID := .Get "ID" }}
+{{ $paneID := print (.Parent.Get "paneID") $tabID }}
+{{ $tab := (print "tab" $tabID) }}
+{{ if eq $tabID "1" }}
+<div class="tab-pane fade show active" id="tab{{ $paneID }}" role="tabpanel" aria-labelledby="nav-{{ $tab }}">
+  {{ $.Inner | markdownify }}
+</div>
+{{ else }}
+<div class="tab-pane fade" id="tab{{ $paneID }}" role="tabpanel" aria-labelledby="nav-{{ $tab }}">
+  {{ $.Inner | markdownify }}
+</div>
+{{ end }}
diff --git a/website_and_docs/layouts/shortcodes/tabpane-md.html b/website_and_docs/layouts/shortcodes/tabpane-md.html
@@ -0,0 +1,22 @@
+<!--https://github.com/google/docsy/commit/51a208b49d876ae0995d4b18e6779374b35ff2fa-->
+
+<div class="tabpane-md">
+<div class="nav nav-tabs" id="nav-tab" role="tablist">
+  {{ range $i, $sequence := (seq (.Get "tabCount")) }}
+  {{ $paneID := $.Get "paneID" }}
+  {{ $headerTab := (print "headerTab" $sequence) }}
+  {{ $tabHREF := (print "tab" $paneID $sequence) }}
+  {{ if eq $sequence 1 }}
+  <a class="nav-item nav-link active" id="nav-{{ $paneID }}" data-toggle="tab" href="#{{ $tabHREF | urlize }}" role="tab"
+     aria-controls="nav-home" aria-selected="true">{{ $.Get $headerTab }}</a>
+  {{ else }}
+  <a class="nav-item nav-link" id="nav-{{ $paneID }}" data-toggle="tab" href="#{{ $tabHREF | urlize }}" role="tab"
+     aria-controls="nav-home" aria-selected="false">{{ $.Get $headerTab }}</a>
+  {{ end }}
+  {{ end }}
+</div>
+</nav>
+<div class="tab-content {{ .Get "content" }}" id="{{ $.Get "paneID" }}">
+{{ .Inner }}
+</div>
+</div>
