diff --git a/docs/overviews/overview-advertisers.md b/docs/overviews/overview-advertisers.md index 6aaddfec9..ad5248890 100644 --- a/docs/overviews/overview-advertisers.md +++ b/docs/overviews/overview-advertisers.md @@ -6,6 +6,11 @@ sidebar_position: 04 use_banner: true banner_title: UID2 Overview for Advertisers banner_description: Upgrade campaign activation with Unified ID 2.0. +banner_icon: 'advertisers' +banner_text_color: '' +banner_text_color_dark: '' +banner_background_color: '' +banner_background_color_dark: '' displayed_sidebar: sidebarAdvertisers --- diff --git a/docs/overviews/overview-data-providers.md b/docs/overviews/overview-data-providers.md index d0bc36dfa..a0519609b 100644 --- a/docs/overviews/overview-data-providers.md +++ b/docs/overviews/overview-data-providers.md @@ -6,6 +6,11 @@ sidebar_position: 08 use_banner: true banner_title: UID2 Overview for Data Providers banner_description: An identity solution for the future. +banner_icon: 'dataProviders' +banner_text_color: '' +banner_text_color_dark: '' +banner_background_color: '' +banner_background_color_dark: '' displayed_sidebar: sidebarDataProviders --- diff --git a/docs/overviews/overview-dsps.md b/docs/overviews/overview-dsps.md index a5109c378..f47ab2a90 100644 --- a/docs/overviews/overview-dsps.md +++ b/docs/overviews/overview-dsps.md @@ -6,6 +6,11 @@ sidebar_position: 06 use_banner: true banner_title: UID2 Overview for DSPs banner_description: Enable data strategies with a more durable identifier. +banner_icon: 'dsps' +banner_text_color: '' +banner_text_color_dark: '' +banner_background_color: '' +banner_background_color_dark: '' displayed_sidebar: sidebarDSPs --- diff --git a/docs/overviews/overview-publishers.md b/docs/overviews/overview-publishers.md index 7d4f218f0..d5da42f76 100644 --- a/docs/overviews/overview-publishers.md +++ b/docs/overviews/overview-publishers.md @@ -6,6 +6,11 @@ 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: 'publishers' +banner_text_color: '' +banner_text_color_dark: '' +banner_background_color: '' +banner_background_color_dark: '' displayed_sidebar: sidebarPublishers --- diff --git a/package-lock.json b/package-lock.json index 6569ce480..f816e1bc2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13923,15 +13923,16 @@ } }, "node_modules/nanoid": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", "funding": [ { "type": "github", "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "bin": { "nanoid": "bin/nanoid.cjs" }, diff --git a/src/components/DocsBanner/index.tsx b/src/components/DocsBanner/index.tsx index 9b0dde68d..24692e1b5 100644 --- a/src/components/DocsBanner/index.tsx +++ b/src/components/DocsBanner/index.tsx @@ -1,32 +1,71 @@ -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"; +import IconDocuments from "@site/static/img/documents-icon.svg"; +import IconAdvertisers from "@site/static/img/icon-page-advertisers.svg"; +import IconDataProviders from "@site/static/img/icon-page-dataproviders.svg"; +import IconDsps from "@site/static/img/icon-page-dsps.svg"; +import IconPublishers from "@site/static/img/icon-page-publishers.svg"; + +const icons: Record>> = { + documents: IconDocuments, + advertisers: IconAdvertisers, + dataProviders: IconDataProviders, + dsps: IconDsps, + publishers: IconPublishers, +}; type DocsBannerProps = { title: string; description: string; + icon?: string; + textColor?: string; + textColorDark?: string; + backgroundColor?: string; + backgroundColorDark?: string; }; export default function DocsBanner({ title, description, + icon, + textColor, + textColorDark, + backgroundColor, + backgroundColorDark, }: DocsBannerProps): JSX.Element { + const Icon = (icon && icons[icon]) || icons.documents; + + textColor ||= "var(--c-eleven-o-clock)"; // default banner text color + textColorDark ||= "var(--c-off-white)"; // default banner text color dark theme + + backgroundColor ||= "var(--c-dirty-socks)"; // default banner bg color + backgroundColorDark ||= "var(--c-primary-gray)"; // default banner bg color dark theme + //remove the dulpicate html
+ h1 tags within the .markdown React.useEffect(() => { const header = document.querySelector(".markdown > header"); - if (header) { - header.remove(); - } + if (header) header.remove(); }, []); return ( -
+

{title}

{description}

- + +
); } diff --git a/src/components/DocsBanner/styles.module.scss b/src/components/DocsBanner/styles.module.scss index 54e1e7c1a..6ae4b63a6 100644 --- a/src/components/DocsBanner/styles.module.scss +++ b/src/components/DocsBanner/styles.module.scss @@ -3,13 +3,13 @@ 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; h1, p { - color: var(--c-eleven-o-clock); + color: var(--text-docs-banner); // var is set in html styles text-align: center; @media only screen and (min-width: 996px) { @@ -34,11 +34,11 @@ } html[data-theme="dark"] & { - background-color: var(--c-primary-gray); + background-color: var(--bg-docs-banner-dark); // var is set in html styles h1, p { - color: var(--c-off-white); + color: var(--text-docs-banner-dark); // var is set in html styles } } } @@ -55,10 +55,10 @@ .icon { order: 1; margin-bottom: 1.3125rem; - color: var(--c-eleven-o-clock); + color: var(--text-docs-banner); // var is set in html styles html[data-theme="dark"] & { - color: var(--c-off-white); + color: var(--text-docs-banner-dark); // var is set in html styles } @media only screen and (min-width: 996px) { diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx index 7b077cad2..3e9397533 100644 --- a/src/theme/DocItem/Layout/index.tsx +++ b/src/theme/DocItem/Layout/index.tsx @@ -21,6 +21,11 @@ type CustomDocFrontMatter = DocFrontMatter & { use_banner?: boolean; banner_title?: string; banner_description?: string; + banner_icon?: string; + banner_text_color?: string; + banner_text_color_dark?: string; + banner_background_color?: string; + banner_background_color_dark?: string; }; /** @@ -83,7 +88,17 @@ export default function DocItemLayout({ children }: Props): JSX.Element { {docTOC.mobile} {useBanner && ( - + )} {children} diff --git a/static/img/icon-page-advertisers.svg b/static/img/icon-page-advertisers.svg new file mode 100644 index 000000000..64077013e --- /dev/null +++ b/static/img/icon-page-advertisers.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/img/icon-page-dataproviders.svg b/static/img/icon-page-dataproviders.svg new file mode 100644 index 000000000..de3c2a414 --- /dev/null +++ b/static/img/icon-page-dataproviders.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/img/icon-page-dsps.svg b/static/img/icon-page-dsps.svg new file mode 100644 index 000000000..b55d1fc51 --- /dev/null +++ b/static/img/icon-page-dsps.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/static/img/icon-page-publishers.svg b/static/img/icon-page-publishers.svg new file mode 100644 index 000000000..42ada88d6 --- /dev/null +++ b/static/img/icon-page-publishers.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + +