implement a toggle for docsy tabpanes so that it doesn't automatically add code (#915) [deploy site]

* update alert shortcodes

* update style info and move it into its own page

* implement a toggle for docsy tabpanes so that it doesn't automatically use a code block

* implement a github reference for auto-code blocks

Co-authored-by: Diego Molina <[email protected]>

Author: titusfortner

website_and_docs/assets/scss/_tabpane.scss

@@ -0,0 +1,11 @@
+.tab-pane .nocode {
+  border-bottom: 1px solid #dee2e6;
+  margin: 2rem 0 2rem 0;
+  padding-bottom: 1rem;
+}
+
+.tab-pane .github {
+  text-align: center;
+  margin: 0 0 1rem 0;
+  font-weight: 600;
+}

website_and_docs/assets/scss/main.scss

@@ -7,4 +7,5 @@
 @import "images";
 @import "links";
 @import "logo";
-@import "screen";
+@import "screen";
+@import "tabpane";

website_and_docs/content/documentation/about/contributing.en.md

@@ -2,6 +2,8 @@
 title: "Contributing to the Selenium site & documentation"
 linkTitle: "Contributing"
 weight: 2
+description: >-
+    Information on improving documentation and code examples for Selenium
 aliases: [
 "/documentation/en/contributing/",
 "/documentation/en/front_matter/typographical_conventions/"
@@ -95,109 +97,7 @@ your changes, run `hugo server` on the site's root directory.
 % hugo server
 ```
 
-#### Alerts
-
-Alerts have been added to direct potential contributors to where specific help is needed.
-
-When code examples are needed, this code has been added to the site:
-
-{{< highlight html >}}
-{{</* alert-code */>}}
-{{< /highlight >}}
-
-Which gets displayed like this:
-{{< alert-code >}}
-
-When additional content is needed, this code has been added to the site
-{{< highlight html >}}
-{{</* alert-content */>}}
-Additional information about what specific content is needed
-{{</* /alert-content */>}}
-{{< /highlight >}}
-
-Which gets displayed like this:
-{{< alert-content >}}
-Additional information about what specific content is needed
-{{< /alert-content >}}
-
-#### Capitalization of titles
-
-Our documentation uses Title Capitalization for `linkTitle` which should be short
-and Sentence capitalization for `title` which can be longer and more descriptive.
-For example, a `linkTitle` of  _Special Heading_ might have a `title` of
-_The importance of a special heading in documentation_
-
-#### Line length
-
-When editing the documentation’s source,
-which is written in plain HTML,
-limit your line lengths to around 100 characters.
-
-Some of us take this one step further
-and use what is called
-[_semantic linefeeds_](//rhodesmill.org/brandon/2012/one-sentence-per-line),
-which is a technique whereby the HTML source lines,
-which are not read by the public,
-are split at ‘natural breaks’ in the prose.
-In other words, sentences are split
-at natural breaks between clauses.
-Instead of fussing with the lines of each paragraph
-so that they all end near the right margin,
-linefeeds can be added anywhere
-that there is a break between ideas.
-
-This can make diffs very easy to read
-when collaborating through git,
-but it is not something we enforce contributors to use.
-
-#### Translations
-
-The docs are translated into several languages, and translations are based on
-the English content. When you are changing a file, **be sure** to make your
-changes in all the other translated files as well. This might differ depending
-on the change, for example:
- 
-* If you add a code example to the `browser_manipulation.en.md` file,
-also add it to `browser_manipulation.ja.md`, `browser_manipulation.pt-br.md`, 
-`browser_manipulation.zh-cn.md`, and all other translated files.
-* If you find a translation that can be improved, only change the translated
-file.
-* If you are adding a new language translation, add the new files with the
-appropriate suffix. There is no need to have everything translated to submit a
-PR, it can be done iteratively. Don't forget to check some needed configuration
-values in the `config.toml` file.
-* If you make text changes in the English version, replace the same section in
-the translated files with your change (yes, in English), and add the following
-notice at the top of the file.
- 
-
-```
-{{%/* pageinfo color="warning" */%}}
-<p class="lead">
-   <i class="fas fa-language display-4"></i> 
-   Page being translated from 
-   English to {LANGUAGE}. Do you speak {LANGUAGE}? Help us to translate
-   it by sending us pull requests!
-</p>
-{{%/* /pageinfo */%}}
-```
-
-#### Code Tabs
-
-When adding code examples, you want to use tab panes as follows.
-You do not need to provide examples in all languages,
-but add placeholders like this for any language you do not implement:
-
-{{< highlight html >}}
-{{</* tabpane langEqualsHeader=true */>}}
-{{</* tab header="Java" */>}}Java code not implemented, please make a Pull Request if you can add this code{{</* /tab */>}}
-{{</* tab header="Python" */>}}Python code not implemented, please make a Pull Request if you can add this code{{</* /tab */>}}
-{{</* tab header="CSharp" */>}}C# code not implemented, please make a Pull Request if you can add this code{{</* /tab */>}}
-{{</* tab header="Ruby" */>}}Ruby code not implemented, please make a Pull Request if you can add this code{{</* /tab */>}}
-{{</* tab header="JavaScript" */>}}JS code not implemented, please make a Pull Request if you can add this code{{</* /tab */>}}
-{{</* tab header="Kotlin" */>}}Kotlin code not implemented, please make a Pull Request if you can add this code{{</* /tab */>}}
-{{</* /tabpane */>}}
-{{< /highlight >}}
+See [Style Guide]({{< ref "style.md" >}}) for more information on our conventions for contribution 
 
 ### Step 4: Commit
 

website_and_docs/content/documentation/about/contributing.ja.md

@@ -3,6 +3,8 @@ title: "Seleniumのサイトとドキュメントに貢献する"
 linkTitle: "Seleniumのサイトとドキュメントに貢献する"
 weight: 2
 requiresTranslation: true
+description: >-
+    Information on improving documentation and code examples for Selenium
 aliases: 
         [
           "/documentation/ja/contributing/",
@@ -90,49 +92,7 @@ your changes, run `hugo server` on the site's root directory.
 % hugo server
 ```
 
-#### タイトルの大文字化
-
-_A Very Fine Heading_ などのタイトルの大文字化は避け、代わりに _A very fine heading_ を選択してください。
-大げさな大文字表記、またはタイトルケースは、多くの場合、正書法の慣習に対する誤解または無視を示します。
-ヘッダーを開始するための最初の大文字を1つ持つセンテンスケースとして知られているものを好みます。
-
-#### 行の長さ
-
-プレーンHTMLで記述されたドキュメントのソースを編集するときは、行の長さを約72文字に制限してください。
-
-これをさらに一歩進めて、いわゆる[セマンティックラインフィード](//rhodesmill.org/brandon/2012/one-sentence-per-line)
-と呼ばれるものを使用します。
-これは、一般の人には読まれないHTMLソース行を散文の「自然な区切り」で分割する手法です。
-つまり、文は句間の自然な区切りで分割されます。
-すべての段落が右マージンの近くで終了するように各段落の行を混乱させるのではなく、
-アイデアが途切れる場所であればどこでも改行を追加できます。
-
-これにより、gitを使用して共同作業するときにdiffを非常に読みやすくすることができますが、
-使用するコントリビューターに強制するものではありません。
-
-#### Translations
-
-ドキュメントは複数の言語に翻訳されており、翻訳は英語版に基づいて行われます。
-ファイルに変更を加えたときは、他の翻訳済みファイル全てに**必ず**同様の変更を加えてください。
-ただし、変更内容によって異なります。以下に例を示します:
-
-* `browser_manipulation.en.md`ファイルにコード例を加えた場合、`browser_manipulation.ja.md`、 `browser_manipulation.pt-br.md`及びすべての翻訳ファイルに追加してください。
-`browser_manipulation.zh-cn.md`
-* 翻訳の改善を行う場合は、各言語のファイルのみを変更してください。
-* 新しい言語向けの翻訳を追加したい場合、適切な接尾辞を付けてファイルを追加してください。プルリクエストを送信するために全てを翻訳する必要はありません、イテレーティブに行うことができます。`config.toml`ファイルで必要な設定値の確認を忘れないでください。
-* 英語版の文章に変更を加えたい場合は、翻訳されたファイルの同じ箇所をあなたの変更で（英語で）書き換えたうえで、以下の注意書きをファイルの先頭に追加してください。
-
-
-```
-{{%/* pageinfo color="warning" */%}}
-<p class="lead">
-   <i class="fas fa-language display-4"></i> 
-   Page being translated from 
-   English to {LANGUAGE}. Do you speak {LANGUAGE}? Help us to translate
-   it by sending us pull requests!
-</p>
-{{%/* /pageinfo */%}}
-```
+See [Style Guide]({{< ref "style.md" >}}) for more information on our conventions for contribution
 
 ### ステップ 4: コミット
 

website_and_docs/content/documentation/about/contributing.pt-br.md

@@ -3,6 +3,8 @@ title: "Contribuindo com o Site e Documentação do Selenium"
 linkTitle: "Contribuindo com o Site e Documentação do Selenium"
 weight: 2
 requiresTranslation: true
+description: >-
+    Information on improving documentation and code examples for Selenium
 aliases: 
         [
           "/documentation/pt-br/contributing/",
@@ -96,69 +98,7 @@ your changes, run `hugo server` on the site's root directory.
 % hugo server
 ```
 
-#### Capitalização de títulos
-
-Deve-se evitar a capitalização do título,
-como _Um Título Muito Estiloso_,
-e em vez disso, use _Um título muito estiloso_.
-Letras maiúsculas gratuitas, ou caixa do título,
-muitas vezes mostram um mal-entendido - ou um desprezo por -
-convenções ortográficas.
-Preferimos o que é conhecido como _sentence case_,
-com uma única inicial maiúscula para iniciar cabeçalhos.
-
-#### Comprimento da linha
-
-Ao editar o código fonte da documentação,
-que é escrito em HTML puro,
-limite o comprimento das linhas a cerca de 72 caracteres.
-
-Alguns de nós dão um passo adiante
-e usam o que é chamado de
-[_linefeeds semânticos_](//rhodesmill.org/brandon/2012/one-sentence-per-line),
-que é uma técnica pela qual as linhas de origem HTML,
-que não são lidos pelo público,
-são divididas em "intervalos naturais" na prosa.
-Em outras palavras, as frases são divididas
-em quebras naturais entre as orações.
-Em vez de se preocupar com as linhas de cada parágrafo
-de modo que todos terminem perto da margem direita,
-os feeds de linha podem ser adicionados em qualquer lugar
-que existe uma ruptura entre as ideias.
-
-Isso pode tornar as diffs muito fáceis de ler
-ao colaborar por meio do git,
-mas não é algo que obrigamos os colaboradores a usar.
-
-#### Traducciones
-
-A documentação é traduzida para vários idiomas e as traduções são baseadas no conteúdo em inglês. Ao alterar um arquivo, **certifique-se** de realizar a
-mudanças em todos os outros arquivos traduzidos também. Isso pode ser diferente dependendo
-sobre a mudança, por exemplo:
- 
-* Se você adicionar um exemplo de código ao arquivo `browser_manipulation.en.md`,
-também adicione-o a `browser_manipulation.ja.md`,` browser_manipulation.pt-br.md`,
-`browser_manipulation.zh-cn.md`, e todos os outros arquivos traduzidos.
-* Se você encontrar uma tradução que possa ser melhorada, altere apenas o arquivo traduzido.
-* Se você estiver adicionando uma nova tradução de idioma, adicione os novos arquivos com o
-sufixo apropriado. Não há necessidade de traduzir tudo para enviar um
-PR, pode ser feito iterativamente. Não se esqueça de verificar algumas configurações necessárias de
-valores no arquivo `config.toml`.
-* Se você fizer alterações de texto na versão em inglês, substitua a mesma seção em
-os arquivos traduzidos com sua alteração (sim, em inglês), e adicione o seguinte
-observe na parte superior do arquivo.
- 
-
-```
-{{%/* pageinfo color="warning" */%}}
-<p class="lead">
-   <i class="fas fa-language display-4"></i> 
-   Page being translated from 
-   English to {LANGUAGE}. Do you speak {LANGUAGE}? Help us to translate
-   it by sending us pull requests!
-</p>
-{{%/* /pageinfo */%}}
-```
+See [Style Guide]({{< ref "style.md" >}}) for more information on our conventions for contribution
 
 ### Passo 4: Commit
 

website_and_docs/content/documentation/about/contributing.zh-cn.md

@@ -3,6 +3,8 @@ title: 为 Selenium 文档做贡献
 linkTitle: 为 Selenium 文档做贡献
 weight: 2
 requiresTranslation: true
+description: >-
+    Information on improving documentation and code examples for Selenium
 aliases: 
         [
           "/documentation/zh-cn/contributing/",
@@ -94,61 +96,7 @@ Selenium项目欢迎新的贡献者.
 % hugo server
 ```
 
-#### 标题大写
-
-应该避免标题完全大写, 例如 _A Very Fine Heading_, 
-应该书写为 _A very fine heading_ .
-没有意义的大写字母或者无视拼写协议的标题, 通常会带来误解.
-我们更倾向于使用句子首字母大写的 _sentence case_ 的方式.
-
-#### 行的长度
-
-在编辑以plain HTML格式编写的文档来源时, 请将行的长度限制在72个字符以内.
-
-部分先进的贡献者, 使用了
-[_semantic linefeeds_](//rhodesmill.org/brandon/2012/one-sentence-per-line),
-这是一种不以HTML源码换行为基础的技术, 通过这种技术, 
-公众看到的内容将会在文章中以“自然断开”的方式进行分割.
-换句话说, 句子之间在更符合语义的地方被分割.
-不必多虑每个段落的行, 强迫它们都以明确的边距结尾, 
-而是可以将换行符添加到语义有断开的任何地方. 
-(译者注：具体区别，对比本网页与原始md后，即可了解本段想表达的意思) 
-
-通过git进行协作时, 
-这种技术会使提交的差异更显而易见, 
-但这不是我们强制贡献者使用的内容.
-
-#### Translations
-
-本文档基于英语内容, 被翻译成多种语言. 
-更改文件时, 请 **确保** 也对所有其他翻译文件进行更改. 
-这可能会略有不同, 例如:
- 
-* 如果将代码示例添加到 `browser_manipulation.en.md` 文件中后, 
-则还需将其添加到 `browser_manipulation.ja.md`, 
-`browser_manipulation.pt-br.md`, 
-`browser_manipulation.zh-cn.md` 以及所有其他的已翻译文件.
-
-* 如果您发现可以改进的翻译, 请仅更改翻译的文件. 
-
-* 如果要添加新的语言翻译, 请添加具有适当后缀的新文件. 
-无需翻译所有内容即可提交PR, 可以迭代完成. 
-不要忘记在 `config.toml` 文件中检查一些必要的配置. 
-
-* 如果您用英语版本更改了文本, 
-请用您的更改替换翻译文件中的同一部分(是的, 用英语), 
-然后在文件顶部添加以下注意事项. 
-
-```
-{{%/* pageinfo color="warning" */%}}
-<p class="lead">
-   <i class="fas fa-language display-4"></i> 
-   Page being translated from 
-   English to {LANGUAGE}. Do you speak {LANGUAGE}? Help us to translate
-   it by sending us pull requests!
-</p>
-{{%/* /pageinfo */%}}
-```
+See [Style Guide]({{< ref "style.md" >}}) for more information on our conventions for contribution
 
 ### 步骤 4: 提交