docs: examples visual - cover images to all - make it easier to share too (#942)

badmonster0 · web-flow · commit d567c99d8005 · 2025-08-29T16:50:28.000-07:00
diff --git a/docs/docs/examples/examples/academic_papers_index.md b/docs/docs/examples/examples/academic_papers_index.md
@@ -12,7 +12,9 @@ tags: [vector-index, metadata]
 
 import { GitHubButton, YouTubeButton, DocumentationButton } from '../../../src/components/GitHubButton';
 
-<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/paper_metadata"/>
+<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/paper_metadata" margin="0 0 24px 0" />
+
+![Academic Papers Index](/img/examples/academic_papers_index/cover.png)
 
 ## What we will achieve
 
diff --git a/docs/docs/examples/examples/codebase_index.md b/docs/docs/examples/examples/codebase_index.md
@@ -12,23 +12,23 @@ tags: [vector-index, codebase]
 
 import { GitHubButton, YouTubeButton, DocumentationButton } from '../../../src/components/GitHubButton';
 
-<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/code_embedding"/>
-<YouTubeButton url="https://youtu.be/G3WstvhHO24?si=ndYfM0XRs03_hVPR" />
+<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/code_embedding" margin="0 0 24px 0" />
+<YouTubeButton url="https://youtu.be/G3WstvhHO24?si=ndYfM0XRs03_hVPR" margin="0 0 24px 0" />
+
+![Codebase Index](/img/examples/codebase_index/cover.png)
 
 ## Overview
 In this tutorial, we will build codebase index. [CocoIndex](https://github.com/cocoindex-io/cocoindex) provides built-in support for codebase chunking, with native Tree-sitter support. It works with large codebases, and can be updated in near real-time with incremental processing - only reprocess what's changed. 
 
 ## Use Cases
-A wide range of applications can be built with an effective codebase index that is always up-to-date. Some examples include:
-
-![Use case illustration](/img/examples/codebase_index/usecase.png)
+A wide range of applications can be built with an effective codebase index that is always up-to-date.
 
 - Semantic code context for AI coding agents like Claude, Codex, Gemini CLI.
 - MCP for code editors such as Cursor, Windsurf, and VSCode.
 - Context-aware code search applications—semantic code search, natural language code retrieval.
 - Context for code review agents—AI code review, automated code analysis, code quality checks, pull request summarization.
 - Automated code refactoring, large-scale code migration.
-- Enhance SRE workflows: enable rapid root cause analysis, incident response, and change impact assessment by indexing infrastructure-as-code, deployment scripts, and config files for semantic search and lineage tracking.
+- SRE workflows: enable rapid root cause analysis, incident response, and change impact assessment by indexing infrastructure-as-code, deployment scripts, and config files for semantic search and lineage tracking.
 - Automatically generate design documentation from code—keep design docs up-to-date.
 
 ## Flow Overview
@@ -222,4 +222,11 @@ To spin up, it is super easy.
 ```
 cocoindex server main.py -ci
 ```
-Follow the url from the terminal - `https://cocoindex.io/cocoinsight` to access the CocoInsight.
+Follow the url from the terminal - `https://cocoindex.io/cocoinsight` to access the CocoInsight.
+
+
+## Supported Languages
+
+SplitRecursively has native support for all major programming languages.
+
+<DocumentationButton url="https://cocoindex.io/docs/ops/functions#supported-languages" text="Supported Languages" margin="0 0 16px 0" />
diff --git a/docs/docs/examples/examples/custom_targets.md b/docs/docs/examples/examples/custom_targets.md
@@ -11,7 +11,9 @@ tags: [custom-building-blocks]
 ---
 import { GitHubButton, YouTubeButton, DocumentationButton } from '../../../src/components/GitHubButton';
 
-<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/custom_output_files"/>
+<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/custom_output_files" margin="0 0 24px 0" />
+
+![Custom Targets](/img/examples/custom_targets/cover.png)
 
 ## Overview
 
diff --git a/docs/docs/examples/examples/docs_to_knowledge_graph.md b/docs/docs/examples/examples/docs_to_knowledge_graph.md
@@ -12,8 +12,10 @@ tags: [knowledge-graph, structured-data-extraction]
 
 import { GitHubButton, YouTubeButton, DocumentationButton } from '../../../src/components/GitHubButton';
 
-<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/docs_to_knowledge_graph"/>
-<YouTubeButton url="https://youtu.be/2KVkpUGRtnk?si=MRalDweWrid-IFje" />
+<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/docs_to_knowledge_graph" margin="0 0 24px 0" />
+<YouTubeButton url="https://youtu.be/2KVkpUGRtnk?si=MRalDweWrid-IFje" margin="0 0 24px 0" />
+
+![Knowledge Graph for Docs](/img/examples/docs_to_knowledge_graph/cover.png)
 
 ## Overview
 [CocoIndex](https://github.com/cocoindex-io/cocoindex) makes it easy to build and maintain knowledge graphs with continuous source updates. In this tutorial, we will use LLM to extract relationships between the concepts in each document, and generate two kinds of relationships:
diff --git a/docs/docs/examples/examples/image_search.md b/docs/docs/examples/examples/image_search.md
@@ -12,7 +12,9 @@ tags: [vector-index, multi-modal]
 
 import { GitHubButton, YouTubeButton, DocumentationButton } from '../../../src/components/GitHubButton';
 
-<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/image_search"/>
+<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/image_search" margin="0 0 24px 0" />
+
+![Image Search](/img/examples/image_search/cover.png)
 
 ## Overview
 CocoIndex supports native integration with ColPali - with just a few lines of code, you embed and index images with ColPali’s late-interaction architecture. We also build a light weight image search application with FastAPI.
diff --git a/docs/docs/examples/examples/manual_extraction.md b/docs/docs/examples/examples/manual_extraction.md
@@ -12,7 +12,9 @@ tags: [structured-data-extraction, data-mapping]
 
 import { GitHubButton, YouTubeButton, DocumentationButton } from '../../../src/components/GitHubButton';
 
-<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/manuals_llm_extraction"/>
+<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/manuals_llm_extraction" margin="0 0 24px 0" />
+
+![Manual Extraction](/img/examples/manual_extraction/cover.png)
 
 ## Overview
 This example shows how to extract structured data from Python Manuals using Ollama.
diff --git a/docs/docs/examples/examples/multi_format_index.md b/docs/docs/examples/examples/multi_format_index.md
@@ -12,7 +12,9 @@ tags: [vector-index, multi-modal]
 
 import { GitHubButton, YouTubeButton, DocumentationButton } from '../../../src/components/GitHubButton';
 
-<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/multi_format_indexing"/>
+<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/multi_format_indexing" margin="0 0 24px 0" />
+
+![Multi Format Index](/img/examples/multi_format_index/cover.png)
 
 ## Overview
 Do you have a messy collection of scanned documents, PDFs, academic papers, presentation slides, and standalone images — all mixed together with charts, tables, and figures — that you want to process into the same vector space for semantic search or to power an AI agent?
diff --git a/docs/docs/examples/examples/patient_form_extraction.md b/docs/docs/examples/examples/patient_form_extraction.md
@@ -12,8 +12,10 @@ tags: [structured-data-extraction, data-mapping]
 
 import { GitHubButton, YouTubeButton, DocumentationButton } from '../../../src/components/GitHubButton';
 
-<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/patient_intake_extraction"/>
-<YouTubeButton url="https://youtu.be/_mjlwVtnBn0?si=-TBImMyZbnKh-5FB" />
+<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/patient_intake_extraction" margin="0 0 24px 0" />
+<YouTubeButton url="https://youtu.be/_mjlwVtnBn0?si=-TBImMyZbnKh-5FB" margin="0 0 24px 0" />
+
+![Patient Form Extraction](/img/examples/patient_form_extraction/cover.png)
 
 ## Overview
 With CocoIndex, you can easily define nested schema in Python dataclass and use LLM to extract structured data from unstructured data. This example shows how to extract structured data from patient intake forms.
diff --git a/docs/docs/examples/examples/photo_search.md b/docs/docs/examples/examples/photo_search.md
@@ -12,7 +12,9 @@ tags: [vector-index, multi-modal]
 
 import { GitHubButton, YouTubeButton, DocumentationButton } from '../../../src/components/GitHubButton';
 
-<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/face_recognition"/>
+<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/face_recognition" margin="0 0 24px 0" />
+
+![Photo Search](/img/examples/photo_search/cover.png)
 
 ## Overview
 We’ll walk through a comprehensive example of building a scalable face recognition pipeline. We’ll 
diff --git a/docs/docs/examples/examples/product_recommendation.md b/docs/docs/examples/examples/product_recommendation.md
@@ -12,7 +12,9 @@ tags: [knowledge-graph]
 
 import { GitHubButton, YouTubeButton, DocumentationButton } from '../../../src/components/GitHubButton';
 
-<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/product_recommendation"/>
+<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/product_recommendation" margin="0 0 24px 0" />
+
+![Product Recommendation](/img/examples/product_recommendation/cover.png)
 
 ## Overview
 
diff --git a/docs/docs/examples/examples/simple_vector_index.md b/docs/docs/examples/examples/simple_vector_index.md
@@ -12,8 +12,9 @@ tags: [vector-index]
 
 import { GitHubButton, YouTubeButton, DocumentationButton } from '../../../src/components/GitHubButton';
 
-<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/text_embedding"/>
+<GitHubButton url="https://github.com/cocoindex-io/cocoindex/tree/main/examples/text_embedding" margin="0 0 24px 0" />
 
+![Simple Vector Index](/img/examples/simple_vector_index/cover.png)
 
 ## Overview
 In this tutorial, we will build index with text embeddings and query it with natural language. 
diff --git a/docs/static/img/examples/codebase_index/chunk.png b/docs/static/img/examples/codebase_index/chunk.png
diff --git a/docs/static/img/examples/codebase_index/cover.png b/docs/static/img/examples/codebase_index/cover.png
diff --git a/docs/static/img/examples/codebase_index/usecase.png b/docs/static/img/examples/codebase_index/usecase.png
