Port all guides to Svelte NodeGUI

Author: shirakaba

website/docs/guides/debugging-in-vscode.md

@@ -36,4 +36,4 @@ title: Debugging in VSCode
 
 - **Debugging**
 
-  Set some breakpoints in `index.js`, and start debugging in the [Debug View](https://code.visualstudio.com/docs/editor/debugging). You should be able to hit the breakpoints.
+Set some breakpoints in `index.js`, and start debugging in the [Debug View](https://code.visualstudio.com/docs/editor/debugging). You should be able to hit the breakpoints.

website/docs/guides/getting-started.md

@@ -136,6 +136,6 @@ Congratulations! You've successfully run and modified your first Svelte NodeGui
 
 ### Now what?
 
-If you're curious to learn more about NodeGui, continue on to the [tutorial](tutorial.md).
+If you're curious to learn more about Svelte NodeGui, continue on to the [tutorial](tutorial.md).
 
-[quick-start]: https://github.com/nodegui/nodegui-starter
+[quick-start]: https://github.com/nodegui/svelte-nodegui-starter

website/docs/guides/handle-events.md

@@ -3,7 +3,7 @@ sidebar_label: Handle Events
 title: Handle Events
 ---
 
-Svelte NodeGui allows you to listen to various events that might originate from the underlying Qt widgets. These events can either be a simple button click or a text change on a lineedit or even something like window being hidden and shown.
+Svelte NodeGui allows you to listen to various events that might originate from the underlying Qt widgets. These events can either be a simple button click or a text change on a LineEdit or even something like window being hidden and shown.
 
 In order to do this we need to attach an event listener to the respective widget.
 

website/docs/guides/images.md

@@ -5,26 +5,32 @@ title: Images
 
 Images are very important for making your app more interesting.
 
-In React NodeGui, `<Image>` is used to display an image.
+In Svelte NodeGui, `<image>` is used to display an image.
 
 Internally Image is a QLabel. QLabel is typically used for displaying text, but it can also display an image.
-What this means is that you can pass all the props you pass to a `<Text>` to `<Image>` also.
+What this means is that you can pass all the props you pass to a `<text>` to `<image>` also.
 
 A very minimal example would look like this:
 
-```js
-import React from "react";
-import { Renderer, Image, Window } from "@nodegui/react-nodegui";
-
-const App = () => {
-  return (
-    <Window>
-      <Image src="https://docs.nodegui.org/img/logo-circle.png" />
-    </Window>
-  );
-};
-
-Renderer.render(<App />);
+```svelte
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { QLabelSignals, QMouseEvent, WidgetEventTypes } from "@nodegui/nodegui";
+  let win;
+
+  onMount(() => {
+    (window as any).win = win; // Prevent garbage collection.
+    win.nativeView.show();
+    return () => {
+      delete (window as any).win;
+    };
+  });
+</script>
+
+<svelte:options namespace="foreign" />
+<window bind:this={win}>
+    <image src="https://docs.nodegui.org/img/logo-circle.png" />
+</window>
 ```
 
 Here,
@@ -43,12 +49,12 @@ The above examples wont allow you to show a huge image without either cutting it
 
 In order to do that:
 
-- You can create the image instance using `<Image>`
-- Set the image instance as a child to a `<ScrollArea>`
+- You can create the image instance using `<image>`
+- Set the image instance as a child to a `<scrollArea>`
 
 ### Animated images
 
-In order to use animated images, instead of `<Image>` use `<AnimatedImage>`
+In order to use animated images, instead of `<image>` use `<animatedImage>`
 
 ### Loading an image from a buffer