docs: add configuration for component's more examples (#3747)

Author: lukewalczak

docs/component-docs-plugin/generatePageMDX.js

@@ -1,6 +1,34 @@
 const config = require('../docusaurus.config');
 
-const { baseUrl } = config;
+const { baseUrl, customFields } = config;
+
+function generateMoreExamples(componentName) {
+  const componentMoreExamples = customFields.moreExamples[componentName];
+
+  if (!componentMoreExamples) {
+    return `<span />`;
+  }
+
+  const links = Object.entries(componentMoreExamples)
+    .map(([key, value]) => {
+      return `
+    <li key="${key}">
+      <a href="${value}">${key}</a>
+    </li>
+    `;
+    })
+    .join('');
+
+  return `
+  ## More Examples
+  <details>
+    <summary>Toggle to grab more examples</summary>
+    <ul>
+      ${links}
+    </ul>
+  </details>
+  `;
+}
 
 function generatePageMDX(doc, link) {
   const description = doc.description
@@ -17,6 +45,8 @@ import PropTable from '@site/src/components/PropTable.tsx';
 
 ${description}
 
+${generateMoreExamples(doc.title)}
+
 ## Props
 
 <PropTable link="${link}" />

docs/docusaurus.config.js

@@ -289,6 +289,15 @@ const config = {
         indexName: 'crawler_React Native Paper Docs',
       },
     }),
+
+  customFields: {
+    moreExamples: {
+      Portal: {
+        'Comprehensive Portal example':
+          'https://snack.expo.dev/@react-native-paper/comprehensive-portal-example',
+      },
+    },
+  },
 };
 
 module.exports = config;