Move code highlighting to build time (#10614)

* Bump react-scripts to v14
* Pull in latest dependencies
* Replace text-and-content on home page
* WIP replace text-and-content on use case pages
* Finish removing text-and-content from use-case pages
* Remove text-and-content completely
* Add logo-grid dep, fix style import
* Remove unneeded indirect deps

website/package.json

@@ -5,20 +5,22 @@
   "author": "HashiCorp",
   "dependencies": {
     "@hashicorp/mktg-global-styles": "2.1.0",
-    "@hashicorp/nextjs-scripts": "13.0.0-canary.1",
+    "@hashicorp/nextjs-scripts": "14.0.1",
     "@hashicorp/react-button": "4.0.0",
     "@hashicorp/react-case-study-slider": "3.0.3",
+    "@hashicorp/react-code-block": "3.0.3",
     "@hashicorp/react-docs-page": "10.3.2",
     "@hashicorp/react-hashi-stack-menu": "1.0.11",
     "@hashicorp/react-head": "1.1.6",
     "@hashicorp/react-hero": "4.1.0",
     "@hashicorp/react-image": "3.0.3",
     "@hashicorp/react-inline-svg": "5.0.0",
+    "@hashicorp/react-logo-grid": "3.0.1",
     "@hashicorp/react-markdown-page": "0.1.0",
     "@hashicorp/react-product-downloader": "4.0.2",
     "@hashicorp/react-section-header": "3.0.1",
     "@hashicorp/react-subnav": "7.1.0",
-    "@hashicorp/react-text-and-content": "4.1.8",
+    "@hashicorp/react-text-splits": "1.0.5",
     "@hashicorp/react-use-cases": "2.0.1",
     "@hashicorp/react-vertical-text-block-list": "3.0.1",
     "next": "9.5.5",

website/pages/home/content.json

@@ -0,0 +1,56 @@
+{
+  "principles": [
+    {
+      "textSplit": {
+        "heading": "API-driven",
+        "content": "Use policy to codify, protect, and automate access to secrets."
+      },
+      "codeBlock": {
+        "options": { "showWindowBar": "true" },
+        "language": "shell-session",
+        "code": "$ curl \n    --header \"X-Vault-Token: ...\" \n    --request POST \n    --data @payload.json \n    https://127.0.0.1:8200/v1/secret/config"
+      }
+    },
+    {
+      "textSplit": {
+        "heading": "Identity Plugins",
+        "content": "Seamlessly integrate any trusted identity provider.",
+        "textSide": "right"
+      },
+      "logoGrid": [
+        "aws",
+        "microsoft-azure",
+        "google",
+        {
+          "url": "https://www.datocms-assets.com/2885/1556657783-oktalogo.svg"
+        },
+        { "url": "https://www.datocms-assets.com/2885/1539817287-cf.svg" },
+        "alibaba-cloud",
+        { "url": "https://www.datocms-assets.com/2885/1506540149-black.svg" },
+        "kubernetes",
+        "github"
+      ]
+    },
+    {
+      "textSplit": {
+        "heading": "Extend and integrate",
+        "content": "Securely manage secrets and access through a centralized workflow."
+      },
+      "logoGrid": [
+        "mysql",
+        "cassandra",
+        "oracle",
+        "aws",
+        "mongodb",
+        {
+          "url": "https://www.datocms-assets.com/2885/1508434209-consul_primarylogo_fullcolor.svg"
+        },
+        {
+          "url": "https://www.datocms-assets.com/2885/1539817686-microsoft-sql-server.svg"
+        },
+        "postgresql",
+        "microsoft-azure"
+      ]
+    }
+  ]
+}

website/pages/home/index.jsx

@@ -1,12 +1,19 @@
 import Hero from '@hashicorp/react-hero'
 import SectionHeader from '@hashicorp/react-section-header'
 import UseCases from '@hashicorp/react-use-cases'
-import TextAndContent from '@hashicorp/react-text-and-content'
+import TextSplits from '@hashicorp/react-text-splits'
 import Button from '@hashicorp/react-button'
-
 import BeforeAfterDiagram from '../../components/before-after-diagram'
+//  Imports below are used in getStaticProps only
+import RAW_CONTENT from './content.json'
+import highlightData from '@hashicorp/nextjs-scripts/prism/highlight-data'
 
-export default function Homepage() {
+export async function getStaticProps() {
+  const content = await highlightData(RAW_CONTENT)
+  return { props: { content } }
+}
+
+export default function Homepage({ content }) {
   return (
     <div id="page-home">
       <div className="g-section-block page-wrap">
@@ -18,20 +25,20 @@ export default function Homepage() {
               size: 55617,
               url:
                 'https://www.datocms-assets.com/2885/1539894412-vault-bg.jpg',
-              width: 3196
+              width: 3196,
             },
             backgroundTheme: 'light',
             buttons: [
               {
                 external: false,
                 title: 'Download',
-                url: 'https://www.vaultproject.io/downloads'
+                url: 'https://www.vaultproject.io/downloads',
               },
               {
                 external: false,
                 title: 'Get Started with Vault',
-                url: 'https://www.vaultproject.io/intro/getting-started'
+                url: 'https://www.vaultproject.io/intro/getting-started',
-              }
+              },
             ],
             centered: false,
             description:
@@ -46,9 +53,9 @@ export default function Homepage() {
                   {
                     srcType: 'mp4',
                     url:
-                      'https://www.datocms-assets.com/2885/1543956852-vault-v1-0-ui-opt.mp4'
+                      'https://www.datocms-assets.com/2885/1543956852-vault-v1-0-ui-opt.mp4',
-                  }
+                  },
-                ]
+                ],
               },
               {
                 name: 'CLI',
@@ -57,11 +64,11 @@ export default function Homepage() {
                   {
                     srcType: 'mp4',
                     url:
-                      'https://www.datocms-assets.com/2885/1543956847-vault-v1-0-cli-opt.mp4'
+                      'https://www.datocms-assets.com/2885/1543956847-vault-v1-0-cli-opt.mp4',
-                  }
+                  },
-                ]
+                ],
-              }
+              },
-            ]
+            ],
           }}
         />
 
