Better document the workarounds on Apple Silicon (#59)

The info box is more prominently placed towards the top of the
"Installation" page now. It is still on the "Releases" page in its
usual spot.

The workaround details are more in-depth now and contain an actual
code sample. To not clutter the page, the details are inside a
collapsable area which is collapsed by default. Since we have the
same information in two places, I factored it out into a React
component.
---------

Co-authored-by: Michael Haubenschild <[email protected]>

website/docs/installation.md

@@ -15,14 +15,6 @@ Hyper API is available for Python, C++, Java and .NET supporting Windows, Mac an
 Depending on the language, the installation can be complex.
 This page contains the detailed requirements and installation instructions for all languages.
 
-## Supported platforms
-
-- Microsoft Windows 8 or newer (64-bit)
-- macOS 10.13 or newer
-- Microsoft Windows Server 2016, 2012, 2012 R2, 2008 R2, 2019
-- Ubuntu 18.04 LTS, 20.04 LTS and 22.04 LTS
-- Amazon Linux 2, Red Hat Enterprise Linux (RHEL) 7.3+ and 8.3+, CentOS 7.9+, Oracle Linux 7.3+
-
 ## Hardware requirements
 
 The Hyper API only supports 64-bit platforms. 
@@ -32,14 +24,27 @@ It has the following minimum hardware requirements:
 - 2 GB memory
 - 1.5 GB minimum free disk space
 
+```mdx-code-block
+import { AppleSiliconWorkarounds } from "@site/src/components/AppleSiliconWorkarounds.tsx";
+
+<AppleSiliconWorkarounds />
+```
+
+## Supported platforms
+
+- macOS 10.13 or newer
+- Microsoft Windows 8 or newer (64-bit)
+- Microsoft Windows Server 2016, 2012, 2012 R2, 2008 R2, 2019
+- Ubuntu 18.04 LTS, 20.04 LTS and 22.04 LTS
+- Amazon Linux 2, Red Hat Enterprise Linux (RHEL) 7.3+ and 8.3+, CentOS 7.9+, Oracle Linux 7.3+
+
 ## Language-specific Requirements
 
 ```mdx-code-block
 <Tabs queryString="client-language">
   <TabItem value="python" label="Python" default>
 ```
 
-* The Hyper API supports `x86-64` platforms.
 * **[Python 3.8](https://www.python.org/downloads/)** (or newer) is required.
   - Install the 64-bit version (for example, for Windows, the download is listed as `Windows x86-64`).
   - On Windows, we recommend to select the option **Add Python 3.x to PATH** during installation.
@@ -49,7 +54,6 @@ It has the following minimum hardware requirements:
   <TabItem value="cxx" label="C++">
 ```
 
-* The Hyper API supports `x86-64` platforms.
 * The C++ headers use C++11, so a **standard-compliant compiler with thorough C++11 support** is required. Our internal testing is done with the newest Clang.
 
 :::tip
@@ -64,7 +68,6 @@ Using at least C++17 is recommended, as the API uses C++17 classes, such as `std
   <TabItem value="java" label="Java">
 ```
 
-* The Hyper API supports `x86-64` platforms.
 * **[JDK 8](https://www.oracle.com/java/technologies/downloads/)** (or newer) is required.
 
 ```mdx-code-block
@@ -79,7 +82,6 @@ Older versions of Hyper API will still be available via NuGET. In the future, .N
 
 :::
 
-* The Hyper API supports `x86-64` platforms.
 * **[.NET Core 2.2 SDK](https://dotnet.microsoft.com/download)** (or newer) or **[.NET Framework 4.6.1](https://dotnet.microsoft.com/en-us/download/dotnet-framework)** (or newer) is required.
   * The examples use the .NET Core SDK.
 
@@ -88,12 +90,6 @@ Older versions of Hyper API will still be available via NuGET. In the future, .N
 </Tabs>
 ```
 
-:::info
-Hyper API runs on Apple Silicon only with [Rosetta 2](https://support.apple.com/en-us/HT211861) instead of natively.
-This means, that Hyper API can only be used from within other x86 programs, running under Rosetta.
-In particular for Python and Java, this means that the Python interpreter/Java runtime needs to run with Rosetta, too.
-:::
-
 ## Instructions
 
 ```mdx-code-block

website/docs/releases.md

@@ -4,13 +4,18 @@ Below you can find the latest downloads and the new functionalities and bug fixe
 
 ## Download {#download}
 
+```mdx-code-block
+import {config} from '@site/src/config';
+```
+
 <p>The latest available version is <b>v{config.version_short}</b>.</p>
 
 ```mdx-code-block
 import {DownloadPicker} from '@site/src/components/DownloadPicker'
-import {config} from '@site/src/config';
+import { AppleSiliconWorkarounds } from "@site/src/components/AppleSiliconWorkarounds.tsx";
 
 <DownloadPicker />
+<AppleSiliconWorkarounds />
 ```
 
 ## Release Notes

website/src/components/AppleSiliconWorkarounds.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Admonition from '@theme/Admonition';
+
+export function AppleSiliconWorkarounds() {
+    return (
+            <Admonition type="info" title="Apple Silicon Support">
+                If you are on Apple Silicon (Apple M1, Apple M2, ...), you will currently need workarounds, as described below.
+
+                <details>
+                    <summary style={{fontWeight: "bold", margin: ".8em .5em"}}>Apple Silicon Workarounds</summary>
+                    <div style={{marginLeft: "1.4em"}}>
+                    <p>
+                        Hyper API runs on Apple Silicon only with [Rosetta 2](https://support.apple.com/en-us/HT211861)
+                        instead of natively. You will have to install Rosetta 2 before installing Hyper API.
+                    </p>
+                    <p>
+                        Furthermore, this means that Hyper API can only be used from within other x86 programs, running
+                        under Rosetta. In particular for Python and Java, this means that the Python interpreter/Java
+                        runtime needs to run with Rosetta, too.
+                    </p>
+                    <p>
+                        To do so, either install the Intel-only version of the Python/Java interpreter, or prefix your
+                        call with <code>arch -x86_64</code>. E.g., for Python, you can use:
+                    </p>
+                    <pre>
+                        arch -x86_64 /usr/bin/python3 -m pip install tableauhyperapi
+                        <br />
+                        arch -x86_64 /usr/bin/python3 your_script.py
+                    </pre>
+                    </div>
+                </details>
+            </Admonition>
+    );
+}