finishing native docgen

Author: perrygovier

scripts/native.js

@@ -16,12 +16,9 @@ function writePage(page) {
     renderIntro(page),
     renderSalesCTA(page),
     renderInstallation(page),
-    // renderProperties(page),
-    // renderEvents(page),
-    // renderMethods(page),
-    // renderParts(page),
-    // renderCustomProps(page),
-    // renderSlots(page)
+    renderSupportedPlatforms(page),
+    renderCapIncompat(page),
+    renderUsage(page),
   ].join("");
 
   const path = `docs/native/plugins/${page.packageName.replace('@ionic-native/','')}.md`;
@@ -84,28 +81,66 @@ function renderInstallation({cordovaPlugin, packageName}) {
   <a href="#installation">Installation</a>
 </h2>
 <Tabs defaultValue="Capacitor" values={[
-  {value: 'Capacitor', label: 'CAPACITOR'},
-  {value: 'Cordova', label: 'CORDOVA'},
-  {value: 'Enterprise', label: 'ENTERPRISE'},
+  {value: 'Capacitor', label: 'Capacitor'},
+  {value: 'Cordova', label: 'Cordova'},
+  {value: 'Enterprise', label: 'Enterprise'},
 ]}>
   <TabItem value="Capacitor">
-    <CodeBlock>
-      npm install ${cordovaPlugin.name}
-      npm install ${packageName}
-      ionic cap sync
+    <CodeBlock className="language-shell">
+      $ npm install ${cordovaPlugin.name} {"\\n"}
+      $ npm install ${packageName} {"\\n"}
+      $ ionic cap sync
     </CodeBlock>
   </TabItem>
   <TabItem value="Cordova">
-    <CodeBlock>
-      ionic cordova plugin add ${cordovaPlugin.name}
-      npm install ${packageName}
+    <CodeBlock className="language-shell">
+      $ ionic cordova plugin add ${cordovaPlugin.name} {"\\n"}
+      $ npm install ${packageName} {"\\n"}
     </CodeBlock>
   </TabItem>
   <TabItem value="Enterprise">
     <blockquote>Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team. &nbsp;
       <a class="btn" href="https://ionic.io/docs/premier-plugins">Learn More</a> or if you're interested in an enterprise version of this plugin <a class="btn" href="https://ionicframework.com/sales?product_of_interest=Ionic%20Enterprise%20Engine">Contact Us</a></blockquote>
   </TabItem>
 </Tabs>
-  `
+`
 }
 
+function renderSupportedPlatforms({platforms}) {
+  return `
+## Supported Platforms
+  
+${platforms.map(platform => `- ${platform}`).join('\n')}
+`;
+}
+
+function renderCapIncompat({capacitorIncompatible}) {
+  if (!capacitorIncompatible) {
+    return null;
+  }
+
+  return `
+## Capacitor
+  
+Not Compatible
+`;
+}
+
+function renderUsage({usage}) {
+  if (!usage) {
+    return null;
+  }
+
+  return `
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](/docs/native/community#react)
+  
+
+### Angular
+
+${usage.replace(/</g,'&lt;')}
+`;
+}