@mui/internal-docs-infra 0.3.1-canary.1 → 0.3.1-canary.3

package/esm/pipeline/transformMarkdownCode/transformMarkdownCode.js

@@ -2,6 +2,8 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { visit } from 'unist-util-visit';
+import { normalizeLanguage } from "../loaderUtils/getLanguageFromExtension.js";
+
 /**
  * Remark plugin that transforms code blocks with variants into semantic HTML structures.
  *
@@ -54,67 +56,36 @@ import { visit } from 'unist-util-visit';
  *     <dl>
  *       <dt><code>index.js</code></dt>
  *       <dd>
- *         <pre><code class="language-bash">pnpm install @mui/internal-docs-infra</code></pre>
+ *         <pre><code class="language-shell">pnpm install @mui/internal-docs-infra</code></pre>
  *       </dd>
  *     </dl>
  *   </figure>
  * </section>
  *
- * Or for individual blocks (no figure/figcaption needed):
+ * Or for individual blocks without filename (no dl wrapper needed):
+ * <pre><code class="language-typescript" data-transform="true">console.log('test' as const)</code></pre>
+ *
+ * Or with explicit filename (uses dl/dt/dd structure):
  * <dl>
- *   <dt><code>index.ts</code></dt>
+ *   <dt><code>example.ts</code></dt>
  *   <dd>
- *     <pre><code class="language-ts" data-transform="true">console.log('test' as const)</code></pre>
+ *     <pre><code class="language-typescript">console.log('test' as const)</code></pre>
  *   </dd>
  * </dl>
+ *
+ * Note: The `dl/dt/dd` structure is only used when an explicit `filename` prop is provided.
+ * Language information is passed via the `class="language-*"` attribute on the code element.
  */
 
 /**
- * Maps common language names to file extensions
- */
-var LANGUAGE_TO_EXTENSION = {
-  // JavaScript
-  javascript: 'js',
-  js: 'js',
-  // TypeScript
-  typescript: 'ts',
-  ts: 'ts',
-  // TSX/JSX
-  tsx: 'tsx',
-  jsx: 'jsx',
-  // JSON
-  json: 'json',
-  // Markdown
-  markdown: 'md',
-  md: 'md',
-  // MDX
-  mdx: 'mdx',
-  // HTML
-  html: 'html',
-  // CSS
-  css: 'css',
-  // Shell
-  shell: 'sh',
-  bash: 'sh',
-  sh: 'sh',
-  // YAML
-  yaml: 'yaml',
-  yml: 'yaml'
-};
-
-/**
- * Gets filename from language or explicit filename prop
+ * Gets filename from explicit filename prop only.
+ * Does not derive filename from language - language is passed via className instead.
  */
-function getFileName(language, props) {
-  // Check for explicit filename
+function getFileName(props) {
+  // Only return explicit filename
   if (props.filename) {
     return props.filename;
   }
-
-  // Derive from language
-  if (language && LANGUAGE_TO_EXTENSION[language]) {
-    return "index.".concat(LANGUAGE_TO_EXTENSION[language]);
-  }
   return null;
 }
 
@@ -230,12 +201,11 @@ export var transformMarkdownCode = function transformMarkdownCode() {
 
         // Handle individual code blocks with options (but no variants)
         if (!metaData.variant && !metaData.variantType && Object.keys(allProps).length > 0) {
-          // Create a dl element for individual blocks with options
           var codeHProperties = {};
 
-          // Add language class if available
+          // Add normalized language as class
           if (langFromMeta) {
-            codeHProperties.className = "language-".concat(langFromMeta);
+            codeHProperties.className = "language-".concat(normalizeLanguage(langFromMeta));
           }
 
           // Add all props as data attributes (in camelCase)
@@ -249,15 +219,40 @@ export var transformMarkdownCode = function transformMarkdownCode() {
             }).join('')) : "data".concat(key.charAt(0).toUpperCase() + key.slice(1));
             codeHProperties[camelKey] = value;
           });
