chore: banner on blog

src/components/contact/index.tsx

@@ -5,7 +5,11 @@ import Announcement from "@site/src/components/shared/Announcement"
 const ContactPage = (): JSX.Element => {
   return (
     <>
-      <Announcement text={"📣 Catch Us at GraphQLConf 2024 • September 10-12 • San Francisco • "} refLink={"https://graphql.org/conf/2024/schedule/870876ffad45b79d11e09393e7f22587/"} refText={" Know more → "}/>
+      <Announcement
+        text={"📣 Catch Us at GraphQLConf 2024 • September 10-12 • San Francisco • "}
+        refLink={"https://graphql.org/conf/2024/schedule/870876ffad45b79d11e09393e7f22587/"}
+        refText={" Know more → "}
+      />
       <Hello />
     </>
   )

src/components/home/index.tsx

@@ -10,7 +10,11 @@ import Announcement from "../shared/Announcement"
 const HomePage = (): JSX.Element => {
   return (
     <div className="">
-      <Announcement text={"📣 Catch Us at GraphQLConf 2024 • September 10-12 • San Francisco • "} refLink={"https://graphql.org/conf/2024/schedule/870876ffad45b79d11e09393e7f22587/"} refText={" Know more → "}/>
+      <Announcement
+        text={"📣 Catch Us at GraphQLConf 2024 • September 10-12 • San Francisco • "}
+        refLink={"https://graphql.org/conf/2024/schedule/870876ffad45b79d11e09393e7f22587/"}
+        refText={" Know more → "}
+      />
       <Banner />
       <Configuration />
       <Testimonials />

src/components/playground/index.tsx

@@ -3,10 +3,16 @@ import Playground from "./Playground"
 import Announcement from "@site/src/components/shared/Announcement"
 
 const PlaygroundPage = (): JSX.Element => {
-  return <>
-    <Announcement text={"📣 Catch Us at GraphQLConf 2024 • September 10-12 • San Francisco • "} refLink={"https://graphql.org/conf/2024/schedule/870876ffad45b79d11e09393e7f22587/"} refText={" Know more → "}/>
-    <Playground />
-  </>
+  return (
+    <>
+      <Announcement
+        text={"📣 Catch Us at GraphQLConf 2024 • September 10-12 • San Francisco • "}
+        refLink={"https://graphql.org/conf/2024/schedule/870876ffad45b79d11e09393e7f22587/"}
+        refText={" Know more → "}
+      />
+      <Playground />
+    </>
+  )
 }
 
 export default PlaygroundPage

src/components/shared/Announcement.tsx

@@ -1,23 +1,25 @@
-import React from "react";
+import React from "react"
 
 interface AnnouncementProps {
-  text: string;
-  refLink?: string;
-  refText?: string;
+  text: string
+  refLink?: string
+  refText?: string
 }
 
-const Announcement: React.FC<AnnouncementProps> = ({ text, refLink, refText }) => {
+const Announcement: React.FC<AnnouncementProps> = ({text, refLink, refText}) => {
   return (
     <div className="w-full h-[39px] bg-black text-white flex items-center justify-center">
       <div className="text-sm sm:text-base md:text-lg font-bold">
         {text}
         {refLink && refText && (
-          <a className="text-tailCall-yellow font-bold" href={refLink}> {refText} </a>
-        )
-        }
+          <a className="text-tailCall-yellow font-bold" href={refLink}>
+            {" "}
+            {refText}{" "}
+          </a>
+        )}
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Announcement;
+export default Announcement

src/theme/BlogLayout/index.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import clsx from "clsx"
+import Layout from "@theme/Layout"
+import BlogSidebar from "@theme/BlogSidebar"
+
+import type {Props} from "@theme/BlogLayout"
+import Announcement from "@site/src/components/shared/Announcement"
+
+export default function BlogLayout(props: Props): JSX.Element {
+  const {sidebar, toc, children, ...layoutProps} = props
+  const hasSidebar = sidebar && sidebar.items.length > 0
+
+  return (
+    <Layout {...layoutProps}>
+      <Announcement
+        text={"📣 Catch Us at GraphQLConf 2024 • September 10-12 • San Francisco • "}
+        refLink={"https://graphql.org/conf/2024/schedule/870876ffad45b79d11e09393e7f22587/"}
+        refText={" Know more → "}
+      />
+      <div className="container margin-vert--lg">
+        <div className="row">
+          <BlogSidebar sidebar={sidebar} />
+          <main
+            className={clsx("col", {
+              "col--7": hasSidebar,
+              "col--9 col--offset-1": !hasSidebar,
+            })}
+          >
+            {children}
+          </main>
+          {toc && <div className="col col--2">{toc}</div>}
+        </div>
+      </div>
+    </Layout>
+  )
+}