feat: getting started

.gitignore

@@ -20,4 +20,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.vscode
+.vscode
+examples

README.md

@@ -28,3 +28,4 @@ Copyright (c) 2020-2022 Tauri Programme within The Commons Conservancy
 [typescript]: https://github.com/tauri-apps/tauri/tree/dev/tooling/api
 [rust]: https://github.com/tauri-apps/tauri/tree/dev/core/tauri
 [contributing guide]: ./.github/CONTRIBUTING.md
+

crowdin.yaml

@@ -13,13 +13,12 @@ files:
       [
         /docs/.templates,
         /docs/api,
-        /docs/guides/faq.md,
-        /docs/guides/architecture,
-        /docs/guides/building,
-        /docs/guides/debugging,
+        /docs/guides/architecture/recipes,
         /docs/guides/development,
+        /docs/guides/debugging,
+        /docs/guides/testing,
+        /docs/guides/building,
         /docs/guides/distribution,
         /docs/guides/features,
-        /docs/guides/getting-started,
-        /docs/guides/testing,
+        /docs/guides/faq.md,
       ]

docs/guides/features/README.md

@@ -0,0 +1,6 @@
+import DocCardList from '@theme/DocCardList';
+import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
+
+# Features
+
+<DocCardList items={useCurrentSidebarCategory().items}/>

docs/guides/features/icons.md

@@ -4,7 +4,7 @@ Tauri ships with a default iconset based on its logo. This is probably NOT what
 
 ## Usage
 
-```shell
+```console
 npx @tauri-apps/tauricon --help
 
 Description

docs/guides/getting-started/prerequisites.md

@@ -1,6 +1,5 @@
 ---
 sidebar_position: 1
-pagination_next: guides/getting-started/beginning-tutorial
 ---
 
 import Tabs from '@theme/Tabs';

docs/guides/getting-started/setup/README.mdx

@@ -0,0 +1,25 @@
+---
+sidebar_position: 3
+---
+
+import DocCardList from '@theme/DocCardList'
+import { useCurrentSidebarCategory } from '@docusaurus/theme-common'
+
+# Quick Start
+
+Tauri is compatible with **almost every frontend stack**. Select yours and get started!
+
+<DocCardList items={useCurrentSidebarCategory().items} />
+
+:::info Missing your favorite framework?
+
+If you miss your favorite frontend framework or build tool, we're always looking for Getting Started guides! Read our [contributing] guidelines and help us out!
+
+:::
+
+## Don't know where to start?
+
+If you're unfamiliar with web development or have no favorite frontend stack you might find the [HTML/CSS/JS] guide the most helpful. It guides you through getting started with the most minimal frontend setup possible: A single HTML file.
+
+[html/css/js]: ./html-css-js.mdx
+[contributing]: https://github.com/tauri-apps/tauri/blob/dev/.github/CONTRIBUTING.md

docs/guides/getting-started/setup/_commands.mdx

@@ -0,0 +1,28 @@
+Tauri lets you enhance your Frontend with native capabilities. We call these [Commands][command], essentially Rust functions that you can call from your frontend JavaScript. This enables you to handle heavy processing or calls to the OS in much more performant Rust code.
+
+Let's make a simple example:
+
+```rust
+#[tauri::command]
+fn greet(name: &str) -> String {
+   format!("Hello, {}!", name)
+}
+```
+
+A Command is just like any regular Rust function, with the addition of the `#[tauri::command]` attribute macro that allows your function to communicate with the JavaScript context.
+
+Lastly, we also need to tell Tauri about our newly created command so that it can route calls accordingly. This is done with the combination of the `.invoke_handler()` function and the `generate_handler![]` macro you can see below:
+
+```rust
+fn main() {
+  tauri::Builder::default()
+  // highlight-next-line
+    .invoke_handler(tauri::generate_handler![greet])
+    .run(tauri::generate_context!())
+    .expect("error while running tauri application");
+}
+```
+
+Now we're ready to call your Command from the JavaScript frontend!
+
+[command]: ../../features/command.md

docs/guides/getting-started/setup/_intro.mdx

@@ -0,0 +1,42 @@
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
+Tauri is a framework to build desktop applications with any Front-end framework and a Rust core. Each app consists of two parts:
+
+1. Rust binary that creates the windows and exposes native functionality to those windows
+2. Frontend of your choice that produces the User Interface inside the window
+
+In the following, we will first scaffold the Frontend, then set up the Rust project and lastly show you how to communicate between the two.
+
+:::tip `create-tauri-app`
+
+The easiest way to scaffold a new project is the [`create-tauri-app`](https://github.com/tauri-apps/create-tauri-app) utility. It will ask you a series of questions and quickly bootstrap a Tauri project for you to begin developing with. It has support for vanilla HTML/CSS/JavaScript but also many frontend frameworks like React, Vue, or Svelte.
+
+<Tabs groupId="package-manager">
+<TabItem value="npx" label="npx" default>
+
+```shell
+npx create-tauri-app
+```
+
+</TabItem>
+<TabItem value="yarn" label="yarn">
+
+```shell
+yarn create tauri-app
+```
+
+</TabItem>
+<TabItem value="pnpm" label="pnpm">
+
+```shell
+pnpm create tauri-app
+```
+
+</TabItem>
+</Tabs>
+:::
+
+[cargo]: https://doc.rust-lang.org/cargo/
+[prerequisites]: ../prerequisites.md
+[tauri-cli]: ../tauri-cli.md