Pages banner (cloudflare#22134)

* Add sparkles to migration guide and support dismissible banner

* Add banner to Pages

Author: GregBrimble

astro.config.ts

@@ -108,6 +108,7 @@ export default defineConfig({
 					"https://github.com/cloudflare/cloudflare-docs/edit/production/",
 			},
 			components: {
+				Banner: "./src/components/overrides/Banner.astro",
 				Footer: "./src/components/overrides/Footer.astro",
 				Head: "./src/components/overrides/Head.astro",
 				Header: "./src/components/overrides/Header.astro",

package-lock.json

@@ -41,7 +41,9 @@
 		"@expressive-code/plugin-collapsible-sections": "0.41.2",
 		"@floating-ui/react": "0.27.7",
 		"@iarna/toml": "2.2.5",
+		"@lottiefiles/dotlottie-react": "0.13.5",
 		"@marsidev/react-turnstile": "1.1.0",
+		"@nanostores/react": "1.0.0",
 		"@octokit/webhooks-types": "7.6.1",
 		"@stoplight/json-schema-tree": "4.0.0",
 		"@tailwindcss/postcss": "4.1.4",
@@ -82,6 +84,7 @@
 		"mdast-util-mdx-expression": "2.0.1",
 		"mermaid": "11.6.0",
 		"micromark-extension-mdxjs": "3.0.0",
+		"nanostores": "1.0.1",
 		"node-html-parser": "7.0.1",
 		"openapi-types": "12.1.3",
 		"parse-duration": "2.1.4",

package.json

@@ -1,3 +1,24 @@
+diff --git a/node_modules/@astrojs/starlight/components/SidebarSublist.astro b/node_modules/@astrojs/starlight/components/SidebarSublist.astro
+index a027f56..7e372d7 100644
+--- a/node_modules/@astrojs/starlight/components/SidebarSublist.astro
++++ b/node_modules/@astrojs/starlight/components/SidebarSublist.astro
+@@ -4,6 +4,7 @@ import type { SidebarEntry } from '../utils/routing/types';
+ import Icon from '../user-components/Icon.astro';
+ import Badge from '../user-components/Badge.astro';
+ import SidebarRestorePoint from './SidebarRestorePoint.astro';
++import SidebarIcon from "~/components/SidebarIcon.astro"
+ 
+ interface Props {
+ 	sublist: SidebarEntry[];
+@@ -24,7 +25,7 @@ const { sublist, nested } = Astro.props;
+ 						class:list={[{ large: !nested }, entry.attrs.class]}
+ 						{...entry.attrs}
+ 					>
+-						<span>{entry.label}</span>
++						<span>{entry.icon && <SidebarIcon {...entry.icon} />}{entry.label}</span>
+ 						{entry.badge && (
+ 							<Badge
+ 								variant={entry.badge.variant}
 diff --git a/node_modules/@astrojs/starlight/user-components/Tabs.astro b/node_modules/@astrojs/starlight/user-components/Tabs.astro
 index 6d173df..61eed80 100644
 --- a/node_modules/@astrojs/starlight/user-components/Tabs.astro

patches/@astrojs+starlight+0.34.1.patch

@@ -0,0 +1,90 @@
+import { useEffect, useState, type CSSProperties } from "react";
+
+import { map } from "nanostores";
+import { useStore } from "@nanostores/react";
+
+const dismissedMap = map<Record<string, boolean>>({});
+export const isDismissed = (id: string) => dismissedMap.get()[id];
+export const setIsDismissed = (id: string, value: boolean) =>
+	dismissedMap.setKey(id, value);
+
+const loadInitialValue = (id: string) => {
+	if (typeof localStorage === "undefined") return false;
+
+	const dismissValue = localStorage.getItem(`dismisser-${id}`);
+
+	if (dismissValue) {
+		if (new Date(dismissValue) > new Date()) {
+			return true;
+		} else {
+			localStorage.removeItem(`dismisser-${id}`);
+		}
+	}
+
+	return false;
+};
+
+export const useDismissible = (id: string) => {
+	const store = useStore(dismissedMap);
+
+	return {
+		isDismissed: store[id],
+		dismiss: (days: number) => {
+			setIsDismissed(id, true);
+			localStorage.setItem(
+				`dismisser-${id}`,
+				new Date(Date.now() + days * 24 * 60 * 60 * 1000).toISOString(),
+			);
+		},
+	};
+};
+
+export const Dismisser = ({
+	id,
+	days,
+	children,
+}: {
+	id: string;
+	days: number;
+	children: React.ReactNode;
+}) => {
+	const { dismiss } = useDismissible(id);
+
+	return (
+		<span
+			onClick={() => {
+				dismiss(days);
+			}}
+		>
+			{children}
+		</span>
+	);
+};
+
+export const Dismissible = ({
+	id,
+	defaultDisplay,
+	children,
+}: {
+	id: string;
+	defaultDisplay?: CSSProperties["display"];
+	children: React.ReactNode;
+}) => {
+	const [loaded, setLoaded] = useState(false);
+	const store = useStore(dismissedMap);
+
+	useEffect(() => {
+		setIsDismissed(id, loadInitialValue(id));
+		setLoaded(true);
+	}, []);
+
+	return (
+		<span
+			style={{
+				display: !loaded ? defaultDisplay : store[id] ? "none" : undefined,
+			}}
+		>
+			{children}
+		</span>
+	);
+};

src/components/Dismissible.tsx

@@ -0,0 +1,35 @@
+---
+import { z } from "astro:schema";
+import { SidebarIconSchema } from "~/schemas/types/sidebar";
+import { DotLottieWorkerReact } from "@lottiefiles/dotlottie-react";
+
+type Props = z.infer<typeof props>;
+
+const props = SidebarIconSchema();
+
+let iconProps = props.parse(Astro.props);
+
+// https://angel-rs.github.io/css-color-filter-generator/
+const filter =
+	iconProps?.color === "primary"
+		? "brightness(0) saturate(100%) invert(60%) sepia(90%) saturate(2312%) hue-rotate(347deg) brightness(99%) contrast(95%)" // --orange-accent-200
+		: undefined;
+---
+
+{
+	iconProps?.lottieLink && (
+		<DotLottieWorkerReact
+			style={{
+				filter,
+				height: "17px", // if someone smarter than me can make this properly text height, please go for it
+				width: "17px",
+				marginRight: "0.5em",
+				float: "left",
+			}}
+			src={iconProps.lottieLink}
+			loop
+			autoplay
+			client:load
+		/>
+	)
+}