From 4f7c94e38061dd62b058c5d5fbdcee910475dd21 Mon Sep 17 00:00:00 2001
From: Lea Anthony <lea.anthony@gmail.com>
Date: Tue, 19 Jul 2022 21:33:05 +1000
Subject: [PATCH] Fix docs for good

---
 website/docs/gettingstarted/firstproject.mdx  | 77 +-----------------
 website/docs/gettingstarted/installation.mdx  | 29 +------
 website/src/components/frameworktabs.js       | 80 +++++++++++++++++++
 website/src/components/tabinstall.js          | 41 ++++++++++
 .../gettingstarted/firstproject.mdx           | 73 +----------------
 .../gettingstarted/installation.mdx           | 31 +------
 .../gettingstarted/firstproject.mdx           | 74 +----------------
 .../gettingstarted/installation.mdx           | 34 +-------
 8 files changed, 133 insertions(+), 306 deletions(-)
 create mode 100644 website/src/components/frameworktabs.js
 create mode 100644 website/src/components/tabinstall.js

diff --git a/website/docs/gettingstarted/firstproject.mdx b/website/docs/gettingstarted/firstproject.mdx
index b5ee1fa4..286033ac 100644
--- a/website/docs/gettingstarted/firstproject.mdx
+++ b/website/docs/gettingstarted/firstproject.mdx
@@ -1,7 +1,3 @@
----
-sidebar_position: 2
----
-
 # Creating a Project
 
 ## Project Generation
