@patternfly/documentation-framework 2.0.0-alpha.9 → 5.0.1

package/scripts/webpack/webpack.base.config.js

@@ -6,8 +6,8 @@ const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 module.exports = (_env, argv) => {
   const {
-    pathPrefix = '',
     mode,
+    googleAnalyticsID = false,
     algolia = {},
     hasGdprBanner = false,
     hasFooter = false,
@@ -25,9 +25,10 @@ module.exports = (_env, argv) => {
   return {
     entry: path.resolve(__dirname, '../../app.js'),
     output: {
-      publicPath: isProd ? `${pathPrefix}/` : '/',
+      publicPath: '/',
       pathinfo: false, // https://webpack.js.org/guides/build-performance/#output-without-path-info,
-      hashDigestLength: 8
+      hashDigestLength: 8,
+      clean: true, // Clean the output directory before emit.
     },
     amd: false, // We don't use any AMD modules, helps performance
     mode: isProd ? 'production' : 'development',
@@ -39,9 +40,12 @@ module.exports = (_env, argv) => {
           include: [
             path.resolve(process.cwd(), 'src'),
             path.resolve(process.cwd(), 'patternfly-docs'),
+            path.resolve(process.cwd(), 'examples'),
             path.resolve(__dirname, '../..'), // Temporarily compile theme using webpack for development
             /react-[\w-]+\/src\/.*\/examples/,
             /react-[\w-]+\\src\\.*\\examples/, // fix for Windows
+            /react-[\w-]+\/patternfly-docs\/.*\/examples/, //fixes for extensions
+            /react-[\w-]+\\patternfly-docs\\.*\\examples/,
           ].concat(includePaths.map(path => new RegExp(path))),
           exclude: [
             path.resolve(__dirname, '../../node_modules'), // Temporarily compile theme using webpack for development
@@ -82,35 +86,28 @@ module.exports = (_env, argv) => {
         },
         {
           test: /\.(gif|svg)$/,
-          use: {
-            loader: 'file-loader',
-            options: {
-              name: '[name].[contenthash].[ext]',
-              outputPath: 'images/'
-            },
+          type: 'asset/resource',
+          dependency: { not: ['url'] },
+          generator: {
+            filename: 'images/[hash][ext][query]'
           }
         },
         {
           test: /\.(pdf)$/,
-          use: {
-            loader: 'file-loader',
-            options: {
-              name: '[name].[contenthash].[ext]',
-            }
+          type: 'asset/resource',
+          dependency: { not: ['url'] },
+          generator: {
+            filename: '[hash][ext][query]'
           }
         },
         {
           test: /.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
-          use: [
-            {
-              loader: 'file-loader',
-              options: {
-                name: '[name].[ext]',
-                outputPath: 'fonts/'
-              }
-            }
-          ]
-        }
+          type: 'asset/resource',
+          dependency: { not: ['url'] },
+          generator: {
+            filename: 'fonts/[name][ext][query]'
+          }
+        },
       ]
     },
     resolve: {
@@ -118,21 +115,28 @@ module.exports = (_env, argv) => {
       alias: {
         'client-styles': path.resolve(process.cwd(), 'patternfly-docs/patternfly-docs.css.js'),
         './routes-client': path.resolve(process.cwd(), 'patternfly-docs/patternfly-docs.routes.js'),
-        './routes-generated': path.resolve(process.cwd(), 'patternfly-docs/generated/index.js')
+        './routes-generated': path.resolve(process.cwd(), 'patternfly-docs/generated/index.js'),
+        process: "process/browser"
       },
       modules: [
         'node_modules',
         ...module.paths,
-      ]
+      ],
+      fallback: {
+        "path": require.resolve("path-browserify")
+      },
     },
     // Use this module's node_modules first (for use in Core/React workspaces)
     resolveLoader: {
       modules: module.paths,
     },
     plugins: [
+      new webpack.ProvidePlugin({
+        process: 'process/browser',
+      }),
       new webpack.DefinePlugin({
         'process.env.NODE_ENV': JSON.stringify(mode),
-        'process.env.pathPrefix': JSON.stringify(isProd ? pathPrefix : ''),
+        'process.env.googleAnalyticsID': JSON.stringify(isProd ? googleAnalyticsID : ''),
         'process.env.algolia': JSON.stringify(algolia),
         'process.env.hasGdprBanner': JSON.stringify(hasGdprBanner),
         'process.env.hasFooter': JSON.stringify(hasFooter),
@@ -143,20 +147,16 @@ module.exports = (_env, argv) => {
         'process.env.sideNavItems': JSON.stringify(sideNavItems),
         'process.env.topNavItems': JSON.stringify(topNavItems),
         'process.env.prnum': JSON.stringify(process.env.CIRCLE_PR_NUMBER || process.env.PR_NUMBER || ''),
-        'process.env.prurl': JSON.stringify(process.env.CIRCLE_PULL_REQUEST || ''),
+        'process.env.prurl': JSON.stringify(process.env.CIRCLE_PULL_REQUEST || '')
       }),
       new CopyWebpackPlugin({
         patterns: [
           { from: path.join(__dirname, '../../assets'), to: 'assets' }
         ]
       }),
-      new MonacoWebpackPlugin(),
-      ...(isProd
-        ? [
-          new CleanWebpackPlugin()
-        ]
-        : []
-      )
+      new MonacoWebpackPlugin({
+        globalAPI: true,
+      })
     ],
     stats: 'minimal'
   };

package/scripts/webpack/webpack.client.config.js

@@ -5,6 +5,7 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
+const webpack = require('webpack');
 const baseConfig = require('./webpack.base.config');
 const { getHtmlWebpackPlugins } = require('./getHtmlWebpackPlugins');
 
@@ -23,18 +24,20 @@ const reactJSRegex = /react-([^\\/]*)[\\/]dist[\\/].*\.js$/
 
 const clientConfig = async (env, argv) => {
   const isProd = argv.mode === 'production';
-
   return {
     output: {
       path: argv.output ? path.resolve(argv.output) : path.resolve('public'),
-      filename: '[name].[hash].bundle.js'
+      filename: '[name].[contenthash].bundle.js'
     },
     devServer: {
       hot: true,
       historyApiFallback: true,
+      compress: true,
       port: argv.port,
-      clientLogLevel: 'info',
-      stats: 'minimal'
+      client: {
+        logging: 'info',
+      },
+      static: {}
     },
     optimization: {
       splitChunks: {
@@ -71,10 +74,7 @@ const clientConfig = async (env, argv) => {
       },
       minimize: isProd ? true : false,
       minimizer: [
-        new TerserPlugin({
-          cache: path.join(process.cwd(), '.cache/terser'),
-          ...(process.env.CI ? { parallel: 2 } : {})
-        }),
+        new TerserPlugin(),
       ],
       runtimeChunk: 'single',
     },
@@ -113,6 +113,9 @@ const clientConfig = async (env, argv) => {
       ]
     },
     plugins: [
+      new webpack.DefinePlugin({
+        'process.env.PRERENDER': false,
+      }),
       new MiniCssExtractPlugin(!isProd ? {} : {
         filename: '[name].[contenthash].css',
         chunkFilename: '[name].[contenthash].css',

package/scripts/webpack/webpack.server.config.js

@@ -2,8 +2,11 @@ const path = require('path');
 const webpack = require('webpack');
 const { merge } = require('webpack-merge');
 const baseConfig = require('./webpack.base.config');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const reactCSSRegex = /(react-[\w-]+\/dist|react-styles\/css)\/.*\.css$/;
 
-const serverConfig = () => {
+const serverConfig = async (env, argv) => {
+  const isProd = argv.mode === 'production';
   return {
     output: {
       path: path.resolve('.cache/ssr-build'), // Don't bloat `public` dir
@@ -31,7 +34,7 @@ const serverConfig = () => {
         {
           test: /(novnc-core|@novnc\/novnc)\/.*\.js/,
           use: 'null-loader'
-        }
+        },
       ]
     },
     resolve: {
@@ -41,7 +44,7 @@ const serverConfig = () => {
         // The maintainer will not allow his bundle to be required from a node context
         // https://github.com/xtermjs/xterm.js/pull/3134
         'xterm':  '@patternfly/documentation-framework/helpers/xterm',
-        'xterm-addon-fit':  '@patternfly/documentation-framework/helpers/xterm-addon-fit'
+        'xterm-addon-fit':  '@patternfly/documentation-framework/helpers/xterm-addon-fit',
       },
     },
     // Load in prerender.js instead
@@ -49,7 +52,7 @@ const serverConfig = () => {
   };
 }
 
-module.exports = (env = {}, argv) => merge(
+module.exports = async (env = {}, argv) => merge(
   baseConfig(env, argv),
-  serverConfig(env, argv)
+  await serverConfig(env, argv)
 );

package/scripts/writeScreenshots.js

@@ -11,7 +11,7 @@ sharp.cache(false);
 async function writeScreenshot({ page, data: { url, urlPrefix } }) {
   await page.goto(url);
   await page.addStyleTag({content: '*,*::before,*::after{animation-delay:-1ms !important;animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:0s !important;transition-delay:0s !important;}'}); // disable animations/transitions so they don't interfere with screenshot tool
-  await page.waitForSelector('.pf-u-h-100');
+  await page.waitForSelector('.pf-v5-u-h-100');
   const outfile = path.join(
     screenshotBase,
     url.replace(`${urlPrefix}/`, '') + '.png'
@@ -27,7 +27,7 @@ async function writeScreenshot({ page, data: { url, urlPrefix } }) {
   await sharp(buffer).toFile(outfile);
 }
 
-async function writeScreenshots({ urlPrefix }) {
+async function writeScreenshots({ urlPrefix, allRoutes }) {
   const cluster = await Cluster.launch({
     concurrency: Cluster.CONCURRENCY_CONTEXT,
     maxConcurrency: os.cpus().length,
@@ -43,7 +43,7 @@ async function writeScreenshots({ urlPrefix }) {
 
   // Add some pages to queue
   Object.entries(fullscreenRoutes)
-    .filter(([, { isFullscreenOnly }]) => isFullscreenOnly)
+    .filter(([, { isFullscreenOnly }]) => allRoutes || isFullscreenOnly)
     .forEach(([url,]) => cluster.queue({
       url: `${urlPrefix}${url}`,
       urlPrefix

package/templates/html.ejs

@@ -5,20 +5,18 @@
     <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
     <meta name="description" content="PatternFly is Red Hat's open source design system. It consists of components, documentation, and code for building enterprise applications at scale.">
     <title><%= title %></title>
-    <link rel="shortcut icon" href="/assets/favicon.ico">
-    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="48x48" href="/assets/favicon-48x48.png">
+    <link rel="shortcut icon" href="/assets/Favicon-Light.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/assets/Favicon-Light-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/assets/Favicon-Light-32x32.png">
+    <link rel="icon" type="image/png" sizes="48x48" href="/assets/Favicon-Light-48x48.png">
     <link rel="manifest" href="/assets/manifest.json">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="theme-color" content="#151515">
     <meta name="application-name" content="PatternFly docs">
     <%= htmlWebpackPlugin.tags.headTags %>
   </head>
-  <body class="pf-m-redhat-updated-font pf-m-redhatmono-font">
-    <div id="root">
-      <%= prerendering %>
-    </div>
+  <body>
+    <div id="root"><%= prerendering %></div>
     <%= htmlWebpackPlugin.tags.bodyTags %>
     <% if (algolia) { %>
     <script