docs: update + refactor

.gitignore

@@ -2,6 +2,8 @@
 /node_modules
 
 # Production
+/.vitepress/.temp
+/.vitepress/cache
 /build
 
 # Generated files
@@ -20,3 +22,8 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Lock files
+package-lock.json
+yarn.lock
+pnpm-lock.yaml

.vitepress/config.js

@@ -0,0 +1,225 @@
+const baseDir = '/handbook/';
+
+export default {
+	lang: 'en-GB',
+	title: 'React Native WebRTC',
+	description: 'The WebRTC module for React Native',
+	srcDir: 'src',
+	outDir: 'build',
+	base: baseDir,
+	cleanUrls: true,
+	appearance: 'dark',
+	lastUpdated: true,
+	sitemap: {
+		hostname: 'https://react-native-webrtc.github.io/handbook'
+	},
+	head: [
+		[
+			'meta',
+			{
+				name: 'theme-color',
+				content: '#3c8772'
+			}
+		],
+		[
+			'link',
+			{
+				rel: 'icon',
+				href: `${baseDir}logo.svg`,
+				type: 'image/svg+xml'
+			}
+		],
+		[
+			'link',
+			{
+				rel: 'alternate icon',
+				href: `${baseDir}favicon.png`,
+				type: 'image/png',
+				sizes: '16x16'
+			}
+		],
+		[
+			'link',
+			{
+				rel: 'mask-icon',
+				href: `${baseDir}logo.svg`,
+				color: '#ffffff'
+			}
+		],
+	/*
+		[
+			'meta',
+			{
+				property: 'og:title',
+				content: ''
+			}
+		],
+		[
+			'meta',
+			{
+				property: 'og:description',
+				content: ''
+			}
+		],
+		[
+			'meta',
+			{
+				property: 'og:url',
+				content: ''
+			}
+		],
+		[
+			'meta',
+			{
+				property: 'og:image',
+				content: ''
+			}
+		]
+	*/
+	],
+	themeConfig: {
+		logo: '/logo.svg',
+		siteTitle: 'React Native WebRTC',
+		outline: 'deep',
+		search: {
+			provider: 'local'
+		},
+		nav: [
+			{
+				text: 'Guides',
+				link: '/guides/intro/getting-started'
+			},
+			{
+				text: 'Examples',
+				link: '/examples'
+			},
+			{
+				text: 'Ecosystem',
+				link: '/ecosystem'
+			},
+			{
+				text: 'Community',
+				link: 'https://react-native-webrtc.discourse.group'
+			}
+		],
+		socialLinks: [
+			{
+				icon: 'github',
+				link: 'https://github.com/react-native-webrtc/react-native-webrtc'
+			},
+			{
+				icon: {
+					svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discourse</title><path d="M12.103 0C18.666 0 24 5.485 24 11.997c0 6.51-5.33 11.99-11.9 11.99L0 24V11.79C0 5.28 5.532 0 12.103 0zm.116 4.563c-2.593-.003-4.996 1.352-6.337 3.57-1.33 2.208-1.387 4.957-.148 7.22L4.4 19.61l4.794-1.074c2.745 1.225 5.965.676 8.136-1.39 2.17-2.054 2.86-5.228 1.737-7.997-1.135-2.778-3.84-4.59-6.84-4.585h-.008z"/></svg>',
+				},
+				link: 'https://react-native-webrtc.discourse.group'
+			}
+		],
+		sidebar: {
+			'/guides/': [
+				{
+					text: 'Introduction',
+					items: [
+						{
+							text: 'What is WebRTC?',
+							link: '/guides/intro/what-is-webrtc'
+						},
+						{
+							text: 'Supported Features',
+							link: '/guides/intro/supported-features'
+						},
+						{
+							text: 'Getting Started',
+							link: '/guides/intro/getting-started'
+						}
+					]
+				},
+				{
+					text: 'Extra Steps',
+					collapsible: true,
+					items: [
+						{
+							text: 'Android 7+',
+							link: '/guides/extra-steps/android'
+						},
+						{
+							text: 'iOS 12+',
+							link: '/guides/extra-steps/ios'
+						},
+						{
+							text: 'Expo 45+',
+							link: '/guides/extra-steps/expo'
+						},
+						{
+							text: 'React Native Web',
+							link: '/guides/extra-steps/react-native-web'
+						},
+						{
+							text: 'macOS 10.13+',
+							link: '/guides/extra-steps/macos'
+						},
+						{
+							text: 'macOS Catalyst',
+							link: '/guides/extra-steps/macos-catalyst'
+						},
+						{
+							text: 'tvOS / Android TV',
+							link: '/guides/extra-steps/tv'
+						},
+						{
+							text: 'Windows 10+',
+							link: '/guides/extra-steps/windows'
+						}
+					]
+				},
+				{
+					text: 'Guides',
+					collapsible: true,
+					items: [
+						{
+							text: 'Basic Usage',
+							link: '/guides/basic-usage'
+						},
+						{
+							text: 'Getting a Call Connected',
+							link: '/guides/getting-a-call-connected'
+						},
+						{
+							text: 'Improving Call Reliability',
+							link: '/guides/improving-call-reliability'
+						},
+						{
+							text: 'Building WebRTC',
+							link: '/guides/building-webrtc'
+						}
+					]
+				},
+				{
+					text: 'Misc',
+					collapsible: true,
+					items: [
+						{
+							text: 'Contributing Guidelines',
+							link: '/guides/misc/contributing'
+						},
+						{
+							text: 'Troubleshooting',
+							link: '/guides/misc/troubleshooting'
+						},
+						{
+							text: 'FAQs',
+							link: '/guides/misc/faqs'
+						}
+					]
+				}
+			]
+		},
+		editLink: {
+			pattern: 'https://github.com/react-native-webrtc/handbook/edit/master/src/:path',
+			text: 'Suggest changes to this page'
+		},
+		footer: {
+			message: 'Released under the Apache 2.0 License',
+			copyright: 'Copyright © 2023 - React Native WebRTC'
+		}
+	}
+};

