add cta button

Author: dphuang2

generator/konfig-next-app/src/components/DemoHeader.tsx

@@ -7,6 +7,7 @@ import { TABS } from './HeaderButton'
 import { HeaderTabs } from './HeaderTabs'
 import type { GenerateLogoLinkResponse } from '@/utils/generate-logo-link'
 import { MarkdownPageProps } from '@/utils/generate-props-for-markdown-page'
+import { KonfigYamlCommonType } from 'konfig-lib'
 
 export const DemoHeader = observer(
   ({
@@ -21,6 +22,7 @@ export const DemoHeader = observer(
     repo,
     logo,
     allMarkdown,
+    cta,
   }: {
     opened: boolean
     setOpened: Dispatch<SetStateAction<boolean>>
@@ -33,6 +35,7 @@ export const DemoHeader = observer(
     owner: string
     repo: string
     logo: GenerateLogoLinkResponse
+    cta: NonNullable<KonfigYamlCommonType['portal']>['cta'] | null
   }) => {
     return (
       <HeaderWrapper
@@ -46,6 +49,7 @@ export const DemoHeader = observer(
           opened={opened}
           setOpened={setOpened}
           title={state.portalTitle ? state.portalTitle : state.portalName}
+          cta={cta}
         />
         <HeaderTabs
           hasLightAndDarkLogo={typeof logo !== 'string'}

generator/konfig-next-app/src/components/DemoPortal.tsx

@@ -31,7 +31,10 @@ import { DemoTableOfContents } from './DemoTableOfContents'
 import { DemoEditThisPage } from './DemoEditThisPage'
 import { DemoLastRan } from './DemoLastRan'
 import { DemoHeader } from './DemoHeader'
-import type { SocialObject } from 'konfig-lib/dist/KonfigYamlCommon'
+import type {
+  KonfigYamlCommonType,
+  SocialObject,
+} from 'konfig-lib/dist/KonfigYamlCommon'
 import Head from 'next/head'
 import { NAVBAR_WIDTH } from './ReferenceNavbar'
 import { proseContainerWidthStyles } from '@/utils/prose-container-width-styles'
@@ -176,6 +179,7 @@ export const DemoPortal = observer(
     repo,
     logo,
     allMarkdown,
+    cta,
   }: {
     state: PortalState
     sandbox?: boolean
@@ -186,6 +190,7 @@ export const DemoPortal = observer(
     allMarkdown: MarkdownPageProps['allMarkdown']
     repo: string
     logo: GenerateLogoLinkResponse
+    cta: NonNullable<KonfigYamlCommonType['portal']>['cta'] | null
   }) => {
     const theme = useMantineTheme()
     const { colorScheme, toggleColorScheme } = useMantineColorScheme()
@@ -330,6 +335,7 @@ export const DemoPortal = observer(
               state={state}
               sandbox={sandbox}
               logo={logo}
+              cta={cta}
             />
           }
         >

generator/konfig-next-app/src/components/DocumentationHeader.tsx

@@ -6,6 +6,7 @@ import { HeaderTabs } from './HeaderTabs'
 import { TABS } from './HeaderButton'
 import type { GenerateLogoLinkResponse } from '@/utils/generate-logo-link'
 import { MarkdownPageProps } from '@/utils/generate-props-for-markdown-page'
+import { KonfigYamlCommonType } from 'konfig-lib'
 
 export function DocumentationHeader({
   opened,
@@ -17,6 +18,7 @@ export function DocumentationHeader({
   repo,
   logo,
   allMarkdown,
+  cta,
 }: {
   opened: boolean
   setOpened: Dispatch<SetStateAction<boolean>>
@@ -27,6 +29,7 @@ export function DocumentationHeader({
   repo: string
   logo: GenerateLogoLinkResponse
   allMarkdown: MarkdownPageProps['allMarkdown']
+  cta: NonNullable<KonfigYamlCommonType['portal']>['cta'] | null
 }) {
   return (
     <HeaderWrapper
@@ -40,6 +43,7 @@ export function DocumentationHeader({
         setOpened={setOpened}
         title={title}
         logo={logo}
+        cta={cta}
       />
       <HeaderTabs
         hasLightAndDarkLogo={typeof logo !== 'string'}

generator/konfig-next-app/src/components/LayoutHeader.tsx

@@ -1,6 +1,7 @@
 import {
   Box,
   Burger,
+  Button,
   Group,
   MantineNumberSize,
   MediaQuery,
@@ -19,6 +20,7 @@ import type { GenerateLogoLinkResponse } from '@/utils/generate-logo-link'
 import { useHeaderColor } from '@/utils/use-header-color'
 import { MarkdownPageProps } from '@/utils/generate-props-for-markdown-page'
 import { Search } from './Search'
+import { KonfigYamlCommonType } from 'konfig-lib'
 
 const useLogoStyles = createStyles(() => ({
   logo: {
@@ -34,13 +36,15 @@ export const LayoutHeader = observer(
     breakpoint,
     allMarkdown,
     logo,
+    cta,
   }: {
     title: string
     opened: boolean
     setOpened: Dispatch<SetStateAction<boolean>>
     breakpoint: MantineNumberSize
     logo: GenerateLogoLinkResponse
     allMarkdown: MarkdownPageProps['allMarkdown']
+    cta: NonNullable<KonfigYamlCommonType['portal']>['cta'] | null
   }) => {
     const theme = useMantineTheme()
     const baseUrl = useBaseUrl()
@@ -109,6 +113,30 @@ export const LayoutHeader = observer(
           <div className="sm:hidden">
             <Search />
           </div>
+          {cta ? (
+            <Button
+              variant={
+                !hasLightAndDarkLogo
+                  ? 'filled'
+                  : theme.colorScheme === 'dark'
+                  ? 'light'
+                  : 'filled'
+              }
+              component="a"
+              target="_blank"
+              className="hidden sm:block"
+              color={
+                !hasLightAndDarkLogo
+                  ? 'dark'
+                  : theme.colorScheme === 'dark'
+                  ? 'brand'
+                  : 'dark'
+              }
+              href={cta.url}
+            >
+              {cta.label}
+            </Button>
+          ) : null}
           <ColorSchemeToggle hasLightAndDarkLogo={typeof logo !== 'string'} />
         </Group>
       </Box>

generator/konfig-next-app/src/components/ReferenceHeader.tsx

@@ -5,6 +5,7 @@ import { TABS } from './HeaderButton'
 import { HeaderTabs } from './HeaderTabs'
 import type { GenerateLogoLinkResponse } from '@/utils/generate-logo-link'
 import { MarkdownPageProps } from '@/utils/generate-props-for-markdown-page'
+import { KonfigYamlCommonType } from 'konfig-lib'
 
 export function ReferenceHeader({
   opened,
@@ -17,6 +18,7 @@ export function ReferenceHeader({
   repo,
   logo,
   allMarkdown,
+  cta,
 }: {
   opened: boolean
   hasDocumentation: boolean
@@ -28,6 +30,7 @@ export function ReferenceHeader({
   allMarkdown: MarkdownPageProps['allMarkdown']
   repo: string
   logo: GenerateLogoLinkResponse
+  cta: NonNullable<KonfigYamlCommonType['portal']>['cta'] | null
 }) {
   return (
     <HeaderWrapper
@@ -41,6 +44,7 @@ export function ReferenceHeader({
         setOpened={setOpened}
         title={title}
         logo={logo}
+        cta={cta}
       />
       <HeaderTabs
         hasLightAndDarkLogo={typeof logo !== 'string'}

generator/konfig-next-app/src/pages/[org]/[portal]/[demo].tsx

@@ -63,6 +63,7 @@ const DemoPage = observer(
     repo,
     faviconLink,
     logo,
+    cta,
   }: InferGetStaticPropsType<typeof getStaticProps>) => {
     const state = useMemo(
       () =>
@@ -119,6 +120,7 @@ const DemoPage = observer(
           owner={owner}
           repo={repo}
           logo={logo}
+          cta={cta}
         />
       </MantineProvider>
     )

generator/konfig-next-app/src/pages/[org]/[portal]/docs/[[...doc]].tsx

@@ -104,6 +104,7 @@ const DocumentationPage = observer(
     faviconLink,
     logo,
     metaDescription,
+    cta,
   }: InferGetServerSidePropsType<typeof getStaticProps>) => {
     const theme = useMantineTheme()
     const { colorScheme } = useMantineColorScheme()
@@ -245,6 +246,7 @@ const DocumentationPage = observer(
                 title={title}
                 demos={demos}
                 logo={logo}
+                cta={cta}
               />
             }
           >

generator/konfig-next-app/src/pages/[org]/[portal]/reference/[tag]/[operationId].tsx

@@ -92,6 +92,7 @@ const Operation = ({
   allMarkdown,
   logo,
   metaDescription,
+  cta,
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   const { colors } = useMantineTheme()
   const { colorScheme } = useMantineColorScheme()
@@ -180,6 +181,7 @@ const Operation = ({
           <ReferenceHeader
             owner={owner}
             repo={repo}
+            cta={cta}
             hasDocumentation={hasDocumentation}
             allMarkdown={allMarkdown}
             opened={opened}

generator/konfig-next-app/src/utils/generate-demos-from-github.ts

@@ -3,7 +3,11 @@ import { generateDemosFromFilenameAndContent } from './generate-demos-from-file-
 import { createOctokitInstance } from './octokit'
 import { githubGetFileContent } from './github-get-file-content'
 import { githubGetRepository } from './github-get-repository'
-import type { KonfigYamlType, SocialObject } from 'konfig-lib'
+import type {
+  KonfigYamlCommonType,
+  KonfigYamlType,
+  SocialObject,
+} from 'konfig-lib'
 import { Octokit } from '@octokit/rest'
 import { generateFaviconLink } from './generate-favicon-link'
 import {
@@ -46,6 +50,7 @@ export type FetchResult = {
   hasDocumentation: boolean
   faviconLink: string | null
   logo: GenerateLogoLinkResponse
+  cta: NonNullable<KonfigYamlCommonType['portal']>['cta'] | null
 }
 
 export type GenerationResult =
@@ -100,6 +105,7 @@ export async function generateDemosDataFromGithub({
       allMarkdown: MarkdownPageProps['allMarkdown']
       faviconLink: string | null
       logo: GenerateLogoLinkResponse
+      cta: NonNullable<KonfigYamlCommonType['portal']>['cta'] | null
     }
   | { result: 'error'; reason: 'no demos' }
   | { result: 'error'; reason: 'demo not found' }
@@ -124,6 +130,7 @@ export async function generateDemosDataFromGithub({
     mainBranch,
     organization,
     portal,
+    cta: fetchResult.cta,
     googleAnalyticsId: fetchResult.googleAnalyticsId,
     customSnippet: fetchResult.customSnippet,
     demo,
@@ -245,6 +252,7 @@ async function _fetch({
     primaryColor: konfigYaml.content.portal.primaryColor,
     mainBranch: repository.data.default_branch,
     logo: logoLink,
+    cta: konfigYaml.content.portal?.cta ?? null,
     faviconLink,
     ...(konfigYaml.content.portal.socials
       ? { socials: konfigYaml.content.portal.socials }

generator/konfig-next-app/src/utils/generate-props-for-markdown-page.ts

@@ -1,5 +1,6 @@
 import {
   DocumentationConfig,
+  KonfigYamlCommonType,
   KonfigYamlType,
   OperationObject,
   getOperations,
@@ -58,6 +59,7 @@ export type MarkdownPageProps = {
   omitOwnerAndRepo: boolean
   faviconLink: string | null
   logo: GenerateLogoLinkResponse
+  cta: NonNullable<KonfigYamlCommonType['portal']>['cta'] | null
 }
 
 export async function generatePropsForMarkdownPage({
@@ -235,6 +237,7 @@ export async function generatePropsForMarkdownPage({
       breadcrumb,
       allMarkdown,
       operations,
+      cta: konfigYaml.content.portal?.cta ?? null,
       defaultBranch,
       idToLabel,
       demos: