docs: updates examples (#176)

jayhack · codegen-bot · web-flow · commit 85e33c4d3327 · 2025-01-28T21:18:58.000-08:00
# Motivation
&lt;!-- Why is this change necessary? --&gt;

# Content
&lt;!-- Please include a summary of the change --&gt;
# Testing
&lt;!-- How was the change tested? --&gt;
# Please check the following before marking your PR as ready for review

- [ ] I have added tests for my changes
- [ ] I have updated the documentation or added new documentation as
needed
- [ ] I have read and agree to the [Contributor License
Agreement](../CLA.md)

---------

Co-authored-by: codegen-bot &lt;team+codegenbot@codegen.sh&gt;
diff --git a/docs/building-with-codegen/codebase-visualization.mdx b/docs/building-with-codegen/codebase-visualization.mdx
@@ -1,7 +1,7 @@
 ---
 title: "Codebase Visualization"
 sidebarTitle: "Visualization"
-icon: "chart-network"
+icon: "share-nodes"
 iconType: "solid"
 ---
 
diff --git a/docs/introduction/getting-started.mdx b/docs/introduction/getting-started.mdx
@@ -15,68 +15,44 @@ Install [codegen](https://pypi.org/project/codegen/) on Pypi via [uv](https://gi
 uv tool install codegen
 ```
 
-<Note>
-  This makes the `codegen` command available globally in your terminal, while
-  keeping its dependencies isolated.
-</Note>
-
-
 ## Quick Start with Jupyter
 
 The [codgen notebook](/cli/notebook) command creates a virtual environment and opens a Jupyter notebook for quick prototyping. This is often the fastest way to get up and running.
 
-<Tip>
-  Prefer working in your IDE? See [IDE Usage](/introduction/ide-usage)
-</Tip>
-
-
 ```bash
-# Navigate to your repository
-cd path/to/git/repository
-
-# Initialize codegen and launch Jupyter with a demo notebook
+# Launch Jupyter with a demo notebook
 codegen notebook --demo
 ```
 
-This will:
-
-1. Create a `.codegen/` directory with:
-   - `.venv/` - A dedicated virtual environment for this project
-   - `jupyter/` - Jupyter notebooks for exploring your code
-   - `config.toml` - Project configuration
-2. Launch Jupyter Lab with a pre-configured notebook
 
 <Tip>
-  The `notebook --demo` comes pre-configured to load [FastAPI](https://github.com/fastapi/fastapi)'s codebase , so you can start
+  The `notebook --demo` comes pre-configured to load [FastAPI](https://github.com/fastapi/fastapi)'s codebase, so you can start
   exploring right away!
 </Tip>
 
+<Note>
+  Prefer working in your IDE? See [IDE Usage](/introduction/ide-usage)
+</Note>
+
 ## Initializing a Codebase
 
 Instantiating a [Codebase](/api-reference/core/Codebase) will automatically parse a codebase and make it available for manipulation.
 
 ```python
 from codegen import Codebase
 
-# Initialize FastAPI codebase
-print('Cloning and parsing FastAPI to /tmp/codegen/fastapi...')
+# Clone + parse fastapi/fastapi
 codebase = Codebase.from_repo('fastapi/fastapi')
 
-# To initialize an existing local codebase, use this constructor
-# codebase = Codebase("path/to/git/repo")
+# Or, parse a local repository
+codebase = Codebase("path/to/git/repo")
 ```
 
 <Note>
   This will automatically infer the programming language of the codebase and
   parse all files in the codebase. Learn more about [parsing codebases here](/building-with-codegen/parsing-codebases)
 </Note>
 
-<Tip>
-  The initial parse may take a few minutes for large codebases. This
-  pre-computation enables constant-time operations afterward. [Learn more
-  here.](/introduction/how-it-works)
-</Tip>
-
 ## Exploring Your Codebase
 
 Let's explore the codebase we just initialized.
diff --git a/docs/introduction/installation.mdx b/docs/introduction/installation.mdx
@@ -16,8 +16,6 @@ curl -LsSf https://astral.sh/uv/install.sh | sh
 
 ## Installing Codegen
 
-Install the Codegen CLI globally:
-
 ```bash
 uv tool install codegen
 ```
@@ -29,14 +27,14 @@ This makes the `codegen` command available globally in your terminal, while keep
 
 ## Quick Start
 
-Let's walk through a simple example of using Codegen in a project:
+Let's walk through a minimal example of using Codegen in a project:
 
 1. Navigate to your repository:
    ```bash
    cd path/to/your/project
    ```
 
-2. Initialize Codegen in your project:
+2. Initialize Codegen in your project with [codegen init](/cli/init):
    ```bash
    codegen init
    ```
diff --git a/docs/introduction/overview.mdx b/docs/introduction/overview.mdx
@@ -65,6 +65,58 @@ uv tool install codegen
 pip install codegen
 ```
 
+## What can I do with Codegen?
+
+Codegen enables you to programmatically manipulate code at scale. Here's a visualization of a real-world codebase's function call graph:
+
+<iframe
+  width="100%"
+  height="500px"
+  scrolling="no"
+  src={`https://codegen.sh/embedded/graph?id=299beefe-0207-43b6-bff3-6ca9036f62eb&zoom=0.5`}
+  className="rounded-xl"
+  style={{
+    backgroundColor: "#15141b",
+  }}
+></iframe>
+
+Common use cases include:
+
+<CardGroup cols={2}>
+  <Card
+    title="Visualize Your Codebase"
+    icon="diagram-project"
+    href="/tutorials/codebase-visualization"
+  >
+    Generate interactive visualizations of your codebase's structure, dependencies, and relationships.
+  </Card>
+  <Card
+    title="Mine Codebase Data"
+    icon="robot"
+    href="/tutorials/training-data"
+  >
+    Create high-quality training data for fine-tuning LLMs on your codebase.
+  </Card>
+  <Card
+    title="Eliminate Feature Flags"
+    icon="flag"
+    href="/tutorials/manage-feature-flags"
+  >
+    Add, remove, and update feature flags across your application.
+  </Card>
+  <Card
+    title="Organize Your Codebase"
+    icon="folder-tree"
+    href="/tutorials/organize-your-codebase"
+  >
+    Restructure files, enforce naming conventions, and improve project layout.
+  </Card>
+</CardGroup>
+
+<Note>
+  Codegen handles complex operations while maintaining correctness - automatically updating imports, references, and dependencies across files.
+</Note>
+
 ## Get Started
 
 import {
diff --git a/docs/mint.json b/docs/mint.json
@@ -74,12 +74,12 @@
 				"tutorials/at-a-glance",
 				"tutorials/migrating-apis",
 				"tutorials/codebase-visualization",
+				"tutorials/training-data",
 				"tutorials/organize-your-codebase",
 				"tutorials/modularity",
+				"tutorials/manage-feature-flags",
 				"tutorials/deleting-dead-code",
 				"tutorials/increase-type-coverage",
-				"tutorials/training-data",
-				"tutorials/manage-feature-flags",
 				"tutorials/managing-typescript-exports",
 				"tutorials/converting-default-exports",
 				"tutorials/creating-documentation",
diff --git a/docs/tutorials/at-a-glance.mdx b/docs/tutorials/at-a-glance.mdx
@@ -7,103 +7,140 @@ iconType: "solid"
 
 Explore our tutorials to learn how to use Codegen for various code transformation tasks.
 
-## Modernization & Migration
+## Featured Tutorials
 
 <CardGroup cols={2}>
   <Card
-    title="API Migrations"
-    icon="arrow-right-arrow-left"
-    href="/tutorials/migrating-apis"
+    title="Visualize Your Codebase"
+    icon="diagram-project"
+    href="/tutorials/codebase-visualization"
   >
-    Update API calls, handle breaking changes, and manage bulk updates across
-    your codebase.
+    Generate interactive visualizations of your codebase's structure, dependencies, and relationships.
   </Card>
-  <Card title="Python 2 to 3" icon="snake" href="/tutorials/python2-to-python3">
-    Migrate Python 2 code to Python 3, updating syntax and modernizing APIs.
+  <Card
+    title="Generate Training Data"
+    icon="robot"
+    href="/tutorials/training-data"
+  >
+    Create high-quality training data for fine-tuning LLMs on your codebase.
   </Card>
   <Card
-    title="SQLAlchemy 1.6 to 2.0"
-    icon="layer-group"
-    href="/tutorials/sqlalchemy-1.6-to-2.0"
+    title="Manage Feature Flags"
+    icon="flag"
+    href="/tutorials/manage-feature-flags"
   >
-    Update SQLAlchemy code to use the new 2.0-style query interface and
-    patterns.
+    Add, remove, and update feature flags across your application.
   </Card>
   <Card
-    title="unittest to pytest"
-    icon="vial"
-    href="/tutorials/unittest-to-pytest"
+    title="Delete Dead Code"
+    icon="broom"
+    href="/tutorials/deleting-dead-code"
   >
-    Convert unittest test suites to pytest's modern testing style.
+    Remove unused imports, functions, and variables with confidence.
   </Card>
+</CardGroup>
+
+## API Migrations
+
+<CardGroup cols={2}>
   <Card
-    title="Increase Type Coverage"
-    icon="shield-check"
-    href="/tutorials/increase-type-coverage"
+    title="API Migration Guide"
+    icon="arrow-right-arrow-left"
+    href="/tutorials/migrating-apis"
   >
-    Add TypeScript types, infer types from usage, and improve type safety.
+    Update API calls, handle breaking changes, and manage bulk updates across your codebase.
+  </Card>
+  <Card 
+    title="SQLAlchemy 1.6 to 2.0"
+    icon="layer-group"
+    href="/tutorials/sqlalchemy-1.6-to-2.0"
+  >
+    Update SQLAlchemy code to use the new 2.0-style query interface and patterns.
   </Card>
   <Card
-    title="React Modernization"
-    icon="react"
-    href="/tutorials/react-modernization"
+    title="Flask to FastAPI"
+    icon="bolt"
+    href="/tutorials/flask-to-fastapi"
+  >
+    Convert Flask applications to FastAPI, updating routes and dependencies.
+  </Card>
+  <Card 
+    title="Python 2 to 3" 
+    icon="snake" 
+    href="/tutorials/python2-to-python3"
   >
-    Convert class components to hooks, organize components into files, and
-    extract prop types.
+    Migrate Python 2 code to Python 3, updating syntax and modernizing APIs.
   </Card>
 </CardGroup>
 
-## Code Quality & Organization
+## Code Organization
 
 <CardGroup cols={2}>
-  <Card
-    title="Delete Dead Code"
-    icon="broom"
-    href="/tutorials/deleting-dead-code"
-  >
-    Remove unused imports, functions, and variables with confidence.
-  </Card>
   <Card
     title="Organize Your Codebase"
     icon="folder-tree"
     href="/tutorials/organize-your-codebase"
   >
     Restructure files, enforce naming conventions, and improve project layout.
   </Card>
-  <Card title="Improve Modularity" icon="cubes" href="/tutorials/modularity">
+  <Card 
+    title="Improve Modularity" 
+    icon="cubes" 
+    href="/tutorials/modularity"
+  >
     Split large files, extract shared logic, and manage dependencies.
   </Card>
+  <Card
+    title="Manage TypeScript Exports"
+    icon="file-export"
+    href="/tutorials/managing-typescript-exports"
+  >
+    Organize and optimize TypeScript module exports.
+  </Card>
+  <Card
+    title="Convert Default Exports"
+    icon="file-import"
+    href="/tutorials/converting-default-exports"
+  >
+    Convert between default and named exports in TypeScript/JavaScript.
+  </Card>
 </CardGroup>
 
-## Documentation & Features
+## Testing & Types
 
 <CardGroup cols={2}>
   <Card
-    title="Create Documentation"
-    icon="book"
-    href="/tutorials/creating-documentation"
+    title="unittest to pytest"
+    icon="vial"
+    href="/tutorials/unittest-to-pytest"
   >
-    Generate JSDoc comments, README files, and API documentation.
+    Convert unittest test suites to pytest's modern testing style.
   </Card>
   <Card
-    title="Manage Feature Flags"
-    icon="flag"
-    href="/tutorials/manage-feature-flags"
+    title="Increase Type Coverage"
+    icon="shield-check"
+    href="/tutorials/increase-type-coverage"
   >
-    Add, remove, and update feature flags across your application.
+    Add TypeScript types, infer types from usage, and improve type safety.
   </Card>
 </CardGroup>
 
-## AI Integration
+## Documentation & AI
 
 <CardGroup cols={2}>
+  <Card
+    title="Create Documentation"
+    icon="book"
+    href="/tutorials/creating-documentation"
+  >
+    Generate JSDoc comments, README files, and API documentation.
+  </Card>
   <Card
     title="Prepare for AI"
     icon="robot"
     href="/tutorials/preparing-your-codebase-for-ai"
   >
-    Generate system prompts, create hierarchical documentation, and optimize for
-    AI assistance.
+    Generate system prompts, create hierarchical documentation, and optimize for AI assistance.
   </Card>
 </CardGroup>
 
diff --git a/docs/tutorials/codebase-visualization.mdx b/docs/tutorials/codebase-visualization.mdx
@@ -1,8 +1,8 @@
 ---
 title: "Codebase Visualization"
-sidebarTitle: "Codebase Visualization"
+sidebarTitle: "Visualization"
 description: "This guide will show you how to create codebase visualizations using [codegen](/introduction/overview)."
-icon: "flashlight"
+icon: "share-nodes"
 iconType: "solid"
 ---
 
diff --git a/docs/tutorials/migrating-apis.mdx b/docs/tutorials/migrating-apis.mdx
@@ -1,6 +1,6 @@
 ---
 title: "Migrating APIs"
-sidebarTitle: "API Migration"
+sidebarTitle: "API Migrations"
 icon: "arrows-rotate"
 iconType: "solid"
 ---
