Improve versioning and dark mode toggle

- Add `All Versions page`
- Conditionally include versions in drop down
- Improve dark mode toggle icons

website/build-versions.sh

@@ -61,7 +61,7 @@ function createVersiondSidebar() (
 function updateVersionsFile() (
   vString=$1
   if [ $vString = "]" ]; then
-    echo No content \for versions file
+    echo "No content for versions file"
     return
   fi
   echo Updating versions file from $vString
@@ -115,7 +115,12 @@ export internalVersionsArray=($internalVersions)
 # go from newest (first in array) to oldest (last in array)
 for ((i = ${#internalVersionsArray[@]} - 1;i >= 0;i--)); do
   row=${internalVersionsArray[i]}
-  IFS=: read versionsLabel versionsHash <<< $row
+  IFS=: read versionsLabel versionsHash includeInDropDown <<< $row
+
+  if [ $includeInDropDown != "true" ]; then
+    echo Skipping version: $versionsLabel \"$includeInDropDown\"
+    continue
+  fi
 
   if [ -z "$versionsLabel" ]; then
     echo Invalid row \(no version label\): $row 

website/docusaurus.config.js

@@ -14,6 +14,14 @@ module.exports = {
         src: 'img/logo.png',
       },
       items: [{
+        type: 'docsVersionDropdown',
+        position: 'right',
+        nextVersionLabel: 'Latest',
+      }, {
+        to: '/versions',
+        label: 'All versions',
+        position: 'right',
+      }, {
         to: 'docs/',
         activeBasePath: 'docs',
         label: 'Docs',
@@ -22,7 +30,7 @@ module.exports = {
         href: 'https://github.com/cloudfoundry/stratos',
         label: 'GitHub',
         position: 'right',
-      },],
+      }],
     },
     footer: {
       style: 'dark',
@@ -65,6 +73,16 @@ module.exports = {
       defaultMode: 'light',
       disableSwitch: false,
       respectPrefersColorScheme: true,
+      switchConfig: {
+        darkIcon: '🌙',
+        darkIconStyle: {
+          marginLeft: '2px',
+        },
+        lightIcon: '☀️',
+        lightIconStyle: {
+          marginLeft: '1px',
+        },
+      },
     },
   },
   presets: [

website/src/pages/versions.js

@@ -0,0 +1,98 @@
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import React from 'react';
+
+import versionsWithHash from '../../internal-versions.json';
+import versions from '../../versions.json';
+
+function Version() {
+  const context = useDocusaurusContext();
+  const { siteConfig = {} } = context;
+  const latestVersion = versions[0];
+  const pastVersions = versionsWithHash
+    .map(versionWithHash => versionWithHash.split(':'))
+    .filter((versionWithHash) => versionWithHash[0] !== latestVersion);
+
+
+  const repoUrl = `https://github.com/${siteConfig.organizationName}/${siteConfig.projectName}`;
+  return (
+    <Layout
+      title="Versions"
+      permalink="/versions"
+      description="Docusaurus 2 Versions page listing all documented site versions">
+      <main className="container margin-vert--lg">
+        <h1>Docusaurus documentation versions</h1>
+        <div className="margin-bottom--lg">
+          <h3 id="latest">Latest version (Stable)</h3>
+          <p>Here you can find the latest documentation.</p>
+          <table>
+            <tbody>
+              <tr>
+                <th>{latestVersion}</th>
+                <td>
+                  <Link to={useBaseUrl('/docs')}>Documentation</Link>
+                </td>
+                <td>
+                  <a href={`${repoUrl}/releases/tag/${latestVersion}`}>
+                    Release Notes
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div className="margin-bottom--lg">
+          <h3 id="next">Next version (Unreleased)</h3>
+          <p>Here you can find the documentation for unreleased version.</p>
+          <table>
+            <tbody>
+              <tr>
+                <th>master</th>
+                <td>
+                  <Link to={useBaseUrl('/docs/next')}>Documentation</Link>
+                </td>
+                <td>
+                  <a href={repoUrl}>Source Code</a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        {pastVersions.length > 0 && (
+          <div className="margin-bottom--lg">
+            <h3 id="archive">Past Versions</h3>
+            <p>
+              Here you can find documentation for previous versions of
+              Docusaurus.
+            </p>
+            <table>
+              <tbody>
+                {pastVersions.map((version) => (
+                  <tr key={version[0]}>
+                    <th>{version[0]}</th>
+                    <td>
+                      {version[2] === 'true' &&
+                        <Link to={useBaseUrl(`/docs/${version[0]}`)}>
+                          Documentation
+                        </Link>
+                      }
+                    </td>
+                    <td>
+                      <a href={`${repoUrl}/releases/tag/${version[0]}`}>
+                        Release Notes
+                      </a>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </main>
+    </Layout>
+  );
+}
+
+export default Version;