From 14c7d3ae42390a4961d456c0f4314346764dc64d Mon Sep 17 00:00:00 2001
From: amit <amitksingh1490@gmail.com>
Date: Sat, 24 Aug 2024 13:01:51 +0530
Subject: [PATCH] chore: banner on blog

---
 src/components/contact/index.tsx       |  6 ++++-
 src/components/home/index.tsx          |  6 ++++-
 src/components/playground/index.tsx    | 14 +++++++---
 src/components/shared/Announcement.tsx | 24 +++++++++--------
 src/theme/BlogLayout/index.tsx         | 36 ++++++++++++++++++++++++++
 5 files changed, 69 insertions(+), 17 deletions(-)
 create mode 100644 src/theme/BlogLayout/index.tsx

diff --git a/src/components/contact/index.tsx b/src/components/contact/index.tsx
index dddbaaaa20..87cb7f7dd7 100644
--- a/src/components/contact/index.tsx
+++ b/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 />
     </>
   )
diff --git a/src/components/home/index.tsx b/src/components/home/index.tsx
index 9cfd6416d5..b05e3a00c0 100644
--- a/src/components/home/index.tsx
+++ b/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 />
diff --git a/src/components/playground/index.tsx b/src/components/playground/index.tsx
index 184253c521..1c87f2469a 100644
--- a/src/components/playground/index.tsx
+++ b/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
diff --git a/src/components/shared/Announcement.tsx b/src/components/shared/Announcement.tsx
index 3fbd711c05..f2ea428674 100644
--- a/src/components/shared/Announcement.tsx
+++ b/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;
\ No newline at end of file
+export default Announcement
diff --git a/src/theme/BlogLayout/index.tsx b/src/theme/BlogLayout/index.tsx
new file mode 100644
index 0000000000..ea34f56e28
--- /dev/null
+++ b/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>
+  )
+}