release 3.2.4 (#1098)

* remove sections and add redirects; (#1081)

* fix linting

* add additional redirect for old stacks.js

* feat: chainhooks v2 (#1086)

* initial v2 migration

* add proxy route

* add provider for api credentials

* update utils

* update content

* update playground components to use api key

* update layouts and components

* add chainhook api to openapi scripts

* add es docs

* whitelist domains for proxy

* update migration guides

* update cards to use beta badges

* add custom sidebar labels

* update docskit components

* update chainhook content

* update translation lockfile

* chore: lint fixes

* update content

* locale updates

* minor updates / link updates

* update redirects

* update locale lock file

* minor edits

* update locale lock file

* content cleanup

* copy changes

Author: ryanwaits

app/[locale]/(home)/_pages/page.en.tsx

@@ -57,6 +57,7 @@ export default function HomePage() {
             <Cards>
               <SmallCard
                 icon={<Chainhook />}
+                badge="beta"
                 href="/tools/chainhook"
                 title="Chainhook"
                 description="Create custom event streams and triggers for real-time blockchain data processing."
@@ -135,12 +136,6 @@ export default function HomePage() {
                 title="Guides"
                 description="Step-by-step walkthroughs for building on Bitcoin layers."
               />
-              <SmallCard
-                icon={<Braces />}
-                href="/resources/snippets"
-                title="Snippets"
-                description="Reusable code examples for common Stacks and Bitcoin tasks."
-              />
               <SmallCard
                 icon={<Database />}
                 href="/resources/archive"

app/[locale]/(home)/_pages/page.es.tsx

@@ -17,18 +17,6 @@ export default function ResourcesPage() {
               title="Guides"
               description="Guides for building on Stacks and Bitcoin."
             />
-            {/* <IndexCard
-              icon={<Braces />}
-              href="/resources/templates"
-              title="Project templates"
-              description="Project templates for building on Stacks and Bitcoin."
-            /> */}
-            <IndexCard
-              icon={<Code />}
-              href="/resources/snippets"
-              title="Snippets"
-              description="Code snippets for building on Stacks and Bitcoin."
-            />
             <IndexCard
               icon={<Database />}
               href="/resources/archive"

app/[locale]/(home)/resources/_pages/page.en.tsx

@@ -16,12 +16,15 @@ export default function ToolsPage() {
               href="/tools/chainhook"
               title="Chainhook"
               icon={<Chainhook />}
+              badge="beta"
+              tag="Stacks"
               description="Create custom event streams and triggers for real-time blockchain data processing."
             />
             <IndexCard
               href="/tools/contract-monitoring"
               title="Contract Monitoring"
               icon={<Brackets />}
+              tag="Stacks"
               description="Monitor and track smart contract activity and performance metrics."
             />
             <IndexCard

app/[locale]/(home)/tools/_pages/page.en.tsx

@@ -26,6 +26,7 @@ import { API } from '@/components/reference/api-page';
 import { Badge } from '@/components/ui/badge';
 import * as customIcons from '@/components/ui/icon';
 import { TagFilterSystem } from '@/components/ui/tag-filter-system';
+import { getAPIConfig } from '@/lib/api-config';
 import { i18n } from '@/lib/i18n';
 import { getAllFilterablePages, source } from '@/lib/source';
 import type { HeadingProps } from '@/types';
@@ -138,14 +139,19 @@ export default async function Page(props: {
                   components={getMDXComponents({
                     // Custom overrides that need special handling
                     API: (props) => <API {...props} />,
-                    APIPage: (props) => (
-                      <APIPage
-                        baseUrl="https://api.hiro.so"
-                        enablePlayground={true}
-                        clarityConversion={true}
-                        {...props}
-                      />
-                    ),
+                    APIPage: (props) => {
+                      const config = props.document
+                        ? getAPIConfig(String(props.document))
+                        : undefined;
+
+                      const mergedProps = {
+                        ...(config ?? {}),
+                        ...props,
+                        playgroundOptions: props.playgroundOptions ?? config?.playgroundOptions,
+                      };
+
+                      return <APIPage {...mergedProps} />;
+                    },
                     h1: ({ children, ...props }: HeadingProps) => {
                       const H1 = defaultMdxComponents.h1 as React.ComponentType<HeadingProps>;
                       const id = typeof children === 'string' ? children : undefined;
@@ -238,14 +244,19 @@ export default async function Page(props: {
                   components={getMDXComponents({
                     // Custom overrides that need special handling
                     API: (props) => <API {...props} />,
-                    APIPage: (props) => (
-                      <APIPage
-                        baseUrl="https://api.hiro.so"
-                        enablePlayground={true}
-                        clarityConversion={true}
-                        {...props}
-                      />
-                    ),
+                    APIPage: (props) => {
+                      const config = props.document
+                        ? getAPIConfig(String(props.document))
+                        : undefined;
+
+                      const mergedProps = {
+                        ...(config ?? {}),
+                        ...props,
+                        playgroundOptions: props.playgroundOptions ?? config?.playgroundOptions,
+                      };
+
+                      return <APIPage {...mergedProps} />;
+                    },
                     h1: ({ children, ...props }: HeadingProps) => {
                       const H1 = defaultMdxComponents.h1 as React.ComponentType<HeadingProps>;
                       const id = typeof children === 'string' ? children : undefined;

app/[locale]/(home)/tools/_pages/page.es.tsx

@@ -0,0 +1,86 @@
+import { NextResponse } from 'next/server';
+
+const ALLOWED_METHODS = new Set(['GET', 'POST', 'PUT', 'PATCH', 'DELETE']);
+const ALLOWED_HOSTNAMES = new Set(['api.hiro.so', 'api.mainnet.hiro.so', 'api.testnet.hiro.so']);
+const BLOCKED_REQUEST_HEADERS = new Set(['host', 'cookie', 'connection', 'content-length']);
+const STRIPPED_RESPONSE_HEADERS = new Set(['set-cookie', 'server', 'via', 'www-authenticate']);
+
+export const dynamic = 'force-dynamic';
+
+export async function POST(request: Request) {
+  try {
+    const { url, method = 'GET', headers = {}, body } = await request.json();
+
+    if (!url || typeof url !== 'string') {
+      return NextResponse.json({ error: 'A target URL is required.' }, { status: 400 });
+    }
+
+    let parsedUrl: URL;
+    try {
+      parsedUrl = new URL(url);
+    } catch {
+      return NextResponse.json({ error: 'URL must be absolute.' }, { status: 400 });
+    }
+
+    if (parsedUrl.protocol !== 'https:' || !ALLOWED_HOSTNAMES.has(parsedUrl.hostname)) {
+      return NextResponse.json(
+        { error: 'This proxy only allows Hiro API hosts over HTTPS.' },
+        { status: 403 },
+      );
+    }
+
+    const upperMethod = String(method).toUpperCase();
+    if (!ALLOWED_METHODS.has(upperMethod)) {
+      return NextResponse.json(
+        { error: `Method ${upperMethod} is not supported by the proxy.` },
+        { status: 405 },
+      );
+    }
+
+    const upstreamHeaders = new Headers();
+    if (headers && typeof headers === 'object') {
+      for (const [key, value] of Object.entries(headers)) {
+        if (typeof value === 'string' && !BLOCKED_REQUEST_HEADERS.has(key.toLowerCase())) {
+          upstreamHeaders.set(key, value);
+        }
+      }
+    }
+
+    const requestInit: RequestInit = {
+      method: upperMethod,
+      headers: upstreamHeaders,
+    };
+
+    if (body !== undefined && body !== null && upperMethod !== 'GET' && upperMethod !== 'HEAD') {
+      requestInit.body = typeof body === 'string' ? body : JSON.stringify(body);
+    }
+
+    const upstreamResponse = await fetch(parsedUrl, requestInit);
+    const contentType = upstreamResponse.headers.get('content-type') ?? '';
+    let data: unknown;
+
+    if (contentType.includes('application/json')) {
+      data = await upstreamResponse.json();
+    } else {
+      data = await upstreamResponse.text();
+    }
+
+    const sanitizedHeaders = Object.fromEntries(
+      Array.from(upstreamResponse.headers.entries()).filter(
+        ([key]) => !STRIPPED_RESPONSE_HEADERS.has(key.toLowerCase()),
+      ),
+    );
+
+    return NextResponse.json({
+      status: upstreamResponse.status,
+      statusText: upstreamResponse.statusText,
+      headers: sanitizedHeaders,
+      data,
+    });
+  } catch (error) {
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Proxy request failed.' },
+      { status: 500 },
+    );
+  }
+}

app/[locale]/[...slug]/page.tsx

@@ -25,6 +25,7 @@ export const baseOptions: BaseLayoutProps = {
           text: 'Chainhook',
           description: 'Monitor and analyze Clarity smart contract activity.',
           url: '/tools/chainhook',
+          isBeta: true,
         },
         {
           text: 'Contract Monitoring',
@@ -35,7 +36,6 @@ export const baseOptions: BaseLayoutProps = {
           text: 'Bitcoin Indexer',
           description: 'Indexer for Bitcoin blockchain data.',
           url: '/tools/bitcoin-indexer',
-          isNew: true,
         },
       ],
     },
@@ -69,6 +69,12 @@ export const baseOptions: BaseLayoutProps = {
           description: 'API for retrieving NFT and fungible token metadata.',
           url: '/apis/token-metadata-api',
         },
+        {
+          text: 'Chainhook API',
+          description: 'RESTful API for accessing Chainhook',
+          url: '/apis/chainhook-api',
+          isNew: true,
+        },
         {
           text: 'Platform API',
           description: 'API for accessing Hiro Platform data and functionality.',
@@ -100,26 +106,11 @@ export const baseOptions: BaseLayoutProps = {
           description: 'Guides for building on Stacks.',
           url: '/resources/guides',
         },
-        // {
-        //   text: "Project templates",
-        //   description: "Project templates for building on Stacks.",
-        //   url: "/resources/templates",
-        // },
-        {
-          text: 'Snippets',
-          description: 'Code snippets for building on Stacks and Bitcoin.',
-          url: '/resources/snippets',
-        },
         {
           text: 'Hiro Archive',
           description: 'Archive of blockchain data.',
           url: '/resources/archive',
         },
-        // {
-        //   text: "Faucets",
-        //   description: "Faucets for getting testnet tokens.",
-        //   url: "/resources/faucets",
-        // },
       ],
     },
   ],

app/api/proxy/route.ts

@@ -3,6 +3,7 @@ import { RootProvider } from 'fumadocs-ui/provider';
 import type { ReactNode } from 'react';
 import { aeonik, aeonikFono, aeonikMono, inter } from '@/fonts';
 import { KeyboardShortcutsProvider } from '@/hooks/use-keyboard-shortcuts';
+import { ApiCredentialsProvider } from '@/providers/api-credentials-provider';
 import { QueryProvider } from '@/providers/query-provider';
 
 export default function RootLayout({ children }: { children: ReactNode }) {
@@ -14,15 +15,17 @@ export default function RootLayout({ children }: { children: ReactNode }) {
     >
       <body className="flex flex-col min-h-screen">
         <QueryProvider>
-          <KeyboardShortcutsProvider>
-            <RootProvider
-              search={{
-                enabled: true,
-              }}
-            >
-              {children}
-            </RootProvider>
-          </KeyboardShortcutsProvider>
+          <ApiCredentialsProvider>
+            <KeyboardShortcutsProvider>
+              <RootProvider
+                search={{
+                  enabled: true,
+                }}
+              >
+                {children}
+              </RootProvider>
+            </KeyboardShortcutsProvider>
+          </ApiCredentialsProvider>
         </QueryProvider>
       </body>
     </html>