docs: support tabs

docs/extra.css

@@ -89,3 +89,59 @@ h1, h2, h3, h4, h5, h6 {
 
 /* import font awesome 4 for icons */
 @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
+
+
+/* Tabs */
+
+/* Style the tab */
+.tabs {
+  margin-bottom: 1em;
+  -webkit-font-smoothing: antialiased;
+}
+
+.tabs-header {
+  background-color: white;
+  display: flex;
+  justify-content: flex-start;
+  border-bottom: 2px solid #ccc;
+}
+
+/* Style the buttons that are used to open the tab content */
+.tabs-header button {
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  font-size: 0.9em;
+  font-weight: 600;
+  padding: 8px 16px;
+  border-bottom: 2px solid transparent;
+
+  /* put the border on top of the parent border */
+  margin-bottom: -2px;
+}
+
+.tabs-header button:focus-visible {
+  /* preserve an outline for accesibility purposes */
+  outline: 1px solid currentColor;
+}
+
+/* Change background color of buttons on hover */
+.tabs-header button:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+/* Create an active/current tablink class */
+.tabs-header button.active {
+  color: #4086bd;
+  border-bottom-color: currentColor;
+}
+
+/* Style the tab content */
+.tabs-content {
+  background-color: #f1f6fa;
+  padding: 1px 1em;
+  padding-top: 0.8em;
+}

docs/extra.js

@@ -1,4 +1,49 @@
-
+// add classes for code-block-filename styling
 $('.rst-content pre')
     .prev('blockquote')
     .addClass('code-block-filename');
+
+var tabConversionIterations = 0
+
+// convert tab admonition to tabs
+while (true) {
+  const firstTab = $('.rst-content .admonition.tab').first()
+  if (firstTab.length == 0) break;
+
+  const otherTabs = firstTab.nextUntil(':not(.admonition.tab)');
+  const allTabs = $($.merge($.merge([], firstTab), otherTabs));
+
+  const tabContainer = $('<div>').addClass('tabs');
+  const headerContainer = $('<div>').addClass('tabs-header');
+  const contentContainer = $('<div>').addClass('tabs-content');
+
+  tabContainer.insertBefore(firstTab);
+  tabContainer.append(headerContainer, contentContainer)
+
+  const selectTab = function (index) {
+    headerContainer.children().removeClass('active')
+    headerContainer.children().eq(index).addClass('active')
+    contentContainer.children().hide()
+    contentContainer.children().eq(index).show()
+  }
+
+  allTabs.each(function (tabI, el) {
+    const $el = $(el)
+    const titleElement = $el.children('.admonition-title')
+    const title = titleElement.text()
+    const button = $('<button>').text(title)
+    button.click(function () {
+      selectTab(tabI)
+    })
+    headerContainer.append(button)
+
+    titleElement.remove()
+    $el.removeClass('admonition')
+    contentContainer.append($el)
+  })
+
+  selectTab(0)
+
+  // this will catch infinite loops which can occur when editing the above
+  if (tabConversionIterations++ > 1000) throw 'too many iterations'
+}

docs/faq.md

@@ -105,6 +105,7 @@ Actions. Once QEMU is set up and registered, you just need to set the
 Linux), and the other architectures are emulated automatically.
 
 > .github/workflows/build.yml
+
 ```yaml
 {% include "../examples/github-with-qemu.yml" %}
 ```
@@ -130,6 +131,7 @@ Hopefully, this is a temporary situation. Once we have widely available Apple Si
 Here's an example GitHub Actions workflow with a job that builds for Apple Silicon:
 
 > .github/workflows/build_macos.yml
+
 ```yml
 {% include "../examples/github-apple-silicon.yml" %}
 ```

docs/options.md

@@ -10,44 +10,72 @@ your CI config.
 For example, to configure cibuildwheel to run tests, add the following YAML to
 your CI config file:
 
-> .travis.yml ([docs](https://docs.travis-ci.com/user/environment-variables/))
-```yaml
-env:
-  global:
-    - CIBW_TEST_REQUIRES=pytest
-    - CIBW_TEST_COMMAND="pytest {project}/tests"
-```
 
-> appveyor.yml ([docs](https://www.appveyor.com/docs/build-configuration/#environment-variables))
-```yaml
-environment:
-  global:
-    CIBW_TEST_REQUIRES: pytest
-    CIBW_TEST_COMMAND: "pytest {project}\\tests"
-```
+!!! tab "GitHub Actions"
 
-> .circleci/config.yml ([docs](https://circleci.com/docs/2.0/configuration-reference/#environment))
-```yaml
-jobs:
-  job_name:
-    environment:
+    > .github/workflows/*.yml ([docs](https://help.github.com/en/actions/configuring-and-managing-workflows/using-environment-variables)) (can be global, in job, or in step)
+
+    ```yaml
+    env:
       CIBW_TEST_REQUIRES: pytest
       CIBW_TEST_COMMAND: "pytest {project}/tests"
-```
+    ```
 
-> azure-pipelines.yml ([docs](https://docs.microsoft.com/en-us/azure/devops/pipelines/process/variables))
-```yaml
-variables:
-  CIBW_TEST_REQUIRES: pytest
-  CIBW_TEST_COMMAND: "pytest {project}/tests"
-```
+!!! tab "Azure Pipelines"
+
+    > azure-pipelines.yml ([docs](https://docs.microsoft.com/en-us/azure/devops/pipelines/process/variables))
+
+    ```yaml
+    variables:
+      CIBW_TEST_REQUIRES: pytest
+      CIBW_TEST_COMMAND: "pytest {project}/tests"
+    ```
+
+!!! tab "Travis CI"
+
+    > .travis.yml ([docs](https://docs.travis-ci.com/user/environment-variables/))
+
+    ```yaml
+    env:
+      global:
+        - CIBW_TEST_REQUIRES=pytest
+        - CIBW_TEST_COMMAND="pytest {project}/tests"
+    ```
+
+!!! tab "AppVeyor"
+
+    > appveyor.yml ([docs](https://www.appveyor.com/docs/build-configuration/#environment-variables))
+
+    ```yaml
+    environment:
+      global:
+        CIBW_TEST_REQUIRES: pytest
+        CIBW_TEST_COMMAND: "pytest {project}\\tests"
+    ```
+
+!!! tab "CircleCI"
+
+    > .circleci/config.yml ([docs](https://circleci.com/docs/2.0/configuration-reference/#environment))
+
+    ```yaml
+    jobs:
+      job_name:
+        environment:
+          CIBW_TEST_REQUIRES: pytest
+          CIBW_TEST_COMMAND: "pytest {project}/tests"
+    ```
+
+!!! tab "Gitlab CI"
+
+    > .gitlab-ci.yml ([docs](https://docs.gitlab.com/ee/ci/variables/README.html#create-a-custom-variable-in-gitlab-ciyml))
+
+    ```yaml
+    linux:
+      variables:
+        CIBW_TEST_REQUIRES: pytest
+        CIBW_TEST_COMMAND: "pytest {project}/tests"
+    ```
 
-> .github/workflows/*.yml ([docs](https://help.github.com/en/actions/configuring-and-managing-workflows/using-environment-variables)) (can be global, in job, or in step)
-```yaml
-env:
-  CIBW_TEST_REQUIRES: pytest
-  CIBW_TEST_COMMAND: "pytest {project}/tests"
-```
 
 
 ## Build selection