upgrade to docusaurus 3.4.0.

Author: cloudwebrtc

docs/flutter-webrtc/first-app.md

@@ -79,4 +79,3 @@ render the video renderer in the widget tree
     );
   }
 ```
-

docs/flutter-webrtc/get-stared.md

@@ -4,13 +4,13 @@ sidebar_position: 2
 
 # Get Started
 
-Please refer to <https://flutter.dev/docs> to deploy the Flutter development environment.
+Please refer to [here](https://flutter.dev/docs) to deploy the Flutter development environment.
 
 ## Usage
 
-Add `flutter_webrtc` as a [dependency in your pubspec.yaml file](https://flutter.io/using-packages/).
+Add `flutter_webrtc` as a `[dependency in your pubspec.yaml file](https://flutter.io/using-packages/)`.
 
-You can find the latest version here [![pub package](https://img.shields.io/pub/v/flutter_webrtc.svg)](https://pub.dartlang.org/packages/flutter_webrtc)
+You can find the latest version here `[![pub package](https://img.shields.io/pub/v/flutter_webrtc.svg)](https://pub.dartlang.org/packages/flutter_webrtc)`
 
 ```yaml
   flutter_webrtc: ^x.y.z
@@ -22,4 +22,4 @@ or just use `flutter pub add flutter_webrtc` to add the dependency.
 
 ## Setup required permissions for audio and video
 
- please view next page [Project Settings](./project-settings)
+ please view next page `[Project Settings](./project-settings)`

docs/flutter-webrtc/loopback.md

@@ -0,0 +1,23 @@
+---
+sidebar_position: 4
+---
+
+# LoopBack App
+
+## Introduction
+
+This is a simple example of how to use the `flutter-webrtc` package to create a loopback call
+
+## How to use
+
+Basic Flowchart:
+
+```mermaid
+flowchart TD
+    A[Create a new RTCPeerConnection] --> B[Create a new MediaStream]
+    B --> C[Add the MediaStream to the RTCPeerConnection]
+    C --> D[Create a new RTCDataChannel]
+    D --> E[Send a message]
+    E --> F[Receive a message]
+    F --> D
+```

docusaurus.config.js docusaurus.config.tsdocusaurus.config.js renamed to docusaurus.config.ts

@@ -1,22 +1,63 @@
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+import {themes as prismThemes} from 'prism-react-renderer';
+import type {Config} from '@docusaurus/types';
+import type * as Preset from '@docusaurus/preset-classic';
+
+const config: Config = {
+  favicon: 'img/favicon.ico',
 
-/** @type {import('@docusaurus/types').DocusaurusConfig} */
-module.exports = {
   title: 'Flutter WebRTC Community',
   tagline: 'Make WebRTC/VoIP development easier.',
   url: 'https://flutterwebrtc.com',
+
+  // Set the /<baseUrl>/ pathname under which your site is served
+  // For GitHub pages deployment, it is often '/<projectName>/'
   baseUrl: '/',
-  onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
-  favicon: 'img/favicon.ico',
+
+  // GitHub pages deployment config.
+  // If you aren't using GitHub pages, you don't need these.
   organizationName: 'flutter-webrtc', // Usually your GitHub org/user name.
   projectName: 'flutter-webrtc', // Usually your repo name.
+
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+
+  // Even if you don't use internationalization, you can use this field to set
+  // useful metadata like html lang. For example, if your site is Chinese, you
+  // may want to replace "en" with "zh-Hans".
   i18n: {
     defaultLocale: 'en',
     locales: ['en', 'zh-cn'],
   },
+  markdown: {
+    mermaid: true,
+  },
+  themes: ['@docusaurus/theme-mermaid'],
+  presets: [
+    [
+      'classic',
+      {
+        docs: {
+          sidebarPath: require.resolve('./sidebars.js'),
+          // Please change this to your repo.
+          editUrl:
+            'https://github.com/flutter-webrtc/docs/edit/main/',
+        },
+        blog: {
+          showReadingTime: true,
+          // Please change this to your repo.
+          editUrl:
+            'https://github.com/flutter-webrtc/docs/edit/main/',
+        },
+        theme: {
+          customCss: require.resolve('./src/css/custom.css'),
+        },
+      } satisfies Preset.Options,
+    ],
+  ],
+
   themeConfig: {
+    // Replace with your project's social card
+    src: 'img/flutter-webrtc.png',
     navbar: {
       title: 'Flutter WebRTC Community',
       logo: {
@@ -93,30 +134,10 @@ module.exports = {
       copyright: `Copyright © ${new Date().getFullYear()} Flutter-WebRTC Project.`,
     },
     prism: {
-      theme: lightCodeTheme,
-      darkTheme: darkCodeTheme,
+      theme: prismThemes.github,
+      darkTheme: prismThemes.dracula,
     },
-  },
-  presets: [
-    [
-      '@docusaurus/preset-classic',
-      {
-        docs: {
-          sidebarPath: require.resolve('./sidebars.js'),
-          // Please change this to your repo.
-          editUrl:
-            'https://github.com/flutter-webrtc/docs/edit/main/',
-        },
-        blog: {
-          showReadingTime: true,
-          // Please change this to your repo.
-          editUrl:
-            'https://github.com/flutter-webrtc/docs/edit/main/',
-        },
-        theme: {
-          customCss: require.resolve('./src/css/custom.css'),
-        },
-      },
-    ],
-  ],
+  } satisfies Preset.ThemeConfig,
 };
+
+export default config;

package.json

@@ -11,19 +11,24 @@
     "clear": "docusaurus clear",
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
-    "write-heading-ids": "docusaurus write-heading-ids"
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.4",
-    "@docusaurus/preset-classic": "2.0.0-beta.4",
-    "@mdx-js/react": "^1.6.21",
-    "@svgr/webpack": "^5.5.0",
-    "clsx": "^1.1.1",
-    "file-loader": "^6.2.0",
-    "prism-react-renderer": "^1.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "url-loader": "^4.1.1"
+    "@docusaurus/core": "3.4.0",
+    "@docusaurus/preset-classic": "3.4.0",
+    "@docusaurus/theme-mermaid": "^3.4.0",
+    "@mdx-js/react": "^3.0.0",
+    "clsx": "^2.0.0",
+    "prism-react-renderer": "^2.3.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "3.4.0",
+    "@docusaurus/tsconfig": "3.4.0",
+    "@docusaurus/types": "3.4.0",
+    "typescript": "~5.2.2"
   },
   "browserslist": {
     "production": [
@@ -32,9 +37,12 @@
       "not op_mini all"
     ],
     "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
+      "last 3 chrome version",
+      "last 3 firefox version",
+      "last 5 safari version"
     ]
+  },
+  "engines": {
+    "node": ">=18.0"
   }
 }

sidebars.js sidebars.tssidebars.js renamed to sidebars.ts

@@ -1,3 +1,5 @@
+import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
+
 /**
  * Creating a sidebar enables you to:
  - create an ordered group of docs
@@ -8,19 +10,22 @@
 
  Create as many sidebars as you want.
  */
-
-module.exports = {
+const sidebars: SidebarsConfig = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
   tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
 
   // But you can create a sidebar manually
   /*
   tutorialSidebar: [
+    'intro',
+    'hello',
     {
       type: 'category',
       label: 'Tutorial',
-      items: ['hello'],
+      items: ['tutorial-basics/create-a-document'],
     },
   ],
    */
 };
+
+export default sidebars;

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  // This file is not used in compilation. It is here just for a nice editor experience.
+  "extends": "@docusaurus/tsconfig",
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}