From 0bced288a8625134487d4e615be55c5a31d89253 Mon Sep 17 00:00:00 2001 From: Elliott Marquez Date: Fri, 23 Jun 2023 15:09:04 -0700 Subject: [PATCH] build(catalog): add catalog-include to catalog build PiperOrigin-RevId: 542968626 --- catalog/scripts/copy-readmes.mjs | 44 +++- docs/components/icon-button.md | 346 +------------------------------ 2 files changed, 54 insertions(+), 336 deletions(-) diff --git a/catalog/scripts/copy-readmes.mjs b/catalog/scripts/copy-readmes.mjs index b72d00f30e..0d678f4731 100644 --- a/catalog/scripts/copy-readmes.mjs +++ b/catalog/scripts/copy-readmes.mjs @@ -5,7 +5,7 @@ */ import {cp, readFile, writeFile} from 'fs/promises'; -import {join, relative} from 'path'; +import {dirname, join, relative} from 'path'; import tinyGlob from 'tiny-glob'; /** @@ -64,6 +64,46 @@ const transforms = [ }, ]; +/** + * Executes the `` file transform by fetching the + * file in quotes and simply injecting its contents into the Markdown. + * + * @param {string} filepath The filepath of the markdown file to transform. Used + * for determining relative URLs. + * @param {string} fileContents The contents of the markdown filepath to + * transform. + * @return The stringified transformed contents of the markdown file. + */ +async function fileIncludeTransform(filepath, fileContents) { + const catalogIncludeRegex = //g; + const matches = []; + let match = catalogIncludeRegex.exec(fileContents); + + // Collect all the regex matches + while (match) { + matches.push(match); + match = catalogIncludeRegex.exec(fileContents); + } + + const fileDir = dirname(filepath); + + // Iterate through the regex matches backward and splice in the file contents. + // Iterating backwards so that injecting won't affect match string indices. + for (let i = matches.length - 1; i >= 0; i--) { + const match = matches[i]; + const matchedString = match[0]; + const includePath = match[1]; + + console.log(`Injecting ${includePath} file contents into ${filepath}...`); + const includeContents = await readFile(join(fileDir, includePath), 'utf8'); + + fileContents = fileContents.slice(0, match.index) + includeContents + + fileContents.slice(match.index + matchedString.length); + } + + return fileContents; +} + /** * Applies the transforms to readme files at the given filepaths and outputs the * result to /catalog/site/components/.md @@ -79,6 +119,8 @@ async function transformReadmes(filepaths) { readme = readme.replaceAll(transform.before, transform.after); }); + readme = await fileIncludeTransform(entry, readme); + // The `components/.md` path. const localPath = relative(join('..', 'docs'), entry); // The output path at diff --git a/docs/components/icon-button.md b/docs/components/icon-button.md index e1ecfa03c3..3dab56fe2e 100644 --- a/docs/components/icon-button.md +++ b/docs/components/icon-button.md @@ -53,80 +53,7 @@ people take supplementary actions with a single tap. ![Side by side view of standard and contained icon buttons](images/iconbutton/buttons.png "1 - Standard Icon Button. 2 - Contained Icon Button (including filled, filled tonal, and outlined styles)") - - - - - + 1. [Standard Icon Button](#standard-icon-button) 2. [Filled Icon Button](#filled-icon-button) @@ -150,33 +77,7 @@ the icon font. ![A row of icon buttons](images/iconbutton/usage.png "Icon buttons can be used within other components, such as a bottom app bar") - - - - - + ```html @@ -216,56 +117,7 @@ row is selected](images/iconbutton/usage-toggle.png "Unselected and Selected Icon Button") - - - - - + Toggle icon buttons allow a single choice to be selected or deselected, such as adding or removing something from favorites. @@ -352,24 +204,7 @@ Icon buttons can be grouped together or they can stand alone. ![A check icon](images/iconbutton/usage-standard.png "Standard Icon Button with Check icon") - - - - - + ```html @@ -386,24 +221,7 @@ Icon buttons can be grouped together or they can stand alone. ![A circular button with a check icon](images/iconbutton/usage-filled.png "Filled Icon Button") - - - - - + Filled icon buttons have higher visual impact and are best for high emphasis actions. @@ -423,24 +241,7 @@ actions. ![A filled tonal icon button with a check icon](images/iconbutton/usage-filled-tonal.png "Filled Tonal Icon Button") - - - - - + Filled tonal icon buttons are a middle ground between filled and outlined icon buttons. They're useful in contexts where the button requires slightly more @@ -462,24 +263,7 @@ high emphasis action. ![An outlined circular icon button with a check icon](images/iconbutton/usage-outlined.png "Outlined Icon button") - - - - - + Outlined icon buttons are medium-emphasis buttons. They're useful when an icon button needs more emphasis than a standard icon button but less than a filled or @@ -514,36 +298,7 @@ Token | Default value ![Image of a standard icon button with a different theme applied](images/iconbutton/theming-standard.png "Standard icon button theming example.") - - - - - + ```html - - check - - - - ---> - - + ```html - - check - - - - ---> - - + ```html - - check - - - - ---> - - + ```html