Give the Mo's Diner landing page an event-themed hero banner (#64435)

Author: V-halfaro

assets/images/banner-images/mos-diner-logo.svg

@@ -1,13 +1,15 @@
 ---
 title: Mo's Diner
 shortTitle: Mo's Diner
-intro: "Thanks for coming to Mo's Diner! Now enjoy the recipes to help you get the most out of GitHub, from planning your projects to maintaining main."
+intro: |-
+  Thanks for coming to Mo's Diner!\
+  Now enjoy the recipes to help you get the most out of GitHub, from planning your projects to maintaining main.
 versions:
   fpt: '*'
   ghec: '*'
 contentType: landing
 layout: bespoke-landing
-heroImage: /assets/images/banner-images/mos-diner-pink
+heroTheme: mos-diner
 children:
   - /content/copilot/how-tos/copilot-on-github/copilot-for-github-tasks/use-copilot-to-create-or-update-issues
   - /content/copilot/tutorials/copilot-cookbook/communicate-effectively/summarize-repository-activity

content/mos-diner/index.md

@@ -255,6 +255,11 @@ export const schema: Schema = {
     heroImage: {
       type: 'string',
     },
+    // Event-specific hero styling that replaces the hero image on landing pages
+    heroTheme: {
+      type: 'string',
+      enum: ['mos-diner'],
+    },
     interactive: {
       type: 'boolean',
     },

src/frame/lib/frontmatter.ts

@@ -12,6 +12,7 @@ export const BespokeLanding = () => {
     title,
     intro,
     heroImage,
+    heroTheme,
     introLinks,
     tocItems,
     carousels,
@@ -27,7 +28,13 @@ export const BespokeLanding = () => {
     <DefaultLayout>
       <UtmPreserver />
       <div data-search="article-body">
-        <LandingHero title={title} intro={intro} heroImage={heroImage} introLinks={introLinks} />
+        <LandingHero
+          title={title}
+          intro={intro}
+          heroImage={heroImage}
+          heroTheme={heroTheme}
+          introLinks={introLinks}
+        />
 
         {carousels &&
           Object.entries(carousels).map(([carouselKey, articles]) => (

src/landings/components/bespoke/BespokeLanding.tsx

@@ -101,3 +101,91 @@
     margin: -0.5rem -0.75rem;
   }
 }
+
+// Mo's Diner event theme, set by the heroTheme frontmatter key. A wordmark cell
+// and an intro cell sit above a checkered strip, all bleeding to the section's
+// side rules. Colors follow the color mode, so the wordmark uses the text color.
+.mosDiner {
+  --mos-diner-checker: color-mix(
+    in srgb,
+    #d5336b 45%,
+    var(--brand-color-canvas-default)
+  );
+  --mos-diner-square: 0.75rem;
+
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+  width: auto;
+  margin-inline: -16px;
+
+  @media (min-width: 768px) {
+    margin-inline: -32px;
+  }
+
+  // Heading and intro become grid cells of their own.
+  .heroContent {
+    display: contents;
+  }
+
+  .heroHeading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: none;
+    padding: 2.5rem 2rem;
+    border-right: 1px solid var(--brand-color-border-subtle);
+  }
+
+  .heroDescription,
+  .heroButtons {
+    grid-column: 2;
+    align-self: center;
+    padding-inline: 3.5rem 2rem;
+  }
+
+  .themeAccent {
+    grid-column: 1 / -1;
+  }
+}
+
+// The artwork's aspect ratio keeps the mask from cropping.
+.heroWordmark {
+  display: block;
+  width: clamp(12rem, 75%, 21rem);
+  aspect-ratio: 470 / 238;
+  background-color: currentColor;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+}
+
+// Offset conic gradients draw a two-row checkerboard strip.
+.themeAccent {
+  height: calc(var(--mos-diner-square) * 2);
+  background-image: conic-gradient(
+    var(--mos-diner-checker) 25%,
+    transparent 0 50%,
+    var(--mos-diner-checker) 0 75%,
+    transparent 0
+  );
+  background-size: calc(var(--mos-diner-square) * 2)
+    calc(var(--mos-diner-square) * 2);
+  background-position: left top;
+}
+
+@media (max-width: 865px) {
+  .mosDiner {
+    grid-template-columns: minmax(0, 1fr);
+
+    .heroHeading {
+      justify-content: flex-start;
+      padding: 2rem 1.5rem 1rem;
+      border-right: 0;
+    }
+
+    .heroDescription,
+    .heroButtons {
+      grid-column: 1;
+      padding: 0 1.5rem 2rem;
+    }
+  }
+}

src/landings/components/shared/LandingHero.module.scss

@@ -1,19 +1,29 @@
 import { useRouter } from 'next/router'
+import cx from 'clsx'
 import { LinkExternalIcon } from '@primer/octicons-react'
 import { Button, ButtonGroup, Heading, Text } from '@primer/react-brand'
 import styles from './LandingHero.module.scss'
 import { LandingSection } from './LandingSection'
 import { useTranslation } from '@/languages/components/useTranslation'
 import { DEFAULT_VERSION, useVersion } from '@/versions/components/useVersion'
 import { RenderedHTML } from '@/frame/components/ui/RenderedHTML/RenderedHTML'
+import type { HeroTheme } from '@/landings/context/LandingContext'
 
 type LandingHeroProps = {
   title: string
   intro?: string
   heroImage?: string
+  heroTheme?: HeroTheme
   introLinks?: Record<string, string> | null
 }
 
+const heroThemes: Record<HeroTheme, { className: string; wordmark?: string }> = {
+  'mos-diner': {
+    className: styles.mosDiner,
+    wordmark: '/assets/images/banner-images/mos-diner-logo.svg',
+  },
+}
+
 function heroBackgroundCss(heroImage: string | undefined) {
   if (!heroImage) return undefined
   return {
@@ -24,7 +34,13 @@ function heroBackgroundCss(heroImage: string | undefined) {
   }
 }
 
-export const LandingHero = ({ title, intro, heroImage, introLinks }: LandingHeroProps) => {
+export const LandingHero = ({
+  title,
+  intro,
+  heroImage,
+  heroTheme,
+  introLinks,
+}: LandingHeroProps) => {
   const { t } = useTranslation(['product_landing'])
   const router = useRouter()
   const { currentVersion } = useVersion()
@@ -36,21 +52,38 @@ export const LandingHero = ({ title, intro, heroImage, introLinks }: LandingHero
     return `/${router.locale}${versionPrefix}${href}`
   }
 
+  const theme = heroTheme ? heroThemes[heroTheme] : undefined
   const linkEntries = introLinks ? Object.entries(introLinks) : []
 
   return (
     <LandingSection>
-      <div className={styles.landingHero} style={heroBackgroundCss(heroImage)}>
+      <div
+        className={cx(styles.landingHero, theme?.className)}
+        style={heroTheme ? undefined : heroBackgroundCss(heroImage)}
+        data-hero-theme={heroTheme}
+      >
         <div className={styles.heroContent}>
           <Heading as="h1" size="2" className={styles.heroHeading}>
-            {title}
+            {theme?.wordmark ? (
+              <>
+                <span className="visually-hidden">{title}</span>
+                {/* The mask paints the artwork in the current text color, so it follows color mode. */}
+                <span
+                  className={styles.heroWordmark}
+                  style={{ maskImage: `url("${theme.wordmark}")` }}
+                  aria-hidden="true"
+                />
+              </>
+            ) : (
+              title
+            )}
           </Heading>
           {intro && (
             <Text
               as="div"
-              size="200"
-              variant="muted"
-              className={`${styles.heroDescription} ${styles.heroIntroScrim}`}
+              size={theme ? '300' : '200'}
+              variant={theme ? 'default' : 'muted'}
+              className={cx(styles.heroDescription, !heroTheme && styles.heroIntroScrim)}
             >
               <RenderedHTML as="div" html={intro} />
             </Text>
@@ -77,6 +110,7 @@ export const LandingHero = ({ title, intro, heroImage, introLinks }: LandingHero
             </div>
           )}
         </div>
+        {heroTheme && <div className={styles.themeAccent} aria-hidden="true" />}
       </div>
     </LandingSection>
   )

src/landings/components/shared/LandingHero.tsx

@@ -7,6 +7,8 @@ import type { JourneyTrack } from '@/journeys/lib/journey-path-resolver'
 
 export type LandingType = 'bespoke' | 'discovery' | 'journey'
 
+export type HeroTheme = 'mos-diner'
+
 export type LandingContextT = {
   landingType: LandingType
   title: string
@@ -19,6 +21,7 @@ export type LandingContextT = {
   renderedPage: string
   currentLayout: string
   heroImage?: string
+  heroTheme?: HeroTheme
   carousels?: Record<
     string,
     Array<{ title: string; intro: string; href: string; category: string[] }>
@@ -32,6 +35,7 @@ export type LandingContextT = {
 type LandingPage = NonNullable<Context['page']> & {
   includedCategories?: string[]
   heroImage?: string
+  heroTheme?: HeroTheme
   product?: string
   permissions?: string
   rawPermissions?: string
@@ -92,6 +96,7 @@ export const getLandingContextFromRequest = async (
     renderedPage: context.renderedPage ?? '',
     currentLayout: context.currentLayoutName ?? '',
     heroImage: page.heroImage || '/assets/images/banner-images/hero-1',
+    ...(page.heroTheme && { heroTheme: page.heroTheme }),
     introLinks: page.introLinks || null,
     carousels,
     journeyTracks,

src/landings/context/LandingContext.tsx

@@ -61,3 +61,28 @@ describe('LandingHero introLinks', () => {
     ).toEqual(['https://github.com/features', '//example.com/x'])
   })
 })
+
+describe('LandingHero heroTheme', () => {
+  function renderHero(props: { heroImage?: string; heroTheme?: 'mos-diner' }) {
+    return load(renderToStaticMarkup(createElement(LandingHero, { title: 'Title', ...props })))
+  }
+
+  test('draws the hero image when no theme is set', () => {
+    const $ = renderHero({ heroImage: '/assets/images/banner-images/hero-1' })
+    expect($('[style*="background-image"]').length).toBe(1)
+    expect($('[data-hero-theme]').length).toBe(0)
+    expect($('[aria-hidden="true"]').length).toBe(0)
+    expect($('.visually-hidden').length).toBe(0)
+  })
+
+  test('replaces the hero image with the theme and its decorative accent', () => {
+    const $ = renderHero({
+      heroImage: '/assets/images/banner-images/hero-1',
+      heroTheme: 'mos-diner',
+    })
+    expect($('[data-hero-theme="mos-diner"]').length).toBe(1)
+    expect($('[style*="background-image"]').length).toBe(0)
+    expect($('[data-hero-theme="mos-diner"] > [aria-hidden="true"]').length).toBe(1)
+    expect($('.visually-hidden').text()).toBe('Title')
+  })
+})