feat: capacitor page cleanup and plugin readme updates (#80)

Author: NathanWalker

.vitepress/config.js

@@ -90,7 +90,8 @@ module.exports = {
 			},
 			{
 				text: 'Capacitor',
-				link: 'https://capacitor.nativescript.org',
+				link: '/capacitor/index',
+				activeMatch: '^/capacitor',
 			},
 			// 	{
 			// 		text: 'Writing Guide',
@@ -274,6 +275,12 @@ function getPlugins() {
 					readme: `${officialPlugins_baseUrl}/imagepicker/README.md`,
 					repo: `${officialGithubUrl}/imagepicker`,
 				},
+				{
+					name: 'Ionic Portals',
+					link: '/plugins/ionic-portals',
+					readme: `${officialPlugins_baseUrl}/ionic-portals/README.md`,
+					repo: `${officialGithubUrl}/ionic-portals`,
+				},
 				{
 					name: 'iOS Security',
 					link: '/plugins/ios-security',
@@ -434,7 +441,7 @@ function getPlugins() {
 					repo: `${firebaseGithubUrl}/firebase-in-app-messaging`,
 				},
 				{
-					name: 'Insallations',
+					name: 'Installations',
 					link: '/plugins/firebase-installations',
 					readme: `${firebasePlugins_baseUrl}/firebase-installations/README.md`,
 					repo: `${firebaseGithubUrl}/firebase-installations`,

capacitor/index.md

@@ -1,13 +1,13 @@
 <svg width="126" height="24" viewBox="0 0 126 24" class="capacitor-logo sc-site-header" xmlns="http://www.w3.org/2000/svg"><path d="M30 11.8186C30 16.0223 33.0403 19.4133 37.4287 19.4133C41.8457 19.4133 44.0829 16.4147 44.4844 13.8083H41.0885C40.687 15.3777 39.2356 16.4707 37.4 16.4707C34.962 16.4707 33.2066 14.537 33.2066 11.8186C33.2066 9.07214 34.962 7.13842 37.4 7.13842C39.2356 7.13842 40.687 8.23139 41.0885 9.80078H44.4844C44.0829 7.19447 41.8457 4.1958 37.4287 4.1958C33.0403 4.1958 30 7.58682 30 11.8186Z" fill="black" class="sc-site-header"></path><path d="M57.1749 7.67557V19.127H54.2309V17.7297C53.4928 18.7757 52.1612 19.3924 50.5007 19.3924C47.0834 19.3924 45.0859 16.7227 45.0859 13.4052C45.0859 10.0798 47.0834 7.41797 50.5007 7.41797C52.1612 7.41797 53.4848 8.02684 54.2309 9.08065V7.68337H57.1749V7.67557ZM51.1745 10.1501C49.4017 10.1501 48.2786 11.5474 48.2786 13.4052C48.2786 15.263 49.4017 16.6603 51.1745 16.6603C52.9474 16.6603 54.0704 15.263 54.0704 13.4052C54.0784 11.5474 52.9554 10.1501 51.1745 10.1501Z" fill="black" class="sc-site-header"></path><path d="M61.7701 23H58.5774V7.68337H61.5214V9.08065C62.2594 8.03464 63.591 7.41797 65.2516 7.41797C68.6689 7.41797 70.6663 10.0876 70.6663 13.4052C70.6663 16.7305 68.6689 19.3924 65.2516 19.3924C63.591 19.3924 62.3798 18.6899 61.7701 17.9093V23ZM64.5777 16.6603C66.3506 16.6603 67.4736 15.263 67.4736 13.4052C67.4736 11.5474 66.3506 10.1501 64.5777 10.1501C62.8049 10.1501 61.6818 11.5474 61.6818 13.4052C61.6738 15.263 62.7969 16.6603 64.5777 16.6603Z" fill="black" class="sc-site-header"></path><path d="M83.5107 7.67557V19.127H80.5667V17.7297C79.8287 18.7757 78.4971 19.3924 76.8366 19.3924C73.4193 19.3924 71.4219 16.7227 71.4219 13.4052C71.4219 10.0798 73.4193 7.41797 76.8366 7.41797C78.4971 7.41797 79.8207 8.02684 80.5667 9.08065V7.68337H83.5107V7.67557ZM77.5104 10.1501C75.7376 10.1501 74.6146 11.5474 74.6146 13.4052C74.6146 15.263 75.7376 16.6603 77.5104 16.6603C79.2833 16.6603 80.4063 15.263 80.4063 13.4052C80.4143 11.5474 79.2913 10.1501 77.5104 10.1501Z" fill="black" class="sc-site-header"></path><path d="M90.3201 7.41797C93.978 7.41797 95.7107 9.93151 95.9353 11.8752H92.6544C92.4057 10.8916 91.4672 10.1735 90.296 10.1735C88.5874 10.1735 87.6007 11.4849 87.6007 13.4052C87.6007 15.3255 88.5874 16.6369 90.296 16.6369C91.4672 16.6369 92.4057 15.9187 92.6544 14.9352H95.9353C95.7107 16.8789 93.978 19.3924 90.3201 19.3924C86.9028 19.3924 84.416 16.8164 84.416 13.4052C84.416 9.99395 86.9028 7.41797 90.3201 7.41797Z" fill="black" class="sc-site-header"></path><path d="M96.1829 4.88125C96.1829 3.78841 96.9931 3 98.1161 3C99.2392 3 100.049 3.78841 100.049 4.88125C100.049 5.97409 99.2392 6.73908 98.1161 6.73908C96.9931 6.73908 96.1829 5.97409 96.1829 4.88125ZM96.5198 7.6758H99.7125V19.1272H96.5198V7.6758Z" fill="black" class="sc-site-header"></path><path d="M101.14 7.67635V4.83496H104.332V7.67635H106.787V10.2055H104.332V19.1356H101.14V10.1274" fill="black" class="sc-site-header"></path><path d="M106.256 13.4052C106.256 10.1501 108.663 7.41797 112.433 7.41797C116.203 7.41797 118.61 10.1501 118.61 13.4052C118.61 16.6603 116.203 19.3924 112.433 19.3924C108.663 19.3924 106.256 16.6603 106.256 13.4052ZM112.433 16.6603C114.118 16.6603 115.417 15.4582 115.417 13.4052C115.417 11.3522 114.118 10.1501 112.433 10.1501C110.748 10.1501 109.449 11.3522 109.449 13.4052C109.449 15.4582 110.748 16.6603 112.433 16.6603Z" fill="black" class="sc-site-header"></path><path d="M126 10.5015C126 10.5015 125.667 10.439 125.381 10.439C123.542 10.439 122.582 11.3367 122.582 13.4365V19.1427H119.426V7.67569H122.336V9.15883C122.756 8.47971 123.645 7.56641 125.619 7.56641C125.73 7.56641 126 7.58982 126 7.58982V10.5015Z" fill="black" class="sc-site-header"></path><path class="logo sc-site-header" d="M3.73712 5.07324L0.0291182 8.78592L5.74746 14.5214L0 20.2861L3.6964 24.0004L9.45544 18.2341L15.1833 23.9592L18.8913 20.2465L3.73712 5.07324Z" fill="#53B9FF"></path><path class="logo sc-site-header" d="M13.1735 14.5215L9.45557 18.2341L15.1834 23.9593L18.8914 20.2466L13.1735 14.5215Z" fill="#119EFF"></path><path class="logo sc-site-header" d="M13.1735 14.5215L9.45557 18.2341L10.8868 19.6574L13.1735 14.5215Z" fill="black" fill-opacity="0.2"></path><path class="logo sc-site-header" fill-rule="evenodd" clip-rule="evenodd" d="M18.2409 9.46736L24 3.70106L20.2904 0L14.533 5.75471L8.80468 0.0291556L5.09668 3.74184L20.2509 18.9151L23.9589 15.2024L18.2409 9.46736Z" fill="#53B9FF"></path><path class="logo sc-site-header" d="M10.815 9.46751L14.533 5.75485L8.80468 0.0292969L5.09668 3.74198L10.815 9.46751Z" fill="#119EFF"></path><path class="logo sc-site-header" d="M10.8149 9.46738L14.5329 5.75473L13.1013 4.33105L10.8149 9.46738Z" fill="black" fill-opacity="0.2"></path></svg>
 
-## NativeScript CLI
+## Capacitor for NativeScript
 
-1. Follow the NativeScript [Getting Started Guide](/environment-setup)
+If you'd like to use Capacitor within your NativeScript project:
 
-## Ionic CLI
+- [@nativescript/ionic-portals](https://github.com/NativeScript/plugins/tree/main/packages/ionic-portals#nativescriptionic-portals)
 
-1. Follow the Ionic [Getting Started Guide](https://ionicframework.com/getting-started)
+## NativeScript for Capacitor
 
-2. Follow the Capacitor [Getting Started Guide](https://capacitorjs.com/docs/getting-started)
+If you'd like to use NativeScript within your Capacitor project:
 
-3. `npm install @nativescript/capacitor`
+- [@nativescript/capacitor](https://capacitor.nativescript.org/)

plugins/animated-circle.md

@@ -19,23 +19,26 @@ Creates an animated circle (animates the border of the circle) on iOS and Androi
 ## Usage
 
 ```xml
-<Page xmlns="http://schemas.nativescript.org/tns.xsd"
-  xmlns:ui="@nativescript/animated-circle">
-    <ui:AnimatedCircle
-        backgroundColor="transparent"
-        width="200"
-        height="200"
-        animated="true"
-        animateFrom="0"
-        rimColor="#FF5722"
-        barColor="#3D8FF4"
-        fillColor="#eee"
-        clockwise="true"
-        rimWidth="5"
-        progress="80"
-        text="bam"
-        textSize="28"
-        textColor="red" />
+<Page
+  xmlns="http://schemas.nativescript.org/tns.xsd"
+  xmlns:ui="@nativescript/animated-circle"
+>
+  <ui:AnimatedCircle
+    backgroundColor="transparent"
+    width="200"
+    height="200"
+    animated="true"
+    animateFrom="0"
+    rimColor="#FF5722"
+    barColor="#3D8FF4"
+    fillColor="#eee"
+    clockwise="true"
+    rimWidth="5"
+    progress="80"
+    text="bam"
+    textSize="28"
+    textColor="red"
+  />
 </Page>
 ```
 
@@ -49,7 +52,20 @@ imports: [NativeScriptAnimatedCircleModule]
 ```
 
 ```xml
-			<AnimatedCircle backgroundColor="transparent" width="200" height="200" animated="true" animateFrom="0" rimColor="#fff000" barColor="#ff4081" rimWidth="25" progress="{{ circleProgress }}" text="" textSize="22" textColor="#336699"></AnimatedCircle>
+<AnimatedCircle
+  backgroundColor="transparent"
+  width="200"
+  height="200"
+  animated="true"
+  animateFrom="0"
+  rimColor="#fff000"
+  barColor="#ff4081"
+  rimWidth="25"
+  progress="{{ circleProgress }}"
+  text=""
+  textSize="22"
+  textColor="#336699"
+/>
 ```
 
 ## API

plugins/apple-pay.md

@@ -41,10 +41,7 @@ Once that configuration is done for your Apple developer account, you will be ab
 
 ```xml
 <ios>
-    <ApplePayBtn
-        tap="onApplePayTap"
-        buttonType="InStore"
-    ></ApplePayBtn>
+  <ApplePayBtn tap="onApplePayTap" buttonType="InStore" />
 </ios>
 ```
 

plugins/apple-sign-in.md

@@ -20,15 +20,16 @@ Go to [the Apple developer](https://developer.apple.com/account/resources/identi
 Open your app's App_Resources/iOS folder and add the following (or append) to a file named app.entitlements.
 
 ```xml
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN"
+  "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
-<dict>
-	<key>com.apple.developer.applesignin</key>
-	<array>
-		<string>Default</string>
-	</array>
-</dict>
+  <dict>
+    <key>com.apple.developer.applesignin</key>
+    <array>
+      <string>Default</string>
+    </array>
+  </dict>
 </plist>
 ```
 

plugins/auto-fit-text.md

@@ -28,10 +28,7 @@ This plugin is based on the Nativescript Label implementation but with changes t
   xmlns:AFT="@nativescript/auto-fit-text"
 >
   <StackLayout class="p-20">
-    <AFT:AutoFitText
-      text="Testinggggggggggggggggg"
-      textWrap="false"
-    ></AFT:AutoFitText>
+    <AFT:AutoFitText text="Testinggggggggggggggggg" textWrap="false" />
   </StackLayout>
 </Page>
 ```
@@ -48,7 +45,12 @@ import { NativeScriptAutoFitTextModule } from '@nativescript/auto-fit-text/angul
 ```
 
 ```xml
-<AutoFitText row="2" fontSize="48" text="Lorem Ipsum this line of text with fontSize ignored because the text is so long." textWrap="false"></AutoFitText>
+<AutoFitText
+  row="2"
+  fontSize="48"
+  text="Lorem Ipsum this line of text with fontSize ignored because the text is so long."
+  textWrap="false"
+/>
 ```
 
 ## Credits

plugins/detox.md

@@ -192,7 +192,7 @@ You can use [NativeScript's `testID` property](https://blog.nativescript.org/nat
 Example:
 
 ```xml
-<Button text="Tap Me!" testID="testButton"></Button>
+<Button text="Tap Me!" testID="testButton" />
 ```
 
 ```javascript
@@ -279,9 +279,9 @@ In order to use the `automationText` property in NativeScript it must be enabled
 Create a file called `ids.xml` in `App_Resources/Android/src/main/res/values/` and add the following:
 
 ```xml
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8" ?>
 <resources>
-    <item type="id" name="nativescript_accessibility_id"/>
+  <item type="id" name="nativescript_accessibility_id" />
 </resources>
 ```
 

plugins/fingerprint-auth.md

@@ -22,10 +22,11 @@ Then open `App_Resources/Android/app.gradle` and look for `minSdkVersion`.
 If that's set to a version less than 23, add this `overrideLibrary` line to `App_Resources/Android/src/main/AndroidManifest.xml`:
 
 ```xml
-  <uses-sdk
-      android:minSdkVersion="17"
-      android:targetSdkVersion="__APILEVEL__"
-      tools:overrideLibrary="com.jesusm.kfingerprintmanager"/>
+<uses-sdk
+  android:minSdkVersion="17"
+  android:targetSdkVersion="__APILEVEL__"
+  tools:overrideLibrary="com.jesusm.kfingerprintmanager"
+/>
 ```
 
 ## API

plugins/firebase-admob.md

@@ -336,7 +336,7 @@ Through the use of NativeAdListener, you can listen for lifecycle events, such a
 <ui:NativeAdView height="400" loaded="{{nativeAdLoaded}}">
   <GridLayout height="300" width="300">
     <Label id="headLineView" />
-    <ui:MediaView id="mediaView" height="100%"/>
+    <ui:MediaView id="mediaView" height="100%" />
     <Label id="bodyView" />
     <Button id="callToActionView" />
   </GridLayout>

plugins/firebase-installations.md

@@ -1,11 +1,11 @@
 ---
-title: 'Insallations'
+title: 'Installations'
 link: https://raw.githubusercontent.com/NativeScript/firebase/main/packages/firebase-installations/README.md
 ---
 
 <div style="width: 100%; padding: 1.2em 0em">
 	<img alt="github logo" src="../assets/images/github/GitHub-Mark-32px.png" style="display: inline; margin: 1em 0.5em 1em 0em">
-	<a href="https://github.com/NativeScript/firebase/tree/main/packages/firebase-installations" target="_blank" noopener>Insallations</a>
+	<a href="https://github.com/NativeScript/firebase/tree/main/packages/firebase-installations" target="_blank" noopener>Installations</a>
 </div>
 
 # @nativescript/firebase-installations