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>

v2/tools/release/release.go

@@ -19,8 +19,8 @@ func checkError(err error) {
 	}
 }
 
+// TODO:This can be replaced with "https://github.com/coreos/go-semver/blob/main/semver/semver.go"
 func updateVersion() string {
-
 	currentVersionData, err := os.ReadFile(versionFile)
 	checkError(err)
 	currentVersion := string(currentVersionData)
@@ -35,6 +35,14 @@ func updateVersion() string {
 	return newVersion
 }
 
+func runCommand(name string, arg ...string) {
+	cmd := exec.Command(name, arg...)
+	cmd.Stdout = os.Stdout
+	cmd.Stderr = os.Stderr
+	err := cmd.Run()
+	checkError(err)
+}
+
 func main() {
 	var newVersion string
 	if len(os.Args) > 1 {
@@ -42,15 +50,20 @@ func main() {
 	} else {
 		newVersion = updateVersion()
 	}
+
 	s.CD("../../../website")
 	s.ECHO("Generating new Docs for version: " + newVersion)
-	cmd := exec.Command("npm", "run", "docusaurus", "docs:version", newVersion)
-	cmd.Stdout = os.Stdout
-	cmd.Stderr = os.Stderr
-	err := cmd.Run()
-	checkError(err)
 
-	// Load the version list
+	runCommand("npm", "run", "docusaurus", "docs:version", newVersion)
+
+	// For the default language identifier, please refer to: https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-theme-translations/locales
+	languages := []string{"en", "ja", "ko", "ru", "zh-Hans"}
+
+	for _, lang := range languages {
+		runCommand("npm", "run", "write-translations", "--", "--locale", lang)
+	}
+
+	// Load the version list/*
 	versionsData, err := os.ReadFile("versions.json")
 	checkError(err)
 	var versions []string
@@ -70,9 +83,6 @@ func main() {
 	s.CD("../versioned_sidebars")
 	s.RM("version-" + oldestVersion + "-sidebars.json")
 	s.CD("..")
-	cmd = exec.Command("npm", "run", "build")
-	cmd.Stdout = os.Stdout
-	cmd.Stderr = os.Stderr
-	err = cmd.Run()
-	checkError(err)
+
+	runCommand("npm", "run", "build")
 }

website/.prettierrc

@@ -0,0 +1,22 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "singleAttributePerLine": false,
+  "bracketSameLine": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false,
+  "parser": "mdx"
+}

website/blog/2021-09-27-v2-beta1-release-notes.mdx

@@ -5,6 +5,7 @@ authors: [leaanthony]
 tags: [wails, v2]
 ---
 
+```mdx-code-block
 <div class="text--center">
   <img
     src={require("@site/static/img/wails.webp").default}
@@ -13,6 +14,7 @@ tags: [wails, v2]
   />
 </div>
 <br />
+```
 
 When I first announced Wails on Reddit, just over 2 years ago from a train in Sydney, I did not expect it to get much
 attention. A few days later, a prolific tech vlogger released a tutorial video, gave it a positive review and from that
@@ -45,6 +47,7 @@ possible, but also being open to someone taking those projects and building on t
 
 ### WebView2 Chromium Renderer
 
+```mdx-code-block
 <div class="text--center">
   <img
     src={require("@site/static/img/devtools.png").default}
@@ -53,6 +56,7 @@ possible, but also being open to someone taking those projects and building on t
   />
 </div>
 <br />
+```
 
 Finally, Windows developers get a first class rendering engine for their applications! Gone are the days of contorting
 your frontend code to work on Windows. On top of that, you get a first-class developer tools experience!
@@ -69,6 +73,7 @@ Gophers rejoice! The single binary dream lives on!
 
 ### New Features
 
+```mdx-code-block
 <div class="text--center">
   <img
     src={require("@site/static/img/wails-menus.webp").default}
@@ -77,6 +82,7 @@ Gophers rejoice! The single binary dream lives on!
   />
 </div>
 <br />
+```
 
 There were a lot of requests for native menu support. Wails has finally got you covered. Application menus are now available
 and include support for most native menu features. This includes standard menu items, checkboxes, radio groups, submenus
@@ -91,6 +97,7 @@ There is now the option to generate IDE configuration along with your project. T
 in a supported IDE, it will already be configured for building and debugging your application. Currently VSCode is supported
 but we hope to support other IDEs such as Goland soon.
 
+```mdx-code-block
 <div class="text--center">
   <img
     src={require("@site/static/img/vscode.webp").default}
@@ -99,6 +106,7 @@ but we hope to support other IDEs such as Goland soon.
   />
 </div>
 <br />
+```
 
 ### No requirement to bundle assets
 
@@ -117,6 +125,7 @@ They don't even need to be in the top directory - Wails will just work it out fo
 
 ### New Development Experience
 
+```mdx-code-block
 <div class="text--center">
   <img
     src={require("@site/static/img/browser.webp").default}
@@ -125,6 +134,7 @@ They don't even need to be in the top directory - Wails will just work it out fo
   />
 </div>
 <br />
+```
 
 Now that assets don't need to be bundled, it's enabled a whole new development experience. The new `wails dev`
 command will build and run your application, but instead of using the assets in the `embed.FS`, it loads them directly
@@ -150,6 +160,7 @@ auto-imported when hitting tab in an auto-generated module wrapping your Go code
 
 ### Remote Templates
 
+```mdx-code-block
 <div class="text--center">
   <img
     src={require("@site/static/img/remote.webp").default}
@@ -158,6 +169,7 @@ auto-imported when hitting tab in an auto-generated module wrapping your Go code
   />
 </div>
 <br />
+```
 
 Getting an application up and running quickly was always a key goal for the Wails project. When we launched, we tried
 to cover a lot of the modern frameworks at the time: react, vue and angular. The world of frontend development is very

website/blog/2021-11-08-v2-beta2-release-notes.mdx

@@ -5,6 +5,7 @@ authors: [leaanthony]
 tags: [wails, v2]
 ---
 
+```mdx-code-block
 <div class="text--center">
   <img
     src={require("@site/static/img/wails-mac.webp").default}
@@ -13,6 +14,7 @@ tags: [wails, v2]
   />
 </div>
 <br />
+```
 
 Today marks the first beta release of Wails v2 for Mac! It's taken quite a while to get to this point and I'm hoping
 that today's release will give you something that's reasonably useful. There have been a number of twists and turns
@@ -27,6 +29,7 @@ So what's new for Wails v2 for Mac vs v1? Hint: It's pretty similar to the Windo
 
 ### New Features
 
+```mdx-code-block
 <div class="text--center">
   <img
     src={require("@site/static/img/wails-menus-mac.webp").default}
@@ -35,6 +38,7 @@ So what's new for Wails v2 for Mac vs v1? Hint: It's pretty similar to the Windo
   />
 </div>
 <br />
+```
 
 There were a lot of requests for native menu support. Wails has finally got you covered. Application menus are now available
 and include support for most native menu features. This includes standard menu items, checkboxes, radio groups, submenus
@@ -95,6 +99,7 @@ auto-imported when hitting tab in an auto-generated module wrapping your Go code
 
 ### Remote Templates
 
+```mdx-code-block
 <div class="text--center">
   <img
     src={require("@site/static/img/remote-mac.webp").default}
@@ -103,6 +108,7 @@ auto-imported when hitting tab in an auto-generated module wrapping your Go code
   />
 </div>
 <br />
+```
 
 Getting an application up and running quickly was always a key goal for the Wails project. When we launched, we tried
 to cover a lot of the modern frameworks at the time: react, vue and angular. The world of frontend development is very
@@ -120,6 +126,7 @@ community can create!
 Thanks to the amazing support of [Mat Ryer](https://github.com/matryer/), the Wails project now supports M1 native
 builds:
 
+```mdx-code-block
 <div class="text--center">
   <img
     src={require("@site/static/img/build-darwin-arm.webp").default}
@@ -128,9 +135,11 @@ builds:
   />
 </div>
 <br />
+```
 
 You can also specify `darwin/amd64` as a target too:
 
+```mdx-code-block
 <div class="text--center">
   <img
     src={require("@site/static/img/build-darwin-amd.webp").default}
@@ -139,9 +148,11 @@ You can also specify `darwin/amd64` as a target too:
   />
 </div>
 <br />
+```
 
 Oh, I almost forgot.... you can also do `darwin/universal`.... :wink:
 
+```mdx-code-block
 <div class="text--center">
   <img
     src={require("@site/static/img/build-darwin-universal.webp").default}
@@ -150,11 +161,13 @@ Oh, I almost forgot.... you can also do `darwin/universal`.... :wink:
   />
 </div>
 <br />
+```
 
 ### Cross Compilation to Windows
 
 Because Wails v2 for Windows is pure Go, you can target Windows builds without docker.
 
+```mdx-code-block
 <div class="text--center">
   <img
     src={require("@site/static/img/build-cross-windows.webp").default}
@@ -163,6 +176,7 @@ Because Wails v2 for Windows is pure Go, you can target Windows builds without d
   />
 </div>
 <br />
+```
 
 ### WKWebView Renderer
 

website/blog/2022-02-22-v2-beta3-release-notes.mdx

@@ -5,6 +5,7 @@ authors: [leaanthony]
 tags: [wails, v2]
 ---
 
+```mdx-code-block
 <div class="text--center">
   <img
     src={require("@site/static/img/wails-linux.webp").default}
@@ -13,6 +14,7 @@ tags: [wails, v2]
   />
 </div>
 <br />
+```
 
 I'm pleased to finally announce that Wails v2 is now in beta for Linux! It is somewhat ironic that the very first
 experiments with v2 was on Linux and yet it has ended up as the last release. That being said, the v2 we have today
@@ -20,6 +22,7 @@ is very different from those first experiments. So without further ado, let's go
 
 ### New Features
 
+```mdx-code-block
 <div class="text--center">
   <img
     src={require("@site/static/img/wails-menus-linux.webp").default}
@@ -28,6 +31,7 @@ is very different from those first experiments. So without further ado, let's go
   />
 </div>
 <br />
+```
 
 There were a lot of requests for native menu support. Wails has finally got you covered. Application menus are now available
 and include support for most native menu features. This includes standard menu items, checkboxes, radio groups, submenus
@@ -79,6 +83,7 @@ auto-imported when hitting tab in an auto-generated module wrapping your Go code
 
 ### Remote Templates
 
+```mdx-code-block
 <div class="text--center">
   <img
     src={require("@site/static/img/remote-linux.webp").default}
@@ -87,6 +92,7 @@ auto-imported when hitting tab in an auto-generated module wrapping your Go code
   />
 </div>
 <br />
+```
 
 Getting an application up and running quickly was always a key goal for the Wails project. When we launched, we tried
 to cover a lot of the modern frameworks at the time: react, vue and angular. The world of frontend development is very
@@ -103,14 +109,16 @@ community can create!
 
 Because Wails v2 for Windows is pure Go, you can target Windows builds without docker.
 
+```mdx-code-block
 <div class="text--center">
   <img
-    src="/img/linux-build-cross-windows.webp"
+    src={require("@site/static/img/linux-build-cross-windows.webp").default}
     width="80%"
     class="screenshot"
   />
 </div>
 <br />
+```
 
 ### In Conclusion
 

website/crowdin.yml

@@ -0,0 +1,21 @@
+project_id: 531392
+api_token_env: CROWDIN_PERSONAL_TOKEN
+preserve_hierarchy: true
+commit_message: "[ci skip]"
+files:
+  - source: /docs/**/*
+    translation: /i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name%
+    ignore:
+      - /**/*.json
+  - source: /blog/**/*
+    translation: /i18n/%two_letters_code%/docusaurus-plugin-content-blog/**/%original_file_name%
+  - source: /src/pages/**/*
+    translation: /i18n/%two_letters_code%/docusaurus-plugin-content-pages/**/%original_file_name%
+    ignore:
+      - /**/*.js
+      - /**/*.jsx
+      - /**/*.ts
+      - /**/*.tsx
+      - /**/*.css
+  - source: /i18n/en/**/*.json
+    translation: /i18n/%two_letters_code%/**/%original_file_name%

website/docs/community/showcase/emailit.mdx

@@ -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.

website/docs/community/showcase/encrypteasy.mdx

@@ -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.**
 

website/docs/community/showcase/filehound.mdx

@@ -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.
 

website/docs/community/showcase/minecraftupdater.mdx

@@ -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.

website/docs/community/showcase/modalfilemanager.mdx

@@ -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.
 

website/docs/community/showcase/mollywallet.mdx

@@ -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.

website/docs/community/showcase/october.mdx

@@ -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).
 

website/docs/community/showcase/optimus.mdx

@@ -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.

website/docs/community/showcase/portfall.mdx

@@ -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

website/docs/community/showcase/restic-browser.mdx

@@ -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.

website/docs/community/showcase/riftshare.mdx

@@ -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)
 

website/docs/community/showcase/scriptbar.mdx

@@ -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.

website/docs/community/showcase/surge.mdx

@@ -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.

website/docs/community/showcase/wally.mdx

@@ -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.