I18n component name

mui · Oct 24, 2020 · 4bebf50 · 4bebf50
1 parent 5868d19
commit 4bebf50
Show file tree

Hide file tree

Showing 5 changed files with 509 additions and 81 deletions.
diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts
@@ -27,7 +27,7 @@ const DEMO_IGNORE = LANGUAGES_IN_PROGRESS.map((language) => `-${language}.md`);
 
 const propDescriptions: { [key: string]: { [key: string]: string | undefined } } = {};
 const classDescriptions: { [key: string]: { [key: string]: string } } = {};
-const componentDescriptions: { [key: string]: string } = {};
+const componentDescriptions: { [key: string]: { [key: string]: string } } = {};
 
 const generateClassName = createGenerateClassName();
 
@@ -472,6 +472,7 @@ async function buildDocs(options: {
     throw err;
   }
 
+  // Add prop descriptions for JSON
   Object.entries(reactAPI.props).forEach(([propName, propData]) => {
     let description = propData.description;
 
@@ -493,9 +494,12 @@ async function buildDocs(options: {
     delete reactAPI.props[propName].description;
   });
 
+  componentDescriptions[reactAPI.name] = { name: reactAPI.name };
+
   if (reactAPI.description.length) {
-    componentDescriptions[reactAPI.name] = reactAPI.description;
+    componentDescriptions[reactAPI.name].description = reactAPI.description;
   }
+
   classDescriptions[reactAPI.name] = reactAPI.styles.descriptions;
 
   // https://medium.com/@captaindaylight/get-a-subset-of-an-object-9896148b9c72

diff --git a/docs/src/modules/components/ApiDocs.js b/docs/src/modules/components/ApiDocs.js
@@ -72,8 +72,11 @@ function ApiDocs(props) {
     styles: componentStyles,
   } = pageContent;
 
-  const description = t('apiDescription').replace(/{{name}}/, name);
-
+  const apiDescription = t('apiDescription').replace(/{{name}}/, name);
+  const description =
+    componentDescription[userLanguage] && componentDescription[userLanguage].description;
+  const componentName =
+    (componentDescription[userLanguage] && componentDescription[userLanguage].name) || name;
   const source = filename
     .replace(
       /\/packages\/material-ui(-(.+?))?\/src/,
@@ -127,7 +130,7 @@ function ApiDocs(props) {
   }
 
   function dangerousMarkdown(md) {
-    return <span dangerouslySetInnerHTML={{ __html: marked(md) }} />;
+    return md && <span dangerouslySetInnerHTML={{ __html: marked(md) }} />;
   }
 
   function heading(hash, level = 2) {
@@ -147,7 +150,7 @@ function ApiDocs(props) {
   return (
     <AppFrame>
       <AdManager>
-        <Head title={`${name} API - Material-UI`} description={description} />
+        <Head title={`${componentName} API - Material-UI`} description={apiDescription} />
         {disableAd ? null : (
           <AdGuest>
             <Ad placement="body" />
@@ -164,9 +167,9 @@ function ApiDocs(props) {
               <div className={classes.actions}>
                 <EditPage markdownLocation={filename} />
               </div>
-              <h1>{name} API</h1>
+              <h1>{componentName} API</h1>
               <Typography variant="h5" component="div" gutterBottom>
-                {description}
+                {apiDescription}
               </Typography>
               {heading('import')}
               <HighlightedCode
@@ -177,8 +180,7 @@ import { ${name} } from '${source}';`}
                 language="jsx"
               />
               {dangerousMarkdown(t('apiImportDifference'))}
-              {componentDescription[userLanguage] &&
-                dangerousMarkdown(componentDescription[userLanguage])}
+              {description && dangerousMarkdown(description)}
               {componentStyles.name && (
                 <React.Fragment>
                   {heading('component-name')}