improvement(docs): updated with new ss, docs script updated to copy items from main app into docs for tools (#1918)

* improvement(docs): updated script to copy over icons, cleanup unnecessary pages

* updated script with auto-icon generation

* ignore translations, only icons changed

* updated images

* updated i18n.lock

* updated images

Author: waleedlatif1

apps/docs/components/icons.tsx

@@ -1,44 +1,40 @@
 'use client'
 
 import type * as React from 'react'
+import { blockTypeToIconMap } from './icon-mapping'
 
 interface BlockInfoCardProps {
   type: string
   color: string
-  icon?: boolean
-  iconSvg?: string
+  icon?: React.ComponentType<{ className?: string }>
+  iconSvg?: string // Deprecated: Use automatic icon resolution instead
 }
 
 export function BlockInfoCard({
   type,
   color,
-  icon = false,
+  icon: IconComponent,
   iconSvg,
 }: BlockInfoCardProps): React.ReactNode {
+  // Auto-resolve icon component from block type if not explicitly provided
+  const ResolvedIcon = IconComponent || blockTypeToIconMap[type] || null
+
   return (
     <div className='mb-6 overflow-hidden rounded-lg border border-border'>
       <div className='flex items-center justify-center p-6'>
         <div
           className='flex h-20 w-20 items-center justify-center rounded-lg'
           style={{ backgroundColor: color }}
         >
-          {iconSvg ? (
+          {ResolvedIcon ? (
+            <ResolvedIcon className='h-10 w-10 text-white' />
+          ) : iconSvg ? (
             <div className='h-10 w-10 text-white' dangerouslySetInnerHTML={{ __html: iconSvg }} />
           ) : (
             <div className='font-mono text-xl opacity-70'>{type.substring(0, 2)}</div>
           )}
         </div>
       </div>
-      {icon && (
-        <style jsx global>{`
-          .block-icon {
-            width: 80px;
-            height: 80px;
-            margin: 1rem auto;
-            display: block;
-          }
-        `}</style>
-      )}
     </div>
   )
 }

apps/docs/components/ui/block-info-card.tsx

@@ -0,0 +1,157 @@
+// Auto-generated file - do not edit manually
+// Generated by scripts/generate-docs.ts
+// Maps block types to their icon component references
+
+import type { ComponentType, SVGProps } from 'react'
+import {
+  AirtableIcon,
+  ArxivIcon,
+  AsanaIcon,
+  BrainIcon,
+  BrowserUseIcon,
+  ClayIcon,
+  ConfluenceIcon,
+  DiscordIcon,
+  DocumentIcon,
+  ElevenLabsIcon,
+  ExaAIIcon,
+  EyeIcon,
+  FirecrawlIcon,
+  GithubIcon,
+  GmailIcon,
+  GoogleCalendarIcon,
+  GoogleDocsIcon,
+  GoogleDriveIcon,
+  GoogleFormsIcon,
+  GoogleIcon,
+  GoogleSheetsIcon,
+  GoogleVaultIcon,
+  HubspotIcon,
+  HuggingFaceIcon,
+  HunterIOIcon,
+  ImageIcon,
+  JinaAIIcon,
+  JiraIcon,
+  LinearIcon,
+  LinkupIcon,
+  Mem0Icon,
+  MicrosoftExcelIcon,
+  MicrosoftOneDriveIcon,
+  MicrosoftPlannerIcon,
+  MicrosoftSharepointIcon,
+  MicrosoftTeamsIcon,
+  MistralIcon,
+  MongoDBIcon,
+  MySQLIcon,
+  NotionIcon,
+  OpenAIIcon,
+  OutlookIcon,
+  PackageSearchIcon,
+  ParallelIcon,
+  PerplexityIcon,
+  PineconeIcon,
+  PipedriveIcon,
+  PostgresIcon,
+  QdrantIcon,
+  RedditIcon,
+  ResendIcon,
+  S3Icon,
+  SalesforceIcon,
+  SerperIcon,
+  SlackIcon,
+  StagehandIcon,
+  StripeIcon,
+  SupabaseIcon,
+  TavilyIcon,
+  TelegramIcon,
+  TranslateIcon,
+  TrelloIcon,
+  TwilioIcon,
+  TypeformIcon,
+  WealthboxIcon,
+  WebflowIcon,
+  WhatsAppIcon,
+  WikipediaIcon,
+  xIcon,
+  YouTubeIcon,
+  ZepIcon,
+} from '@/components/icons'
+
+type IconComponent = ComponentType<SVGProps<SVGSVGElement>>
+
+export const blockTypeToIconMap: Record<string, IconComponent> = {
+  postgresql: PostgresIcon,
+  twilio_voice: TwilioIcon,
+  translate: TranslateIcon,
+  tavily: TavilyIcon,
+  stagehand_agent: StagehandIcon,
+  youtube: YouTubeIcon,
+  supabase: SupabaseIcon,
+  vision: EyeIcon,
+  confluence: ConfluenceIcon,
+  arxiv: ArxivIcon,
+  webflow: WebflowIcon,
+  pinecone: PineconeIcon,
+  whatsapp: WhatsAppIcon,
+  typeform: TypeformIcon,
+  qdrant: QdrantIcon,
+  asana: AsanaIcon,
+  memory: BrainIcon,
+  serper: SerperIcon,
+  linear: LinearIcon,
+  exa: ExaAIIcon,
+  telegram: TelegramIcon,
+  salesforce: SalesforceIcon,
+  hubspot: HubspotIcon,
+  hunter: HunterIOIcon,
+  linkup: LinkupIcon,
+  mongodb: MongoDBIcon,
+  airtable: AirtableIcon,
+  discord: DiscordIcon,
+  jina: JinaAIIcon,
+  google_docs: GoogleDocsIcon,
+  perplexity: PerplexityIcon,
+  google_search: GoogleIcon,
+  x: xIcon,
+  google_calendar: GoogleCalendarIcon,
+  zep: ZepIcon,
+  microsoft_planner: MicrosoftPlannerIcon,
+  thinking: BrainIcon,
+  pipedrive: PipedriveIcon,
+  stagehand: StagehandIcon,
+  google_forms: GoogleFormsIcon,
+  file: DocumentIcon,
+  mistral_parse: MistralIcon,
+  gmail: GmailIcon,
+  openai: OpenAIIcon,
+  outlook: OutlookIcon,
+  onedrive: MicrosoftOneDriveIcon,
+  resend: ResendIcon,
+  google_vault: GoogleVaultIcon,
+  sharepoint: MicrosoftSharepointIcon,
+  huggingface: HuggingFaceIcon,
+  clay: ClayIcon,
+  jira: JiraIcon,
+  wealthbox: WealthboxIcon,
+  notion: NotionIcon,
+  elevenlabs: ElevenLabsIcon,
+  microsoft_teams: MicrosoftTeamsIcon,
+  github: GithubIcon,
+  google_drive: GoogleDriveIcon,
+  reddit: RedditIcon,
+  parallel_ai: ParallelIcon,
+  stripe: StripeIcon,
+  s3: S3Icon,
+  trello: TrelloIcon,
+  mem0: Mem0Icon,
+  knowledge: PackageSearchIcon,
+  twilio_sms: TwilioIcon,
+  slack: SlackIcon,
+  microsoft_excel: MicrosoftExcelIcon,
+  image_generator: ImageIcon,
+  google_sheets: GoogleSheetsIcon,
+  wikipedia: WikipediaIcon,
+  firecrawl: FirecrawlIcon,
+  mysql: MySQLIcon,
+  browser_use: BrowserUseIcon,
+}

apps/docs/components/ui/icon-mapping.ts

@@ -8,37 +8,6 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 <BlockInfoCard 
   type="airtable"
   color="#E0E0E0"
-  icon={true}
-  iconSvg={`<svg className="block-icon"
-      
-      
-      
-      viewBox='0 -20.5 256 256'
-      version='1.1'
-      xmlns='http://www.w3.org/2000/svg'
-      xmlnsXlink='http://www.w3.org/1999/xlink'
-      preserveAspectRatio='xMidYMid'
-    >
-      <g>
-        <path
-          d='M114.25873,2.70101695 L18.8604023,42.1756384 C13.5552723,44.3711638 13.6102328,51.9065311 18.9486282,54.0225085 L114.746142,92.0117514 C123.163769,95.3498757 132.537419,95.3498757 140.9536,92.0117514 L236.75256,54.0225085 C242.08951,51.9065311 242.145916,44.3711638 236.83934,42.1756384 L141.442459,2.70101695 C132.738459,-0.900338983 122.961284,-0.900338983 114.25873,2.70101695'
-          fill='#FFBF00'
-        />
-        <path
-          d='M136.349071,112.756863 L136.349071,207.659101 C136.349071,212.173089 140.900664,215.263892 145.096461,213.600615 L251.844122,172.166219 C254.281184,171.200072 255.879376,168.845451 255.879376,166.224705 L255.879376,71.3224678 C255.879376,66.8084791 251.327783,63.7176768 247.131986,65.3809537 L140.384325,106.815349 C137.94871,107.781496 136.349071,110.136118 136.349071,112.756863'
-          fill='#26B5F8'
-        />
-        <path
-          d='M111.422771,117.65355 L79.742409,132.949912 L76.5257763,134.504714 L9.65047684,166.548104 C5.4112904,168.593211 0.000578531073,165.503855 0.000578531073,160.794612 L0.000578531073,71.7210757 C0.000578531073,70.0173017 0.874160452,68.5463864 2.04568588,67.4384994 C2.53454463,66.9481944 3.08848814,66.5446689 3.66412655,66.2250305 C5.26231864,65.2661153 7.54173107,65.0101153 9.47981017,65.7766689 L110.890522,105.957098 C116.045234,108.002206 116.450206,115.225166 111.422771,117.65355'
-          fill='#ED3049'
-        />
-        <path
-          d='M111.422771,117.65355 L79.742409,132.949912 L2.04568588,67.4384994 C2.53454463,66.9481944 3.08848814,66.5446689 3.66412655,66.2250305 C5.26231864,65.2661153 7.54173107,65.0101153 9.47981017,65.7766689 L110.890522,105.957098 C116.045234,108.002206 116.450206,115.225166 111.422771,117.65355'
-          fillOpacity='0.25'
-          fill='#000000'
-        />
-      </g>
-    </svg>`}
 />
 
 {/* MANUAL-CONTENT-START:intro */}

apps/docs/content/docs/de/tools/airtable.mdx

@@ -8,26 +8,6 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 <BlockInfoCard 
   type="arxiv"
   color="#E0E0E0"
-  icon={true}
-  iconSvg={`<svg className="block-icon"  id='logomark' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.732 24.269'>
-      <g id='tiny'>
-        <path
-          d='M573.549,280.916l2.266,2.738,6.674-7.84c.353-.47.52-.717.353-1.117a1.218,1.218,0,0,0-1.061-.748h0a.953.953,0,0,0-.712.262Z'
-          transform='translate(-566.984 -271.548)'
-          fill='#bdb9b4'
-        />
-        <path
-          d='M579.525,282.225l-10.606-10.174a1.413,1.413,0,0,0-.834-.5,1.09,1.09,0,0,0-1.027.66c-.167.4-.047.681.319,1.206l8.44,10.242h0l-6.282,7.716a1.336,1.336,0,0,0-.323,1.3,1.114,1.114,0,0,0,1.04.69A.992.992,0,0,0,571,293l8.519-7.92A1.924,1.924,0,0,0,579.525,282.225Z'
-          transform='translate(-566.984 -271.548)'
-          fill='#b31b1b'
-        />
-        <path
-          d='M584.32,293.912l-8.525-10.275,0,0L573.53,280.9l-1.389,1.254a2.063,2.063,0,0,0,0,2.965l10.812,10.419a.925.925,0,0,0,.742.282,1.039,1.039,0,0,0,.953-.667A1.261,1.261,0,0,0,584.32,293.912Z'
-          transform='translate(-566.984 -271.548)'
-          fill='#bdb9b4'
-        />
-      </g>
-    </svg>`}
 />
 
 {/* MANUAL-CONTENT-START:intro */}

apps/docs/content/docs/de/tools/arxiv.mdx

@@ -8,31 +8,6 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 <BlockInfoCard 
   type="asana"
   color="#E0E0E0"
-  icon={true}
-  iconSvg={`<svg className="block-icon"
-      
-      xmlns='http://www.w3.org/2000/svg'
-      
-      
-      viewBox='781.361 0 944.893 873.377'
-    >
-      <radialGradient
-        id='asana_radial_gradient'
-        cx='943.992'
-        cy='1221.416'
-        r='.663'
-        gradientTransform='matrix(944.8934 0 0 -873.3772 -890717.875 1067234.75)'
-        gradientUnits='userSpaceOnUse'
-      >
-        <stop offset='0' stopColor='#ffb900' />
-        <stop offset='.6' stopColor='#f95d8f' />
-        <stop offset='.999' stopColor='#f95353' />
-      </radialGradient>
-      <path
-        fill='url(#asana_radial_gradient)'
-        d='M1520.766 462.371c-113.508 0-205.508 92-205.508 205.488 0 113.499 92 205.518 205.508 205.518 113.489 0 205.488-92.019 205.488-205.518 0-113.488-91.999-205.488-205.488-205.488zm-533.907.01c-113.489.01-205.498 91.99-205.498 205.488 0 113.489 92.009 205.498 205.498 205.498 113.498 0 205.508-92.009 205.508-205.498 0-113.499-92.01-205.488-205.518-205.488h.01zm472.447-256.883c0 113.489-91.999 205.518-205.488 205.518-113.508 0-205.508-92.029-205.508-205.518S1140.31 0 1253.817 0c113.489 0 205.479 92.009 205.479 205.498h.01z'
-      />
-    </svg>`}
 />
 
 ## Nutzungsanleitung

apps/docs/content/docs/de/tools/asana.mdx

@@ -8,36 +8,6 @@ import { BlockInfoCard } from "@/components/ui/block-info-card"
 <BlockInfoCard 
   type="browser_use"
   color="#E0E0E0"
-  icon={true}
-  iconSvg={`<svg className="block-icon"
-      
-      version='1.0'
-      xmlns='http://www.w3.org/2000/svg'
-      
-      
-      viewBox='0 0 150 150'
-      preserveAspectRatio='xMidYMid meet'
-    >
-      <g transform='translate(0,150) scale(0.05,-0.05)' fill='#000000' stroke='none'>
-        <path
-          d='M786 2713 c-184 -61 -353 -217 -439 -405 -76 -165 -65 -539 19 -666
-l57 -85 -48 -124 c-203 -517 -79 -930 346 -1155 159 -85 441 -71 585 28 l111
-77 196 -76 c763 -293 1353 304 1051 1063 -77 191 -77 189 -14 282 163 239 97
-660 -140 893 -235 231 -528 256 -975 83 l-96 -37 -121 67 c-144 79 -383 103
--532 55z m459 -235 c88 -23 96 -51 22 -79 -29 -11 -84 -47 -121 -80 -57 -50
--84 -59 -178 -59 -147 0 -190 -44 -238 -241 -102 -424 -230 -440 -230 -29 1
-417 289 606 745 488z m1046 -18 c174 -85 266 -309 239 -582 -26 -256 -165
--165 -230 151 -73 356 -469 332 -954 -58 -587 -472 -829 -1251 -388 -1251 108
-0 126 -7 214 -80 54 -44 104 -80 113 -80 54 0 -2 -43 -89 -69 -220 -66 -426
--22 -568 120 -599 599 871 2232 1663 1849z m-234 -510 c969 -1036 357 -1962
--787 -1190 -254 171 -348 303 -323 454 21 128 40 123 231 -59 691 -658 1362
--583 1052 117 -106 239 -366 585 -504 671 l-72 44 98 45 c150 68 169 63 305
--82z m-329 -310 c161 -184 163 -160 -30 -338 -188 -173 -180 -173 -386 19
--163 153 -163 157 7 324 218 213 219 213 409 -5z m354 -375 c92 -239 -179
--462 -377 -309 l-46 35 186 163 c211 186 209 185 237 111z'
-        />
-      </g>
-    </svg>`}
 />
 
 {/* MANUAL-CONTENT-START:intro */}