refac

sidebars.ts

@@ -14,6 +14,7 @@ import type { SidebarsConfig } from "@docusaurus/plugin-content-docs";
 const sidebars: SidebarsConfig = {
 	// By default, Docusaurus generates a sidebar from the docs folder structure
 	tutorialSidebar: [{ type: "autogenerated", dirName: "." }],
+
 	// pipelines: [
 	// 	{
 	// 		type: "autogenerated",

src/components/SidebarBanners.tsx

@@ -0,0 +1,64 @@
+import { SidebarBanner } from "@site/src/components/Sponsors/SidebarBanner";
+import { useEffect, useState } from "react";
+
+export const SidebarBanners = () => {
+	const items = [
+		{
+			imgSrc: "/sponsors/banners/n8n-banner.png",
+			mobileImgSrc: "/sponsors/banners/n8n-banner-mobile.png",
+			url: "https://n8n.io/",
+			name: "n8n",
+			description:
+				"Does your interface have a backend yet? Try n8n",
+		},
+
+		{
+			imgSrc: "/sponsors/banners/n8n-banner.png",
+			mobileImgSrc: "/sponsors/banners/n8n-banner-mobile.png",
+			url: "https://n8n.io/",
+			name: "n8n",
+			description:
+				"Does your interface have a backend yet? Try n8n",
+		},
+
+		{
+			imgSrc: "/sponsors/banners/warp-banner.png",
+			mobileImgSrc: "/sponsors/banners/warp-banner-mobile.png",
+			url: "https://warp.dev/open-webui",
+			name: "Warp",
+			description:
+				"The intelligent terminal for developers",
+		},
+
+		{
+			imgSrc: "/sponsors/banners/warp-banner.png",
+			mobileImgSrc: "/sponsors/banners/warp-banner-mobile.png",
+			url: "https://warp.dev/open-webui",
+			name: "Warp",
+			description:
+				"The intelligent terminal for developers",
+		},
+
+		{
+			imgSrc: "/sponsors/banners/placeholder.png",
+			mobileImgSrc: "/sponsors/banners/placeholder-mobile.png",
+			url: "https://forms.gle/92mvG3ESYj47zzRL9",
+			name: "Open WebUI",
+			description:
+				"The top banner spot is reserved for Emerald+ Enterprise sponsors",
+		},
+	];
+
+	// Randomly select an item to display
+	const [selectedItemIdx, setSelectedItemIdx] = useState(Math.floor(Math.random() * items.length));
+
+	useEffect(() => {
+		// After mounting update every 5 seconds
+		setInterval(() => {
+			setSelectedItemIdx(Math.floor(Math.random() * items.length));
+		}, 10000); // 10000 ms = 10 seconds
+	}, []);
+
+
+	return <SidebarBanner item={items[selectedItemIdx]} />;
+};

src/components/Sponsors/SidebarBanner.tsx

@@ -0,0 +1,25 @@
+export const SidebarBanner = ({ item }) => {
+	return (
+		<div className="pb-4">
+			<div className="mb-2">
+				<div className="mb-1 text-xs font-semibold text-gray-600 underline dark:text-gray-300">
+					Sponsored by {item.name}
+				</div>
+
+				<a href={item.url} target="_blank">
+				
+					<img
+						className="block w-full rounded-xl h-16 object-cover"
+						loading="lazy"
+						alt={item.name}
+						src={item?.mobileImgSrc || item.imgSrc}
+					/>
+				</a>
+
+				<div className="mt-1 line-clamp-1 text-right text-xs font-semibold text-gray-600 dark:text-gray-300">
+					{item.description}
+				</div>
+			</div>
+		</div>
+	);
+};

src/theme/DocSidebar/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import DocSidebar from '@theme-original/DocSidebar';
+import type DocSidebarType from '@theme/DocSidebar';
+import type {WrapperProps} from '@docusaurus/types';
+
+
+import { SidebarBanners } from "@site/src/components/SidebarBanners";
+
+
+
+type Props = WrapperProps<typeof DocSidebarType>;
+
+export default function DocSidebarWrapper(props: Props): JSX.Element {
+  return (
+    <>
+
+      <div className=" overflow-auto h-full flex flex-col">
+        <div className='h-fit'>
+          <DocSidebar {...props} />
+        </div>
+
+
+        <div className=" px-5 mt-3">
+          <SidebarBanners />
+        </div>
+      </div>
+    </>
+  );
+}