add codes, test colors, icons

docs/overviews/overview-advertisers.md

@@ -6,6 +6,9 @@ sidebar_position: 04
 use_banner: true
 banner_title: UID2 Overview for Advertisers
 banner_description: Upgrade campaign activation with Unified ID 2.0.
+banner_icon: 'documents'
+banner_background_color: '#7085D4'
+banner_background_color_dark: '#7085D4'
 displayed_sidebar: sidebarAdvertisers
 ---
 

docs/overviews/overview-data-providers.md

@@ -6,6 +6,9 @@ sidebar_position: 08
 use_banner: true
 banner_title: UID2 Overview for Data Providers
 banner_description: An identity solution for the future.
+banner_icon: 'documents'
+banner_background_color: '#10692E'
+banner_background_color_dark: '#10692E'
 displayed_sidebar: sidebarDataProviders
 ---
 

docs/overviews/overview-dsps.md

@@ -6,6 +6,9 @@ sidebar_position: 06
 use_banner: true
 banner_title: UID2 Overview for DSPs
 banner_description: Enable data strategies with a more durable identifier.
+banner_icon: 'documents'
+banner_background_color: '#0459FC'
+banner_background_color_dark: '#0459FC'
 displayed_sidebar: sidebarDSPs
 ---
 

docs/overviews/overview-publishers.md

@@ -6,11 +6,13 @@ sidebar_position: 02
 use_banner: true
 banner_title: UID2 Overview for Publishers
 banner_description: Maintain audience targeting in the ever-changing advertising industry for better impression monetization and more relevance.
+banner_icon: 'documents'
+banner_background_color: '#035959'
+banner_background_color_dark: '#035959'
 displayed_sidebar: sidebarPublishers
 ---
 
 import IntegratingWithSSO from '/docs/snippets/_integrating-with-sso.mdx';
-
 import Link from '@docusaurus/Link';
 
 As a publisher, you can benefit from the cross-device presence of Unified ID 2.0 (UID2) and take advantage of a consistent identity fabric on all your inventory.

i18n/ja/docusaurus-plugin-content-docs/current/overviews/overview-advertisers.md

@@ -6,6 +6,9 @@ sidebar_position: 04
 use_banner: true
 banner_title: 広告主向け UID2 の概要
 banner_description: Unified ID 2.0 でキャンペーンのアクティベーションをアップグレードしましょう。
+banner_icon: 'documents'
+banner_background_color: '#7085D4'
+banner_background_color_dark: '#7085D4'
 displayed_sidebar: sidebarAdvertisers
 ---
 

i18n/ja/docusaurus-plugin-content-docs/current/overviews/overview-data-providers.md

@@ -6,6 +6,9 @@ sidebar_position: 08
 use_banner: true
 banner_title:  データプロバイダー向け UID2 の概要
 banner_description: 未来のためのIDソリューション。
+banner_icon: 'documents'
+banner_background_color: '#10692E'
+banner_background_color_dark: '#10692E'
 displayed_sidebar: sidebarDataProviders
 ---
 

i18n/ja/docusaurus-plugin-content-docs/current/overviews/overview-dsps.md

@@ -6,6 +6,9 @@ sidebar_position: 06
 use_banner: true
 banner_title: UID2 Overview for DSPs
 banner_description: より耐久性のある識別子でデータ戦略を可能に。
+banner_icon: 'documents'
+banner_background_color: '#0459FC'
+banner_background_color_dark: '#0459FC'
 displayed_sidebar: sidebarDSPs
 ---
 

i18n/ja/docusaurus-plugin-content-docs/current/overviews/overview-publishers.md

@@ -6,6 +6,9 @@ sidebar_position: 02
 use_banner: true
 banner_title: パブリッシャー向け UID2 概要
 banner_description: 変化し続ける広告業界においてオーディエンスターゲティングを維持し、より良いインプレッション収益化と関連性の向上を実現。
+banner_icon: 'documents'
+banner_background_color: '#035959'
+banner_background_color_dark: '#035959'
 displayed_sidebar: sidebarPublishers
 ---
 

src/components/DocsBanner/index.tsx

@@ -1,32 +1,54 @@
-import React from "react";
+import React, { CSSProperties, ComponentType, SVGProps } from "react";
 import clsx from "clsx";
 import styles from "./styles.module.scss";
 import DocumentsSvg from "@site/static/img/documents-icon.svg";
 
+const icons: Record<string, ComponentType<SVGProps<SVGSVGElement>>> = {
+  documents: DocumentsSvg,
+};
+
 type DocsBannerProps = {
   title: string;
   description: string;
+  icon?: string;
+  backgroundColor?: string;
+  backgroundColorDark?: string;
 };
 
 export default function DocsBanner({
   title,
   description,
+  icon,
+  backgroundColor,
+  backgroundColorDark,
 }: DocsBannerProps): JSX.Element {
+  const Icon = (icon && icons[icon]) || icons.documents;
+
+  backgroundColor ||= "var(--c-dirty-socks)"; // default banner bg color
+  backgroundColorDark ||= "var(--c-primary-gray)"; // default banner bg color dark theme
+
   //remove the dulpicate html <header> + h1 tags within the .markdown
   React.useEffect(() => {
     const header = document.querySelector(".markdown > header");
-    if (header) {
-      header.remove();
-    }
+    if (header) header.remove();
   }, []);
 
   return (
-    <header className={clsx(styles.docsBanner)}>
+    <header
+      className={clsx(styles.docsBanner)}
+      style={
+        {
+          "--bg-docs-banner": backgroundColor,
+          "--bg-docs-banner-dark": backgroundColorDark,
+        } as CSSProperties
+      }
+    >
       <div className={styles.docsBannerLeft}>
         <h1 className="type-gamma">{title}</h1>
         <p className="type-paragraph">{description}</p>
       </div>
-      <DocumentsSvg className={styles.icon} />
+
+      <Icon className={styles.icon} />
     </header>
   );
 }

src/components/DocsBanner/styles.module.scss

@@ -3,7 +3,7 @@
   padding: 1.25rem;
   display: flex;
   flex-direction: column;
-  background-color: var(--c-dirty-socks);
+  background-color: var(--bg-docs-banner); // var is set in html styles
   margin-bottom: 1.875rem;
   align-items: center;
 

src/theme/DocItem/Layout/index.tsx

@@ -21,6 +21,9 @@ type CustomDocFrontMatter = DocFrontMatter & {
   use_banner?: boolean;
   banner_title?: string;
   banner_description?: string;
+  banner_icon?: string;
+  banner_background_color?: string;
+  banner_background_color_dark?: string;
 };
 
 /**
@@ -83,7 +86,15 @@ export default function DocItemLayout({ children }: Props): JSX.Element {
             {docTOC.mobile}
             <DocBreadcrumbs />
             {useBanner && (
-              <DocsBanner title={bannerTitle} description={bannerDescription} />
+              <DocsBanner
+                title={bannerTitle}
+                description={bannerDescription}
+                icon={customFrontMatter.banner_icon}
+                backgroundColor={customFrontMatter.banner_background_color}
+                backgroundColorDark={
+                  customFrontMatter.banner_background_color_dark
+                }
+              />
             )}
             <DocVersionBadge />
             <DocItemContent>{children}</DocItemContent>
@@ -95,4 +106,4 @@ export default function DocItemLayout({ children }: Props): JSX.Element {
       {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
     </div>
   );
-}
+}