Various fixes, inc. FrameworkSupportTable, broken images, and versioned generated redirects

gatsby-node.js

@@ -7,7 +7,7 @@ const { createFilePath } = require(`gatsby-source-filesystem`);
 const { toc: docsToc } = require('./src/content/docs/toc');
 const addStateToToc = require('./src/util/add-state-to-toc');
 const buildPathWithVersion = require('./src/util/build-path-with-version');
-const getReleaseBranchUrl = require('./src/util/get-release-branch-url');
+const { generateRedirects } = require('./src/util/generateRedirects/generateRedirects');
 const { versionString, latestVersionString, isLatest } = require('./src/util/version-data');
 const sourceDXData = require('./src/util/source-dx-data');
 const { versions, versionsWithToc } = require('./src/util/versions');
@@ -17,13 +17,10 @@ const siteMetadata = require('./site-metadata');
 
 const {
   urls: { installDocsPageSlug },
-  allRenderers,
 } = siteMetadata;
 
 const docsPagesSlugs = [];
 
-const nextVersionString = versions.preRelease[0]?.string || latestVersionString;
-
 exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
     resolve: {
@@ -242,46 +239,10 @@ function updateRedirectsFile() {
   const rawRedirects = fs.readFileSync(path.join(__dirname, './src/util/redirects-raw.txt'), {
     encoding: 'utf-8',
   });
-  const redirectsWithVersion = rawRedirects
-    .split(/\n/)
-    .map((line) => line.split(/\s+/))
-    .filter(([from, to, code]) => from && to && code)
-    .map(([from, to, code]) => `${buildPathWithVersion(from)} ${buildPathWithVersion(to)} ${code}`)
-    .join('\n');
-
-  const versionRedirects = [...versions.stable, ...versions.preRelease, { string: 'next' }]
-    .reduce((acc, { string }) => {
-      const isLatestLocal = string === latestVersionString;
-      const versionStringLocal = string === 'next' ? nextVersionString : string;
-      const versionSlug = isLatestLocal ? '' : `/${string}`;
-      const versionBranch = isLatestLocal ? '' : getReleaseBranchUrl(versionStringLocal);
-      const redirectCode = isLatestLocal ? 301 : 200;
-
-      acc.push(
-        // prettier-ignore
-        `/docs${versionSlug} ${versionBranch}${buildPathWithVersion(installDocsPageSlug, versionStringLocal)} ${redirectCode}`
-      );
-
-      allRenderers.forEach((r) => {
-        acc.push(
-          // prettier-ignore
-          `/docs${versionSlug}/${r}/* ${versionBranch}/docs${versionSlug}/:splat ${redirectCode}`
-        );
-      });
-
-      if (!isLatestLocal) {
-        acc.push(`/docs/${string}/* ${versionBranch}/docs/${versionStringLocal}/:splat 200`);
-      } else {
-        acc.push(`/docs/${versionStringLocal}/* /docs/:splat 301`);
-      }
 
-      return acc;
-    }, [])
-    .concat([`/releases /releases/${latestVersionString} 301`])
-    .join('\n');
+  const newRedirects = generateRedirects({ rawRedirects });
 
-  // prettier-ignore
-  fs.writeFileSync('./public/_redirects', `${originalContents}\n\n${redirectsWithVersion}\n\n${versionRedirects}`);
+  fs.writeFileSync('./public/_redirects', `${originalContents}\n\n${newRedirects}`);
 }
 
 const otherSitemaps = [

site-metadata.js

@@ -100,10 +100,10 @@ const siteMetadata = {
 
     // Official addons
     officialAddons: {
-      docs: '/docs/react/addons/introduction/',
-      install: '/docs/react/addons/install-addons/',
-      create: '/docs/react/addons/writing-addons/',
-      publish: '/docs/react/addons/integration-catalog/',
+      docs: '/docs/addons/',
+      install: '/docs/addons/install-addons/',
+      create: '/docs/addons/writing-addons/',
+      publish: '/docs/addons/integration-catalog/',
       controls: `${essentialsBase}/controls`,
       actions: `${essentialsBase}/actions`,
       viewport: `${essentialsBase}/viewport`,

src/components/screens/DocsScreen/DocsScreen.tsx

@@ -384,6 +384,8 @@ function DocsScreen({ data, pageContext, location }) {
                   CodeSnippets: CodeSnippetsWithState,
                   FeatureSnippets: FeatureSnippetsWithState,
                   RendererSupportTable: RendererSupportTableWithState,
+                  // Maintained for older docs version content
+                  FrameworkSupportTable: RendererSupportTableWithState,
                   If: IfWithState,
                   // Maintained for older docs version content
                   IfRenderer: IfWithState,

src/components/screens/IndexScreen/Develop.js

@@ -287,12 +287,7 @@ export function Develop({ docs, startOpen, ...props }) {
             heading="Supercharge your workflow with addons"
             description="Addons extend and customize your UI development workflow. There are hundreds of addons that help you build UI faster, document component libraries, and integrate with other tools."
             links={
-              <Link
-                containsIcon
-                withArrow
-                href={`${docs}react/addons/introduction`}
-                LinkWrapper={GatsbyLinkWrapper}
-              >
+              <Link containsIcon withArrow href={`${docs}addons`} LinkWrapper={GatsbyLinkWrapper}>
                 Learn about addons
               </Link>
             }

src/components/screens/IndexScreen/Document.js

@@ -45,7 +45,7 @@ const features = [
     description: 'Write Markdown and build custom docs.',
     link: {
       label: 'Learn about docs addon',
-      href: '/docs/react/writing-docs/introduction',
+      href: '/docs/writing-docs',
       LinkWrapper: GatsbyLinkWrapper,
     },
     media: 'videos/document/homepage-component-document-lg.mp4',

src/components/screens/IndexScreen/Test.js

@@ -33,7 +33,7 @@ const features = [
     description: 'Stories are tests you can debug in dev and QA.',
     link: {
       label: 'Learn about UI tests',
-      href: '/docs/react/writing-tests/introduction',
+      href: '/docs/writing-tests',
       LinkWrapper: GatsbyLinkWrapper,
     },
     media: 'videos/test/homepage-spot-testing-lg.mp4',

src/components/screens/IntegrationsCatalog/AddonsDetailScreen/AddonsDetailScreen.js

@@ -231,7 +231,9 @@ export const AddonsDetailScreen = ({ path, location, pageContext }) => {
                   limit={6}
                   tags={orderedCompatibility.map((renderer) => (
                     <Renderer key={renderer.name}>
-                      {renderer.icon && <RendererIcon src={renderer.icon} />}
+                      {renderer.icon && (
+                        <RendererIcon src={renderer.icon.replace('/frameworks', '/renderers')} />
+                      )}
                       {renderer.displayName}
                     </Renderer>
                   ))}

src/content/recipes/@emotion/styled.md

@@ -103,4 +103,4 @@ When you provide more than one theme, a toolbar menu will appear in the Storyboo
 
 Now you're ready to use Emotion with Storybook. 🎉
 
-If you use Emotion at work, we'd love your help making this setup even better. Join the maintainers in [Discord](https://discord.gg/storybook) to get involved, or jump into [addon docs](/docs/react/addons/introduction).
+If you use Emotion at work, we'd love your help making this setup even better. Join the maintainers in [Discord](https://discord.gg/storybook) to get involved, or jump into [addon docs](/docs/addons).

src/content/recipes/bootstrap.md

@@ -80,4 +80,4 @@ export const decorators = [
 
 Now you're ready to use Bootstrap with Storybook. 🎉 Check out the [example repo](https://github.com/Integrayshaun/bootstrap-storybook-example) for a quick start.
 
-If you use Bootstrap at work, we'd love your feedback on the Bootstrap + Storybook experience. Join the maintainers in [Discord](https://discord.gg/storybook) to get involved, or jump into [addon docs](/docs/react/addons/introduction).
+If you use Bootstrap at work, we'd love your feedback on the Bootstrap + Storybook experience. Join the maintainers in [Discord](https://discord.gg/storybook) to get involved, or jump into [addon docs](/docs/addons).

src/content/recipes/styled-components.md

@@ -87,4 +87,4 @@ When you provide more than one theme, a toolbar menu will appear in the Storyboo
 
 Now you're ready to use styled-components with Storybook. 🎉
 
-If you use styled-components at work, we'd love your help making this setup even easier. Join the maintainers in [Discord](https://discord.gg/storybook) to get involved, or jump into [addon docs](/docs/react/addons/introduction).
+If you use styled-components at work, we'd love your help making this setup even easier. Join the maintainers in [Discord](https://discord.gg/storybook) to get involved, or jump into [addon docs](/docs/addons).

src/content/recipes/tailwindcss.md

@@ -154,4 +154,4 @@ This code will create a new toolbar menu to select your desired theme for your s
 
 Now you're ready to use Tailwind with Storybook. 🎉
 
-If you use Tailwind at work, we'd love your help making this setup even easier. Join the maintainers in [Discord](https://discord.gg/storybook) to get involved, or jump into [addon docs](/docs/react/addons/introduction).
+If you use Tailwind at work, we'd love your help making this setup even easier. Join the maintainers in [Discord](https://discord.gg/storybook) to get involved, or jump into [addon docs](/docs/addons).

src/content/recipes/vuetify.md

@@ -177,4 +177,4 @@ export const withVuetifyTheme = (storyFn, context) => {
 
 Now you're ready to use Vuetify with Storybook. 🎉 Check out the [example repo](https://github.com/Integrayshaun/vue3-vuetify-storybook-recipe-example) for a quick start.
 
-If you use Vuetify at work, we'd love your help making an addon that automatically applies the configuration above. Join the maintainers in [Discord](https://discord.gg/storybook) to get involved, or jump into [addon docs](/docs/vue/addons/introduction).
+If you use Vuetify at work, we'd love your help making an addon that automatically applies the configuration above. Join the maintainers in [Discord](https://discord.gg/storybook) to get involved, or jump into [addon docs](/docs/addons).

src/util/generateRedirects/generateRedirects.js

@@ -0,0 +1,117 @@
+const siteMetadata = require('../../../site-metadata');
+const buildPathWithVersion = require('../build-path-with-version');
+const getReleaseBranchUrl = require('../get-release-branch-url');
+const { versions: versionsData } = require('../versions');
+const versionData = require('../version-data');
+
+const {
+  urls: { installDocsPageSlug },
+  allRenderers,
+} = siteMetadata;
+
+function parseRawRedirects(rawRedirects) {
+  const lines = rawRedirects.split('\n');
+  const redirects = {};
+
+  let currentVersion = null;
+  let currentLines = [];
+
+  lines.forEach((line) => {
+    if (line.match(/^# \d+\.\d+$/)) {
+      // Found a version line
+      if (currentVersion !== null) {
+        // Save the previous version's lines as an array
+        redirects[currentVersion] = currentLines;
+      }
+
+      // Start a new version
+      currentVersion = line.replace('# ', '').trim();
+      currentLines = [];
+    } else if (line.trim() !== '') {
+      // Add non-empty lines to the current version's lines array
+      currentLines.push(line.split(/\s+/));
+    }
+  });
+
+  // Save the lines for the last version as an array
+  if (currentVersion !== null) {
+    redirects[currentVersion] = currentLines;
+  }
+
+  return redirects;
+}
+
+function fromWithRenderer(from, renderer) {
+  const parts = from.split('/');
+  parts.splice(2, 0, renderer);
+  return parts.join('/');
+}
+
+function generateRedirects({
+  latestVersionString = versionData.latestVersionString,
+  nextVersionString = versionsData.preRelease[0]?.string || latestVersionString,
+  rawRedirects,
+  renderers = allRenderers,
+  versions = [...versionsData.stable, ...versionsData.preRelease, { string: 'next' }],
+}) {
+  const parsedRedirects = parseRawRedirects(rawRedirects);
+
+  return versions
+    .reduce((acc, { string, version }) => {
+      const isLatestLocal = string === latestVersionString;
+      const versionStringNormalized = string === 'next' ? nextVersionString : string;
+      const versionStringOverride = isLatestLocal ? '' : string;
+      const versionSlug = isLatestLocal ? '' : `/${string}`;
+      const versionBranch = isLatestLocal ? '' : getReleaseBranchUrl(versionStringNormalized);
+      const redirectCode = isLatestLocal ? 301 : 200;
+
+      Object.entries(parsedRedirects).forEach(([redirectVersion, lines]) => {
+        // Only add redirects that apply to this version
+        if (Number(redirectVersion) <= version) {
+          lines.forEach(([from, to, code]) => {
+            // 7.6 removed the renderer from docs URLs
+            if (version < 7.6) {
+              renderers.forEach((r) => {
+                acc.push(
+                  // prettier-ignore
+                  `${buildPathWithVersion(fromWithRenderer(from, r), versionStringOverride)} ${versionBranch}${buildPathWithVersion(to, versionStringOverride)} ${code}`
+                );
+              });
+            } else if (Number(redirectVersion) >= 7.6) {
+              acc.push(
+                // prettier-ignore
+                `${buildPathWithVersion(from, versionStringOverride)} ${versionBranch}${buildPathWithVersion(to, versionStringOverride)} ${code}`
+              );
+            }
+          });
+        }
+      });
+
+      acc.push(
+        // prettier-ignore
+        `/docs${versionSlug} ${versionBranch}${buildPathWithVersion(installDocsPageSlug, versionStringOverride)} ${redirectCode}`
+      );
+
+      renderers.forEach((r) => {
+        acc.push(
+          // prettier-ignore
+          `/docs${versionSlug}/${r}/* ${versionBranch}/docs${versionSlug}/:splat ${redirectCode}`
+        );
+      });
+
+      if (!isLatestLocal) {
+        acc.push(`/docs/${string}/* ${versionBranch}/docs/${versionStringNormalized}/:splat 200`);
+      } else {
+        acc.push(`/docs/${string}/* /docs/:splat 301`);
+      }
+
+      return acc;
+    }, [])
+    .concat([`/releases /releases/${latestVersionString} 301`])
+    .join('\n');
+}
+
+module.exports = {
+  parseRawRedirects,
+  generateRedirects,
+};