@@ -11,77 +7,8 @@ Now that the CLI is installed, you can generate a new project by using the `wail
 Pick your favourite framework:
 
 
-
-
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-
-<Tabs
-    defaultValue="Svelte"
-    values={[
-        {label: "Svelte", value: "Svelte"},
-        {label: "React", value: "React"},
-        {label: "Vue", value: "Vue"},
-        {label: "Preact", value: "Preact"},
-        {label: "Lit", value: "Lit"},
-        {label: "Vanilla", value: "Vanilla"},
-    ]}
->
-<TabItem value="Svelte">
-    Generate a <a href="https://svelte.dev/">Svelte</a> project using Javascript with:<br/>
-
-    wails init -n myproject -t svelte
-
-    If you would rather use Typescript:
-
-    wails init -n myproject -t svelte-ts
-</TabItem>
-<TabItem value="React">
-    Generate a <a href="https://reactjs.org/">React</a> project using Javascript with:<br/>
-
-    wails init -n myproject -t react
-
-    If you would rather use Typescript:
-
-    wails init -n myproject -t react-ts
-</TabItem>
-<TabItem value="Vue">
-    Generate a <a href="https://vuejs.org/">Vue</a> project using Javascript with:<br/>
-
-    wails init -n myproject -t vue
-
-    If you would rather use Typescript:
-
-    wails init -n myproject -t vue-ts
-</TabItem>
-<TabItem value="Preact">
-    Generate a <a href="https://preactjs.com/">Preact</a> project using Javascript with:<br/>
-
-    wails init -n myproject -t preact
-
-    If you would rather use Typescript:
-
-    wails init -n myproject -t preact-ts
-</TabItem>
-<TabItem value="Lit">
-    Generate a <a href="https://lit.dev/">Lit</a> project using Javascript with:<br/>
-
-    wails init -n myproject -t lit
-
-    If you would rather use Typescript:
-
-    wails init -n myproject -t lit-ts
-</TabItem>
-<TabItem value="Vanilla">
-    Generate a Vanilla project using Javascript with:<br/>
-
-    wails init -n myproject -t vanilla
-
-    If you would rather use Typescript:
-
-    wails init -n myproject -t vanilla-ts
-</TabItem>
-</Tabs>
+import TabsFrameworks from "../../src/components/frameworktabs";
+<TabsFrameworks/>
 
 <hr/>
 
diff --git a/website/docs/gettingstarted/installation.mdx b/website/docs/gettingstarted/installation.mdx
index 7358a3ec..e4adbadc 100644
--- a/website/docs/gettingstarted/installation.mdx
+++ b/website/docs/gettingstarted/installation.mdx
@@ -38,33 +38,8 @@ Run `npm --version` to verify.
 You will also need to install platform specific dependencies:
 
 
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-
-<Tabs
-  defaultValue="Windows"
-  values={[
-    { label: "Windows", value: "Windows" },
-    { label: "MacOS", value: "MacOS" },
-    { label: "Linux", value: "Linux" },
-  ]}
->
-  <TabItem value="MacOS">
-  Wails requires that the xcode command line tools are installed. This can be done by running:<br/>
-
-  <code>xcode-select --install</code>
-  </TabItem>
-  <TabItem value="Windows">
-    Wails requires that the <a href="https://developer.microsoft.com/en-us/microsoft-edge/webview2/">WebView2</a>{" "}
-    runtime is installed. Some Windows installations will already have this installed. You can check using the{" "}
-    <code>wails doctor</code> command (see below).
-  </TabItem>
-  <TabItem value="Linux">Linux required the standard <code>gcc</code> build tools plus <code>libgtk3</code> and <code>libwebkit</code>.
-  Rather than list a ton of commands for different distros, Wails can try to determine
-  what the installation commands are for your specific distribution. Run <code>wails doctor</code> after installation
-  to be shown how to install the dependencies.
-  If your distro/package manager is not supported, please consult the <a href="/docs/guides/linux-distro-support"> Add Linux Distro</a> guide.</TabItem>
-</Tabs>
+import TabInstall from '../../src/components/tabinstall';
+<TabInstall/>
 
 ## Optional Dependencies
 
diff --git a/website/src/components/frameworktabs.js b/website/src/components/frameworktabs.js
new file mode 100644
index 00000000..ac7c11c0
--- /dev/null
+++ b/website/src/components/frameworktabs.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+export default function TabsFrameworks() {
+    return (
+
+        <Tabs
+            defaultValue="Svelte"
+            values={[
+                {label: "Svelte", value: "Svelte"},
+                {label: "React", value: "React"},
+                {label: "Vue", value: "Vue"},
+                {label: "Preact", value: "Preact"},
+                {label: "Lit", value: "Lit"},
+                {label: "Vanilla", value: "Vanilla"},
+            ]}
+        >
+            <TabItem value="Svelte">
+                Generate a <a href="https://svelte.dev/">Svelte</a> project using Javascript with:<br/>
+
+                <code>wails init -n myproject -t svelte</code>
+
+                If you would rather use Typescript:
+
+                <code>wails init -n myproject -t svelte-ts</code>
+            </TabItem>
+            <TabItem value="React">
+                Generate a <a href="https://reactjs.org/">React</a> project using Javascript with:<br/>
+
+                <code>wails init -n myproject -t react</code>
+
+                If you would rather use Typescript:
+
+                <code>wails init -n myproject -t react-ts</code>
+            </TabItem>
+            <TabItem value="Vue">
+                Generate a <a href="https://vuejs.org/">Vue</a> project using Javascript with:<br/>
+
+                <code>wails init -n myproject -t vue</code>
+
+                If you would rather use Typescript:
+
+                <code>wails init -n myproject -t vue-ts</code>
+            </TabItem>
+            <TabItem value="Preact">
+                Generate a <a href="https://preactjs.com/">Preact</a> project using Javascript with:<br/>
+
+                <code>wails init -n myproject -t preact</code>
+
+                If you would rather use Typescript:
+
+                <code>wails init -n myproject -t preact-ts</code>
+            </TabItem>
+            <TabItem value="Lit">
+                Generate a <a href="https://lit.dev/">Lit</a> project using Javascript with:<br/>
+
+                <code>wails init -n myproject -t lit</code>
+
+                If you would rather use Typescript:
+
+                <code>wails init -n myproject -t lit-ts</code>
+            </TabItem>
+            <TabItem value="Vanilla">
+                Generate a Vanilla project using Javascript with:<br/>
+
+                <code>wails init -n myproject -t vanilla</code>
+
+                If you would rather use Typescript:
+
+                <code>wails init -n myproject -t vanilla-ts</code>
+            </TabItem>
+        </Tabs>
+    )
+}
+
+
+
+
+
diff --git a/website/src/components/tabinstall.js b/website/src/components/tabinstall.js
new file mode 100644
index 00000000..71a723db
--- /dev/null
+++ b/website/src/components/tabinstall.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+export default function TabInstall() {
+    return (
+        <Tabs
+            defaultValue="Windows"
+            values={[
+                {label: "Windows", value: "Windows"},
+                {label: "MacOS", value: "MacOS"},
+                {label: "Linux", value: "Linux"},
+            ]}
+        >
+            <TabItem value="MacOS">
+                Wails requires that the xcode command line tools are installed. This can be done by running:<br/>
+
+                <code>xcode-select --install</code>
+            </TabItem>
+            <TabItem value="Windows">
+                Wails requires that the <a
+                href="https://developer.microsoft.com/en-us/microsoft-edge/webview2/">WebView2</a>{" "}
+                runtime is installed. Some Windows installations will already have this installed. You can check using
+                the{" "}
+                <code>wails doctor</code> command (see below).
+            </TabItem>
+            <TabItem value="Linux">
+                Linux required the standard <code>gcc</code> build tools
+                plus <code>libgtk3</code> and <code>libwebkit</code>.
+                Rather than list a ton of commands for different distros, Wails can try to determine
+                what the installation commands are for your specific distribution. Run <code>wails doctor</code> after
+                installation
+                to be shown how to install the dependencies.
+                If your distro/package manager is not supported, please consult the <a
+                href="/docs/guides/linux-distro-support"> Add Linux Distro</a> guide.
+
+            </TabItem>
+
+        </Tabs>
+    )
+}
diff --git a/website/versioned_docs/version-v2.0.0-beta.38/gettingstarted/firstproject.mdx b/website/versioned_docs/version-v2.0.0-beta.38/gettingstarted/firstproject.mdx
index b5ee1fa4..6bc9051f 100644
--- a/website/versioned_docs/version-v2.0.0-beta.38/gettingstarted/firstproject.mdx
+++ b/website/versioned_docs/version-v2.0.0-beta.38/gettingstarted/firstproject.mdx
@@ -11,77 +11,8 @@ Now that the CLI is installed, you can generate a new project by using the `wail
 Pick your favourite framework:
 
 
