Merge pull request #55 from pluralsh/klink/content-updates

feat: Content updates

pages/applications/[repo].tsx

@@ -18,6 +18,7 @@ import { type MergeDeep } from 'type-fest'
 // import { ProductValueSection } from '@pages/plural-stacks/ProductValueSection'
 import client, { directusClient } from '@src/apollo-client'
 import { mqs } from '@src/breakpoints'
+import { BasicMarkdoc } from '@src/components/BasicMarkdoc'
 import Embed from '@src/components/Embed'
 import { FooterVariant } from '@src/components/FooterFull'
 import { Columns, EqualColumn } from '@src/components/layout/Columns'
@@ -107,16 +108,18 @@ const AppPageTitle = styled(
     return (
       <div {...props}>
         <div className="icon">
-          <AppIcon
-            className="smallIcon"
-            size="small"
-            {...iconProps}
-          />
-          <AppIcon
-            className="largeIcon"
-            size="medium"
-            {...iconProps}
-          />
+          <div className="smallIcon">
+            <AppIcon
+              size="small"
+              {...iconProps}
+            />
+          </div>
+          <div className="largeIcon">
+            <AppIcon
+              size="medium"
+              {...iconProps}
+            />
+          </div>
         </div>
         <AppTitle>{app.displayName}</AppTitle>
       </div>
@@ -126,15 +129,15 @@ const AppPageTitle = styled(
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing.small,
-  '.icon > *:nth-child(2)': {
+  '.icon > .largeIcon': {
     display: 'none',
   },
   [mqs.md]: {
     '.icon': {
-      '& > *:nth-child(1)': {
+      '& > .smallIcon': {
         display: 'none',
       },
-      '& > *:nth-child(2)': {
+      '& > .largeIcon': {
         display: 'flex',
       },
     },
@@ -150,6 +153,9 @@ export type ProviderProps = {
 export default function App({
   repo,
   heroVideo,
+  heroText,
+  secondaryTitle,
+  secondaryText,
   caseStudy,
   quotes,
   recipes,
@@ -190,10 +196,18 @@ export default function App({
           <EqualColumn>
             <TextLimiter className="flex flex-col gap-large">
               <AppPageTitle app={repo} />
-              <Body1 color="text-light">
-                {repo.description}
-                {/* Orchestrate all your applications to work in harmony with{' '}
-                {repo.displayName} on Plural. */}
+              <Body1
+                as="div"
+                color="text-light"
+              >
+                {heroText ? (
+                  <BasicMarkdoc
+                    text={heroText}
+                    variables={{ appName: repo.displayName }}
+                  />
+                ) : (
+                  <p>{repo.description}</p>
+                )}
               </Body1>
               <div className="flex flex-col gap-medium">
                 <Overline>Available providers</Overline>
@@ -236,17 +250,17 @@ export default function App({
                   className="mb-large"
                   as="h2"
                 >
-                  Why use {repo.displayName} on Plural?
+                  <BasicMarkdoc
+                    text={secondaryTitle}
+                    renderP={false}
+                    variables={{ appName: repo.displayName }}
+                  />
                 </Heading3>
-                <Body2>
-                  You’re likely spending time weighing the benefits of
-                  self-hosting with the convenience and cost of managed
-                  services. Skip the pro-con discussions and get the best of
-                  both worlds with Plural. Automate and orchestrate your ETL, ML
-                  jobs, and DevOps tasks without taking on the Ops burden or
-                  managed service cost. Especially if you’re handling PII data,
-                  you’ll need everything to stay within your own VPC, which is
-                  best done with self-hosting open-source.
+                <Body2 as="div">
+                  <BasicMarkdoc
+                    text={secondaryText}
+                    variables={{ appName: repo.displayName }}
+                  />
                 </Body2>
                 <div className="mt-large flex flex-wrap flex-col justify-start md:flex-row gap-medium [&>*]:w-[max-content]">
                   <RepoSocials repo={repo} />
@@ -258,9 +272,10 @@ export default function App({
                 <div className="flex flex-col gap-medium">
                   <Body2 className="columns:mt-[17px]">
                     Deploying {repo.displayName} is a matter of executing these
-                    2 commands:
+                    3 commands:
                   </Body2>
                   <Code tabs={tabs} />
+                  <Code>plural build</Code>
                   <Code>
                     {`plural deploy --commit "deploying ${repo.name}"`}
                   </Code>
@@ -350,6 +365,18 @@ export type AppPageProps = {
     ReturnType<typeof normalizeAppExtras>['heroVideo'],
     undefined
   >
+  heroText: Exclude<
+    ReturnType<typeof normalizeAppExtras>['hero_text'],
+    undefined
+  >
+  secondaryTitle: Exclude<
+    ReturnType<typeof normalizeAppExtras>['secondary_title'],
+    undefined
+  >
+  secondaryText: Exclude<
+    ReturnType<typeof normalizeAppExtras>['secondary_text'],
+    undefined
+  >
   caseStudy: Exclude<
     ReturnType<typeof normalizeAppExtras>['case_study'],
     undefined
@@ -364,7 +391,9 @@ export type AppPageProps = {
 const normalizeAppExtras = (extras: AppExtrasQuery) =>
   ({
     ...(extras.app_defaults || {}),
-    ...(extras.apps?.[0] || {}),
+    ...Object.fromEntries(
+      Object.entries(extras.apps?.[0] || {}).filter(([_, val]) => !!val)
+    ),
   } as MergeDeep<AppDefaultsFragment, AppExtrasFragment>)
 
 export const getStaticProps: GetStaticProps<AppPageProps> = async (context) => {
@@ -431,6 +460,9 @@ export const getStaticProps: GetStaticProps<AppPageProps> = async (context) => {
       : null,
     caseStudy: appExtras.case_study || null,
     heroVideo: appExtras.heroVideo || null,
+    heroText: appExtras.hero_text || null,
+    secondaryText: appExtras.secondary_text || null,
+    secondaryTitle: appExtras.secondary_title || null,
     quotes: normalizeQuotes(appExtras.quotes),
     recipes,
     ...getAppMeta(thisRepo),

src/components/BasicMarkdoc.tsx

@@ -0,0 +1,66 @@
+import React, { useMemo } from 'react'
+
+import { InlineCode, isExternalUrl } from '@pluralsh/design-system'
+import Link from 'next/link'
+
+import Markdoc, { nodes } from '@markdoc/markdoc'
+
+import { BasicP, BasicUl, InlineLink } from './Typography'
+
+const transformConfig = ({ renderP = true }: { renderP?: boolean }) => ({
+  nodes: {
+    document: { ...nodes.document, render: 'NoWrapper' },
+    list: { ...nodes.list, render: 'List' },
+    paragraph: { ...nodes.paragraph, render: renderP ? 'P' : 'NoWrapper' },
+    link: { ...nodes.link, render: 'Link' },
+    code: { ...nodes.code, render: 'Code' },
+  },
+})
+
+const renderOpts = {
+  components: {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    NoWrapper: ({ children }) => <>{children}</>,
+    List: BasicUl,
+    P: (props) => <BasicP {...props} />,
+    Link: (props) => (
+      <InlineLink
+        as={Link}
+        {...(isExternalUrl(props.href)
+          ? { target: '_blank', rel: 'noopener noreferrer' }
+          : {})}
+        {...(props as any)}
+      />
+    ),
+    Code: InlineCode,
+  },
+}
+
+export function BasicMarkdoc({
+  text,
+  variables,
+  renderP = true,
+}: {
+  text?: string | null
+  variables?: Record<string, any>
+  renderP?: boolean
+}) {
+  text = text?.replace(/^\s+|\s+$/g, '')
+  const content = useMemo(() => {
+    if (!text) {
+      return null
+    }
+    const ast = Markdoc.parse(text)
+
+    return Markdoc.transform(ast, {
+      ...transformConfig({ renderP }),
+      variables,
+    })
+  }, [renderP, text, variables])
+
+  if (!content) {
+    return null
+  }
+
+  return <>{Markdoc.renderers.react(content, React, renderOpts)}</>
+}

src/components/FooterNav.tsx

@@ -26,7 +26,7 @@ const navItems = [
       },
       {
         children: 'GitHub',
-        href: 'https://github.com/plural.sh',
+        href: 'https://github.com/pluralsh/plural',
         target: '_blank',
       },
       {

src/components/QuoteCards.tsx

@@ -246,7 +246,7 @@ export function TestimonialsSection({
   return (
     <StandardPageWidth {...props}>
       <Heading1 className="mb-xxlarge md:mb-xxxxlarge text-center">
-        What companies are saying about Plural
+        Developers love us
       </Heading1>
       <QuotesCarousel quotes={quotes} />
     </StandardPageWidth>

src/components/page-sections/FAQList.tsx

@@ -12,7 +12,10 @@ export function FAQList({ faqs }: { faqs: (FaqItemFragment | null)[] }) {
     <div className="flex flex-col gap-large">
       {faqs.map((faq) =>
         faq ? (
-          <FAQItem label={faq.label}>
+          <FAQItem
+            key={faq.id}
+            label={faq.label}
+          >
             <BasicMarkdown text={faq.content} />
           </FAQItem>
         ) : null

src/components/page-sections/WhatIsPluralSection.tsx

@@ -99,21 +99,32 @@ export function WhatIsPluralSection() {
           <Cta href="https://docs.plural.sh">Explore the docs</Cta>
         </EqualColumn>
         <EqualColumn>
-          <div
-            className={classNames(
-              'overflow-hidden rounded-large'
-              // `sticky top-[calc(var(--top-nav-height)+16px)]`
-            )}
-          >
+          <div className={classNames('overflow-hidden rounded-large')}>
             <img
               className="block w-full"
               src="/images/product/architecture.png"
-              width="1765"
-              height="2172"
+              width="1696"
+              height="2188"
+              alt=""
             />
           </div>
         </EqualColumn>
       </Columns>
+      <div
+        className={classNames(
+          'mt-xxxxxxlarge',
+          'overflow-hidden',
+          'rounded-large'
+        )}
+      >
+        <img
+          className="block w-full"
+          src="/images/product/lifecycle.png"
+          width="2865"
+          height="1991"
+          alt=""
+        />
+      </div>
     </>
   )
 }

src/data/getPricing.tsx

@@ -49,7 +49,6 @@ const proPlanBase: Plan = {
     { label: 'Multi-cluster management' },
     { label: 'Dev → Prod promotion flows' },
     { label: 'Advanced user management' },
-    { label: 'Backup/Restore' },
     { label: 'Audit logs' },
     { label: 'VPN' },
     { label: 'Emergency hotfixes' },

src/generated/graphqlDirectus.ts

@@ -2582,16 +2582,16 @@ export type SiteSettingsQuery = { __typename?: 'Query', site_settings?: { __type
 
 export type CaseStudyFragment = { __typename?: 'case_studies', id: string, slug?: string | null, label?: string | null, title?: string | null, content?: string | null, ctas?: any | null, stack_label?: string | null, stack_apps?: any | null, hero_image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null };
 
-export type AppExtrasFragment = { __typename?: 'apps', name?: string | null, heroVideo?: string | null, case_study?: { __typename?: 'case_studies', id: string, slug?: string | null, label?: string | null, title?: string | null, content?: string | null, ctas?: any | null, stack_label?: string | null, stack_apps?: any | null, hero_image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null };
+export type AppExtrasFragment = { __typename?: 'apps', name?: string | null, heroVideo?: string | null, hero_text?: string | null, secondary_title?: string | null, secondary_text?: string | null, case_study?: { __typename?: 'case_studies', id: string, slug?: string | null, label?: string | null, title?: string | null, content?: string | null, ctas?: any | null, stack_label?: string | null, stack_apps?: any | null, hero_image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null };
 
-export type AppDefaultsFragment = { __typename?: 'app_defaults', case_study?: { __typename?: 'case_studies', id: string, slug?: string | null, label?: string | null, title?: string | null, content?: string | null, ctas?: any | null, stack_label?: string | null, stack_apps?: any | null, hero_image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null, quotes?: { __typename?: 'quote_lists', slug: string, items?: Array<{ __typename?: 'quote_lists_items', item?: { __typename?: 'quotes', id: string, quote?: string | null, name?: string | null, title?: string | null, company?: string | null, portrait?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null, logo?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null } | null> | null } | null };
+export type AppDefaultsFragment = { __typename?: 'app_defaults', secondary_title?: string | null, secondary_text?: string | null, case_study?: { __typename?: 'case_studies', id: string, slug?: string | null, label?: string | null, title?: string | null, content?: string | null, ctas?: any | null, stack_label?: string | null, stack_apps?: any | null, hero_image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null, quotes?: { __typename?: 'quote_lists', slug: string, items?: Array<{ __typename?: 'quote_lists_items', item?: { __typename?: 'quotes', id: string, quote?: string | null, name?: string | null, title?: string | null, company?: string | null, portrait?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null, logo?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null } | null> | null } | null };
 
 export type AppExtrasQueryVariables = Exact<{
   name?: InputMaybe<Scalars['String']['input']>;
 }>;
 
 
-export type AppExtrasQuery = { __typename?: 'Query', apps: Array<{ __typename?: 'apps', name?: string | null, heroVideo?: string | null, case_study?: { __typename?: 'case_studies', id: string, slug?: string | null, label?: string | null, title?: string | null, content?: string | null, ctas?: any | null, stack_label?: string | null, stack_apps?: any | null, hero_image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null }>, app_defaults?: { __typename?: 'app_defaults', case_study?: { __typename?: 'case_studies', id: string, slug?: string | null, label?: string | null, title?: string | null, content?: string | null, ctas?: any | null, stack_label?: string | null, stack_apps?: any | null, hero_image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null, quotes?: { __typename?: 'quote_lists', slug: string, items?: Array<{ __typename?: 'quote_lists_items', item?: { __typename?: 'quotes', id: string, quote?: string | null, name?: string | null, title?: string | null, company?: string | null, portrait?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null, logo?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null } | null> | null } | null } | null };
+export type AppExtrasQuery = { __typename?: 'Query', apps: Array<{ __typename?: 'apps', name?: string | null, heroVideo?: string | null, hero_text?: string | null, secondary_title?: string | null, secondary_text?: string | null, case_study?: { __typename?: 'case_studies', id: string, slug?: string | null, label?: string | null, title?: string | null, content?: string | null, ctas?: any | null, stack_label?: string | null, stack_apps?: any | null, hero_image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null }>, app_defaults?: { __typename?: 'app_defaults', secondary_title?: string | null, secondary_text?: string | null, case_study?: { __typename?: 'case_studies', id: string, slug?: string | null, label?: string | null, title?: string | null, content?: string | null, ctas?: any | null, stack_label?: string | null, stack_apps?: any | null, hero_image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null, quotes?: { __typename?: 'quote_lists', slug: string, items?: Array<{ __typename?: 'quote_lists_items', item?: { __typename?: 'quotes', id: string, quote?: string | null, name?: string | null, title?: string | null, company?: string | null, portrait?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null, logo?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null } | null> | null } | null } | null };
 
 export type StackExtrasFragment = { __typename?: 'stacks', name?: string | null, heroVideo?: string | null, case_study?: { __typename?: 'case_studies', id: string, slug?: string | null, label?: string | null, title?: string | null, content?: string | null, ctas?: any | null, stack_label?: string | null, stack_apps?: any | null, hero_image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null };
 
@@ -2831,6 +2831,9 @@ export const AppExtrasFragmentDoc = gql`
     fragment AppExtras on apps {
   name
   heroVideo
+  hero_text
+  secondary_title
+  secondary_text
   case_study {
     ...CaseStudy
   }
@@ -2863,6 +2866,8 @@ export const QuoteListFragmentDoc = gql`
     ${QuoteFragmentDoc}`;
 export const AppDefaultsFragmentDoc = gql`
     fragment AppDefaults on app_defaults {
+  secondary_title
+  secondary_text
   case_study {
     ...CaseStudy
   }