feat: Steps component to ordered lists in /features directory (#2065)

tauri-apps · Apr 12, 2024 · 06864f7 · 06864f7
1 parent fcba02d
commit 06864f7
Show file tree

Hide file tree

Showing 18 changed files with 617 additions and 569 deletions.
diff --git a/src/content/docs/features/autostart.mdx b/src/content/docs/features/autostart.mdx
@@ -4,7 +4,7 @@ description: Automatically launch your app at system startup.
 ---
 
 import PluginLinks from '@components/PluginLinks.astro';
-import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
 import CommandTabs from '@components/CommandTabs.astro';
 
 <PluginLinks plugin="autostart" />
@@ -24,44 +24,47 @@ Install the autostart plugin to get started.
 <Tabs>
   <TabItem label="Automatic">
 
-Use your project's package manager to add the dependency:
+    Use your project's package manager to add the dependency:
 
-{' '}
+    {' '}
 
-<CommandTabs
-	npm="npm run tauri add autostart"
-	yarn="yarn run tauri add autostart"
-	pnpm="pnpm tauri add autostart"
-	cargo="cargo tauri add autostart"
-/>
+    <CommandTabs
+      npm="npm run tauri add autostart"
+      yarn="yarn run tauri add autostart"
+      pnpm="pnpm tauri add autostart"
+      cargo="cargo tauri add autostart"
+    />
 
   </TabItem>
-  <TabItem label="Manual">
+    <TabItem label="Manual">
+      <Steps>
 
-1. Run `cargo add tauri-plugin-autostart` to add the plugin to the project's dependencies in `Cargo.toml`.
+        1. Run `cargo add tauri-plugin-autostart` to add the plugin to the project's dependencies in `Cargo.toml`.
 
-2. Modify `lib.rs` to initialize the plugin:
+        2.  Modify `lib.rs` to initialize the plugin:
 
-```rust title="lib.rs" ins={1, 6}
-use tauri_plugin_autostart::MacosLauncher;
+            ```rust title="lib.rs" ins={1, 6}
+            use tauri_plugin_autostart::MacosLauncher;
 
-#[cfg_attr(mobile, tauri::mobile_entry_point)]
-fn run() {
-    tauri::Builder::default()
-        .plugin(tauri_plugin_autostart::init(MacosLauncher::LaunchAgent, Some(vec!["--flag1", "--flag2"]) /* arbitrary number of args to pass to your app */))
-        .run(tauri::generate_context!())
-        .expect("error while running tauri application");
-}
-```
+            #[cfg_attr(mobile, tauri::mobile_entry_point)]
+            fn run() {
+                tauri::Builder::default()
+                    .plugin(tauri_plugin_autostart::init(MacosLauncher::LaunchAgent, Some(vec!["--flag1", "--flag2"]) /* arbitrary number of args to pass to your app */))
+                    .run(tauri::generate_context!())
+                    .expect("error while running tauri application");
+            }
+            ```
 
-3. You can install the JavaScript Guest bindings using your preferred JavaScript package manager:
+        3.  You can install the JavaScript Guest bindings using your preferred JavaScript package manager:
 
-  <CommandTabs
-      npm="npm install @tauri-apps/plugin-autostart"
-      yarn="yarn add @tauri-apps/plugin-autostart"
-      pnpm="pnpm add @tauri-apps/plugin-autostart"
-  />
-  </TabItem>
+            <CommandTabs
+                npm="npm install @tauri-apps/plugin-autostart"
+                yarn="yarn add @tauri-apps/plugin-autostart"
+                pnpm="pnpm add @tauri-apps/plugin-autostart"
+            />
+
+      </Steps>
+    </TabItem>
 </Tabs>
 
 ## Usage

diff --git a/src/content/docs/features/barcode-scanner.mdx b/src/content/docs/features/barcode-scanner.mdx
@@ -8,7 +8,7 @@ sidebar:
 ---
 
 import PluginLinks from '@components/PluginLinks.astro';
-import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
 import CommandTabs from '@components/CommandTabs.astro';
 
 <PluginLinks plugin="barcode-scanner" />
@@ -29,41 +29,44 @@ Install the barcode-scanner plugin to get started.
 <Tabs>
   <TabItem label="Automatic">
 
-Use your project's package manager to add the dependency:
+    Use your project's package manager to add the dependency:
 
-{' '}
-
-<CommandTabs
-	npm="npm run tauri add barcode-scanner"
-	yarn="yarn run tauri add barcode-scanner"
-	pnpm="pnpm tauri add barcode-scanner"
-	cargo="cargo tauri add barcode-scanner"
-/>
+    {' '}
 
+    <CommandTabs
+      npm="npm run tauri add barcode-scanner"
+      yarn="yarn run tauri add barcode-scanner"
+      pnpm="pnpm tauri add barcode-scanner"
+      cargo="cargo tauri add barcode-scanner"
+    />
+
   </TabItem>
   <TabItem label="Manual">
+    <Steps>
 
-1. Run `cargo add tauri-plugin-barcode-scanner` to add the plugin to the project's dependencies in `Cargo.toml`.
+      1.  Run `cargo add tauri-plugin-barcode-scanner` to add the plugin to the project's dependencies in `Cargo.toml`.
 
-2. Modify `lib.rs` to initialize the plugin:
+      2.  Modify `lib.rs` to initialize the plugin:
 
-```rust title="lib.rs" ins={4}
-#[cfg_attr(mobile, tauri::mobile_entry_point)]
-fn run() {
-    tauri::Builder::default()
-        .plugin(tauri_plugin_barcode_scanner::init())
-        .run(tauri::generate_context!())
-        .expect("error while running tauri application");
-}
-```
+          ```rust title="lib.rs" ins={4}
+          #[cfg_attr(mobile, tauri::mobile_entry_point)]
+          fn run() {
+              tauri::Builder::default()
+                  .plugin(tauri_plugin_barcode_scanner::init())
+                  .run(tauri::generate_context!())
+                  .expect("error while running tauri application");
+          }
+          ```
+
+      3.  Install the JavaScript Guest bindings using your preferred JavaScript package manager:
 
-3. Install the JavaScript Guest bindings using your preferred JavaScript package manager:
+          <CommandTabs
+              npm="npm install @tauri-apps/plugin-barcode-scanner"
+              yarn="yarn add @tauri-apps/plugin-barcode-scanner"
+              pnpm="pnpm add @tauri-apps/plugin-barcode-scanner"
+          />
 
-  <CommandTabs
-      npm="npm install @tauri-apps/plugin-barcode-scanner"
-      yarn="yarn add @tauri-apps/plugin-barcode-scanner"
-      pnpm="pnpm add @tauri-apps/plugin-barcode-scanner"
-  />
+    </Steps>
   </TabItem>
 </Tabs>
 

diff --git a/src/content/docs/features/cli.mdx b/src/content/docs/features/cli.mdx
@@ -4,7 +4,7 @@ description: Parse arguments from the command line interface.
 ---
 
 import PluginLinks from '@components/PluginLinks.astro';
-import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
 import CommandTabs from '@components/CommandTabs.astro';
 
 <PluginLinks plugin="cli" />
@@ -24,52 +24,55 @@ _This plugin requires a Rust version of at least **1.75**_
 Install the CLI plugin to get started.
 
 <Tabs>
-  <TabItem label="Automatic">
-
-Use your project's package manager to add the dependency:
-
-{' '}
-
-<CommandTabs
-	npm="npm run tauri add cli"
-	yarn="yarn run tauri add cli"
-	pnpm="pnpm tauri add cli"
-	cargo="cargo tauri add cli"
-/>
-
-  </TabItem>
-  <TabItem label="Manual">
-
-1. Install the Core plugin by adding the following to your `Cargo.toml` file:
-
-```toml title="src-tauri/Cargo.toml"
-# you can add the dependencies on the `[dependencies]` section if you do not target mobile
-[target."cfg(not(any(target_os = \"android\", target_os = \"ios\")))".dependencies]
-tauri-plugin-cli = "2.0.0-beta"
-# alternatively with Git:
-tauri-plugin-cli = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
-```
-
-2. Modify `lib.rs` to initialize the plugin:
-
-```rust title="src-tauri/src/lib.rs" ins={4}
-#[cfg_attr(mobile, tauri::mobile_entry_point)]
-fn run() {
-    tauri::Builder::default()
-        .plugin(tauri_plugin_cli::init())
-        .run(tauri::generate_context!())
-        .expect("error while running tauri application");
-}
-```
-
-3. Install the JavaScript Guest bindings using your preferred JavaScript package manager:
-
-  <CommandTabs
-      npm="npm install @tauri-apps/plugin-cli"
-      yarn="yarn add @tauri-apps/plugin-cli"
-      pnpm="pnpm add @tauri-apps/plugin-cli"
-  />
-  </TabItem>
+	<TabItem label="Automatic">
+
+		Use your project's package manager to add the dependency:
+
+		{' '}
+
+		<CommandTabs
+			npm="npm run tauri add cli"
+			yarn="yarn run tauri add cli"
+			pnpm="pnpm tauri add cli"
+			cargo="cargo tauri add cli"
+		/>
+
+  	</TabItem>
+    <TabItem label="Manual">
+    	<Steps>
+
+    		1.	Install the Core plugin by adding the following to your `Cargo.toml` file:
+
+    			```toml title="src-tauri/Cargo.toml"
+    			# you can add the dependencies on the `[dependencies]` section if you do not target mobile
+    			[target."cfg(not(any(target_os = \"android\", target_os = \"ios\")))".dependencies]
+    			tauri-plugin-cli = "2.0.0-beta"
+    			# alternatively with Git:
+    			tauri-plugin-cli = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
+    			```
+
+    		2.	Modify `lib.rs` to initialize the plugin:
+
+    			```rust title="src-tauri/src/lib.rs" ins={4}
+    			#[cfg_attr(mobile, tauri::mobile_entry_point)]
+    			fn run() {
+    				tauri::Builder::default()
+    					.plugin(tauri_plugin_cli::init())
+    					.run(tauri::generate_context!())
+    					.expect("error while running tauri application");
+    			}
+    			```
+
+    		3.	Install the JavaScript Guest bindings using your preferred JavaScript package manager:
+
+    			<CommandTabs
+    				npm="npm install @tauri-apps/plugin-cli"
+    				yarn="yarn add @tauri-apps/plugin-cli"
+    				pnpm="pnpm add @tauri-apps/plugin-cli"
+    			/>
+
+    	</Steps>
+    </TabItem>
 </Tabs>
 
 ## Base Configuration

diff --git a/src/content/docs/features/clipboard.mdx b/src/content/docs/features/clipboard.mdx
@@ -5,7 +5,7 @@ description: Read and write to the system clipboard.
 
 import Stub from '@components/Stub.astro';
 import PluginLinks from '@components/PluginLinks.astro';
-import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
 import CommandTabs from '@components/CommandTabs.astro';
 
 <PluginLinks plugin="clipboard-manager" />
@@ -28,33 +28,34 @@ Install the clipboard plugin to get started.
 
     </TabItem>
     <TabItem label="Manual">
+        <Steps>
 
-    1. Run `cargo add tauri-plugin-clipboard-manager` to add the plugin to the project's dependencies in `Cargo.toml`.
+        1.  Run `cargo add tauri-plugin-clipboard-manager` to add the plugin to the project's dependencies in `Cargo.toml`.
 
-    2. Modify `lib.rs` to initialize the plugin:
+        2.  Modify `lib.rs` to initialize the plugin:
 
-    ```rust
-    // lib.rs
-    #[cfg_attr(mobile, tauri::mobile_entry_point)]
-    pub fn run() {
-        tauri::Builder::default()
-            // Initialize the plugin
-            .plugin(tauri_plugin_clipboard_manager::init())
-            .run(tauri::generate_context!())
-            .expect("error while running tauri application");
-    }
-    ```
+            ```rust
+            // lib.rs
+            #[cfg_attr(mobile, tauri::mobile_entry_point)]
+            pub fn run() {
+                tauri::Builder::default()
+                    // Initialize the plugin
+                    .plugin(tauri_plugin_clipboard_manager::init())
+                    .run(tauri::generate_context!())
+                    .expect("error while running tauri application");
+            }
+            ```
 
-    3. If you'd like to manage the clipboard in JavaScript then install the npm package as well:
+        3.  If you'd like to manage the clipboard in JavaScript then install the npm package as well:
 
-    <CommandTabs
-        npm="npm install @tauri-apps/plugin-clipboard-manager"
-        yarn="yarn add @tauri-apps/plugin-clipboard-manager"
-        pnpm="pnpm add @tauri-apps/plugin-clipboard-manager"
-    />
+            <CommandTabs
+                npm="npm install @tauri-apps/plugin-clipboard-manager"
+                yarn="yarn add @tauri-apps/plugin-clipboard-manager"
+                pnpm="pnpm add @tauri-apps/plugin-clipboard-manager"
+            />
 
+        </Steps>
     </TabItem>
-
 </Tabs>
 
 ## Usage