feat(docs): added script to auto-generate docs for integrations/tools (#293)

* added scaffolding for auto-generating docs for integrations based on block definition, get rendering error for mdx pages

* page renders, have to add more useful information

* standardized tool naming convention, added script to autogenerate docs for integrations, added docs for each tool

* re-generated docs, updated CONTRIBUTING.md to reflect new format

* added a dedicated tools page

* added additional information for tools, added manual section logic to docs producer

* added a link back to sim studio, fixed z level issue on mobile, added better intro

* updated script to more accurately reflect the params for each tool, as well as the overall blocks' output

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

@@ -0,0 +1,44 @@
+'use client'
+
+import * as React from 'react'
+
+interface BlockInfoCardProps {
+  type: string;
+  color: string;
+  icon?: boolean;
+  iconSvg?: string;
+}
+
+export function BlockInfoCard({ 
+  type, 
+  color, 
+  icon = false,
+  iconSvg
+}: BlockInfoCardProps): React.ReactNode {
+  return (
+    <div className="mb-6 rounded-lg overflow-hidden border border-border">
+      <div className="flex items-center justify-center p-6">
+        <div 
+          className="h-20 w-20 rounded-lg flex items-center justify-center"
+          style={{ backgroundColor: color }}
+        >
+          {iconSvg ? (
+            <div className="w-10 h-10 text-white" dangerouslySetInnerHTML={{ __html: iconSvg }} />
+          ) : (
+            <div className="text-xl font-mono 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>
+  )
+} 

docs/components/ui/features.tsx

@@ -54,7 +54,7 @@ export function Features() {
     },
   ]
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 relative z-10 py-10 max-w-7xl mx-auto">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 relative z-20 py-10 max-w-7xl mx-auto">
       {features.map((feature, index) => (
         <Feature key={feature.title} {...feature} index={index} />
       ))}