message: fix(playground): usage section for migration script
diff: @@ -40,16 +40,20 @@ let COMPONENT_LINK_REGEXP;
  writeAutoGeneratedPage(compTag, 'custom-props', renderCustomProps(comp));
  writeAutoGeneratedPage(compTag, 'slots', renderSlots(comp));
  });
  +
  + console.log('Finished one-time migration of component docs');
  })();
  function writePage(page) {
  - let data = [renderFrontmatter(page), renderReadme(page)].join('');
  + let data = [renderFrontmatter(page), renderReadme(page), renderUsage(page), renderComponentApi()].join('');
  // fix relative links, e.g. (../button) -> (button.md)
  data = data.replace(COMPONENT_LINK_REGEXP, '($1.md$2)');
  - const path = `docs/api/${page.tag.slice(4)}.md`;
  - fs.writeFileSync(path, data);
  + const dir = './docs/api';
  + const path = `${dir}/${page.tag.slice(4)}.md`;
  + fs.mkdirSync(dir, { recursive: true });
  + fs.writeFileSync(path, data, {});
  }
  function writeAutoGeneratedPage(componentTag, fileName, data) {
  @@ -78,6 +82,7 @@ ${Object.entries(frontmatter)
  ---
  import Tabs from '@theme/Tabs';
  import TabItem from '@theme/TabItem';
  +
  import Props from './auto-generated/${tag.slice(4)}/props.md';
  import Events from './auto-generated/${tag.slice(4)}/events.md';
  import Methods from './auto-generated/${tag.slice(4)}/methods.md';
  @@ -92,7 +97,6 @@ ${utils.getHeadTag(apiOverrides[tag])}
  function renderReadme({ readme, encapsulation }) {
  const endIndex = readme.indexOf('\n');
  - const title = readme.substring(0, endIndex);
  const rest = readme.substring(endIndex);
  const addAdmonitions = (text) =>
  @@ -114,14 +118,56 @@ ${encapsulation !== 'none' ? `<EncapsulationPill type="${encapsulation}" />` : '
  ${addAdmonitions(rest)}
  -<!-- Auto-generated below: Do not modify -->
  +`;
  +}
  +function renderComponentApi() {
  + return `
  <Props />
  <Events />
  <Methods />
  <Parts />
  <CustomProps />
  -<Slots />
  +<Slots />`;
  +}
  +
  +function renderUsage({ usage }) {
  + function capitalizeFirstLetter(string) {
  + return string.charAt(0).toUpperCase() + string.slice(1);
  + }
  +
  + const keys = Object.keys(usage);
  +
  + if (keys.length === 0) {
  + return '';
  + }
  +
  + if (keys.length === 1) {
  + return `
  +## Usage
  +
  +${usage[keys[0]]}
  +`;
  + }
  +
  + return `
  +## Usage
  +
  +<Tabs groupId="framework" defaultValue="${keys[0]}" values={[${keys
  + .map((key) => `{ value: '${key}', label: '${capitalizeFirstLetter(key)}' }`)
  + .join(', ')}]}>
  +${Object.entries(usage)
  + .map(
  + ([key, value]) => `
  +<TabItem value="${key}">
  +
  +${value}
  +
  +</TabItem>
  +`
  + )
  + .join('\n')}
  +</Tabs>
  `;
  }
  