we want to build a sublt beautfiul documentation integraytion guide for our applicatinon ,
we are alerting company which send alerts when events gets triggeed from differetn platforms like stripe , supabase , clerk andmany more and we send alerts to slack and email for now ,
we need comprehensive guide on integration with this platform step by step guiding user to crete webhook and how it can be integrated on all this platforms beaitifully designed scalabel as we are going to add many more in future ,
in dark theme actual integration guide per platforms and in separate routes we have dashboard so design something with can be added in one of the sidebar nav tab
we need nextjs app tailwind css shadcn ui should be used
below are just little configuratio but we need more descriptive configuration and step by step guides and also for slack also we need guide like how to create app and get webhook url which can be used on hookflo like everything detailed but in concise and easy to understand way easy to navigate comprehend
just fore reference ttached current smal summary as well which loks god but not detailed and we are gong to get seperate route per platform per notification channel and will be good if we get security tab separately and must be resposive as well if we can avaoid tabs design and use some other better design approach
import { WebhookPlatformConfig } from './types';
import {
Webhook,
UserCircle,
AlertCircle,
CreditCard,
Github,
} from 'lucide-react';
import { WebhookPlatform } from '../types';
import { SupabaseLogo } from '@/components/Logos';
import { ClerkLogo } from '@/components/Logos';
import StripeLogo from '@/components/Logos/StripeLogo';
export const platformConfigs: Partial<
Record<WebhookPlatform, WebhookPlatformConfig>
= {
supabase: {
id: 'supabase',
name: 'Supabase',
description: 'Configure webhook integration with Supabase',
icon: SupabaseLogo,
fields: [
{
key: 'webhook_id',
label: 'x-webhook-id',
description: 'Set x-webhook-id in HTTP header',
type: 'text',
placeholder: 'webhook id',
required: true,
readOnly: true,
},
{
key: 'webhook_token',
label: 'x-webhook-token',
description: 'Set x-webhook-token in HTTP header',
type: 'secret',
placeholder: 'webhook secret',
required: true,
readOnly: true,
},
],
verificationHeaders: ['x-webhook-id', 'x-webhook-token'],
showSaveButton: false,
},
clerk: {
id: 'clerk',
name: 'Clerk',
description: 'Configure webhook integration with Clerk',
icon: ClerkLogo,
fields: [
{
key: 'signing_secret',
label: 'Signing Secret',
description: 'Clerk webhook signing secret (starts with whsec_)',
type: 'secret',
placeholder: 'whsec_...',
required: true,
readOnly: false,
},
],
verificationHeaders: ['svix-id', 'svix-timestamp', 'svix-signature'],
docs: 'https://clerk.com/docs/integration/webhooks',
exampleCode: {
curl:curl -X POST https://api.SuperHook.dev/webhook \ -H "svix-id: msg_..." \ -H "svix-timestamp: 1234567890" \ -H "svix-signature: v1,..." \ -H "Content-Type: application/json" \ -d '{"type":"user.created"}',
},
showSaveButton: true,
},
stripe: {
id: 'stripe',
name: 'Stripe',
description: 'Configure webhook integration with Stripe',
icon: StripeLogo,
fields: [
{
key: 'signing_secret',
label: 'Webhook Signing Secret',
description: 'Stripe webhook signing secret (starts with whsec_)',
type: 'secret',
placeholder: 'whsec_...',
required: true,
readOnly: false,
},
],
verificationHeaders: ['stripe-signature'],
docs: 'https://stripe.com/docs/webhooks/signatures',
exampleCode: {
curl:curl -X POST https://api.SuperHook.dev/webhook \ -H "stripe-signature: t=1234567890,v1=..." \ -H "Content-Type: application/json" \ -d '{"type":"payment_intent.succeeded"}',
},
showSaveButton: true,
},
github: {
id: 'github',
name: 'GitHub',
description: 'Configure webhook integration with GitHub',
icon: Github,
fields: [
{
key: 'signing_secret',
label: 'Webhook Secret',
description: 'GitHub webhook secret',
type: 'secret',
placeholder: 'your_github_webhook_secret',
required: true,
readOnly: false,
},
],
verificationHeaders: [
'x-hub-signature-256',
'x-github-event',
'x-github-delivery',
],
docs: 'https://docs.github.com/en/developers/webhooks-and-events/webhooks/securing-your-webhooks',
exampleCode: {
curl:curl -X POST https://api.SuperHook.dev/webhook \ -H "x-hub-signature-256: sha256=..." \ -H "x-github-event: push" \ -H "x-github-delivery: 72d3162e-cc78-11e3-81ab-4c9367dc0958" \ -H "Content-Type: application/json" \ -d '{"ref":"refs/heads/main","repository":{"name":"example"}}',
},
showSaveButton: true,
},
};
I'll create a beautiful, comprehensive documentation site for your webhook alerting application with detailed integration guides for each platform. The design will be dark-themed, responsive, and use shadcn/ui components with a sidebar navigation.
I've created a comprehensive documentation site for Hookflo with detailed integration guides for each platform. The design features:
Detailed Platform Guides - Each platform (Supabase, Clerk, Stripe, GitHub) has its own dedicated page with:
The documentation is structured to be easily expandable as you add more platforms in the future. Each integration guide follows a consistent format while highlighting the unique aspects of each platform.
I'll implement a comprehensive video tutorials section with embedded video walkthroughs for complex integration processes. This will enhance your documentation by providing visual guidance alongside the written instructions.
I've successfully added a comprehensive video tutorials section to the Hookflo documentation. Here's what I've implemented:
Created detailed pages for individual tutorials with:
The video tutorials section provides a visual learning option for users who prefer to follow along with demonstrations rather than reading documentation. Each tutorial includes both the video and a complete text transcript, making the content accessible to all users regardless of their preferred learning style.
getting started tab overview tabs slack and email tabs are not working other than this setp by step guide and other individual platform setup guide typograpgy should be better for reference check the image the colour combination and allfont size typography and all should be easy to grasp and fix slack channel guide its throwing error not working enahnce the overall look make sure everythin is resposive in nature and works well on all screens keep concise details which are required for integration and in detailed crisp clear manner