feat: optimize documentation website (#1849)

* fix(website): fix i18n configuration * feat: add i18n file to auto generate code * feat: move the crowdin configuration file to the website directory * feat(website): add crowdin dependencies and scripts * feat: add COC * feat: use escape hatch syntax to wrap JSX code in MDX files * feat: remove ach language * feat: generate default language configuration * feat: remove compare link * feat: add COC link * feat(website): update documentation * feat: use escape hatch syntax to wrap JSX code in MDX files * style: add prettier * style: format mdx files * chore: remove prettier command * feat: update en docs * feat: sync Chinese documents * feat: update doc * Update website/src/pages/coc.mdx Co-authored-by: Lea Anthony <lea.anthony@gmail.com>
2026-08-05 13:53:43 -07:00 · 2022-09-18 22:01:50 +10:00
parent d0a39349d4
commit e9b2c15664
218 changed files with 3034 additions and 7662 deletions
@@ -1,8 +1,10 @@
 # EmailIt

+```mdx-code-block
 <p style={{ "text-align": "center" }}>
  <img src={require("@site/static/img/showcase/emailit.webp").default} />
  <br />
 </p>
+```

 [EmailIt](https://github.com/raguay/EmailIt/) is a Wails 2 program that is a markdown based email sender only with nine notepads, scripts to manipulate the text, and templates. It also has a builtin [Node-Red](https://nodered.org/) server, scripts terminal, and the [ScriptBar](https://github.com/raguay/ScriptBarApp) program for displaying results from Node-Red or a script on your system. Documentation is very scarce, but the programs works. It’s built using Wails2 and Svelte, and the download is a universal macOS application.
@@ -1,9 +1,11 @@
 # EncryptEasy

+```mdx-code-block
 <p style={{ "text-align": "center" }}>
  <img src={require("@site/static/img/showcase/encrypteasy.webp").default} />
  <br />
 </p>
+```

 **[EncryptEasy](https://www.encrypteasy.app) is a simple and easy to use PGP encryption tool, managing all your and your contacts keys. Encryption should be simple. Developed with Wails.**

@@ -1,9 +1,11 @@
 # FileHound Export Utility

+```mdx-code-block
 <p style={{ "text-align": "center" }}>
  <img src={require("@site/static/img/showcase/filehound.webp").default} />
  <br />
 </p>
+```

 [FileHound Export Utility](https://www.filehound.co.uk/) FileHound is a cloud document management platform made for secure file retention, business process automation and SmartCapture capabilities.

@@ -1,10 +1,14 @@
 # Minecraft Updater

+```mdx-code-block
 <p style={{ "text-align": "center" }}>
  <img
-    src={require("@site/static/img/showcase/minecraft-mod-updater.webp").default}
+    src={
+      require("@site/static/img/showcase/minecraft-mod-updater.webp").default
+    }
  />
  <br />
 </p>
+```

 [Minecraft Updater](https://github.com/Gurkengewuerz/MinecraftModUpdater) is a utility tool to update and synchronize Minecraft mods for your userbase. It’s built using Wails2 and React with [antd](https://ant.design/) as frontend framework.
@@ -1,11 +1,13 @@
 # Modal File Manager

+```mdx-code-block
 <p style={{ "text-align": "center" }}>
  <img
    src={require("@site/static/img/showcase/modalfilemanager.webp").default}
  />
  <br />
 </p>
+```

 [Modal File Manager](https://github.com/raguay/ModalFileManager) is a dual pane file manager using web technologies. My original design was based on NW.js and can be found [here](https://github.com/raguay/ModalFileManager-NWjs). This version uses the same Svelte based frontend code (but it has be greatly modified since the departure from NW.js), but the backend is a [Wails 2](https://wails.io/) implementation. By using this implementation, I no longer use command line `rm`, `cp`, etc. commands. It is fully coded using Go and runs much faster than the previous versions.

@@ -1,8 +1,10 @@
 # Molley Wallet

+```mdx-code-block
 <p style={{ "text-align": "center" }}>
  <img src={require("@site/static/img/showcase/mollywallet.webp").default} />
  <br />
 </p>
+```

 [Molly Wallet](https://github.com/grvlle/constellation_wallet/) the official $DAG wallet of the Constellation Network. It'll let users interact with the Hypergraph Network in various ways, not limited to producing $DAG transactions.
@@ -1,9 +1,11 @@
 # October

+```mdx-code-block
 <p style={{ "text-align": "center" }}>
  <img src={require("@site/static/img/showcase/october.webp").default} />
  <br />
 </p>
+```

 [October](https://october.utf9k.net) is a small Wails application that makes it really easy to extract highlights from [Kobo eReaders](https://en.wikipedia.org/wiki/Kobo_eReader) and then forward them to [Readwise](https://readwise.io).

@@ -1,8 +1,10 @@
 # Optimus

+```mdx-code-block
 <p style={{ "text-align": "center" }}>
  <img src={require("@site/static/img/showcase/optimus.webp").default} />
  <br />
 </p>
+```

 [Optimus](https://github.com/splode/optimus) is a desktop image optimization application. It supports conversion and compression between WebP, JPEG, and PNG image formats.
@@ -1,8 +1,10 @@
 # Portfall

+```mdx-code-block
 <p style={{ "text-align": "center" }}>
  <img src={require("@site/static/img/showcase/portfall.webp").default} />
  <br />
 </p>
+```

 [Portfall](https://github.com/rekon-oss/portfall) - A desktop k8s port-forwarding portal for easy access to all your cluster UIs
@@ -1,10 +1,12 @@
 # Restic Browser

+```mdx-code-block
 <p style={{ "text-align": "center" }}>
  <img
    src={require("@site/static/img/showcase/restic-browser-2.png").default}
  />
  <br />
 </p>
+```

 [Restic-Browser](https://github.com/emuell/restic-browser) - A simple, cross-platform [restic](https://github.com/restic/restic) backup GUI for browsing and restoring restic repositories.
@@ -1,9 +1,11 @@
 # RiftShare

+```mdx-code-block
 <p style={{ "text-align": "center" }}>
  <img src={require("@site/static/img/showcase/riftshare-main.webp").default} />
  <br />
 </p>
+```

 Easy, Secure, and Free file sharing for everyone. Learn more at [Riftshare.app](https://riftshare.app)

@@ -1,8 +1,10 @@
 # ScriptBar

+```mdx-code-block
 <p style={{ "text-align": "center" }}>
  <img src={require("@site/static/img/showcase/scriptbar.webp").default} />
  <br />
 </p>
+```

 [ScriptBar](https://GitHub.com/raguay/ScriptBarApp) is a program to show the output of the embedded [Node-Red](https://nodered.org) server in the [EmailIt](https://GitHub.com/raguay/EmailIt) application. It also displays the output of scripts on your system. ScriptBar doesn't put them in the menubar, but has them all in a convient window for easy viewing. You can have multiple tabs to have many different things show. You can also keep the links to your most visited web sites.
@@ -1,8 +1,10 @@
 # Surge

+```mdx-code-block
 <p style={{ "text-align": "center" }}>
  <img src={require("@site/static/img/showcase/surge.png").default} />
  <br />
 </p>
+```

 [Surge](https://getsurge.io/) is a p2p filesharing app designed to utilize blockchain technologies to enable 100% anonymous file transfers. Surge is end-to-end encrypted, decentralized and open source.
@@ -1,8 +1,10 @@
 # Wally

+```mdx-code-block
 <p style={{ "text-align": "center" }}>
  <img src={require("@site/static/img/showcase/wally.webp").default} />
  <br />
 </p>
+```

 [Wally](https://ergodox-ez.com/pages/wally) is the official firmware flasher for [Ergodox](https://ergodox-ez.com/) keyboards. It looks great and is a fantastic example of what you can achieve with Wails: the ability to combine the power of Go and the rich graphical tools of the web development world.
@@ -1,8 +1,10 @@
 # Wombat

+```mdx-code-block
 <p style={{ "text-align": "center" }}>
  <img src={require("@site/static/img/showcase/wombat.webp").default} />
  <br />
 </p>
+```

 [Wombat](https://github.com/rogchap/wombat) is a cross platform gRPC client.
@@ -1,8 +1,10 @@
 # Ytd

+```mdx-code-block
 <p style={{ "text-align": "center" }}>
  <img src={require("@site/static/img/showcase/ytd.webp").default} />
  <br />
 </p>
+```

 [Ytd](https://github.com/marcio199226/ytd/tree/v2-wails) is an app for downloading tracks from youtube, creating offline playlists and share them with your friends, your friends will be able to playback your playlists or download them for offline listening, has an built-in player.
@@ -50,4 +50,4 @@ If you are unsure about a template, inspect `package.json` and `wails.json` for

 ## Pure JavaScript (Vanilla)

- [wails-pure-js-template](https://github.com/KiddoV/wails-pure-js-template) - A template with nothing but just basic JavaScript, HTML, and CSS
+- [wails-pure-js-template](https://github.com/KiddoV/wails-pure-js-template) - A template with nothing but just basic JavaScript, HTML, and CSS
@@ -9,6 +9,7 @@ This will compile your project and save the production-ready binary in the `buil

 If you run the binary, you should see the default application:

+```mdx-code-block
 <div class="text--center">
  <img
    src={require("@site/static/img/defaultproject.webp").default}
@@ -17,5 +18,6 @@ If you run the binary, you should see the default application:
  />
 </div>
 <br />
+```

 For more details on compilation options, please refer to the [CLI Reference](../reference/cli.mdx#build).
@@ -10,8 +10,7 @@ Now that the CLI is installed, you can generate a new project by using the `wail

 Pick your favourite framework:

-<!-- @formatter:off -->
-
+```mdx-code-block
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";

@@ -87,8 +86,7 @@ If you would rather use Typescript:<br/>

 </TabItem>
 </Tabs>
-
-<!-- @formatter:on -->
+```

 <hr />

@@ -37,8 +37,7 @@ Run `npm --version` to verify.

 You will also need to install platform specific dependencies:

-<!-- @formatter:off -->
-
+```mdx-code-block
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";

@@ -52,31 +51,16 @@ import TabItem from "@theme/TabItem";
 >
  <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>
+    done by running <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).
+    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.
  </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.
+    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>
-
-<!-- @formatter:on -->
+```

 ## Optional Dependencies

--- a/Show More
+++ b/Show More