-
-
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-
-<Tabs
-    defaultValue="Svelte"
-    values={[
-        {label: "Svelte", value: "Svelte"},
-        {label: "React", value: "React"},
-        {label: "Vue", value: "Vue"},
-        {label: "Preact", value: "Preact"},
-        {label: "Lit", value: "Lit"},
-        {label: "Vanilla", value: "Vanilla"},
-    ]}
->
-<TabItem value="Svelte">
-    Generate a <a href="https://svelte.dev/">Svelte</a> project using Javascript with:<br/>
-
-    wails init -n myproject -t svelte
-
-    If you would rather use Typescript:
-
-    wails init -n myproject -t svelte-ts
-</TabItem>
-<TabItem value="React">
-    Generate a <a href="https://reactjs.org/">React</a> project using Javascript with:<br/>
-
-    wails init -n myproject -t react
-
-    If you would rather use Typescript:
-
-    wails init -n myproject -t react-ts
-</TabItem>
-<TabItem value="Vue">
-    Generate a <a href="https://vuejs.org/">Vue</a> project using Javascript with:<br/>
-
-    wails init -n myproject -t vue
-
-    If you would rather use Typescript:
-
-    wails init -n myproject -t vue-ts
-</TabItem>
-<TabItem value="Preact">
-    Generate a <a href="https://preactjs.com/">Preact</a> project using Javascript with:<br/>
-
-    wails init -n myproject -t preact
-
-    If you would rather use Typescript:
-
-    wails init -n myproject -t preact-ts
-</TabItem>
-<TabItem value="Lit">
-    Generate a <a href="https://lit.dev/">Lit</a> project using Javascript with:<br/>
-
-    wails init -n myproject -t lit
-
-    If you would rather use Typescript:
-
-    wails init -n myproject -t lit-ts
-</TabItem>
-<TabItem value="Vanilla">
-    Generate a Vanilla project using Javascript with:<br/>
-
-    wails init -n myproject -t vanilla
-
-    If you would rather use Typescript:
-
-    wails init -n myproject -t vanilla-ts
-</TabItem>
-</Tabs>
+import TabsFrameworks from "../../../src/components/frameworktabs";
+<TabsFrameworks/>
 
 <hr/>
 
