+
+ );
+}
diff --git a/hindsight-docs/src/components/SupportedGrids.tsx b/hindsight-docs/src/components/SupportedGrids.tsx
index 6d28cbea..61d73aef 100644
--- a/hindsight-docs/src/components/SupportedGrids.tsx
+++ b/hindsight-docs/src/components/SupportedGrids.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import type {IconType} from 'react-icons';
import {IconGrid} from './IconGrid';
-import {SiPython, SiGo, SiOpenai, SiAnthropic, SiGooglegemini, SiOllama, SiCrewai, SiPydantic, SiVercel} from 'react-icons/si';
+import {SiPython, SiGo, SiOpenai, SiAnthropic, SiGooglegemini, SiOllama} from 'react-icons/si';
import {LuTerminal, LuPlug, LuZap, LuBrainCog, LuSparkles, LuGlobe} from 'react-icons/lu';
const OpenAICompatibleIcon: IconType = ({size = 28, ...props}) => (
@@ -27,22 +27,6 @@ export function ClientsGrid() {
);
}
-export function IntegrationsGrid() {
- return (
- {title}
+ {subtitle &&{subtitle}
} +
-('all');
+
+ const integrations = integrationsData.integrations as Integration[];
+
+ const filtered = useMemo(() => {
+ const q = search.toLowerCase().trim();
+ return integrations.filter((i) => {
+ if (selectedType !== 'all' && i.type !== selectedType) return false;
+ if (q && !i.name.toLowerCase().includes(q) && !i.description.toLowerCase().includes(q)) return false;
+ return true;
+ });
+ }, [integrations, search, selectedType]);
+
+ const officialCount = integrations.filter((i) => i.type === 'official').length;
+ const communityCount = integrations.filter((i) => i.type === 'community').length;
+
+ return (
+
+
+ {/* Full-width hero with its own background */}
+
+ );
+}
diff --git a/hindsight-docs/src/theme/BlogListPage/index.tsx b/hindsight-docs/src/theme/BlogListPage/index.tsx
index 63f6a928..fd67b6b7 100644
--- a/hindsight-docs/src/theme/BlogListPage/index.tsx
+++ b/hindsight-docs/src/theme/BlogListPage/index.tsx
@@ -3,6 +3,7 @@ import Link from '@docusaurus/Link';
import Layout from '@theme/Layout';
import type {Props} from '@theme/BlogListPage';
import type {PropBlogPostContent} from '@docusaurus/plugin-content-blog';
+import PageHero from '@site/src/components/PageHero';
import styles from './styles.module.css';
const CLOUD_TAG = 'hindsight-cloud';
@@ -70,10 +71,7 @@ export default function BlogListPage({items, metadata}: Props): React.ReactEleme
return (
-
-
+
diff --git a/hindsight-docs/src/theme/BlogListPage/styles.module.css b/hindsight-docs/src/theme/BlogListPage/styles.module.css
index 7a9341e7..8ad6c526 100644
--- a/hindsight-docs/src/theme/BlogListPage/styles.module.css
+++ b/hindsight-docs/src/theme/BlogListPage/styles.module.css
@@ -1,33 +1,7 @@
.blogPage {
max-width: 1280px;
margin: 0 auto;
- padding: 4rem 2rem 6rem;
-}
-
-/* ── Header ─────────────────────────────────────── */
-.header {
- text-align: center;
- margin-bottom: 4rem;
-}
-
-.headerTitle {
- font-size: 3rem;
- font-weight: 800;
- background: linear-gradient(135deg, #0074d9, #009296);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- margin-bottom: 0.75rem;
- line-height: 1.15;
- letter-spacing: -0.03em;
-}
-
-.headerSubtitle {
- font-size: 1.05rem;
- color: var(--ifm-color-emphasis-600);
- max-width: 520px;
- margin: 0 auto;
- line-height: 1.7;
+ padding: 2rem 2rem 6rem;
}
/* ── Section ─────────────────────────────────────── */
@@ -93,9 +67,6 @@
gap: 2rem;
}
- .headerTitle {
- font-size: 2.25rem;
- }
}
/* ── Card ────────────────────────────────────────── */
diff --git a/hindsight-docs/src/theme/Navbar/index.tsx b/hindsight-docs/src/theme/Navbar/index.tsx
index 4509c6f3..48ce38ad 100644
--- a/hindsight-docs/src/theme/Navbar/index.tsx
+++ b/hindsight-docs/src/theme/Navbar/index.tsx
@@ -1,15 +1,11 @@
import React, {type ReactNode} from 'react';
import NavbarLayout from '@theme/Navbar/Layout';
import NavbarContent from '@theme/Navbar/Content';
-import IntegrationsBanner from '@site/src/components/IntegrationsBanner';
export default function Navbar(): ReactNode {
return (
- <>
-
-
-
+
);
}
diff --git a/hindsight-docs/versioned_docs/version-0.4/developer/api/quickstart.mdx b/hindsight-docs/versioned_docs/version-0.4/developer/api/quickstart.mdx
index 2f6bab98..eebba331 100644
--- a/hindsight-docs/versioned_docs/version-0.4/developer/api/quickstart.mdx
+++ b/hindsight-docs/versioned_docs/version-0.4/developer/api/quickstart.mdx
@@ -9,7 +9,7 @@ Get up and running with Hindsight in 60 seconds.
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeSnippet from '@site/src/components/CodeSnippet';
-import {ClientsGrid, IntegrationsGrid} from '@site/src/components/SupportedGrids';
+import {ClientsGrid} from '@site/src/components/SupportedGrids';
{/* Import raw source files */}
import quickstartPy from '!!raw-loader!@site/examples/api/quickstart.py';
@@ -107,7 +107,7 @@ curl -fsSL https://hindsight.vectorize.io/get-cli | bash
## Integrations
-
-
-
## Recipes
Cookbook
-- Practical examples and complete applications built with Hindsight. -
-
+ {integration.icon && 
}
+
+ {integration.type === 'official' ? 'Official' : 'Community'}
+
+
+
+
+ {integration.name}
+{integration.description}
+
+ {integration.type === 'official' ? (
+
+ 
+ Hindsight Team
+
+ ) : (
+
+ 
+ @{integration.by}
+
+ )}
+
+
+ );
+}
+
+export default function IntegrationsHub(): React.ReactElement {
+ const [search, setSearch] = useState('');
+ const [selectedType, setSelectedType] = useState
+ @{integration.by}
+
+ )}
+
+
+
+ {/* Scrolling banner */}
+ Integrations Hub
++ Connect Hindsight to your stack. Browse official integrations and community-built connectors. +
+ +
+ setSearch(e.target.value)}
+ aria-label="Search integrations"
+ autoComplete="off"
+ />
+ {search && (
+
+ )}
+
+
+
+ {officialCount} official
+ ·
+ {communityCount} community
+
+
+
+
+
+
+ {filtered.length === 0 ? (
+
+ {(['all', 'official', 'community'] as const).map((t) => (
+
+ ))}
+
+ {filtered.length} integration{filtered.length !== 1 ? 's' : ''}
+
+
+ ) : (
+ No integrations match your search.
+ +
+ {filtered.map((integration) => (
+
+ )}
+
+
+
+
+
+ Built something with Hindsight?
++ Share your integration with the community. Open a pull request and add your entry to the integrations list. +
+ + Submit an integration → + +{blogTitle}
- {blogDescription &&{blogDescription}
} -