diff --git a/src/components/list/Guides.astro b/src/components/list/Guides.astro
index 7c76db8c0ee..31723e88fda 100644
--- a/src/components/list/Guides.astro
+++ b/src/components/list/Guides.astro
@@ -3,35 +3,36 @@ import { LinkCard, CardGrid } from '@astrojs/starlight/components';
import { type CollectionEntry, getEntry } from 'astro:content';
const entries = [
- '2/guide/authenticator',
- '2/guide/autostart',
- '2/guide/localhost',
- '2/guide/persisted-scope',
- '2/guide/positioner',
- '2/guide/single-instance',
- '2/guide/sql',
- '2/guide/store',
- '2/guide/stronghold',
- '2/guide/upload',
- '2/guide/websocket',
- '2/guide/window-state',
+ '2/guide/authenticator',
+ '2/guide/autostart',
+ '2/guide/localhost',
+ '2/guide/notification',
+ '2/guide/persisted-scope',
+ '2/guide/positioner',
+ '2/guide/single-instance',
+ '2/guide/sql',
+ '2/guide/store',
+ '2/guide/stronghold',
+ '2/guide/upload',
+ '2/guide/websocket',
+ '2/guide/window-state',
];
const list = (await Promise.all(
- entries.flatMap((entry) => getEntry('docs', entry))
+ entries.flatMap((entry) => getEntry('docs', entry))
)) as CollectionEntry<'docs'>[];
---
- {
- list
- .sort((a, b) => a.data.title.localeCompare(b.data.title))
- .map((item) => (
-
- ))
- }
+ {
+ list
+ .sort((a, b) => a.data.title.localeCompare(b.data.title))
+ .map((item) => (
+
+ ))
+ }
diff --git a/src/components/list/Recipes.astro b/src/components/list/Recipes.astro
index 3fea8be5b25..992004004c2 100644
--- a/src/components/list/Recipes.astro
+++ b/src/components/list/Recipes.astro
@@ -2,23 +2,23 @@
import { LinkCard, CardGrid } from '@astrojs/starlight/components';
import { type CollectionEntry, getEntry } from 'astro:content';
-const entries = ['2/guide/recipe/notifications'];
+const entries = ['2/guide/recipe/stub'];
const list = (await Promise.all(
- entries.flatMap((entry) => getEntry('docs', entry))
+ entries.flatMap((entry) => getEntry('docs', entry))
)) as CollectionEntry<'docs'>[];
---
- {
- list
- .sort((a, b) => a.data.title.localeCompare(b.data.title))
- .map((item) => (
-
- ))
- }
+ {
+ list
+ .sort((a, b) => a.data.title.localeCompare(b.data.title))
+ .map((item) => (
+
+ ))
+ }
diff --git a/src/content/docs/2/guide/notification.mdx b/src/content/docs/2/guide/notification.mdx
new file mode 100644
index 00000000000..84f98439cb0
--- /dev/null
+++ b/src/content/docs/2/guide/notification.mdx
@@ -0,0 +1,101 @@
+---
+title: Notification
+description: Send user notifications. Can also be used with the Notification Web API.
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+Send user notifications using the operating system's native notifications using `tauri-plugin-notification`.
+
+{/* TODO: Add demo here */}
+{/* ## Preview */}
+
+## Setup
+
+Install the plugin automatically using the Tauri CLI (recommended) or manually:
+
+
+
+ ```bash
+ tauri plugin add notification
+ ```
+
+
+
+ `Cargo.toml`
+
+ ```toml
+ [dependencies]
+ tauri-plugin-notification = "2.0.0-alpha"
+ ```
+
+ {/* TODO: 2.0 */}
+
+ `lib.rs`
+
+ ```rust
+ #[cfg_attr(mobile, tauri::mobile_entry_point)]
+ pub fn run() {
+ tauri::Builder::default()
+ // Initialize the plugin
+ .plugin(tauri_plugin_notification::init())
+ .run(tauri::generate_context!())
+ .expect("error while running tauri application");
+ }
+ ```
+
+ {/* TODO: add package.json if using node */}
+
+
+
+
+
+## Usage
+
+You can use notifications in both JavaScript and Rust. Usage in both is similar where you should:
+
+1. Check if the user has granted notification permission
+2. Request permission if not granted
+3. Send the notification
+
+### JavaScript
+
+```js
+import {
+ isPermissionGranted,
+ requestPermission,
+ sendNotification,
+} from '@tauri-apps/plugin-notification';
+
+// Do you have permission to send a notification?
+let permissionGranted = await isPermissionGranted();
+
+// If not we need to request it
+if (!permissionGranted) {
+ const permission = await requestPermission();
+ permissionGranted = permission === 'granted';
+}
+
+// Once permission has been granted we can send the notification
+if (permissionGranted) {
+ sendNotification({ title: 'Tauri', body: 'Tauri is awesome!' });
+}
+```
+
+### Rust
+
+{/* TODO: Cover checking and requesting permission? */}
+
+```rust
+use tauri_plugin_notification::Notification;
+
+#[tauri::command]
+async fn notify(app: AppHandle) -> Result<(), ()> {
+ Notification::new(&app.config().tauri.bundle.identifier)
+ .title("Tauri")
+ .body("Tauri is awesome!")
+ .show()
+}
+```
+
+{/* Could a troubleshooting/common issues section be useful to have on all of these pages? */}
diff --git a/src/content/docs/2/guide/recipe/notifications.mdx b/src/content/docs/2/guide/recipe/notifications.mdx
deleted file mode 100644
index 7a51cdb9f07..00000000000
--- a/src/content/docs/2/guide/recipe/notifications.mdx
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: Notifications
-description: Stay tuned while we work on some delicious recipes.
----
-
-import { Tabs, TabItem } from '@astrojs/starlight/components';
-
-In this recipe we'll take a look at sending a native notification to your user. We'll do this by using the official notification plugin.
-
-## Setup
-
-First you have to install the notification plugin in your backend.
-
-
-
- ```bash
- tauri plugin add notification
- ```
-
-
-
-
- ```toml
- [dependencies]
- tauri-plugin-notification = "2.0.0-alpha"
- ```
-
-
- ```rust
- #[cfg_attr(mobile, tauri::mobile_entry_point)]
- pub fn run() {
- tauri::Builder::default()
- // Initialize the plugin
- .plugin(tauri_plugin_notification::init())
- .run(tauri::generate_context!())
- .expect("error while running tauri application");
- }
- ```
-
-
-
-
-
-## Usage
-
-Once you're done with the general setup you're free to use the notification plugin in either your frontend or straight from the backend.
-
-### Frontend
-
-Install the `@tauri-apps/plugin-notification` package using your favorite package manager.
-
-```js
-import {
- isPermissionGranted,
- requestPermission,
- sendNotification,
-} from '@tauri-apps/plugin-notification';
-
-// Do you have permission to send a notification?
-let permissionGranted = await isPermissionGranted();
-
-// If not we need to request it
-if (!permissionGranted) {
- const permission = await requestPermission();
- permissionGranted = permission === 'granted';
-}
-
-// Once permission has been granted we can send the notification
-if (permissionGranted) {
- sendNotification({ title: 'TAURI', body: 'Tauri is awesome!' });
-}
-```
-
-### Backend
-
-You can also create notifications straight from the backend. All you need to do is create an instance of `Notification` and `.show()` it.
-
-
-
- ```rust
- use tauri_plugin_notification::Notification;
-
- #[tauri::command]
- async fn notify(app: AppHandle) -> Result<(), ()> {
- Notification::new(&app.config().tauri.bundle.identifier)
- .title("New message")
- .body("You've got a new message.")
- .show()
- }
- ```
-
-
- ```rust
- ```
-
-
- ```rust
- ```
-
-
-
-
-## Deep dive
-
-### How it works
-
-The API sends a signal over the IPC to the backend. After that either the `notify-rust` or `win7-notifications` crate
-takes care of sending a notification to the users system.
-
-### Security
-
-Aside from normal sanitization procedures of user input there are currently no known security notes for this recipe.