diff --git a/website/versioned_docs/version-v2.0.0-beta.38/gettingstarted/installation.mdx b/website/versioned_docs/version-v2.0.0-beta.38/gettingstarted/installation.mdx
index cee8556f..c7cd1f76 100644
--- a/website/versioned_docs/version-v2.0.0-beta.38/gettingstarted/installation.mdx
+++ b/website/versioned_docs/version-v2.0.0-beta.38/gettingstarted/installation.mdx
@@ -38,35 +38,8 @@ Run `npm --version` to verify.
 You will also need to install platform specific dependencies:
 
 
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-
-<Tabs
-        defaultValue="Windows"
-        values={[
-          {label: "Windows", value: "Windows"},
-          {label: "MacOS", value: "MacOS"},
-          {label: "Linux", value: "Linux"},
-        ]}
->
-  <TabItem value="MacOS">
-    Wails requires that the xcode command line tools are installed. This can be done by running:<br/>
-
-    <code>xcode-select --install</code>
-  </TabItem>
-  <TabItem value="Windows">
-    Wails requires that the <a href="https://developer.microsoft.com/en-us/microsoft-edge/webview2/">WebView2</a>{" "}
-    runtime is installed. Some Windows installations will already have this installed. You can check using the{" "}
-    <code>wails doctor</code> command (see below).
-  </TabItem>
-  <TabItem value="Linux">Linux required the standard <code>gcc</code> build tools
-    plus <code>libgtk3</code> and <code>libwebkit</code>.
-    Rather than list a ton of commands for different distros, Wails can try to determine
-    what the installation commands are for your specific distribution. Run <code>wails doctor</code> after installation
-    to be shown how to install the dependencies.
-    If your distro/package manager is not supported, please consult the <a href="/docs/guides/linux-distro-support"> Add
-      Linux Distro</a> guide.</TabItem>
-</Tabs>
+import TabInstall from '../../../src/components/tabinstall';
+<TabInstall/>
 
 ## Optional Dependencies
 
