docs: enhance Component API documentation

Replaces PUBLIC_API.json with COMPONENT_API.json generated by sveld.

docs/src/layouts/ComponentLayout.svelte

@@ -12,18 +12,13 @@
     Tabs,
     Tab,
     TabContent,
-    StructuredList,
-    StructuredListHead,
-    StructuredListRow,
-    StructuredListCell,
-    StructuredListBody,
   } from "carbon-components-svelte";
   import Code16 from "carbon-icons-svelte/lib/Code16";
   import { page, metatags } from "@sveltech/routify";
   import { onMount } from "svelte";
   import { theme } from "../store";
   import ComponentApi from "../components/ComponentApi.svelte";
-  import API from "../PUBLIC_API.json";
+  import COMPONENT_API from "../COMPONENT_API.json";
 
   export let component = $page.title;
   export let components = [component];
@@ -33,8 +28,10 @@
 
   metatags.title = $page.title;
 
-  $: api = components.map((_) => API.components[_]).filter(Boolean);
-  $: multiple = api.length > 1;
+  $: api_components = components.map((i) =>
+    COMPONENT_API.components.find((_) => _.moduleName === i)
+  );
+  $: multiple = api_components.length > 1;
 
   onMount(() => {
     const currentTheme = window.location.search.split("?theme=")[1];
@@ -173,15 +170,10 @@
         <slot />
         <h2 id="component-api">Component API</h2>
         <p>
-          Component API documentation is
-          <Link
-            inline
-            href="https://github.com/IBM/carbon-components-svelte/blob/master/scripts/rollup/plugin-generate-docs.js"
-            target="_blank"
-          >
-            auto-generated
+          Component documentation is
+          <Link inline href="https://github.com/IBM/sveld" target="_blank">
+            auto-generated by sveld.
           </Link>
-          from a build script.
         </p>
       </Column>
     </Row>
@@ -190,11 +182,11 @@
       <Column class="prose" noGutter="{multiple}">
         {#if multiple}
           <Tabs class="override-tabs">
-            {#each api as component, i (component.moduleName)}
+            {#each api_components as component (component.moduleName)}
               <Tab label="{component.moduleName}" />
             {/each}
             <div slot="content" style="padding-top: var(--cds-spacing-06)">
-              {#each api as component, i (component.moduleName)}
+              {#each api_components as component (component.moduleName)}
                 <TabContent>
                   <ComponentApi component="{component}" />
                 </TabContent>
@@ -202,7 +194,7 @@
             </div>
           </Tabs>
         {:else}
-          <ComponentApi component="{api[0]}" />
+          <ComponentApi component="{api_components[0]}" />
         {/if}
       </Column>
     </Row>