5
0
mirror of https://github.com/wailsapp/wails.git synced 2025-05-04 02:02:55 +08:00

Fix docs again!

This commit is contained in:
Lea Anthony 2022-07-19 21:42:29 +10:00
parent e9ae3e7655
commit eea519224e
No known key found for this signature in database
GPG Key ID: 33DAF7BB90A58405
8 changed files with 95 additions and 361 deletions

View File

@ -10,79 +10,8 @@ Now that the CLI is installed, you can generate a new project by using the `wail
Pick your favourite framework: Pick your favourite framework:
import TabsFrameworks from "../../src/components/frameworktabs";
<TabsFrameworks/>
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/>
<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>
<hr/> <hr/>

View File

@ -37,38 +37,8 @@ Run `npm --version` to verify.
You will also need to install platform specific dependencies: You will also need to install platform specific dependencies:
import TabsInstaller from "../../src/components/tabinstall";
import Tabs from "@theme/Tabs"; <TabsInstaller />
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>
## Optional Dependencies ## Optional Dependencies

View File

@ -1,77 +1,77 @@
import React from 'react'; import React from 'react';
import Tabs from "@theme/Tabs"; import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem"; import TabItem from "@theme/TabItem";
export default function TabsFrameworks() { export default function TabsFrameworks() {
return ( return (
//@formatter:off
<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/>
<Tabs <code>wails init -n myproject -t svelte</code>
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:
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 svelte-ts</code> <code>wails init -n myproject -t react</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:
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 react-ts</code> <code>wails init -n myproject -t vue</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:
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 vue-ts</code> <code>wails init -n myproject -t preact</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:
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 preact-ts</code> <code>wails init -n myproject -t lit</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:
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 lit-ts</code> <code>wails init -n myproject -t vanilla</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:
If you would rather use Typescript: <code>wails init -n myproject -t vanilla-ts</code>
</TabItem>
<code>wails init -n myproject -t vanilla-ts</code> </Tabs>
</TabItem> //@formatter:on
</Tabs>
) )
} }

View File

@ -2,40 +2,42 @@ import React from 'react';
import Tabs from "@theme/Tabs"; import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem"; import TabItem from "@theme/TabItem";
export default function TabInstall() { export default function TabsInstaller() {
return ( return (
<Tabs //@formatter:off
defaultValue="Windows" <Tabs
values={[ defaultValue="Windows"
{label: "Windows", value: "Windows"}, values={[
{label: "MacOS", value: "MacOS"}, {label: "Windows", value: "Windows"},
{label: "Linux", value: "Linux"}, {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/> <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> <code>xcode-select --install</code>
</TabItem> </TabItem>
<TabItem value="Windows"> <TabItem value="Windows">
Wails requires that the <a Wails requires that the <a
href="https://developer.microsoft.com/en-us/microsoft-edge/webview2/">WebView2</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 runtime is installed. Some Windows installations will already have this installed. You can check using
the{" "} the{" "}
<code>wails doctor</code> command (see below). <code>wails doctor</code> command (see below).
</TabItem> </TabItem>
<TabItem value="Linux"> <TabItem value="Linux">
Linux required the standard <code>gcc</code> build tools Linux required the standard <code>gcc</code> build tools
plus <code>libgtk3</code> and <code>libwebkit</code>. plus <code>libgtk3</code> and <code>libwebkit</code>.
Rather than list a ton of commands for different distros, Wails can try to determine 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 what the installation commands are for your specific distribution. Run <code>wails doctor</code> after
installation installation
to be shown how to install the dependencies. to be shown how to install the dependencies.
If your distro/package manager is not supported, please consult the <a If your distro/package manager is not supported, please consult the <a
href="/docs/guides/linux-distro-support"> Add Linux Distro</a> guide. href="/docs/guides/linux-distro-support"> Add Linux Distro</a> guide.
</TabItem> </TabItem>
</Tabs> </Tabs>
//@formatter:off
) )
} }

View File

@ -11,76 +11,8 @@ Now that the CLI is installed, you can generate a new project by using the `wail
Pick your favourite framework: Pick your favourite framework:
import Tabs from "@theme/Tabs"; import TabsFrameworks from "../../../src/components/frameworktabs";
import TabItem from "@theme/TabItem"; <TabsFrameworks/>
<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>
<hr/> <hr/>

View File

@ -37,8 +37,8 @@ Run `npm --version` to verify.
You will also need to install platform specific dependencies: You will also need to install platform specific dependencies:
import TabInstall from '../../../src/components/tabinstall'; import TabsInstaller from "../../../src/components/tabinstall";
<TabInstall/> <TabsInstaller />
## Optional Dependencies ## Optional Dependencies

View File

@ -10,75 +10,8 @@ Now that the CLI is installed, you can generate a new project by using the `wail
Pick your favourite framework: Pick your favourite framework:
import Tabs from "@theme/Tabs"; import TabsFrameworks from "../../../src/components/frameworktabs";
import TabItem from "@theme/TabItem"; <TabsFrameworks/>
<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>
<hr/> <hr/>

View File

@ -37,42 +37,10 @@ Run `npm --version` to verify.
You will also need to install platform specific dependencies: You will also need to install platform specific dependencies:
import TabsInstaller from "../../../src/components/tabinstall";
<TabsInstaller />
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>
## Optional Dependencies ## Optional Dependencies
- [UPX](https://upx.github.io/) for compressing your applications. - [UPX](https://upx.github.io/) for compressing your applications.