From e5484672308c696cf624b918895c4a32dd6348d2 Mon Sep 17 00:00:00 2001 From: Francis Roberts <111994975+franrob-projects@users.noreply.github.com> Date: Mon, 26 Jan 2026 13:15:52 +0100 Subject: [PATCH 1/3] Add banner support to Admonition component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add banner variant to Admonition component with headline support and reduced bottom padding (mb-0) - Add banner aside to platform index page with durability message - Banner uses orange left border (#FF5416) and transparent background - Special rendering logic for banner variant with headline and content sections 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- src/components/Layout/mdx/Admonition.tsx | 44 +++++++++++++++++++++--- src/pages/docs/platform/index.mdx | 4 +++ 2 files changed, 43 insertions(+), 5 deletions(-) diff --git a/src/components/Layout/mdx/Admonition.tsx b/src/components/Layout/mdx/Admonition.tsx index 0cd499a8d6..5a38d957c8 100644 --- a/src/components/Layout/mdx/Admonition.tsx +++ b/src/components/Layout/mdx/Admonition.tsx @@ -2,12 +2,14 @@ import React from 'react'; import cn from '@ably/ui/core/utils/cn'; import Aside from '../../blocks/dividers/Aside'; -const LEGACY_ADMONITION_TYPES = ['new', 'updated', 'experimental', 'public-preview']; +const LEGACY_ADMONITION_TYPES = ['new', 'updated', 'experimental', 'public-preview', 'evidence']; -type AdmonitionVariant = 'neutral' | 'note' | 'further-reading' | 'important' | 'warning'; +type AdmonitionVariant = 'neutral' | 'note' | 'further-reading' | 'important' | 'warning' | 'banner'; +type LegacyAdmonitionType = 'new' | 'updated' | 'experimental' | 'public-preview' | 'evidence'; interface AdmonitionProps extends React.HTMLAttributes { - 'data-type'?: AdmonitionVariant; + 'data-type'?: AdmonitionVariant | LegacyAdmonitionType; + headline?: string; } const admonitionConfig: Record< @@ -44,15 +46,47 @@ const admonitionConfig: Record< backgroundColor: 'bg-yellow-100 dark:bg-yellow-800', title: 'Warning', }, + banner: { + borderColor: 'border-l-[#FF5416]', + backgroundColor: 'bg-transparent', + title: '', + }, }; -const Admonition: React.FC = ({ 'data-type': dataType = 'note', children, className, ...rest }) => { +const Admonition: React.FC = ({ + 'data-type': dataType = 'note', + headline, + children, + className, + ...rest +}) => { // For 'new', 'updated', 'experimental' types, we use the older Aside component instead of the newer Admonitions component if (LEGACY_ADMONITION_TYPES.includes(dataType)) { return ; } - const { borderColor, backgroundColor, title } = admonitionConfig[dataType]; + const { borderColor, backgroundColor, title } = admonitionConfig[dataType as AdmonitionVariant]; + + // Special handling for banner variant + if (dataType === 'banner') { + return ( + + ); + } return ( + Ably is a highly-scalable serverless WebSocket platform used to power realtime digital experiences. At its core, Ably is a cloud-based Pub/Sub (publish/subscribe) platform-as-a-service (PaaS). It ensures that any messages published to Ably by any device will be received, in realtime, by any number of subscribing devices. From f6568e5e7c3301025669988b2e753a79e7fe1cb1 Mon Sep 17 00:00:00 2001 From: Francis Roberts <111994975+franrob-projects@users.noreply.github.com> Date: Mon, 26 Jan 2026 16:25:00 +0100 Subject: [PATCH 2/3] Restore USP component and banner support from original work MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add Banner component with styling and MDX support - Restore evidence aside support in Admonition component - Update MDXWrapper to include Banner in MDX components - Fix Aside component to properly support evidence type with custom rendering 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- src/components/Layout/MDXWrapper.tsx | 2 + src/components/blocks/banners/Banner.tsx | 19 +++ .../blocks/banners/banners.module.css | 23 ++++ src/components/blocks/banners/index.tsx | 1 + src/components/blocks/dividers/Aside.tsx | 128 ++++++++++++------ 5 files changed, 133 insertions(+), 40 deletions(-) create mode 100644 src/components/blocks/banners/Banner.tsx create mode 100644 src/components/blocks/banners/banners.module.css create mode 100644 src/components/blocks/banners/index.tsx diff --git a/src/components/Layout/MDXWrapper.tsx b/src/components/Layout/MDXWrapper.tsx index 9095e7ffcb..93932bb355 100644 --- a/src/components/Layout/MDXWrapper.tsx +++ b/src/components/Layout/MDXWrapper.tsx @@ -21,6 +21,7 @@ import Table from './mdx/Table'; import { Tiles } from './mdx/tiles'; import { PageHeader } from './mdx/PageHeader'; import Admonition from './mdx/Admonition'; +import { Banner } from '../blocks/banners'; import { Frontmatter, PageContextType } from './Layout'; import { ActivePage } from './utils/nav'; @@ -274,6 +275,7 @@ const MDXWrapper: React.FC = ({ children, pageContext, location , Aside: Admonition, Table, diff --git a/src/components/blocks/banners/Banner.tsx b/src/components/blocks/banners/Banner.tsx new file mode 100644 index 0000000000..332b1dfbb9 --- /dev/null +++ b/src/components/blocks/banners/Banner.tsx @@ -0,0 +1,19 @@ +import { PropsWithChildren } from 'react'; +import { bannerContainer, bannerContent } from './banners.module.css'; + +type BannerProps = PropsWithChildren<{ + headline?: string; +}>; + +const Banner = ({ children, headline }: BannerProps) => { + return ( +
+
+ {headline &&

{headline}

} +
{children}
+
+
+ ); +}; + +export default Banner; diff --git a/src/components/blocks/banners/banners.module.css b/src/components/blocks/banners/banners.module.css new file mode 100644 index 0000000000..08b3de2d8a --- /dev/null +++ b/src/components/blocks/banners/banners.module.css @@ -0,0 +1,23 @@ +.bannerContainer { + display: flex; + border-left: 1.5px solid #FF5416; + background-color: transparent; + border-radius: 0 8px 8px 0; + margin: 24px 0; + padding: 24px; + width: 100%; +} + +.bannerContent { + flex: 1; +} + +.bannerContent h3 { + margin-bottom: 12px; + color: #1a1a1a; +} + +.bannerContent p { + margin: 0; + line-height: 1.6; +} \ No newline at end of file diff --git a/src/components/blocks/banners/index.tsx b/src/components/blocks/banners/index.tsx new file mode 100644 index 0000000000..a35bc4b49d --- /dev/null +++ b/src/components/blocks/banners/index.tsx @@ -0,0 +1 @@ +export { default as Banner } from './Banner'; diff --git a/src/components/blocks/dividers/Aside.tsx b/src/components/blocks/dividers/Aside.tsx index 151a323bad..394b0f1f46 100644 --- a/src/components/blocks/dividers/Aside.tsx +++ b/src/components/blocks/dividers/Aside.tsx @@ -23,53 +23,101 @@ type AsideProps = PropsWithChildren<{ attribs: { 'data-type': string; className?: string }; }>; +const renderImportantAside = () => ( + <> +   + + + Important + + +); + +const renderFurtherReadingAside = () => ( + <> +   + + + Further Reading + + +); + +const renderEvidenceAside = () => ( + <> + +   + + + + + + Evidence + + +); + +const renderVersioningAside = (attribs: { 'data-type': string; className?: string }) => ( + + {attribs['data-type']} + +); + +const renderNoteAside = () => ( + <> +   + + + Note + + +); + const Aside = ({ children, attribs }: AsideProps) => { - const isVersioningInfo: boolean = Object.keys(versioningColors).includes(attribs?.[`data-type`] ?? ''); + const dataType = attribs?.['data-type']; + const isVersioningInfo = Boolean(dataType && Object.keys(versioningColors).includes(dataType)); + + const renderAsideContent = () => { + if (!attribs) { + return renderNoteAside(); + } + + if (dataType === 'important') { + return renderImportantAside(); + } + if (dataType === 'further-reading') { + return renderFurtherReadingAside(); + } + if (dataType === 'evidence') { + return renderEvidenceAside(); + } + if (isVersioningInfo) { + return renderVersioningAside(attribs); + } + + return renderNoteAside(); + }; return ( -