add wokwi examples

Author: pelikhan

website/docs/api/drivers/ssd1306.mdx

@@ -2,6 +2,8 @@
 title: SSD1306
 ---
 
+import WokwiEditor from "@site/src/components/WokwiEditor"
+
 # SSD1306
 
 Driver for SSD1306 OLED screen at I2C address `0x3c` (or `0x3d`).
@@ -38,3 +40,7 @@ await ssd.init()
 ssd.image.print("Hello world!", 3, 10)
 await ssd.show()
 ```
+
+## Examples
+
+<WokwiEditor projectId="370250148258841601">

website/docs/samples/blinky.mdx

@@ -1,16 +1,18 @@
 ---
 sidebar_position: 2
 description: Learn how to create the classic LED blinking program on Raspberry
-  Pi Pico and ESP32 using DeviceScript.
+    Pi Pico and ESP32 using DeviceScript.
 keywords:
-  - Raspberry Pi Pico
-  - ESP32
-  - LED blinking
-  - DeviceScript
-  - microcontroller programming
+    - Raspberry Pi Pico
+    - ESP32
+    - LED blinking
+    - DeviceScript
+    - microcontroller programming
 hide_table_of_contents: true
 ---
+
 import StaticVideo from "@site/src/components/StaticVideo"
+import WokwiEditor from "@site/src/components/WokwiEditor"
 
 # Blinky
 
@@ -56,3 +58,5 @@ setInterval(async () => {
     await lightBulb.toggle()
 }, 500)
 ```
+
+<WokwiEditor projectId="368689527293414401" />

website/docs/samples/button-led.mdx

@@ -3,6 +3,8 @@ sidebar_position: 3.1
 hide_table_of_contents: true
 ---
 
+import WokwiEditor from "@site/src/components/WokwiEditor"
+
 # Button LED
 
 This sample toggles a LED on/off by listening on the `down` events emitted by a button.
@@ -26,11 +28,4 @@ button.down.subscribe(async () => {
 })
 ```
 
-
-<iframe style={{
-    width:"100%",
-    minHeight: "28rem",
-    borderRadius: "0.5rem",
-    padding: ".5rem",
-    border: "solid 1px #666"
-}} src="https://wokwi.com/projects/369061499438874625" />
+<WokwiEditor projectId="369061499438874625" />

website/src/components/WokwiEditor/index.tsx

@@ -0,0 +1,8 @@
+import React from "react"
+import styles from "./styles.module.css"
+
+export default function WokwiEditor(props: { projectId: string }) {
+    const { projectId } = props
+    const url = `https://wokwi.com/projects/${projectId}`
+    return <iframe className={styles.editor} src={url} />
+}

website/src/components/WokwiEditor/styles.module.css

@@ -0,0 +1,7 @@
+.editor {
+    width: 100%;
+    min-height: 28rem;
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+    border: solid 1px #666;
+}