chipping away at native docgen

Author: perrygovier

scripts/native.js

@@ -2,6 +2,7 @@ const fs = require("fs");
 const nativeJSON = require("./data/native.json");
 const utils = require('./utils.js');
 
+
 (async function() {
   // console.log(cliJSON);
 
@@ -14,6 +15,7 @@ function writePage(page) {
     renderImports(page),
     renderIntro(page),
     renderSalesCTA(page),
+    renderInstallation(page),
     // renderProperties(page),
     // renderEvents(page),
     // renderMethods(page),
@@ -43,6 +45,10 @@ ${Object.entries(frontmatter)
 function renderImports({}) {
   return `
 import DocsCard from '@site/src/components/DocsCard';
+import DocsButton from '@site/src/components/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
 `;
 }
 
@@ -61,161 +67,45 @@ ${description}
 function renderSalesCTA({}) {
   return `
 <h2>Stuck on a Cordova issue?</h2>
-<DocsCard class="cordova-ee-card" header="Don't waste precious time on plugin issues." href="https://ionicframework.com/sales?product_of_interest=Ionic%20Native">
+<DocsCard className="cordova-ee-card" header="Don't waste precious time on plugin issues." href="https://ionicframework.com/sales?product_of_interest=Ionic%20Native">
   <div>
     <img src="/docs/icons/native-cordova-bot.png" class="cordova-ee-img" />
     <p>If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.</p>
-    <docs-button class="native-ee-detail">Contact Us Today!</docs-button>
+    <DocsButton className="native-ee-detail">Contact Us Today!</DocsButton>
   </div>
 </DocsCard>
 
 `;
 }
 
-// function renderUsage({ usage }) {
-//   const keys = Object.keys(usage);
-
-//   if (keys.length === 0) {
-//     return "";
-//   }
-
-//   if (keys.length === 1) {
-//     return `
-// ## Usage
-
-// ${usage[keys[0]]}
-// `;
-//   }
-
-//   return `
-// ## Usage
-
-// <Tabs defaultValue="${keys[0]}" values={[${keys
-//     .map(key => `{ value: '${key}', label: '${key.toUpperCase()}' }`)
-//     .join(", ")}]}>
-
-// ${Object.entries(usage)
-//   .map(
-//     ([key, value]) => `
-// <TabItem value="${key}">
-
-// ${value}
-
-// </TabItem>
-// `
-//   )
-//   .join("\n")}
-// </Tabs>
-// `;
-// }
-
-// function renderProperties({ props: properties }) {
-//   if (properties.length === 0) {
-//     return "";
-//   }
-
-//   return `
-// ## Properties
-
-// ${properties
-//   .map(
-//     prop => `
-// ### ${prop.name}
-
-// | | |
-// | --- | --- |
-// | **Description** | ${prop.docs.split("\n").join("<br />")} |
-// | **Attribute** | \`${prop.attr}\` |
-// | **Type** | \`${prop.type.replace(/\|/g, "\\|")}\` |
-// | **Default** | \`${prop.default}\` |
-
-// `
-//   )
-//   .join("\n")}
-// `;
-// }
-
-// function renderEvents({ events }) {
-//   if (events.length === 0) {
-//     return "";
-//   }
-
-//   return `
-// ## Events
-
-// | Name | Description |
-// | --- | --- |
-// ${events.map(event => `| \`${event.event}\` | ${event.docs} |`).join("\n")}
-
-// `;
-// }
-
-// function renderMethods({ methods }) {
-//   if (methods.length === 0) {
-//     return "";
-//   }
-
-//   return `
-// ## Methods
-
-// ${methods
-//   .map(
-//     method => `
-// ### ${method.name}
-
-// | | |
-// | --- | --- |
-// | **Description** | ${method.docs.split("\n").join("<br />")} |
-// | **Signature** | \`${method.signature.replace(/\|/g, "\\|")}\` |
-// `
-//   )
-//   .join("\n")}
-
-// `;
-// }
-
-// function renderParts({ parts }) {
-//   if (parts.length === 0) {
-//     return "";
-//   }
-
-//   return `
-// ## CSS Shadow Parts
-
-// | Name | Description |
-// | --- | --- |
-// ${parts.map(prop => `| \`${prop.name}\` | ${prop.docs} |`).join("\n")}
-
-// `;
-// }
-
-// function renderCustomProps({ styles: customProps }) {
-//   if (customProps.length === 0) {
-//     return "";
-//   }
-
-//   return `
-// ## CSS Custom Properties
-
-// | Name | Description |
-// | --- | --- |
-// ${customProps.map(prop => `| \`${prop.name}\` | ${prop.docs} |`).join("\n")}
-
-// `;
-// }
-
-// function renderSlots({ slots }) {
-//   if (slots.length === 0) {
-//     return "";
-//   }
-
-//   return `
-// ## Slots
-
-// | Name | Description |
-// | --- | --- |
-// ${slots.map(slot => `| \`${slot.name}\` | ${slot.docs} |`).join("\n")}
-
-// `;
-// }
+function renderInstallation({cordovaPlugin, packageName}) {
+  return `
+<h2 id="installation">
+  <a href="#installation">Installation</a>
+</h2>
+<Tabs defaultValue="Capacitor" values={[
+  {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>
+  </TabItem>
+  <TabItem value="Cordova">
+    <CodeBlock>
+      ionic cordova plugin add ${cordovaPlugin.name}
+      npm install ${packageName}
+    </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>
+  `
+}
 

src/components/DocsButton/index.tsx

@@ -15,10 +15,10 @@ export default function DocsButton({ href, round = false, ...props }) {
   });
 
   return href ? (
-    <a href={href} {...props}>
+    <a href={href} className='docsButton' {...props}>
       {props.children}
     </a>
   ) : (
-    <button {...props}>{props.children}</button>
+    <button className='docsButton' {...props}>{props.children}</button>
   );
 }

src/components/DocsButton/styles.module.css

@@ -1,24 +1,18 @@
 .docsButton {
-  background-color: rgba(var(--accent-color-rgb), var(--bg-alpha, 0.06));
+  background-color: var(--ifm-link-color);
+  color: white;
+  font-weight: 600;
   border-radius: 6px;
-  color: var(--accent-color);
   display: inline-block;
   font-weight: 600;
   white-space: nowrap;
-}
-
-.docsButton a,
-.docsButton button {
-  color: inherit;
   display: inline-block;
   font-size: inherit;
-  font-weight: inherit;
   padding: 0.75em 1.5em;
 }
 
-.docsButton button {
+button.docsButton  {
   appearance: none;
-  background: none;
   border: none;
   line-height: inherit;
 }
@@ -36,10 +30,10 @@
 
 @media (hover: hover) {
   .docsButton:hover {
-    --bg-alpha: 0.08;
+    background-color: var(--ifm-link-hover-color);
   }
 
   .docsButton:active {
-    --bg-alpha: 0.1;
+    opacity: 0.9;
   }
 }

src/components/DocsCard/index.tsx

@@ -6,7 +6,7 @@ import { Outbound } from '@site/src/icons';
 
 import './card.css';
 
-interface Props {
+interface Props extends React.HTMLAttributes<HTMLDivElement>{
   href?: string;
   header?: string;
   icon?: string;
@@ -48,10 +48,13 @@ function DocsCard(props: Props): JSX.Element {
       </div>
     </>);
 
+    console.log('test', props.className)
+
     const className = clsx({
       'Card-with-image': typeof props.img !== 'undefined',
       'Card-without-image': typeof props.img === 'undefined',
       'Card-size-lg': props.size === 'lg',
+      [props.className]: props.className
     });
 
     if (isStatic) {

src/css/custom.css

@@ -282,12 +282,22 @@ iframe {
   fill: currentColor;
 }
 
+
+.cordova-ee-card {
+  max-width:100%;
+}
+
 .cordova-ee-img {
   width:50px;
   float:left;
   margin-right:20px;
 }
 
-.cordova-ee-card {
-  max-width:100%;
+.native-ee-detail {
+  float: right;
+  cursor: pointer;
+}
+
+.cordova-ee-card p {
+  margin: 1rem 0 0;
 }