Add basic Solutions pages and make more content dynamic from CMS

next.config.js

@@ -5,17 +5,17 @@ const withMarkdoc = require('@markdoc/next.js')(
     schemaPath: './src/markdoc',
   }
 )
-const withTM = require('next-transpile-modules')(
-  ['@pluralsh/design-system', 'honorable', 'honorable-theme-default'],
-  {
-    debug: false,
-  }
-)
 
 module.exports = () => {
-  const plugins = [withMarkdoc, withTM]
+  const plugins = [withMarkdoc]
 
-  return plugins.reduce((acc, next) => next(acc), {
+return plugins.reduce((acc, next) => next(acc), {
+    transpilePackages: [
+      '@pluralsh/design-system',
+      'honorable',
+      'honorable-theme-default',
+      'honorable-recipe-mapper',
+    ],
     reactStrictMode: false,
     compiler: {
       // https://nextjs.org/docs/advanced-features/compiler#styled-components

package.json

@@ -24,7 +24,7 @@
     "analyze": "cross-env ANALYZE=true yarn build"
   },
   "dependencies": {
-    "@apollo/client": "3.7.16",
+    "@apollo/client": "3.7.17",
     "@docsearch/react": "3.5.1",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
@@ -38,7 +38,7 @@
     "@markdoc/markdoc": "0.3.0",
     "@markdoc/next.js": "0.2.2",
     "@open-draft/until": "2.1.0",
-    "@pluralsh/design-system": "2.0.0",
+    "@pluralsh/design-system": "2.0.2",
     "@react-types/shared": "3.18.1",
     "@tanstack/react-table": "8.9.3",
     "@tanstack/react-virtual": "3.0.0-beta.48",
@@ -56,17 +56,17 @@
     "lodash-es": "4.17.21",
     "memoize-one": "6.0.0",
     "moment-timezone": "^0.5.43",
-    "next": "13.4.7",
+    "next": "13.4.10",
     "next-compose-plugins": "2.2.1",
     "next-transpile-modules": "10.0.0",
-    "octokit": "^2.1.0",
-    "posthog-js": "1.68.4",
+    "octokit": "^3.0.0",
+    "posthog-js": "1.71.0",
     "raw-loader": "4.0.2",
     "react": "18.2.0",
     "react-add-to-calendar": "^0.1.5",
     "react-aria": "3.25.0",
     "react-dom": "18.2.0",
-    "react-embed": "3.6.0",
+    "react-embed": "3.7.0",
     "react-github-btn": "1.4.0",
     "react-google-recaptcha": "3.1.0",
     "react-is": "18.2.0",
@@ -80,41 +80,41 @@
     "swiper": "9.4.1",
     "swr": "2.2.0",
     "tslib": "2.6.0",
-    "type-fest": "3.12.0",
+    "type-fest": "3.13.0",
     "url-join": "5.0.0",
     "usehooks-ts": "2.9.1"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "4.0.1",
     "@graphql-codegen/client-preset": "4.0.1",
-    "@next/bundle-analyzer": "13.4.7",
-    "@pluralsh/eslint-config-typescript": "2.5.46",
-    "@pluralsh/stylelint-config": "2.0.3",
-    "@types/node": "20.3.2",
-    "@types/react-dom": "18.2.6",
+    "@next/bundle-analyzer": "13.4.10",
+    "@pluralsh/eslint-config-typescript": "2.5.56",
+    "@pluralsh/stylelint-config": "2.0.5",
+    "@types/node": "20.4.2",
+    "@types/react-dom": "18.2.7",
     "@types/styled-components": "5.1.26",
-    "@typescript-eslint/eslint-plugin": "5.60.1",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
     "autoprefixer": "10.4.14",
     "concurrently": "8.2.0",
     "cross-env": "7.0.3",
-    "eslint": "8.43.0",
-    "eslint-config-next": "13.4.7",
+    "eslint": "8.45.0",
+    "eslint-config-next": "13.4.10",
     "eslint-config-prettier": "8.8.0",
     "eslint-import-resolver-typescript": "3.5.5",
     "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-import-newlines": "1.3.1",
+    "eslint-plugin-import-newlines": "1.3.4",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "husky": "8.0.3",
-    "lint-staged": "13.2.2",
+    "lint-staged": "13.2.3",
     "npm-run-all": "4.1.5",
-    "postcss": "8.4.24",
+    "postcss": "8.4.26",
     "prettier": "2.8.8",
     "react-hooks": "1.0.1",
-    "stylelint": "15.9.0",
+    "stylelint": "15.10.1",
     "stylelint-config-prettier": "9.0.5",
-    "tailwindcss": "3.3.2",
+    "tailwindcss": "3.3.3",
     "typescript": "4.9.5"
   },
   "packageManager": "[email protected]",

pages/applications/[repo].tsx

@@ -13,7 +13,9 @@ import { providerToProviderName } from '@pluralsh/design-system/dist/markdoc/uti
 import classNames from 'classnames'
 import { isEmpty } from 'lodash-es'
 import styled, { useTheme } from 'styled-components'
+import { type MergeDeep } from 'type-fest'
 
+import { StandardPageSection } from '@pages/careers'
 import { ProductValueSection } from '@pages/plural-stacks/[stack]'
 import client, { directusClient } from '@src/apollo-client'
 import { mqs } from '@src/breakpoints'
@@ -27,10 +29,10 @@ import BuildStack, {
   getStackTabData,
 } from '@src/components/page-sections/BuildStackSection'
 import {
-  CaseStudySection,
-  getCaseStudyApps,
-} from '@src/components/page-sections/CaseStudySection'
-import { RepoFAQSection } from '@src/components/page-sections/RepoFAQSection'
+  FeaturedArticleSection,
+  getFeaturedArticleApps,
+} from '@src/components/page-sections/FeaturedArticleSection'
+import { StandardFAQSection } from '@src/components/page-sections/StandardFAQSection'
 import { TestimonialsSection } from '@src/components/QuoteCards'
 import RepoReadmeMd from '@src/components/RepoReadme/RepoReadmeMd'
 import { SingleAccordion } from '@src/components/SingleAccordion'
@@ -51,10 +53,15 @@ import {
 } from '@src/data/getRepos'
 import { getStacks } from '@src/data/getStacks'
 import {
+  type AppDefaultsFragment,
   AppExtrasDocument,
   type AppExtrasFragment,
   type AppExtrasQuery,
   type AppExtrasQueryVariables,
+  type FaqItemFragment,
+  FaqListDocument,
+  type FaqListQuery,
+  type FaqListQueryVariables,
 } from '@src/generated/graphqlDirectus'
 import {
   type Recipe,
@@ -138,6 +145,7 @@ export default function App({
   recipes,
   buildStackTabs,
   caseStudyApps,
+  faqs,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   const router = useRouter()
   const tabs =
@@ -275,22 +283,43 @@ export default function App({
       {buildStackTabs && <BuildStack tabs={buildStackTabs} />}
       <CompanyLogosSection className="mt-xxxxlarge" />
       <TestimonialsSection />
-      <CaseStudyFAQSection caseStudyProps={{ apps: caseStudyApps }} />
+      <CaseStudyFAQSection
+        caseStudyProps={{
+          apps: caseStudyApps,
+          featuredArticle: appExtras?.case_study,
+        }}
+        faqProps={{ faqs }}
+      />
+      {/* <ColorModeProvider mode="light">
+        <StandardPageSection className="flex flex-col bg-fill-zero gap-xxxlarge md:gap-xxxxlarge columns:gap-xxxxxlarge">
+          <StandardPageWidth>
+            <FeaturedArticleSection
+              apps={caseStudyApps}
+              featuredArticle={appExtras?.case_study}
+            />
+          </StandardPageWidth>
+          <StandardFAQSection faqs={faqs} />
+        </StandardPageSection>
+      </ColorModeProvider> */}
     </HeaderPad>
   )
 }
 
 export function CaseStudyFAQSection({
   caseStudyProps,
+  faqProps,
 }: {
-  caseStudyProps: ComponentProps<typeof CaseStudySection>
+  caseStudyProps: ComponentProps<typeof FeaturedArticleSection>
+  faqProps: ComponentProps<typeof StandardFAQSection>
 }) {
   return (
     <ColorModeProvider mode="light">
-      <div className="bg-fill-zero gap-xlarge mt-xxxlarge mb-xlarge columns:mt-xxxxxxlarge columns:gap-xxxxxlarge columns:mb-xxxxxlarge">
-        <CaseStudySection {...caseStudyProps} />
-        <RepoFAQSection className="py-xxxlarge" />
-      </div>
+      <StandardPageSection className="flex flex-col bg-fill-zero gap-xxxlarge md:gap-xxxxlarge columns:gap-xxxxxlarge">
+        <StandardPageWidth>
+          <FeaturedArticleSection {...caseStudyProps} />
+        </StandardPageWidth>
+        <StandardFAQSection {...faqProps} />
+      </StandardPageSection>
     </ColorModeProvider>
   )
 }
@@ -317,8 +346,15 @@ export type AppPageProps = {
   recipes?: Recipe[]
   buildStackTabs?: ReturnType<typeof getStackTabData>
   caseStudyApps: MinRepo[]
+  faqs: (FaqItemFragment | null)[]
 }
 
+const normalizeAppExtras = (extras: AppExtrasQuery) =>
+  ({
+    ...(extras.app_defaults || {}),
+    ...(extras.apps?.[0] || {}),
+  } as MergeDeep<AppDefaultsFragment, AppExtrasFragment>)
+
 export const getStaticProps: GetStaticProps<AppPageProps> = async (context) => {
   const repoName = context?.params?.repo
 
@@ -365,23 +401,38 @@ export const getStaticProps: GetStaticProps<AppPageProps> = async (context) => {
       ?.map((edge) => edge?.node)
       .filter((r): r is Recipe => !!r && !r?.private) || []
 
+  const appExtras = normalizeAppExtras(appData) || {}
+
+  const { data: faqData, error: faqError } = await directusClient.query<
+    FaqListQuery,
+    FaqListQueryVariables
+  >({
+    query: FaqListDocument,
+    variables: { slug: 'generic' },
+  })
+
   return propsWithGlobalSettings({
     repo: thisRepo
       ? {
           ...thisRepo,
         }
       : null,
-    appExtras: appData?.apps?.[0] || {},
+    appExtras,
     recipes,
     ...getAppMeta(thisRepo),
-    footerVariant: FooterVariant.kitchenSink,
+    faqs: faqData.collapsible_lists?.[0]?.items || [],
     buildStackTabs,
-    caseStudyApps: getCaseStudyApps(repos),
+    caseStudyApps: getFeaturedArticleApps(
+      repos,
+      (appExtras.case_study?.stack_apps as string[]) || []
+    ),
+    footerVariant: FooterVariant.kitchenSink,
     errors: [
       ...(reposError ? [reposError] : []),
       ...(stacksError ? [reposError] : []),
       ...(repoError ? [repoError] : []),
       ...(appError ? [appError] : []),
+      ...(faqError ? [faqError] : []),
     ],
   })
 }

pages/careers/index.tsx

@@ -110,6 +110,7 @@ export default function Index({ jobs }: { jobs: MinJobListingFragment[] }) {
         image="/images/gradients/gradient-bg-5.jpg"
       >
         <BasicPageHero
+          preHeading="Careers"
           heading="Join us and build something incredible"
           intro={
             <p>
@@ -123,7 +124,6 @@ export default function Index({ jobs }: { jobs: MinJobListingFragment[] }) {
               View open positions
             </ScrollToLink>
           }
-          preHeading="Careers"
         />
       </HeaderPad>
       <ColorModeProvider mode="light">
@@ -221,46 +221,46 @@ export default function Index({ jobs }: { jobs: MinJobListingFragment[] }) {
               iconUrl="/images/icons/careers/remote-work.svg"
               title="Flexible and fully remote"
             >
-              Commodo dolore et voluptate sit ullamco aliqua. Voluptate tempor
-              magna in qui est. Ipsum veniam eiusmod commodo consectetur.
+              Headquartered in NYC, but fully remote from Pacific to Central
+              European Time. Choose to work from wherever you want, whenever you
+              want.
             </BenefitCard>
             <BenefitCard
               iconUrl="/images/icons/careers/pto.svg"
               title="Unlimited paid time off for the whole team"
             >
-              Ipsum laboris mollit eu consectetur anim Lorem cillum proident
-              sunt ex ipsum deserunt fugiat.
+              We believe that taking breaks is important for our team to be the
+              most effective, so we’ve got unlimited time off, plus sick leave
+              and generous parental leave.
             </BenefitCard>
             <BenefitCard
               iconUrl="/images/icons/careers/laptop.svg"
               title="Gear up"
             >
-              Sit consequat excepteur cillum voluptate exercitation. Qui non sit
-              laboris Lorem culpa exercitation. Excepteur exercitation do mollit
-              cupidatat mollit tempor.
+              We’ll cover any equipment you need and a stipend for your work
+              from home setup too.
             </BenefitCard>
             <BenefitCard
               iconUrl="/images/icons/careers/healthcare.svg"
               title="Healthcare, vision, and dental insurance"
             >
-              Dolore pariatur consequat dolor sunt labore velit anim dolore et
-              est excepteur minim minim. Commodo dolore labore aliquip ea ad
-              aute reprehenderit elit quis culpa excepteur ex commodo minim.{' '}
+              Fully covered by Plural!
             </BenefitCard>
             <BenefitCard
               iconUrl="/images/icons/careers/globe.svg"
               title="Let’s get together"
             >
-              Est laboris ea exercitation eiusmod culpa non non do reprehenderit
-              duis. In esse incididunt aliquip exercitation. Do eu ullamco
-              adipisicing.
+              We organize regular, fully paid company off-sites around the
+              world. It’s a time for everyone to get to know each other better,
+              bond as a team, and have those strategy and working sessions that
+              are just better in person. Our last one was in New Orleans!
             </BenefitCard>
             <BenefitCard
               iconUrl="/images/icons/careers/growth.svg"
               title="Growth suppport"
             >
-              Commodo dolore labore aliquip ea ad aute reprehenderit elit quis
-              culpa excepteur ex commodo minim.{' '}
+              Personal and career development reimbursement. We also sponsor and
+              pay for conferences and networking events.
             </BenefitCard>
           </div>
         </StandardPageWidth>
@@ -275,7 +275,7 @@ export default function Index({ jobs }: { jobs: MinJobListingFragment[] }) {
               heading="Open positions"
               intro={
                 <p>
-                  We're actively seeking passionate individuals to join our team
+                  We’re actively seeking passionate individuals to join our team
                   and contribute to our mission. Explore our open positions and
                   unlock exciting opportunities to make a meaningful impact.
                 </p>