diff --git a/website/versioned_docs/version-v2.0.0-beta.39/gettingstarted/firstproject.mdx b/website/versioned_docs/version-v2.0.0-beta.39/gettingstarted/firstproject.mdx
index 2cdc85f5..6bc9051f 100644
--- a/website/versioned_docs/version-v2.0.0-beta.39/gettingstarted/firstproject.mdx
+++ b/website/versioned_docs/version-v2.0.0-beta.39/gettingstarted/firstproject.mdx
@@ -11,78 +11,8 @@ Now that the CLI is installed, you can generate a new project by using the `wail
 Pick your favourite framework:
 
 
-
-
-
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-
-<Tabs
-    defaultValue="Svelte"
-    values={[
-        {label: "Svelte", value: "Svelte"},
-        {label: "React", value: "React"},
-        {label: "Vue", value: "Vue"},
-        {label: "Preact", value: "Preact"},
-        {label: "Lit", value: "Lit"},
-        {label: "Vanilla", value: "Vanilla"},
-    ]}
->
-<TabItem value="Svelte">
-    Generate a <a href="https://svelte.dev/">Svelte</a> project using Javascript with:<br/>
-
-    wails init -n myproject -t svelte
-
-    If you would rather use Typescript:
-
-    wails init -n myproject -t svelte-ts
-</TabItem>
-<TabItem value="React">
-    Generate a <a href="https://reactjs.org/">React</a> project using Javascript with:<br/>
-
-    wails init -n myproject -t react
-
-    If you would rather use Typescript:
-
-    wails init -n myproject -t react-ts
-</TabItem>
-<TabItem value="Vue">
-    Generate a <a href="https://vuejs.org/">Vue</a> project using Javascript with:<br/>
-
-    wails init -n myproject -t vue
-
-    If you would rather use Typescript:
-
-    wails init -n myproject -t vue-ts
-</TabItem>
-<TabItem value="Preact">
-    Generate a <a href="https://preactjs.com/">Preact</a> project using Javascript with:<br/>
-
-    wails init -n myproject -t preact
-
-    If you would rather use Typescript:
-
-    wails init -n myproject -t preact-ts
-</TabItem>
-<TabItem value="Lit">
-    Generate a <a href="https://lit.dev/">Lit</a> project using Javascript with:<br/>
-
-    wails init -n myproject -t lit
-
-    If you would rather use Typescript:
-
-    wails init -n myproject -t lit-ts
-</TabItem>
-<TabItem value="Vanilla">
-    Generate a Vanilla project using Javascript with:<br/>
-
-    wails init -n myproject -t vanilla
-
-    If you would rather use Typescript:
-
-    wails init -n myproject -t vanilla-ts
-</TabItem>
-</Tabs>
+import TabsFrameworks from "../../../src/components/frameworktabs";
+<TabsFrameworks/>
 
 <hr/>
 
diff --git a/website/versioned_docs/version-v2.0.0-beta.39/gettingstarted/installation.mdx b/website/versioned_docs/version-v2.0.0-beta.39/gettingstarted/installation.mdx
index 5b8b3971..32399ef6 100644
--- a/website/versioned_docs/version-v2.0.0-beta.39/gettingstarted/installation.mdx
+++ b/website/versioned_docs/version-v2.0.0-beta.39/gettingstarted/installation.mdx
@@ -38,38 +38,8 @@ Run `npm --version` to verify.
 You will also need to install platform specific dependencies:
 
 
-
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-
-<Tabs
-    defaultValue="Windows"
-    values={[
-        {label: "Windows", value: "Windows"},
-        {label: "MacOS", value: "MacOS"},
-        {label: "Linux", value: "Linux"},
-    ]}
->
-    <TabItem value="MacOS">
-        Wails requires that the xcode command line tools are installed. This can be done by running:<br/>
-
-        <code>xcode-select --install</code>
-    </TabItem>
-    <TabItem value="Windows">
-        Wails requires that the <a
-        href="https://developer.microsoft.com/en-us/microsoft-edge/webview2/">WebView2</a>{" "}
-        runtime is installed. Some Windows installations will already have this installed. You can check using the{" "}
-        <code>wails doctor</code> command (see below).
-    </TabItem>
-    <TabItem value="Linux">Linux required the standard <code>gcc</code> build tools
-        plus <code>libgtk3</code> and <code>libwebkit</code>.
-        Rather than list a ton of commands for different distros, Wails can try to determine
-        what the installation commands are for your specific distribution. Run <code>wails doctor</code> after
-        installation
-        to be shown how to install the dependencies.
-        If your distro/package manager is not supported, please consult the <a
-            href="/docs/guides/linux-distro-support"> Add Linux Distro</a> guide.</TabItem>
-</Tabs>
+import TabInstall from '../../../src/components/tabinstall';
+<TabInstall/>
 
 ## Optional Dependencies