@patternfly/documentation-framework 1.4.9 → 1.4.10

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.4.10 (2023-01-26)
+
+
+### Bug Fixes
+
+* update codesandbox dependencies per example import ([#3367](https://github.com/patternfly/patternfly-org/issues/3367)) ([31b75a3](https://github.com/patternfly/patternfly-org/commit/31b75a346dd0ba03bb697d9917a729a32dad76be))
+
+
+
+
+
 ## 1.4.9 (2023-01-25)
 
 **Note:** Version bump only for package @patternfly/documentation-framework

package/components/example/example.js

@@ -81,7 +81,11 @@ export const Example = ({
   // Show dark theme switcher on full page examples
   hasDarkThemeSwitcher = process.env.hasDarkThemeSwitcher,
   // Map of relative imports matched to their npm package import path (passed to Codesandbox)
-  relativeImports
+  relativeImports,
+  // md file location in node_modules, used to resolve relative import paths in examples
+  relPath = '',
+  // absolute url to hosted file
+  sourceLink = ''
 }) => {
   if (isFullscreenPreview) {
     isFullscreen = false;
@@ -160,13 +164,13 @@ export const Example = ({
   const codeBoxParams = getParameters(
     lang === 'html'
       ? getStaticParams(title, editorCode)
-      : getReactParams(title, editorCode, scope, lang, relativeImports)
+      : getReactParams(title, editorCode, scope, lang, relativeImports, relPath, sourceLink)
   );
   const fullscreenLink = loc.pathname.replace(/\/$/, '')
     + (loc.pathname.endsWith(source) ? '' : `/${source}`)
     + '/'
     + slugger(title);
-
+    
   return (
     <div className="ws-example">
       <div className="ws-example-header">

package/helpers/codesandbox.js

@@ -2,6 +2,7 @@ const { parse } = require('@patternfly/ast-helpers');
 const versions  = require('../versions.json');
 const overpass = require('./fonts');
 const { capitalize } = require('./capitalize');
+const path = require('path');
 const pathPrefix = process.env.pathPrefix;
 
 const getStaticParams = (title, html) => {
@@ -107,7 +108,7 @@ function prettyExampleCode(title, code, declaration, identifier) {
 }
 
 // TODO: Make React examples work and use a template that has our assets.
-function getReactParams(title, code, scope, lang, relativeImports) {
+function getReactParams(title, code, scope, lang, relativeImports, relPath, sourceLink) {
   let toRender = null;
   try {
     let declaration = getExampleDeclaration(code);
@@ -130,12 +131,18 @@ function getReactParams(title, code, scope, lang, relativeImports) {
   catch (err) {
     // Ignore
   }
-  // Update image imports to point to pf.org
-  const imgImportRegex = /import\s*(\w*).*['"](.*)(\.(png|jpe?g|webp|gif|svg))['"]/g;
-  let imgImportMatch;
-  while ((imgImportMatch = imgImportRegex.exec(code))) {
-    const imgName = imgImportMatch[1];
-    code = code.replace(imgImportMatch[0], `const ${imgName} = "https://www.patternfly.org/v4${scope[imgName]}"`);
+
+  // Point to sourcelink for @patternfly images
+  if (relPath.includes('@patternfly')) {
+    const imgImportRegex = /(import \W*(\w*)\W*[^'"`]*['"`](.*\.(?:png|jpe?g|webp|gif|svg))['"])/gm;
+    let imgImportMatch;
+    while ((imgImportMatch = imgImportRegex.exec(code))) {
+      const [match, importDeclaration, imgName, relImgPath] = imgImportMatch;
+      // Point to sourceLink hosted file
+      const sourceLinkPath = new URL(relImgPath, sourceLink.replace('/blob/', '/raw/')).href;
+      const hostedImageDeclaration = `const ${imgName} = "${sourceLinkPath}"`;
+      code = code.replace(importDeclaration, hostedImageDeclaration);
+    }
   }
 
   const relImportRegex = /(import[\s*{])([\w*{}\n\r\t, ]+)([\s*]from\s["']([\.\/]+.*)["'])/gm;
@@ -160,8 +167,7 @@ function getReactParams(title, code, scope, lang, relativeImports) {
     .filter(([pkg]) => code.includes(pkg))
     .forEach(([pkg, version]) => dependencies[pkg] = version);
 
-  
-  // Get any additional dependencies from example code
+  // Get any additional dependencies from example code, exclude relative imports
   const importMatch = /(?:import [^'"`]*)(?:['"`])((?!.\/)[^'"`]*)/gm;
   let depImport;
   while (depImport = importMatch.exec(code)) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "1.4.9",
+  "version": "1.4.10",
   "author": "Red Hat",
   "license": "MIT",
   "private": false,
@@ -84,5 +84,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "61f579285f5edfcfe92659f90ccc38b2616fc15d"
+  "gitHead": "cdc3f14e64f1d115170527afaf6b25ef971bf02f"
 }

package/routes.js

@@ -28,7 +28,7 @@ const isNull = o => o === null || o === undefined;
 const groupedRoutes = Object.entries(routes)
   .filter(([_slug, { id, section }]) => !isNull(id) && !isNull(section))
   .reduce((accum, [slug, pageData]) => {
-    const { section, subsection = null, id, title, source, katacodaLayout, hideNavItem } = pageData;
+    const { section, subsection = null, id, title, source, katacodaLayout, hideNavItem, relPath } = pageData;
     pageData.slug = slug;
     // add section to groupedRoutes obj if not yet created
     accum[section] = accum[section] || {};
@@ -41,7 +41,8 @@ const groupedRoutes = Object.entries(routes)
       slug: makeSlug(source, section, id, true, subsection),
       sources: [],
       katacodaLayout,
-      hideNavItem
+      hideNavItem,
+      relPath
     }
     // add page to groupedRoutes obj section or subsection
     if (subsection) {

package/scripts/md/parseMD.js

@@ -86,7 +86,8 @@ function toReactComponent(mdFilePath, source, buildMode) {
         sourceLink: frontmatter.sourceLink || `https://github.com/patternfly/${
           sourceRepo}/blob/main/${
           normalizedPath}`,
-        hideTOC: frontmatter.hideTOC || false
+        hideTOC: frontmatter.hideTOC || false,
+        relPath
       };
       // Temporarily override section for Demo tabs until we port this upstream
       if (frontmatter.section === 'demos' && routes[slug.replace('demos', 'components')]) {