-          var fileName = getFileName(langFromMeta, allProps);
-          var dlElement = {
+          var fileName = getFileName(allProps);
+
+          // Create pre > code element
+          var preElement = {
+            type: 'element',
+            tagName: 'pre',
+            data: {
+              hName: 'pre',
+              hProperties: {}
+            },
+            children: [{
+              type: 'element',
+              tagName: 'code',
+              data: {
+                hName: 'code',
+                hProperties: codeHProperties
+              },
+              children: [{
+                type: 'text',
+                value: codeNode.value
+              }]
+            }]
+          };
+
+          // If there's a filename, wrap in dl/dt/dd structure
+          // Otherwise, just use pre > code directly
+          var outputElement = fileName ? {
             type: 'element',
             tagName: 'dl',
             data: {
               hName: 'dl',
               hProperties: {}
             },
-            children: [].concat(_toConsumableArray(fileName ? [{
+            children: [{
               type: 'element',
               tagName: 'dt',
               data: {
@@ -276,38 +271,19 @@ export var transformMarkdownCode = function transformMarkdownCode() {
                   value: fileName
                 }]
               }]
-            }] : []), [{
+            }, {
               type: 'element',
               tagName: 'dd',
               data: {
                 hName: 'dd',
                 hProperties: {}
               },
-              children: [{
-                type: 'element',
-                tagName: 'pre',
-                data: {
-                  hName: 'pre',
-                  hProperties: {}
-                },
-                children: [{
-                  type: 'element',
-                  tagName: 'code',
-                  data: {
-                    hName: 'code',
-                    hProperties: codeHProperties
-                  },
-                  children: [{
-                    type: 'text',
-                    value: codeNode.value
-                  }]
-                }]
-              }]
-            }])
-          };
+              children: [preElement]
+            }]
+          } : preElement;
 
           // Replace this individual code block immediately
-          parentNode.children[index] = dlElement;
+          parentNode.children[index] = outputElement;
           processedIndices.add(index);
           return;
         }
