Website - supported cross-compiling matrix.

website/docs/getting-started/getting-started.module.scss

@@ -1,6 +1,6 @@
 // A quick and dirty hack to keep the tab panel with less content to have the same height as others
-div > div {
-  > div > div > div > div, .textBlock {
+div {
+  > div > div > div > div > div, .fixedHeight {
     .buildUrho3D + & {
       min-height: 164px;
     }
@@ -14,17 +14,3 @@ div > div {
     }
   }
 }
-
-.textBlock {
-  overflow: auto;
-  border-radius: var(--ifm-global-radius);
-  color: rgb(191, 199, 213);
-  background-color: rgb(41, 45, 62);
-  margin-bottom: var(--ifm-leading);
-  padding: var(--ifm-pre-padding);
-  min-width: 100%;
-
-  p {
-    margin: 0;
-  }
-}

website/docs/getting-started/installation.mdx

@@ -2,9 +2,11 @@
 sidebar_position: 20
 ---
 
+import clsx from "clsx";
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import Styles from './getting-started.module.scss';
+import CompilerMatrix from '../../src/components/CompilerMatrix';
+import styles from './getting-started.module.scss';
 
 # Installation
 
@@ -22,12 +24,6 @@ Optionally these as well:
 - Doxygen and Graphviz - for building documentation
 - Make or Ninja - for building with terminal/console
 
-:::caution
-
-Cross-compiling on Windows host requires MinGW-w64 to be installed too as it is required to build the host-tools on the fly while cross-compiling the library for the target platform.
-
-:::
-
 Although Urho3D project has included all required third-party libraries as source code, there may be system-level dependency packages that must be satisfied before Urho3D can be built from source successfully. The list below is by no mean comprehensive nor canonical, but it should be the minimal to get started.
 
 :::note
@@ -37,7 +33,7 @@ This may change in the future when the project uses better package manager and M
 :::
 
 <Tabs
-  className={Styles.requirements}
+  className={styles.requirements}
   groupId={'target-platform'}
   defaultValue={'android'}
   values={[
@@ -51,16 +47,16 @@ This may change in the future when the project uses better package manager and M
   ]
   }>
   <TabItem value={'android'}>
-    <div className={Styles.textBlock}>
+    <div className={clsx('textBlock', styles.fixedHeight)}>
       <p>Install <strong>Android Studio</strong> or <strong>IntelliJ IDEA</strong> and it should already provide everything required.</p>
-      <p>Remember to complete the Android SDK installation as per instructed by IDE.</p>
+      <p>Remember to complete the <strong>Android SDK</strong> installation as per instructed by IDE.</p>
       <br/>
       <p>Tested tool version: <strong>29.0.2</strong></p>
       <p>Tested NDK version: <strong>21.3.6528147</strong></p>
     </div>
   </TabItem>
   <TabItem value={'apple'}>
-    <div className={Styles.textBlock}>
+    <div className={clsx('textBlock', styles.fixedHeight)}>
       <p>Install <strong>Xcode</strong> and it should provide almost everything required.</p>
       <p>You may use <strong>homebrew</strong> to install other missing development packages, like <strong>openssl</strong>.</p>
     </div>
@@ -125,14 +121,14 @@ apt install \
 
   </TabItem>
   <TabItem value={'web'}>
-    <div className={Styles.textBlock}>
+    <div className={clsx('textBlock', styles.fixedHeight)}>
       <p>Install <strong>Emscripten SDK</strong> and it should already provide everything required.</p>
       <br/>
       <p>Tested SDK version: <strong>2.0.8</strong></p>
     </div>
   </TabItem>
   <TabItem value={'win'}>
-    <div className={Styles.textBlock}>
+    <div className={clsx('textBlock', styles.fixedHeight)}>
       <p>
         Install <strong>Visual Studio</strong> together with <strong>Windows SDK</strong>.
         Alternatively, install <strong>MinGW-w64</strong>.
@@ -141,3 +137,19 @@ apt install \
     </div>
   </TabItem>
 </Tabs>
+
+In general when cross-compiling the build system requires both the cross-compiler and native compiler toolchains to be installed on the host machine. This is because Urho3D build system builds the host-tool using the native compiler on the fly while cross-compiling the library for the target platform in one go. Check the table below on the supported cross-compiling scenario using Linux, Mac, and Windows host machine, respectively.
+
+<CompilerMatrix>
+
+  |               |       |Linux|Mac|Windows|
+  |---------------|-------|:---:|:-:|:-----:|
+  |Target Platform|Android|Cross-compiler: Android NDK<br/>native-compiler: Clang or GCC|Cross-compiler: Android NDK<br/>native-compiler: Apple Clang|Cross-compiler: Android NDK<br/>native-compiler: MinGW-w64|
+  |               |Apple  ||Apple Clang can target macOS, iOS, and tvOS||
+  |               |Arm    |Cross-compiler: ? (not required when building natively)<br/>native-compiler: Clang or GCC||
+  |               |Linux  |native-compiler: Clang or GCC||
+  |               |RPI    |Cross-compiler: ? (not required when building natively)<br/>native-compiler: Clang or GCC||
+  |               |Web    |Cross-compiler: Emscripten EMCC<br/>native-compiler: Clang or GCC|Cross-compiler: Emscripten EMCC<br/>native-compiler: Apple Clang|Cross-compiler: Emscripten EMCC<br/>native-compiler: MinGW-w64|
+  |               |Windows|Cross-compiler: MinGW-w64<br/>native-compiler: Clang or GCC||native-compiler: MinGW-w64 or MSVC
+
+</CompilerMatrix>

website/docs/getting-started/quick-start.mdx

@@ -2,9 +2,10 @@
 sidebar_position: 10
 ---
 
+import clsx from "clsx";
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import Styles from './getting-started.module.scss'
+import styles from './getting-started.module.scss';
 
 # Quick Start
 
@@ -35,7 +36,7 @@ Windows host system requires WSL2.
 Clone the Urho3D project from the main branch, change directory to its project root, and execute the following commands to build and install the library for your desired target platform.
 
 <Tabs
-  className={Styles.buildUrho3D}
+  className={styles.buildUrho3D}
   groupId={'target-platform'}
   defaultValue={'android'}
   values={[
@@ -61,7 +62,7 @@ script/dockerized.sh android rake install
 
   </TabItem>
   <TabItem value={'apple'}>
-    <div className={Styles.textBlock}>
+    <div className={clsx('textBlock', styles.fixedHeight)}>
       <p>Currently DBE does not support Apple platforms.</p>
       <p>However, Urho3D supports Apple platforms using native build environment.</p>
     </div>
@@ -135,7 +136,7 @@ The `script/dockerized.sh` spawns one of the docker container based on the speci
 You need an installed Urho3D library for the desired target platform to proceed. Although the Urho3D build system also supports linking the Urho3D library directly from its build tree, this quick start guide will not be discussing it here. Assuming you have been following along from the previous section, execute the following commands to create a new UrhoApp project, and then build it.
 
 <Tabs
-  className={Styles.buildUrhoApp}
+  className={styles.buildUrhoApp}
   groupId={'target-platform'}
   defaultValue={'android'}
   values={[
@@ -160,7 +161,7 @@ script/dockerized.sh android
 
   </TabItem>
   <TabItem value={'apple'}>
-    <div className={Styles.textBlock}>
+    <div className={clsx('textBlock', styles.fixedHeight)}>
       <p>Currently DBE does not support Apple platforms.</p>
       <p>However, Urho3D supports Apple platforms using native build environment.</p>
     </div>