From ec57f86a809fe3340e4116fde5c01513c51248b9 Mon Sep 17 00:00:00 2001
From: Trevor Manz <trevor.j.manz@gmail.com>
Date: Mon, 29 Jul 2024 15:13:49 -0400
Subject: [PATCH] docs: Add integrations section (#636)

---
 docs/src/components/IntegrationsGallery.astro | 45 +++++++++++++++++++
 docs/src/pages/en/community.mdx               |  9 ++++
 2 files changed, 54 insertions(+)
 create mode 100644 docs/src/components/IntegrationsGallery.astro

diff --git a/docs/src/components/IntegrationsGallery.astro b/docs/src/components/IntegrationsGallery.astro
new file mode 100644
index 00000000..f4eb77a6
--- /dev/null
+++ b/docs/src/components/IntegrationsGallery.astro
@@ -0,0 +1,45 @@
+---
+type Integration = {
+	url: string;
+	repo: string;
+	logo: string;
+	status: "implemented" | "planned";
+};
+
+let integrations = [
+	{
+		repo: "marimo-team/marimo",
+		url: "https://github.com/marimo-team/marimo",
+		logo: "https://raw.githubusercontent.com/marimo-team/marimo/main/docs/_static/marimo-logotype-thick.svg",
+		status: "implemented",
+	},
+	{
+		repo: "executablebooks/MyST-Parser",
+		url: "https://github.com/executablebooks/MyST-Parser",
+		logo: "https://raw.githubusercontent.com/executablebooks/MyST-Parser/master/docs/_static/logo-wide.svg",
+		status: "planned",
+	},
+] satisfies Array<Integration>;
+---
+
+<div class="flex gap-4" id="integration">
+
+	{integrations.map(({ url, repo, logo, status }) => (
+		<div class="relative w-fit h-fit">
+			<a
+				class="w-28 h-28 p-5 group flex bg-teal-50 border border-teal-200 rounded-lg hover:bg-teal-100 transition duration-100 ease-in-out"
+				class:list={[status === "implemented" ? "opacity-100" : "opacity-50"]}
+				href={url}
+				aria-label={`View ${repo} on GitHub`}
+			>
+				<img class="image-preview w-full" src={logo} alt={repo} />
+				{status === "planned" && (
+					<span class="w-full text-black absolute text-center left-0 -bottom-7 rounded-lg">
+						in progress
+					</span>
+				)}
+			</a>
+		</div>
+	))}
+
+</div>
diff --git a/docs/src/pages/en/community.mdx b/docs/src/pages/en/community.mdx
index 7645a42b..62243e9e 100644
--- a/docs/src/pages/en/community.mdx
+++ b/docs/src/pages/en/community.mdx
@@ -8,8 +8,17 @@ image:
     alt: "Jupyter notebook with several anywidgets",
   }
 ---
+import IntegrationsGallery from "../../components/IntegrationsGallery.astro"
 import WidgetGallery from "../../components/WidgetGallery.astro"
 
+## Integrations
+
+Several platforms have adopted <u>_native_</u> support for **anywidget**. This
+means that you can use **anywidgets** in more places than traditional Jupyter
+Widgets:
+
+<IntegrationsGallery />
+
 ## Widgets Gallery
 
 **anywidget** powers several [open source