@@ -81,7 +88,7 @@ export default function Homepage() {
             beforeImage={{
               url:
                 'https://www.datocms-assets.com/2885/1579635889-static-infrastructure.svg',
-              format: 'svg'
+              format: 'svg',
             }}
             beforeHeadline="Static Infrastructure"
             beforeContent={`Datacenters with inherently high-trust networks with clear network perimeters.
@@ -94,7 +101,7 @@ export default function Homepage() {
             afterImage={{
               url:
                 'https://www.datocms-assets.com/2885/1579635892-dynamic-infrastructure.svg',
-              format: 'svg'
+              format: 'svg',
             }}
             afterHeadline="Dynamic Infrastructure"
             afterContent={`Multiple clouds and private datacenters without a clear network perimeter.
@@ -123,13 +130,13 @@ export default function Homepage() {
                     alt: null,
                     format: 'png',
                     url:
-                      'https://www.datocms-assets.com/2885/1575422126-secrets.png'
+                      'https://www.datocms-assets.com/2885/1575422126-secrets.png',
                   },
                   link: {
                     external: false,
                     title: 'Learn more',
-                    url: '/use-cases/secrets-management'
+                    url: '/use-cases/secrets-management',
-                  }
+                  },
                 },
                 {
                   title: 'Data Encryption',
@@ -139,13 +146,13 @@ export default function Homepage() {
                     alt: null,
                     format: 'png',
                     url:
-                      'https://www.datocms-assets.com/2885/1575422166-encryption.png'
+                      'https://www.datocms-assets.com/2885/1575422166-encryption.png',
                   },
                   link: {
                     external: false,
                     title: 'Learn more',
-                    url: '/use-cases/data-encryption'
+                    url: '/use-cases/data-encryption',
-                  }
+                  },
                 },
                 {
                   title: 'Identity-based Access',
@@ -155,98 +162,25 @@ export default function Homepage() {
                     alt: null,
                     format: 'png',
                     url:
-                      'https://www.datocms-assets.com/2885/1575422201-identity.png'
+                      'https://www.datocms-assets.com/2885/1575422201-identity.png',
                   },
                   link: {
                     external: false,
                     title: 'Learn more',
-                    url: '/use-cases/identity-based-access'
+                    url: '/use-cases/identity-based-access',
-                  }
+                  },
-                }
+                },
               ]}
             />
           </div>
         </section>
+
         {/* Principles / Text & Content Blocks */}