.vitepress/theme/index.js

@@ -0,0 +1,4 @@
+import DefaultTheme from 'vitepress/theme';
+//import './styles.css';
+
+export default DefaultTheme;

.vitepress/theme/styles.css

@@ -0,0 +1,111 @@
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+:root {
+/*
+	--primary: #ed8a80;
+	--primary-content: #3C3C3B;
+	--neutral: #27464F;
+	--neutral-content: #EDEDED;
+	--secondary: #EDEDED;
+	--secondary-content: #3C3C3B;
+	--accent: #3C3C3B;
+	--accent-content: #EDEDED;
+	--btn-focus-scale: 1.05;
+
+	--vp-c-accent: rgb(218, 180, 11);
+
+	--vp-c-brand: var(--primary);
+	--vp-c-brand-light: #FFA69D;
+	--vp-c-brand-lighter: #FA978D;
+	--vp-c-brand-dark: #e47f75;
+	--vp-c-brand-darker: #db6d62;
+
+	--vp-code-block-bg: rgba(125, 125, 125, 0.04);
+
+	--vp-c-green-light: rgb(18, 181, 157);
+	--vp-custom-block-tip-border: rgba(18, 181, 157, 0.5);
+	--vp-custom-block-tip-bg: rgba(18, 181, 157, 0.1);
+	--vp-code-line-highlight-color: rgba(18, 181, 157, 0.2);
+*/
+
+	/* --vp-code-line-highlight-color: #eea74b22; */
+	/* --vp-code-line-highlight-color: #db6d6232; */
+	/* --vp-code-line-highlight-color: #db6d6232; */
+	/* --vp-code-line-highlight-color: rgba(0, 0, 0, 0.1); */
+}
+
+.dark {
+	--vp-c-bg: #121212;
+	--vp-c-bg-alt: #080808;
+
+	--vp-code-block-bg: rgba(0, 0, 0, 0.2);
+
+/*
+	--vp-code-line-highlight-color: rgba(18, 181, 157, 0.15);
+*/
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+/*
+	--vp-button-brand-border: var(--vp-c-brand-light);
+	--vp-button-brand-text: var(--vp-c-text-dark-1);
+	--vp-button-brand-bg: var(--vp-c-brand);
+	--vp-button-brand-hover-border: var(--vp-c-brand-light);
+	--vp-button-brand-hover-text: var(--vp-c-text-dark-1);
+	--vp-button-brand-hover-bg: var(--vp-c-brand-light);
+	--vp-button-brand-active-border: var(--vp-c-brand-light);
+	--vp-button-brand-active-text: var(--vp-c-text-dark-1);
+	--vp-button-brand-active-bg: var(--vp-button-brand-bg);
+*/
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+/* :root {
+    --vp-home-hero-image-background-image: linear-gradient(-45deg, #42d392 10%, #155f3e 40%);
+    --vp-home-hero-image-filter: blur(40px);
+}
+
+@media (min-width: 640px) {
+	:root {
+		--vp-home-hero-image-filter: blur(56px);
+	}
+}
+
+@media (min-width: 960px) {
+	:root {
+		--vp-home-hero-image-filter: blur(72px);
+	}
+} */
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+	--docsearch-primary-color: var(--vp-c-brand) !important;
+}
+
+/**
+ * Custom Navbar
+ * -------------------------------------------------------------------------- */
+
+
+.VPNav.no-sidebar {
+	background: initial !important;
+	backdrop-filter: initial !important;
+}
+
+/*
+.dark .VPNavBar.has-sidebar .content {
+	background: rgba(18, 18, 18, 0.6) !important;
+}
+*/

README.md

@@ -1,21 +1,24 @@
 # The React-Native-WebRTC Handbook
 
-This is the React Native WebRTC Handbook.  
-It's powered by [VitePress](https://vitepress.vuejs.org/).  
-NOTE: Nodejs >= 16 is necessary.  
+Powered by [VitePress](https://vitepress.vuejs.org/).  
+`Nodejs >= 18 is necessary.`  
+Built automatically with every push thanks to [GH Actions](https://github.com/react-native-webrtc/handbook/blob/master/.github/workflows/gh-pages.yml).  
 
-## Building the Site
+## Want to build and run our handbook?
 
-The site is built automatically with every push thanks to a [GH Actions](https://github.com/react-native-webrtc/handbook/blob/master/.github/workflows/gh-pages.yml).  
-If you want to build it locally, follow this simple step:  
+Say no more. It's as simple as running one of the following lines.  
+Entirely depends on your preferred package manager.
 
-```js
+```
+npm install && npm start
 yarn && yarn start
+pnpm install && pnpm start
 ```
 
-You can now edit the files in the `docs` folder and the site will reflect the changes immediately thanks to live reloading.
+You can now edit the files in the `src` folder and the site should start to reflect any changes you make thanks to live reloading.
 
-## Contributing
+## Got some spare time?
 
-We appreciate all contributions to this repository.  
-Please make a Pull Request, no matter how small, all contributions are valuable!  
+We appreciate all contributions within our organisation.  
+Please make a pull request. No matter how small.  
+All contributions are valuable. Every little helps.