From 008b746ed8bce25bd5e2be7d1b868c54c1f3b984 Mon Sep 17 00:00:00 2001
From: Emily Brick <emilybrick@github.com>
Date: Mon, 24 Feb 2025 23:13:08 -0500
Subject: [PATCH 1/3] added note to component pages and homepages

---
 .../gatsby-theme-doctocat/components/hero.js       | 12 +++++++++++-
 src/components/base-layout.tsx                     | 14 +++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/@primer/gatsby-theme-doctocat/components/hero.js b/src/@primer/gatsby-theme-doctocat/components/hero.js
index 99dde9d80..094a8795d 100644
--- a/src/@primer/gatsby-theme-doctocat/components/hero.js
+++ b/src/@primer/gatsby-theme-doctocat/components/hero.js
@@ -1,12 +1,22 @@
-import {Text, Box, Heading, ThemeProvider} from '@primer/react'
+import {Text, Box, Heading, ThemeProvider, Link} from '@primer/react'
 import React from 'react'
 import {Container} from '@primer/gatsby-theme-doctocat'
+import {Note} from '@primer/gatsby-theme-doctocat'
 
 export default function Hero() {
   return (
     <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
       <Box pt={3}>
         <Container>
+          <Note>
+            <Text sx={{display: 'block'}}>
+              New look, same Primer!{' '}
+              <Link href="https://primer-docs-preview.github.com" target="_blank">
+                Preview the new docs experience here
+              </Link>{' '}
+              and let us know what you think 👀 🎉
+            </Text>
+          </Note>
           <Box
             sx={{
               display: 'flex',
diff --git a/src/components/base-layout.tsx b/src/components/base-layout.tsx
index 7042ea0ec..26d1bed58 100644
--- a/src/components/base-layout.tsx
+++ b/src/components/base-layout.tsx
@@ -1,8 +1,9 @@
-import {Box} from '@primer/react'
+import {Box, Text, Link} from '@primer/react'
 import React from 'react'
 import Head from '@primer/gatsby-theme-doctocat/src/components/head'
 import Header from '@primer/gatsby-theme-doctocat/src/components/header'
 import Sidebar from '@primer/gatsby-theme-doctocat/src/components/sidebar'
+import {Note} from '@primer/gatsby-theme-doctocat'
 
 export function BaseLayout({title, description, children, showSidebar = true}) {
   return (
@@ -16,6 +17,17 @@ export function BaseLayout({title, description, children, showSidebar = true}) {
           </Box>
         ) : null}
         <Box as="main" sx={{minWidth: 0, width: '100%'}} id="skip-nav">
+          <Box sx={{maxWidth: 1200, width: '100%', pt: [4, 5, 6, 7], px: [4, 5, 6, 7], pb: 0, mx: 'auto'}}>
+            <Note>
+              <Text sx={{display: 'block'}}>
+                New look, same Primer!{' '}
+                <Link href="https://primer-docs-preview.github.com" target="_blank">
+                  Preview the new docs experience here
+                </Link>{' '}
+                and let us know what you think 👀 🎉
+              </Text>
+            </Note>
+          </Box>
           {children}
         </Box>
       </Box>

From d4bd575735a263dd4892aa39accca735c7450cca Mon Sep 17 00:00:00 2001
From: Emily Brick <emilybrick@github.com>
Date: Mon, 24 Feb 2025 23:34:15 -0500
Subject: [PATCH 2/3] add back in component layout

---
 .../gatsby-theme-doctocat/components/hero.js  |  4 ++--
 src/components/base-layout.tsx                |  5 ++--
 src/layouts/component-layout.tsx              | 24 ++++++++++++-------
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/@primer/gatsby-theme-doctocat/components/hero.js b/src/@primer/gatsby-theme-doctocat/components/hero.js
index 094a8795d..c83a21b2a 100644
--- a/src/@primer/gatsby-theme-doctocat/components/hero.js
+++ b/src/@primer/gatsby-theme-doctocat/components/hero.js
@@ -10,11 +10,11 @@ export default function Hero() {
         <Container>
           <Note>
             <Text sx={{display: 'block'}}>
-              New look, same Primer!{' '}
+              🎉 👀 New look, same Primer!{' '}
               <Link href="https://primer-docs-preview.github.com" target="_blank">
                 Preview the new docs experience here
               </Link>{' '}
-              and let us know what you think 👀 🎉
+              and let us know what you think.
             </Text>
           </Note>
           <Box
diff --git a/src/components/base-layout.tsx b/src/components/base-layout.tsx
index 26d1bed58..d350db27a 100644
--- a/src/components/base-layout.tsx
+++ b/src/components/base-layout.tsx
@@ -4,6 +4,7 @@ import Head from '@primer/gatsby-theme-doctocat/src/components/head'
 import Header from '@primer/gatsby-theme-doctocat/src/components/header'
 import Sidebar from '@primer/gatsby-theme-doctocat/src/components/sidebar'
 import {Note} from '@primer/gatsby-theme-doctocat'
+import {LinkExternalIcon} from '@primer/octicons-react'
 
 export function BaseLayout({title, description, children, showSidebar = true}) {
   return (
@@ -20,11 +21,11 @@ export function BaseLayout({title, description, children, showSidebar = true}) {
           <Box sx={{maxWidth: 1200, width: '100%', pt: [4, 5, 6, 7], px: [4, 5, 6, 7], pb: 0, mx: 'auto'}}>
             <Note>
               <Text sx={{display: 'block'}}>
-                New look, same Primer!{' '}
+                🎉 👀 New look, same Primer!{' '}
                 <Link href="https://primer-docs-preview.github.com" target="_blank">
                   Preview the new docs experience here
                 </Link>{' '}
-                and let us know what you think 👀 🎉
+                and let us know what you think.
               </Text>
             </Note>
           </Box>
diff --git a/src/layouts/component-layout.tsx b/src/layouts/component-layout.tsx
index 6177616db..09c607e7a 100644
--- a/src/layouts/component-layout.tsx
+++ b/src/layouts/component-layout.tsx
@@ -9,8 +9,8 @@ import {ComponentPageNav} from '../components/component-page-nav'
 import navItems from '@primer/gatsby-theme-doctocat/src/nav.yml'
 
 type NavItemData = {
-  title: string,
-  url?: string,
+  title: string
+  url?: string
   children?: NavItemData[]
 }
 
@@ -45,17 +45,23 @@ export default function ComponentLayout({pageContext, children, path}) {
 
   return (
     <BaseLayout title={title} description={description}>
-      <Box sx={{maxWidth: 1200, width: '100%', p: [4, 5, 6, 7], mx: 'auto'}}>
+      <Box sx={{maxWidth: 1200, width: '100%', pb: [4, 5, 6, 7], px: [4, 5, 6, 7], pt: [2, 3, 4, 5], mx: 'auto'}}>
         {breadcrumbData.length > 1 ? (
           <Breadcrumbs sx={{mb: 4}}>
-            {breadcrumbData.map(item => item.url ? (
-              <Breadcrumbs.Item key={item.url} href={withPrefix(item.url)} selected={path === item.url}>
-                {item.title}
-              </Breadcrumbs.Item>
-            ): null).filter(item => item)}
+            {breadcrumbData
+              .map(item =>
+                item.url ? (
+                  <Breadcrumbs.Item key={item.url} href={withPrefix(item.url)} selected={path === item.url}>
+                    {item.title}
+                  </Breadcrumbs.Item>
+                ) : null,
+              )
+              .filter(item => item)}
           </Breadcrumbs>
         ) : null}
-        <Heading as="h1" sx={{fontSize: 7}}>{title}</Heading>
+        <Heading as="h1" sx={{fontSize: 7}}>
+          {title}
+        </Heading>
         {description ? (
           <Text as="p" sx={{fontSize: 3, m: 0, mb: 3, maxWidth: '60ch'}}>
             {description}

From c29aea4f11c6a519485520f7c4cc506ff1a9d8a1 Mon Sep 17 00:00:00 2001
From: Emily Brick <emilybrick@github.com>
Date: Tue, 25 Feb 2025 10:55:58 -0500
Subject: [PATCH 3/3] update note on hp

---
 .../gatsby-theme-doctocat/components/hero.js  | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/@primer/gatsby-theme-doctocat/components/hero.js b/src/@primer/gatsby-theme-doctocat/components/hero.js
index c83a21b2a..1da4a4393 100644
--- a/src/@primer/gatsby-theme-doctocat/components/hero.js
+++ b/src/@primer/gatsby-theme-doctocat/components/hero.js
@@ -1,22 +1,42 @@
 import {Text, Box, Heading, ThemeProvider, Link} from '@primer/react'
 import React from 'react'
 import {Container} from '@primer/gatsby-theme-doctocat'
-import {Note} from '@primer/gatsby-theme-doctocat'
 
 export default function Hero() {
   return (
     <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
       <Box pt={3}>
         <Container>
-          <Note>
+          {/* Temporary banner before site is decomissioned, it is intended to mirror the Note component that shows up on component pages  */}
+          <Box
+            sx={{
+              backgroundColor: '#ddf4ff', //bgColor-accent-muted
+              borderColor: '#54aeff66', //borderColor-accent-muted
+              borderLeftWidth: '6px',
+              borderLeftStyle: 'solid',
+              borderStyle: 'solid',
+              borderRightWidth: '0',
+              borderTopWidth: '0',
+              borderBottomWidth: 0,
+              padding: 3,
+              borderRadius: 2,
+              marginBottom: 3,
+            }}
+          >
             <Text sx={{display: 'block'}}>
               🎉 👀 New look, same Primer!{' '}
-              <Link href="https://primer-docs-preview.github.com" target="_blank">
+              <Link
+                href="https://primer-docs-preview.github.com"
+                target="_blank"
+                sx={{
+                  color: '#0969da !important',
+                }}
+              >
                 Preview the new docs experience here
               </Link>{' '}
               and let us know what you think.
             </Text>
-          </Note>
+          </Box>
           <Box
             sx={{
               display: 'flex',