@@ -499,9 +475,9 @@ export var transformMarkdownCode = function transformMarkdownCode() {
                 // Build hProperties for HTML attributes
                 var codeHProperties = {};
 
-                // Add language class if available
+                // Add normalized language as class
                 if (block.actualLang) {
-                  codeHProperties.className = "language-".concat(block.actualLang);
+                  codeHProperties.className = "language-".concat(normalizeLanguage(block.actualLang));
                 }
 
                 // Add additional props as data attributes (in camelCase)
@@ -518,7 +494,7 @@ export var transformMarkdownCode = function transformMarkdownCode() {
 
                 // Add data-variant to track the variant
                 codeHProperties.dataVariant = block.variant;
-                var fileName = getFileName(block.actualLang, block.props);
+                var fileName = getFileName(block.props);
                 return {
                   type: 'element',
                   tagName: 'figure',
@@ -679,9 +655,9 @@ export var transformMarkdownCode = function transformMarkdownCode() {
             var block = codeBlocks[0];
             var _codeHProperties = {};
 
-            // Add language class if available
+            // Add normalized language as class
             if (block.actualLang) {
-              _codeHProperties.className = "language-".concat(block.actualLang);
+              _codeHProperties.className = "language-".concat(normalizeLanguage(block.actualLang));
             }
 
             // Add additional props as data attributes (in camelCase)
@@ -698,8 +674,8 @@ export var transformMarkdownCode = function transformMarkdownCode() {
 
             // Add data-variant to track the variant
             _codeHProperties.dataVariant = block.variant;
-            var _fileName = getFileName(block.actualLang, block.props);
-            var _dlElement = {
+            var _fileName = getFileName(block.props);
+            var dlElement = {
               type: 'element',
               tagName: 'dl',
               data: {
@@ -762,7 +738,7 @@ export var transformMarkdownCode = function transformMarkdownCode() {
             };
 
             // Replace this single code block
-            parentNode.children[codeBlocks[0].index] = _dlElement;
+            parentNode.children[codeBlocks[0].index] = dlElement;
           }
         }
       }

package/esm/pipeline/transformMarkdownMetadata/transformMarkdownMetadata.js

@@ -305,8 +305,8 @@ function toPageMetadata(metadata, filePath) {
     descriptionMarkdown: (_options$visibleDescr2 = options.visibleDescriptionMarkdown) != null ? _options$visibleDescr2 : metadata.descriptionMarkdown,
     keywords: metadata.keywords,
     sections: metadata.sections,
-    openGraph: metadata.openGraph,
-    embeddings: metadata.embeddings
+    embeddings: metadata.embeddings,
+    image: metadata.image
   };
 }
 
@@ -720,26 +720,6 @@ export var transformMarkdownMetadata = function transformMarkdownMetadata() {
                 shouldUpdateMetadata = true;
               }
 
-              // Fill in openGraph title and description if missing
-              if (!mutableMetadata.openGraph) {
-                mutableMetadata.openGraph = {};
-              }
-              if (firstH1 && !mutableMetadata.openGraph.title) {
-                mutableMetadata.openGraph.title = firstH1;
-                shouldUpdateMetadata = true;
-              }
-
-              // Prioritize meta tag description over paragraph for openGraph
-              if (!mutableMetadata.openGraph.description) {
-                if (metaDescription) {
-                  mutableMetadata.openGraph.description = metaDescription;
-                  shouldUpdateMetadata = true;
-                } else if (firstParagraphAfterH1) {
-                  mutableMetadata.openGraph.description = firstParagraphAfterH1;
-                  shouldUpdateMetadata = true;
-                }
-              }
-
               // Add sections hierarchy if we have headings
               hasSections = mutableMetadata.sections && Object.keys(mutableMetadata.sections).length > 0;
               if (headings.length > 1 && !hasSections) {
@@ -768,11 +748,7 @@ export var transformMarkdownMetadata = function transformMarkdownMetadata() {
                 description: descriptionValue,
                 descriptionMarkdown: descriptionMarkdownValue,
                 keywords: metaKeywords || undefined,
-                sections: headings.length > 1 ? buildHeadingHierarchy(headings) : undefined,
-                openGraph: {
-                  title: firstH1 || undefined,
-                  description: descriptionValue
-                }
+                sections: headings.length > 1 ? buildHeadingHierarchy(headings) : undefined
               };
 
               // Create a new metadata export and add it to the tree
@@ -863,7 +839,7 @@ export var transformMarkdownMetadata = function transformMarkdownMetadata() {
                     exports: page.exports,
                     tags: page.tags,
                     skipDetailSection: page.skipDetailSection,
-                    openGraph: page.openGraph
+                    image: page.image
                   };
                 })
               }; // Find and update the wrapper component in the AST

package/esm/pipeline/transformMarkdownMetadata/types.d.ts

@@ -97,14 +97,8 @@ export interface ExtractedMetadata {
   keywords?: string[];
   sections?: HeadingHierarchy;
   embeddings?: number[];
-  openGraph?: {
-    title?: string;
-    description?: string;
-    images?: Array<{
-      url: string;
-      width: number;
-      height: number;
-      alt: string;
-    }>;
+  image?: {
+    url: string;
+    alt?: string;
   };
 }

package/esm/useCode/Pre.d.ts

@@ -3,12 +3,14 @@ import type { VariantSource } from "../CodeHighlighter/types.js";
 export declare function Pre({
   children,
   className,
+  language,
   ref,
   shouldHighlight,
   hydrateMargin
 }: {
   children: VariantSource;
   className?: string;
+  language?: string;
   ref?: React.Ref<HTMLPreElement>;
   shouldHighlight?: boolean;
   hydrateMargin?: string;

package/esm/useCode/Pre.js

@@ -41,6 +41,7 @@ function renderCode(hastChildren, renderHast, text) {
 export function Pre(_ref) {
   var children = _ref.children,
     className = _ref.className,
+    language = _ref.language,
     ref = _ref.ref,
     shouldHighlight = _ref.shouldHighlight,
     _ref$hydrateMargin = _ref.hydrateMargin,
@@ -162,6 +163,7 @@ export function Pre(_ref) {
     ref: bindIntersectionObserver,
     className: className,
     children: /*#__PURE__*/_jsx("code", {
+      className: language ? "language-".concat(language) : undefined,
       children: typeof children === 'string' ? children : frames
     })
   });

package/esm/useCode/useFileNavigation.js

@@ -6,14 +6,32 @@ import { decompressSync, strFromU8 } from 'fflate';
 import { decode } from 'uint8-to-base64';
 import { useUrlHashState } from "../useUrlHashState/index.js";
 import { countLines } from "../pipeline/parseSource/addLineGutters.js";
+import { getLanguageFromExtension } from "../pipeline/loaderUtils/getLanguageFromExtension.js";
 import { Pre } from "./Pre.js";
 
+/**
+ * Gets the language from a filename by extracting its extension.
+ * @param fileName - The filename (e.g., 'index.tsx', 'styles.css')
+ * @returns The language name or undefined
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function getLanguageFromFileName(fileName) {
+  if (!fileName) {
+    return undefined;
+  }
+  var lastDotIndex = fileName.lastIndexOf('.');
+  if (lastDotIndex === -1) {
+    return undefined;
+  }
+  var extension = fileName.substring(lastDotIndex);
+  return getLanguageFromExtension(extension);
+}
+
 /**
  * Converts a string to kebab-case
  * @param str - The string to convert
  * @returns kebab-case string
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function toKebabCase(str) {
   return str
   // Insert a dash before any uppercase letter that follows a lowercase letter or digit
@@ -402,6 +420,7 @@ export function useFileNavigation(_ref) {
       }
       return /*#__PURE__*/_jsx(Pre, {
         className: preClassName,
+        language: selectedVariant.language,
         ref: preRef,
         shouldHighlight: shouldHighlight,
         children: selectedVariant.source
@@ -424,6 +443,7 @@ export function useFileNavigation(_ref) {
       }
       return /*#__PURE__*/_jsx(Pre, {
         className: preClassName,
+        language: getLanguageFromFileName(selectedFileNameInternal),
         ref: preRef,
         shouldHighlight: shouldHighlight,
         children: source
@@ -497,6 +517,7 @@ export function useFileNavigation(_ref) {
         slug: generateFileSlug(mainSlug, selectedVariant.fileName, selectedVariantKey),
         component: /*#__PURE__*/_jsx(Pre, {
           className: preClassName,
+          language: selectedVariant.language,
           ref: preRef,
           shouldHighlight: shouldHighlight,
           children: selectedVariant.source
@@ -509,10 +530,12 @@ export function useFileNavigation(_ref) {
           fileName = _ref3[0],
           fileData = _ref3[1];
         var source;
+        var language;
         if (typeof fileData === 'string') {
           source = fileData;
         } else if (fileData && _typeof(fileData) === 'object' && 'source' in fileData) {
           source = fileData.source;
+          language = fileData.language;
         } else {
           return; // Skip invalid entries
         }
@@ -524,6 +547,7 @@ export function useFileNavigation(_ref) {
           slug: generateFileSlug(mainSlug, fileName, selectedVariantKey),
           component: /*#__PURE__*/_jsx(Pre, {
             className: preClassName,
+            language: language != null ? language : getLanguageFromFileName(fileName),
             ref: preRef,
             shouldHighlight: shouldHighlight,
             children: source

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-docs-infra",
-  "version": "0.3.1-canary.1",
+  "version": "0.3.1-canary.3",
   "author": "MUI Team",
   "description": "MUI Infra - internal documentation creation tools.",
   "bin": {
@@ -329,5 +329,5 @@
     },
     "./esm": null
   },
-  "gitSha": "04aa71c45b922602c25a926df3a7e17cb3744ac1"
+  "gitSha": "d451af44f7bc27fd589bdeda8f07395fa2037ad8"
 }