Fix tutorial. Remove animation.

wailsapp · Dec 16, 2024 · 37f9f19 · 37f9f19
1 parent 19f6079
commit 37f9f19
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 32 deletions.
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
@@ -35,8 +35,6 @@ import CardAnimation from '../../components/CardAnimation.astro';
 
 <br/>
 
-<CardAnimation />
-
 <div class="animate-cards">
   <CardGrid>
     <Card title="What is Wails?" icon="star">
@@ -63,7 +61,7 @@ import CardAnimation from '../../components/CardAnimation.astro';
     <Card title="Quick Start" icon="rocket">
       ```bash
       # Install wails
-      go install github.com/wailsapp/wails/v3/cmd/wails@latest
+      go install github.com/wailsapp/wails/v3/cmd/wails3@latest
 
       # Create a new project
       wails init -n myproject

diff --git a/docs/src/content/docs/tutorials/01-creating-a-service.mdx b/docs/src/content/docs/tutorials/01-creating-a-service.mdx
@@ -226,33 +226,64 @@ This will show you how to organize your code into reusable services and handle e
     }
    ```
 
-   Now update `main.js` to simply set the image `src` attribute to the QR code URL:
-
-    ```js title="frontend/src/main.js"
-    import { GenerateQRCode } from './bindings/changeme/qrservice.js';
-
-    async function generateQR() {
-        const text = document.getElementById('text').value;
-        if (!text) {
-            alert('Please enter some text');
-            return;
-        }
-
-        const img = document.getElementById('qrcode');
-        img.src = `/qrservice?text=${text}`
-    }
-
-    export function initializeQRGenerator() {
-        const button = document.getElementById('generateButton');
-        if (button) {
-            button.addEventListener('click', generateQR);
-        } else {
-            console.error('Generate button not found');
-        }
-    }
+   Now update `index.html` to use the new bindings in the `initializeQRGenerator` function:
+
+    ```html title="frontend/src/index.html"
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                <title>QR Code Generator</title>
+                <style>
+                    body {
+                    font-family: Arial, sans-serif;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    height: 100vh;
+                    margin: 0;
+                }
+                    #qrcode {
+                    margin-bottom: 20px;
+                    width: 256px;
+                    height: 256px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+                    #controls {
+                    display: flex;
+                    gap: 10px;
+                }
+                    #text {
+                    padding: 5px;
+                }
+                    #generateButton {
+                    padding: 5px 10px;
+                    cursor: pointer;
+                }
+                </style>
+    </head>
+    <body>
+    <img id="qrcode"/>
+    <div id="controls">
+        <input type="text" id="text" placeholder="Enter text">
+            <button id="generateButton">Generate QR Code</button>
+    </div>
+
+    <script type="module">
+        import { initializeQRGenerator } from './main.js';
+        document.addEventListener('DOMContentLoaded', initializeQRGenerator);
+    </script>
+    </body>
+    </html>
     ```
 
-   Now, when you click the "Generate QR Code" button, you should see a QR code in the center of the page:
+    Run `wails3 dev` to start the dev server. After a few seconds, the application should open.
+
+    Type in some text and click the "Generate QR Code" button. You should see a QR code in the center of the page:
 
    <Image src={qr1} alt="QR Code"/>
 
@@ -339,13 +370,36 @@ This will show you how to organize your code into reusable services and handle e
     }
     ```
 
+    Update `main.js` to make the image source the path to the QR code service, passing the text as a query parameter:
+
+    ```js title="frontend/src/main.js"
+    import { GenerateQRCode } from './bindings/changeme/qrservice.js';
+
+    async function generateQR() {
+        const text = document.getElementById('text').value;
+        if (!text) {
+            alert('Please enter some text');
+            return;
+        }
+
+        const img = document.getElementById('qrcode');
+        // Make the image source the path to the QR code service, passing the text
+        img.src = `/qrservice?text=${text}`
+    }
+
+    export function initializeQRGenerator() {
+        const button = document.getElementById('generateButton');
+        if (button) {
+            button.addEventListener('click', generateQR);
+        } else {
+            console.error('Generate button not found');
+        }
+    }
+    ```
+
     Running the application again should result in the same QR code:
 
     <Image src={qr1} alt="QR Code"/>
     <br/>
 
 </Steps>
-
-## Next Steps
-
-Now that we've created our QR service, we will create bindings so that we can use it in our frontend.