-
+        <section className="no-section-spacing">
-        <section className="g-container">
+          <div className="g-grid-container">
-          <SectionHeader headline="Vault Principles" />
+            <SectionHeader headline="Vault Principles" />
-
-          <TextAndContent
-            data={{
-              text: `### API-driven
-
-Use policy to codify, protect, and automate access to secrets`,
-              content: {
-                __typename: 'SbcCodeBlockRecord',
-                chrome: true,
-                code: `$ curl \n
-    --header "X-Vault-Token: ..." \n
-    --request POST \n
-    --data @payload.json \n
-    https://127.0.0.1:8200/v1/secret/config`
-              }
-            }}
-          />
-
-          <div className="g-text-and-content reverse">
-            <div className="text">
-              <div>
-                <h3>Identity Plugins</h3>
-                <p>Seamlessly integrate any trusted identity provider</p>
-              </div>
-            </div>
-            <div className="content logo-grid">
-              <ul className="g-logo-grid large">
-                {[
-                  'https://www.datocms-assets.com/2885/1510033601-aws_logo_rgb_fullcolor.svg',
-                  'https://www.datocms-assets.com/2885/1539799149-azure-stacked-color.svg',
-                  'https://www.datocms-assets.com/2885/1513617132-google-cloud.svg',
-                  'https://www.datocms-assets.com/2885/1556657783-oktalogo.svg',
-                  'https://www.datocms-assets.com/2885/1539817287-cf.svg',
-                  'https://www.datocms-assets.com/2885/1506527326-color.svg',
-                  'https://www.datocms-assets.com/2885/1506540149-black.svg',
-                  'https://www.datocms-assets.com/2885/1539876682-k8s.svg',
-                  'https://www.datocms-assets.com/2885/1506535057-black.svg'
-                ].map(logo => (
-                  <li key={logo}>
-                    <img src={logo} alt="company logo" />
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-
-          <div className="g-text-and-content">
-            <div className="text">
-              <div>
-                <h3>Extend and integrate</h3>
-                <p>
-                  Securely manage secrets and access through a centralized
-                  workflow
-                </p>
-              </div>
-            </div>
-            <div className="content logo-grid">
-              <ul className="g-logo-grid large">
-                {[
-                  'https://www.datocms-assets.com/2885/1506540090-color.svg',
-                  'https://www.datocms-assets.com/2885/1506540114-color.svg',
-                  'https://www.datocms-assets.com/2885/1506527176-color.svg',
-                  'https://www.datocms-assets.com/2885/1510033601-aws_logo_rgb_fullcolor.svg',
-                  'https://www.datocms-assets.com/2885/1506540175-color.svg',
-                  'https://www.datocms-assets.com/2885/1508434209-consul_primarylogo_fullcolor.svg',
-                  'https://www.datocms-assets.com/2885/1539817686-microsoft-sql-server.svg',
-                  'https://www.datocms-assets.com/2885/1539818112-postgresql.svg',
-                  'https://www.datocms-assets.com/2885/1539799149-azure-stacked-color.svg'
-                ].map(logo => (
-                  <li key={logo}>
-                    <img src={logo} alt="company logo" />
-                  </li>
-                ))}
-              </ul>
-            </div>
           </div>
+          <TextSplits textSplits={content.principles} />
         </section>
 
         <section className="g-container">

website/pages/index.jsx

@@ -1,2 +1,3 @@
-import Homepage from './home'
+import Homepage, { getStaticProps } from './home'
+export { getStaticProps }
 export default Homepage

website/pages/style.css

@@ -9,20 +9,20 @@
 
 @import '~@hashicorp/react-button/styles/index.css';
 @import '~@hashicorp/react-case-study-slider/style.css';
-@import '~@hashicorp/react-code-block/dist/style.css';
+@import '~@hashicorp/react-code-block/style.css';
-@import '~@hashicorp/react-consent-manager/dist/style.css';
+@import '~@hashicorp/react-consent-manager/style.css';
 @import '~@hashicorp/react-content/style.css';
 @import '~@hashicorp/react-docs-page/style.css';
 @import '~@hashicorp/react-docs-sidenav/style.css';
-@import '~@hashicorp/react-enterprise-alert/dist/style.css';
+@import '~@hashicorp/react-enterprise-alert/style.css';
 @import '~@hashicorp/react-hero/style.css';
-@import '~@hashicorp/react-logo-grid/dist/style.css';
+@import '~@hashicorp/react-logo-grid/style.css';
 @import '~@hashicorp/react-product-downloader/dist/style.css';
 @import '~@hashicorp/react-search/style.css';
 @import '~@hashicorp/react-section-header/style.css';
-@import '~@hashicorp/react-tabs/dist/style.css';
+@import '~@hashicorp/react-tabs/style.css';
-@import '~@hashicorp/react-text-and-content/dist/style.css';
+@import '~@hashicorp/react-text-split/style.css';
-@import '~@hashicorp/react-toggle/dist/style.css';
+@import '~@hashicorp/react-toggle/style.css';
 @import '~@hashicorp/react-use-cases/dist/style.css';
 @import '~@hashicorp/react-vertical-text-block-list/style.css';
 
@@ -70,7 +70,7 @@
     margin-top: 72px;
   }
 
-  & > * + *,
+  &:not(.no-section-spacing) > * + *,
   & > .g-container > * + * {
     margin-top: 96px;
   }

website/pages/use-cases/data-encryption/content.json

@@ -0,0 +1,23 @@
+{
+  "features": [
+    {
+      "textSplit": {
+        "heading": "API-driven Encryption",
+        "content": "Encrypt application data during transit and rest with AES 256-bit CBC data encryption and TLS in transit."
+      },
+      "image": {
+        "url": "https://www.datocms-assets.com/2885/1539314348-eaas.png"
+      }
+    },
+    {
+      "textSplit": {
+        "heading": "Encryption Key Rolling",
+        "content": "Update and roll new keys throughout distributed infrastructure while retaining the ability to decrypt encrypted data.",
+        "textSide": "right"
+      },
+      "image": {
+        "url": "https://www.datocms-assets.com/2885/1539314609-encryption-key-rolling.png"
+      }
+    }
+  ]
+}

website/pages/use-cases/data-encryption/index.jsx

@@ -1,10 +1,18 @@
 import SectionHeader from '@hashicorp/react-section-header'
 import Button from '@hashicorp/react-button'
-import TextAndContent from '@hashicorp/react-text-and-content'
+import TextSplits from '@hashicorp/react-text-splits'
 import BeforeAfterDiagram from 'components/before-after-diagram'
 import UseCaseCtaSection from 'components/use-case-cta-section'
+//  Imports below are used in getStaticProps
+import RAW_CONTENT from './content.json'
+import highlightData from '@hashicorp/nextjs-scripts/prism/highlight-data'
 
-export default function DataEncryptionUseCase() {
+export async function getStaticProps() {
+  const content = await highlightData(RAW_CONTENT)
+  return { props: { content } }
+}
+
+export default function DataEncryptionUseCase({ content }) {
   return (
     <div id="use-cases" className="g-section-block page-wrap">
       {/* Header / Buttons */}
@@ -43,41 +51,12 @@ export default function DataEncryptionUseCase() {
         </div>
       </section>
 
-      {/* Features / Text and content */}
+      {/* Features */}
-      <section className="g-container">
+      <section className="no-section-spacing">
-        <SectionHeader headline=" Encryption Features" />
+        <div className="g-grid-container">
-
+          <SectionHeader headline=" Encryption Features" />
-        <TextAndContent
+        </div>
-          data={{
+        <TextSplits textSplits={content.features} />
-            text: `### API-driven Encryption
-
-Encrypt application data during transit and rest with AES 256-bit CBC data encryption and TLS in transit.`,
-            content: {
-              __typename: 'SbcImageRecord',
-              image: {
-                url: 'https://www.datocms-assets.com/2885/1539314348-eaas.png',
-                format: 'png',
-              },
-            },
-          }}
-        />
-
-        <TextAndContent
-          data={{
-            reverseDirection: true,
-            text: `### Encryption Key Rolling
-
-Update and roll new keys throughout distributed infrastructure while retaining the ability to decrypt encrypted data`,
-            content: {
-              __typename: 'SbcImageRecord',
-              image: {
-                url:
-                  'https://www.datocms-assets.com/2885/1539314609-encryption-key-rolling.png',
-                format: 'png',
-              },
-            },
-          }}
-        />
       </section>
 
       <UseCaseCtaSection />

website/pages/use-cases/identity-based-access/content.json

@@ -0,0 +1,78 @@
+{
+  "features": [
+    {
+      "textSplit": {
+        "heading": "Identity Plugins",
+        "content": "Improve the extensibility of Vault with pluggable identity backends."
+      },
+      "logoGrid": [
+        "aws",
+        "microsoft-azure",
+        "google",
+        "kubernetes",
+        {
+          "url": "https://www.datocms-assets.com/2885/1608658148-nomad.png"
+        },
+        {
+          "url": "https://www.datocms-assets.com/2885/1556657783-oktalogo.svg"
+        },
+        {
+          "url": "https://www.datocms-assets.com/2885/1608658344-pivotalcf.png"
+        },
+        { "url": "https://www.datocms-assets.com/2885/1506540149-black.svg" },
+        { "url": "https://www.datocms-assets.com/2885/1608143270-ellipsis.png" }
+      ]
+    },
+    {
+      "textSplit": {
+        "heading": "Entities",
+        "content": "Integrated identities across platforms and using this information for policy and access control decisions.",
+        "textSide": "right"
+      },
+      "image": {
+        "url": "https://www.datocms-assets.com/2885/1608659415-screenshot-entities.png"
+      }
+    },
+    {
+      "textSplit": {
+        "heading": "Control Groups",
+        "content": "Require multiple Identity Entities or members of Identity Groups to authorize an requested action."
+      },
+      "image": {
+        "url": "https://www.datocms-assets.com/2885/1608659409-screenshot-control-groups.png"
+      }
+    },
+    {
+      "textSplit": {
+        "heading": "ACL Templates and Policy Control",
+        "content": "Create and manage policies that authorize access control throughout your infrastructure and organization."
+      },
+      "codeBlock": {
+        "options": { "showWindowBar": true },
+        "language": "hcl",
+        "code": "# User template (user-tmpl.hcl)\n# Grant permissions on user specific path\npath \"user-kv/data/{{identity.entity.name}}/*\" {\n  capabilities = [ \"create\", \"update\", \"read\", \"delete\", \"list\" ]\n}\n\n# For Web UI usage\npath \"user-kv/metadata\" {\n  capabilities = [\"list\"]\n}\n\n# Group template (group-tmpl.hcl)\n# Grant permissions on the group specific path\n# The region is specified in the group metadata\npath \"group-kv/data/education/{{identity.groups.names.education.metadata.region}}/*\" {\n  capabilities = [ \"create\", \"update\", \"read\", \"delete\", \"list\" ]\n}\n\n# Group member can update the group information\npath \"identity/group/id/{{identity.groups.names.education.id}}\" {\n  capabilities = [ \"update\", \"read\" ]\n}\n\n# For Web UI usage\npath \"group-kv/metadata\" {\n  capabilities = [\"list\"]\n}\n\npath \"identity/group/id\" {\n  capabilities = [ \"list\" ]\n}\n"
+      }
+    },
+    {
+      "textSplit": {
+        "heading": "Identity Groups",
+        "content": "Group trusted identities into logical groups for group-based access control.",
+        "textSide": "right"
+      },
+      "image": {
+        "url": "https://www.datocms-assets.com/2885/1608659421-screenshot-identity-groups.png"
+      }
+    },
+    {
+      "textSplit": {
+        "heading": "Multi-factor Authentication",
+        "content": "Enforce MFA workflows when accessing a secret or a secret path."
+      },
+      "codeBlock": {
+        "options": { "showWindowBar": true },
+        "language": "shell-session",
+        "code": "$ curl --header \"X-Vault-Token: ...\" \\\n--header \"X-Vault-MFA:my_totp:695452\" \\\nhttp://127.0.0.1:8200/v1/secret/foo"
+      }
+    }
+  ]
+}

website/pages/use-cases/identity-based-access/index.jsx

@@ -1,10 +1,18 @@
 import SectionHeader from '@hashicorp/react-section-header'
 import Button from '@hashicorp/react-button'
-import TextAndContent from '@hashicorp/react-text-and-content'
+import TextSplits from '@hashicorp/react-text-splits'
 import BeforeAfterDiagram from 'components/before-after-diagram'
 import UseCaseCtaSection from 'components/use-case-cta-section'
+//  Imports below are used in getStaticProps
+import RAW_CONTENT from './content.json'
+import highlightData from '@hashicorp/nextjs-scripts/prism/highlight-data'
 
-export default function DataEncryptionUseCase() {
+export async function getStaticProps() {
+  const content = await highlightData(RAW_CONTENT)
+  return { props: { content } }
+}
+
+export default function DataEncryptionUseCase({ content }) {
   return (
     <div id="use-cases" className="g-section-block page-wrap">
       {/* Header / Buttons */}
@@ -41,149 +49,12 @@ export default function DataEncryptionUseCase() {
         </div>
       </section>
 
-      {/* Features / Text and content */}
+      {/* Features */}
-      <section className="g-container">
+      <section className="no-section-spacing">
-        <SectionHeader headline="Identity-based Access Features" />
+        <div className="g-grid-container">
-
+          <SectionHeader headline="Identity-based Access Features" />
-        <div className="g-text-and-content">
-          <div className="text">
-            <div>
-              <h3 id="secure-plugins">Identity Plugins</h3>
-              <p>
-                Improve the extensibility of Vault with pluggable identity
-                backends
-              </p>
-            </div>
-          </div>
-          <div className="content logo-grid">
-            <ul className="g-logo-grid large">
-              {[
-                'aws',
-                'azure',
-                'gcp',
-                'kubernetes',
-                'nomad',
-                'okta',
-                'pivotalcf',
-                'ssh',
-              ].map((logo) => (
-                <li key={logo}>
-                  <img
-                    src={require(`./img/logos/${logo}.png`)}
-                    alt="company logo"
-                  />
-                </li>
-              ))}
-            </ul>
-          </div>
         </div>
-
+        <TextSplits textSplits={content.features} />
-        <TextAndContent
-          data={{
-            reverseDirection: true,
-            text: `### Entities
-
-Integrated identities across platforms and using this information for policy and access control decisions.`,
-            content: {
-              __typename: 'SbcImageRecord',
-              image: {
-                url: require('./img/screenshot-entities.png'),
-                format: 'png',
-              },
-            },
-          }}
-        />
-
-        <TextAndContent
-          data={{
-            text: `### Control Groups
-
-Require multiple Identity Entities or members of Identity Groups to authorize an requested action.`,
-            content: {
-              __typename: 'SbcImageRecord',
-              image: {
-                url: require('./img/screenshot-control-groups.png'),
-                format: 'png',
-              },
-            },
-          }}
-        />
-
-        <TextAndContent
-          data={{
-            text: `### ACL Templates and Policy Control
-
-Create and manage policies that authorize access control throughout your infrastructure and organization`,
-            content: {
-              __typename: 'SbcCodeBlockRecord',
-              chrome: true,
-              code: `# User template (user-tmpl.hcl)
-# Grant permissions on user specific path
-
-path "user-kv/data/{{identity.entity.name}}/*" {
-  capabilities = [ "create", "update", "read", "delete", "list" ]
-}
-
-# For Web UI usage
-path "user-kv/metadata" {
-  capabilities = ["list"]
-}
-
-# Group template (group-tmpl.hcl)
-# Grant permissions on the group specific path
-# The region is specified in the group metadata
-path "group-kv/data/education/{{identity.groups.names.education.metadata.region}}/*" {
-  capabilities = [ "create", "update", "read", "delete", "list" ]
-}
-
-# Group member can update the group information
-path "identity/group/id/{{identity.groups.names.education.id}}" {
-  capabilities = [ "update", "read" ]
-}
-
-# For Web UI usage
-path "group-kv/metadata" {
-  capabilities = ["list"]
-}
-
-path "identity/group/id" {
-  capabilities = [ "list" ]
-}`,
-            },
-          }}
-        />
-
-        <TextAndContent
-          data={{
-            reverseDirection: true,
-            text: `### Identity Groups
-
-Group trusted identities into logical groups for group-based access control.`,
-            content: {
-              __typename: 'SbcImageRecord',
-              image: {
-                url: require('./img/screenshot-identity-groups.png'),
-                format: 'png',
-              },
-            },
-          }}
-        />
-
-        <TextAndContent
-          data={{
-            text: `### Multi-factor Authentication
-
-Enforce MFA workflows when accessing a secret or a secret path`,
-            content: {
-              __typename: 'SbcCodeBlockRecord',
-              chrome: true,
-              code: `$ curl \
---header "X-Vault-Token: ..." \\
---header "X-Vault-MFA:my_totp:695452" \\
-http://127.0.0.1:8200/v1/secret/foo`,
-            },
-          }}
-        />
       </section>
 
       <UseCaseCtaSection />

website/pages/use-cases/secrets-management/content.json

@@ -0,0 +1,69 @@
+{
+  "features": [
+    {
+      "textSplit": {
+        "heading": "Dynamic Secrets",
+        "content": "Dynamically create, revoke, and rotate secrets programmatically."
+      },
+      "image": {
+        "url": "https://www.datocms-assets.com/2885/1538684923-dynamic-secrets-screenshot.jpg"
+      }
+    },
+    {
+      "textSplit": {
+        "heading": "Secret Storage",
+        "content": "Encrypt data while at rest, in the storage backend of your choice.",
+        "textSide": "right"
+      },
+      "codeBlock": {
+        "options": { "showWindowBar": true },
+        "language": "shell-session",
+        "code": "$ cat vault.config\nstorage \"consul\" {\n    address = \"127.0.0.1:8500\"\n    path    = \"vault\"\n}\nlistener \"tcp\" {\n    address = \"127.0.0.1:8200\"\n}\ntelemetry {\n    statsite_address = \"127.0.0.1:8125\"\n    disable_hostname = true\n}\n"
+      }
+    },
+    {
+      "textSplit": {
+        "heading": "Identity Plugins",
+        "content": "Improve the extensibility of Vault with pluggable identity backends."
+      },
+      "logoGrid": [
+        "mysql",
+        "cassandra",
+        "oracle",
+        {
+          "url": "https://www.datocms-assets.com/2885/1508434209-consul_primarylogo_fullcolor.svg"
+        },
+        "aws",
+        "mongodb",
+        "postgresql",
+        {
+          "url": "https://www.datocms-assets.com/2885/1539817686-microsoft-sql-server.svg"
+        },
+        { "url": "https://www.datocms-assets.com/2885/1608143270-ellipsis.png" }
+      ]
+    },
+    {
+      "textSplit": {
+        "heading": "Detailed Audit Logs",
+        "content": "Detailed audit log of all client interaction (authentication, token creation, secret access & revocation).",
+        "textSide": "right"
+      },
+      "codeBlock": {
+        "options": { "showWindowBar": true },
+        "language": "shell-session",
+        "code": "$ cat audit.log | jq {\n    \"time\": \"2018-08-27T13:17:11.609621226Z\",\n    \"type\": \"response\",\n    \"auth\": {\n        \"client_token\": \"hmac-sha256:5c40f1e051ea75b83230a5bf16574090f697dfa22a78e437f12c1c9d226f45a5\",\n        \"accessor\": \"hmac-sha256:f254a2d442f172f0b761c9fd028f599ad91861ed16ac3a1e8d96771fd920e862\",\n        \"display_name\": \"token\",\n        \"metadata\": null,\n        \"entity_id\": \"\"\n    }\n}\n"
+      }
+    },
+    {
+      "textSplit": {
+        "heading": "Leasing & Revoking Secrets",
+        "content": "Manage authorization and create time-based tokens for automatic revocation or manual revocation."
+      },
+      "codeBlock": {
+        "options": { "showWindowBar": true },
+        "language": "shell-session",
+        "code": "$ vault read database/creds/readonly\nKey             Value\n---             -----\nlease_id        database/creds/readonly/3e8174da-6ca0-143b-aa8c-4c238aa02809\nlease_duration  1h0m0s\nlease_renewable true\npassword        A1a-w2xv2zsq4r5ru940\nusername        v-token-readonly-48rt0t36sxp4wy81x8x1-1515627434\n[...]\n$ vault renew database/creds/readonly/3e8174da-6ca0-143b-aa8c-4c238aa02809\nKey             Value\n---             -----\nlease_id        database/creds/readonly/3e8174da-6ca0-143b-aa8c-4c238aa02809\nlease_duration  1h0m0s\nlease_renewable true\n$ vault lease revoke database/creds/readonly/3e8174da-6ca0-143b-aa8c-4c238aa02809\n"
+      }
+    }
+  ]
+}

website/pages/use-cases/secrets-management/index.jsx

@@ -1,10 +1,18 @@
 import SectionHeader from '@hashicorp/react-section-header'
 import Button from '@hashicorp/react-button'
-import TextAndContent from '@hashicorp/react-text-and-content'
+import TextSplits from '@hashicorp/react-text-splits'
 import BeforeAfterDiagram from 'components/before-after-diagram'
 import UseCaseCtaSection from 'components/use-case-cta-section'
+//  Imports below are used in getStaticProps
+import RAW_CONTENT from './content.json'
+import highlightData from '@hashicorp/nextjs-scripts/prism/highlight-data'
 
-export default function SecretsManagmentUseCase() {
+export async function getStaticProps() {
+  const content = await highlightData(RAW_CONTENT)
+  return { props: { content } }
+}
+
+export default function SecretsManagmentUseCase({ content }) {
   return (
     <div id="use-cases" className="g-section-block page-wrap">
       <section className="g-container">
@@ -104,135 +112,12 @@ export default function SecretsManagmentUseCase() {
         </div>
       </section>
 
-      {/* Features / Text and content */}
+      {/* Features */}
-      <section className="g-container">
+      <section className="no-section-spacing">
-        <SectionHeader headline="Secret Management Features" />
+        <div className="g-grid-container">
-
+          <SectionHeader headline="Secret Management Features" />
-        <TextAndContent
-          data={{
-            text: `### Dynamic Secrets
-
-Dynamically create, revoke, and rotate secrets programmatically`,
-            content: {
-              __typename: 'SbcImageRecord',
-              image: {
-                url:
-                  'https://www.datocms-assets.com/2885/1538684923-dynamic-secrets-screenshot.jpg',
-                format: 'jpg',
-                size: 71545,
-                width: 668,
-                height: 504,
-              },
-            },
-          }}
-        />
-
-        <TextAndContent
-          data={{
-            reverseDirection: true,
-            text: `### Secret Storage
-
-Encrypt data while at rest, in the storage backend of your choice`,
-            content: {
-              __typename: 'SbcCodeBlockRecord',
-              chrome: true,
-              code: `$ cat vault.config
-storage "consul" {
-    address = "127.0.0.1:8500"
-    path    = "vault"
-}
-listener "tcp" {
-    address = "127.0.0.1:8200"
-}
-telemetry {
-    statsite_address = "127.0.0.1:8125"
-    disable_hostname = true
-}`,
-            },
-          }}
-        />
-
-        <div className="g-text-and-content">
-          <div className="text">
-            <div>
-              <h3>Identity Plugins</h3>
-              <p>
-                Improve the extensibility of Vault with pluggable identity
-                backends
-              </p>
-            </div>
-          </div>
-          <div className="content logo-grid">
-            <ul className="g-logo-grid large">
-              {[
-                'https://www.datocms-assets.com/2885/1506540090-color.svg',
-                'https://www.datocms-assets.com/2885/1506540114-color.svg',
-                'https://www.datocms-assets.com/2885/1506527176-color.svg',
-                'https://www.datocms-assets.com/2885/1508434209-consul_primarylogo_fullcolor.svg',
-                'https://www.datocms-assets.com/2885/1510033601-aws_logo_rgb_fullcolor.svg',
-                'https://www.datocms-assets.com/2885/1506540175-color.svg',
-                'https://www.datocms-assets.com/2885/1539818112-postgresql.svg',
-                'https://www.datocms-assets.com/2885/1539817686-microsoft-sql-server.svg',
-              ].map((logo) => (
-                <li key={logo}>
-                  <img src={logo} alt="company logo" />
-                </li>
-              ))}
-            </ul>
-          </div>
         </div>
-
+        <TextSplits textSplits={content.features} />
-        <TextAndContent
-          data={{
-            reverseDirection: true,
-            text: `### Detailed Audit Logs
-
-Detailed audit log of all client interaction (authentication, token creation, secret access & revocation)`,
-            content: {
-              __typename: 'SbcCodeBlockRecord',
-              chrome: true,
-              code: `$ cat audit.log | jq {
-    "time": "2018-08-27T13:17:11.609621226Z",
-    "type": "response",
-    "auth": {
-        "client_token": "hmac-sha256:5c40f1e051ea75b83230a5bf16574090f697dfa22a78e437f12c1c9d226f45a5",
-        "accessor": "hmac-sha256:f254a2d442f172f0b761c9fd028f599ad91861ed16ac3a1e8d96771fd920e862",
-        "display_name": "token",
-        "metadata": null,
-        "entity_id": ""
-    }
-}`,
-            },
-          }}
-        />
-
-        <TextAndContent
-          data={{
-            text: `### Leasing & Revoking Secrets
-
-Manage authorization and create time-based tokens for automatic revocation or manual revocation`,
-            content: {
-              __typename: 'SbcCodeBlockRecord',
-              chrome: true,
-              code: `$ vault read database/creds/readonly
-Key             Value
----             -----
-lease_id        database/creds/readonly/3e8174da-6ca0-143b-aa8c-4c238aa02809
-lease_duration  1h0m0s
-lease_renewable true
-password        A1a-w2xv2zsq4r5ru940
-username        v-token-readonly-48rt0t36sxp4wy81x8x1-1515627434
-[...]
-$ vault renew database/creds/readonly/3e8174da-6ca0-143b-aa8c-4c238aa02809
-Key             Value
----             -----
-lease_id        database/creds/readonly/3e8174da-6ca0-143b-aa8c-4c238aa02809
-lease_duration  1h0m0s
-lease_renewable true
-$ vault lease revoke database/creds/readonly/3e8174da-6ca0-143b-aa8c-4c238aa02809`,
-            },
-          }}
-        />
       </section>
 
       <UseCaseCtaSection />