mirror of
https://github.com/wavetermdev/wails.git
synced 2026-08-05 13:53:43 -07:00
Optimise images part 2
This commit is contained in:
Lea Anthony
@@ -7,7 +7,7 @@ tags: [wails, v2]
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails.png").default}
|
||||
src={require("@site/static/img/wails.webp").default}
|
||||
width="40%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -71,7 +71,7 @@ Gophers rejoice! The single binary dream lives on!
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus.png").default}
|
||||
src={require("@site/static/img/wails-menus.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -93,7 +93,7 @@ but we hope to support other IDEs such as Goland soon.
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/vscode.png").default}
|
||||
src={require("@site/static/img/vscode.webp").default}
|
||||
width="100%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -119,7 +119,7 @@ They don't even need to be in the top directory - Wails will just work it out fo
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/browser.png").default}
|
||||
src={require("@site/static/img/browser.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -152,7 +152,7 @@ auto-imported when hitting tab in an auto-generated module wrapping your Go code
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote.png").default}
|
||||
src={require("@site/static/img/remote.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
||||
@@ -7,7 +7,7 @@ tags: [wails, v2]
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-mac.png").default}
|
||||
src={require("@site/static/img/wails-mac.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -29,7 +29,7 @@ So what's new for Wails v2 for Mac vs v1? Hint: It's pretty similar to the Windo
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus-mac.png").default}
|
||||
src={require("@site/static/img/wails-menus-mac.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -97,7 +97,7 @@ auto-imported when hitting tab in an auto-generated module wrapping your Go code
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote-mac.png").default}
|
||||
src={require("@site/static/img/remote-mac.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -122,7 +122,7 @@ builds:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-arm.png").default}
|
||||
src={require("@site/static/img/build-darwin-arm.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -133,7 +133,7 @@ You can also specify `darwin/amd64` as a target too:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-amd.png").default}
|
||||
src={require("@site/static/img/build-darwin-amd.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -144,7 +144,7 @@ Oh, I almost forgot.... you can also do `darwin/universal`.... :wink:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-universal.png").default}
|
||||
src={require("@site/static/img/build-darwin-universal.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -157,7 +157,7 @@ Because Wails v2 for Windows is pure Go, you can target Windows builds without d
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-cross-windows.png").default}
|
||||
src={require("@site/static/img/build-cross-windows.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
||||
@@ -7,7 +7,7 @@ tags: [wails, v2]
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-linux.png").default}
|
||||
src={require("@site/static/img/wails-linux.webp").default}
|
||||
width="40%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -22,7 +22,7 @@ is very different from those first experiments. So without further ado, let's go
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus-linux.png").default}
|
||||
src={require("@site/static/img/wails-menus-linux.webp").default}
|
||||
width="50%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -81,7 +81,7 @@ auto-imported when hitting tab in an auto-generated module wrapping your Go code
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote-linux.png").default}
|
||||
src={require("@site/static/img/remote-linux.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -105,7 +105,7 @@ Because Wails v2 for Windows is pure Go, you can target Windows builds without d
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src="/img/linux-build-cross-windows.png"
|
||||
src="/img/linux-build-cross-windows.webp"
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
||||
@@ -11,7 +11,7 @@ If you run the binary, you should see the default application:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/defaultproject.png").default}
|
||||
src={require("@site/static/img/defaultproject.webp").default}
|
||||
width="50%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
||||
@@ -95,14 +95,14 @@ our custom assets handler:
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/assetshandler-does-not-exist.png").default}
|
||||
src={require("@site/static/img/assetshandler-does-not-exist.webp").default}
|
||||
/>
|
||||
</p>
|
||||
|
||||
However, if we request `go.mod`, we will see the following output:
|
||||
|
||||
<p className="text--center">
|
||||
<img src={require("@site/static/img/assetshandler-go-mod.png").default} />
|
||||
<img src={require("@site/static/img/assetshandler-go-mod.webp").default} />
|
||||
</p>
|
||||
|
||||
This technique can be used to load images directly into the page. If we updated our default vanilla template and
|
||||
@@ -122,7 +122,7 @@ Then we would see the following:
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/assetshandler-image.png").default}
|
||||
src={require("@site/static/img/assetshandler-image.webp").default}
|
||||
style={{ width: "75%" }}
|
||||
/>
|
||||
</p>
|
||||
|
||||
@@ -9,7 +9,7 @@ Currently, we support [Visual Studio Code](https://code.visualstudio.com/) but a
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/vscode.png").default}
|
||||
src={require("@site/static/img/vscode.webp").default}
|
||||
style={{ width: "75%" }}
|
||||
/>
|
||||
</p>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img
|
||||
src={require("@site/static/img/nsis.png").default}
|
||||
src={require("@site/static/img/nsis.webp").default}
|
||||
style={{ "max-width": "50%" }}
|
||||
/>
|
||||
<br />
|
||||
|
||||
@@ -11,7 +11,7 @@ version of the runtime library. Finally, it is possible to bind Go methods to th
|
||||
Javascript methods that can be called, just as if they were local Javascript methods.
|
||||
|
||||
<div className="text--center">
|
||||
<img src={require("@site/static/img/architecture.png").default} width="75%" />
|
||||
<img src={require("@site/static/img/architecture.webp").default} width="75%" />
|
||||
</div>
|
||||
|
||||
## The Main Application
|
||||
|
||||
@@ -29,7 +29,7 @@ you'd expect from a modern native app.
|
||||
|
||||
<p class="text--center">
|
||||
<a href="https://varly.app/">
|
||||
<img src={require("@site/static/img/varly.png").default} width="75%" />
|
||||
<img src={require("@site/static/img/varly.webp").default} width="75%" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
||||
@@ -548,9 +548,9 @@ Preconfigured titlebar settings are available:
|
||||
|
||||
| Setting | Example |
|
||||
| --------------------------- | --------------------------------------------- |
|
||||
| `mac.TitleBarDefault()` |  |
|
||||
| `mac.TitleBarHidden()` |  |
|
||||
| `mac.TitleBarHiddenInset()` |  |
|
||||
| `mac.TitleBarDefault()` |  |
|
||||
| `mac.TitleBarHidden()` |  |
|
||||
| `mac.TitleBarHiddenInset()` |  |
|
||||
|
||||
Example:
|
||||
|
||||
@@ -619,7 +619,7 @@ The "About" menu item will appear in the app menu:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/reference/about-menu.png").default}
|
||||
src={require("@site/static/img/reference/about-menu.webp").default}
|
||||
class="screenshot"
|
||||
/>
|
||||
</div>
|
||||
@@ -629,7 +629,7 @@ When clicked, that will open an about message box:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/reference/about-dialog.png").default}
|
||||
src={require("@site/static/img/reference/about-dialog.webp").default}
|
||||
width="40%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
||||
@@ -6,7 +6,7 @@ sidebar_position: 20
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/tutorials/dogsapi/img.png").default}
|
||||
src={require("@site/static/img/tutorials/dogsapi/img.webp").default}
|
||||
width="50%"
|
||||
className="screenshot"
|
||||
/>
|
||||
|
||||
@@ -96,7 +96,7 @@ If we view the `build/bin` directory in Windows Explorer, we should see our proj
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/helloworld-app-icon.png").default}
|
||||
src={require("@site/static/img/helloworld-app-icon.webp").default}
|
||||
width="134px"
|
||||
/>
|
||||
</div>
|
||||
@@ -112,7 +112,7 @@ You should see the application working as expected:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/windows-default-app.png").default}
|
||||
src={require("@site/static/img/windows-default-app.webp").default}
|
||||
width="50%"
|
||||
className="screenshot"
|
||||
/>
|
||||
|
||||
+5
-5
@@ -10,7 +10,7 @@ tags:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails.png").default}
|
||||
src={require("@site/static/img/wails.webp").default}
|
||||
width="40%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -54,7 +54,7 @@ Gophers rejoice! The single binary dream lives on!
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus.png").default}
|
||||
src={require("@site/static/img/wails-menus.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -70,7 +70,7 @@ There is now the option to generate IDE configuration along with your project. T
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/vscode.png").default}
|
||||
src={require("@site/static/img/vscode.webp").default}
|
||||
width="100%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -94,7 +94,7 @@ You just pass a single `embed.FS` that contains all your assets into your applic
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/browser.png").default}
|
||||
src={require("@site/static/img/browser.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -119,7 +119,7 @@ In addition to this, another JS module is dynamically generated wrapping all you
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote.png").default}
|
||||
src={require("@site/static/img/remote.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
||||
+7
-7
@@ -10,7 +10,7 @@ tags:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-mac.png").default}
|
||||
src={require("@site/static/img/wails-mac.webp").default}
|
||||
width="60%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -28,7 +28,7 @@ So what's new for Wails v2 for Mac vs v1? Hint: It's pretty similar to the Windo
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus-mac.png").default}
|
||||
src={require("@site/static/img/wails-menus-mac.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -80,7 +80,7 @@ In addition to this, another JS module is dynamically generated wrapping all you
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote-mac.png").default}
|
||||
src={require("@site/static/img/remote-mac.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -98,7 +98,7 @@ Thanks to the amazing support of [Mat Ryer](https://github.com/matryer/), the Wa
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-arm.png").default}
|
||||
src={require("@site/static/img/build-darwin-arm.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -110,7 +110,7 @@ You can also specify `darwin/amd64` as a target too:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-amd.png").default}
|
||||
src={require("@site/static/img/build-darwin-amd.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -122,7 +122,7 @@ Oh, I almost forgot.... you can also do `darwin/universal`.... :wink:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-darwin-universal.png").default}
|
||||
src={require("@site/static/img/build-darwin-universal.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -136,7 +136,7 @@ Because Wails v2 for Windows is pure Go, you can target Windows builds without d
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/build-cross-windows.png").default}
|
||||
src={require("@site/static/img/build-cross-windows.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
||||
+4
-4
@@ -10,7 +10,7 @@ tags:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-linux.png").default}
|
||||
src={require("@site/static/img/wails-linux.webp").default}
|
||||
width="40%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -24,7 +24,7 @@ I'm pleased to finally announce that Wails v2 is now in beta for Linux! It is so
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/wails-menus-linux.png").default}
|
||||
src={require("@site/static/img/wails-menus-linux.webp").default}
|
||||
width="50%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -67,7 +67,7 @@ In addition to this, another JS module is dynamically generated wrapping all you
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/remote-linux.png").default}
|
||||
src={require("@site/static/img/remote-linux.webp").default}
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
@@ -85,7 +85,7 @@ Because Wails v2 for Windows is pure Go, you can target Windows builds without d
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src="/img/linux-build-cross-windows.png"
|
||||
src="/img/linux-build-cross-windows.webp"
|
||||
width="80%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
||||
@@ -10,7 +10,7 @@ If you run the binary, you should see the default application:
|
||||
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/defaultproject.png").default}
|
||||
src={require("@site/static/img/defaultproject.webp").default}
|
||||
width="50%"
|
||||
class="screenshot"
|
||||
/>
|
||||
|
||||
@@ -89,14 +89,14 @@ This will generate an error in the devtools. We can see that the error is what w
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/assetshandler-does-not-exist.png").default}
|
||||
src={require("@site/static/img/assetshandler-does-not-exist.webp").default}
|
||||
/>
|
||||
</p>
|
||||
|
||||
However, if we request `go.mod`, we will see the following output:
|
||||
|
||||
<p className="text--center">
|
||||
<img src={require("@site/static/img/assetshandler-go-mod.png").default} />
|
||||
<img src={require("@site/static/img/assetshandler-go-mod.webp").default} />
|
||||
</p>
|
||||
|
||||
This technique can be used to load images directly into the page. If we updated our default vanilla template and replaced the logo image:
|
||||
@@ -115,7 +115,7 @@ Then we would see the following:
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/assetshandler-image.png").default}
|
||||
src={require("@site/static/img/assetshandler-image.webp").default}
|
||||
style={{ width: "75%" }}
|
||||
/>
|
||||
</p>
|
||||
|
||||
@@ -8,7 +8,7 @@ Currently, we support [Visual Studio Code](https://code.visualstudio.com/) but a
|
||||
|
||||
<p className="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/vscode.png").default}
|
||||
src={require("@site/static/img/vscode.webp").default}
|
||||
style={{ width: "75%" }}
|
||||
/>
|
||||
</p>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
<p style={{ "text-align": "center" }}>
|
||||
<img
|
||||
src={require("@site/static/img/nsis.png").default}
|
||||
src={require("@site/static/img/nsis.webp").default}
|
||||
style={{ "max-width": "50%" }}
|
||||
/>
|
||||
<br />
|
||||
|
||||
@@ -7,7 +7,7 @@ sidebar_position: 20
|
||||
A Wails application is a standard Go application, with a webkit frontend. The Go part of the application consists of the application code and a runtime library that provides a number of useful operations, like controlling the application window. The frontend is a webkit window that will display the frontend assets. Also available to the frontend is a Javascript version of the runtime library. Finally, it is possible to bind Go methods to the frontend, and these will appear as Javascript methods that can be called, just as if they were local Javascript methods.
|
||||
|
||||
<div className="text--center">
|
||||
<img src={require("@site/static/img/architecture.png").default} width="75%" />
|
||||
<img src={require("@site/static/img/architecture.webp").default} width="75%" />
|
||||
</div>
|
||||
|
||||
## The Main Application
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user