Document codeblock deep-linking feature

fern/products/docs/docs.yml

@@ -111,6 +111,10 @@ navigation:
       - page: Conditionally rendered content
         hidden: true
         path: ./pages/component-library/custom-components/conditional-rendering.mdx
+      - page: Component demos
+        hidden: true
+        path: ./pages/component-library/demo.mdx
+        slug: demo
   - section: AI features
     contents:
       - link: Ask Fern

fern/products/docs/pages/component-library/default-components/code-blocks.mdx

@@ -1,6 +1,7 @@
 ---
 title: 'Code Blocks'
 description: 'Learn how to enhance your documentation with customizable code blocks featuring syntax highlighting, line highlighting, focusing, and more.'
+max-toc-depth: 2
 ---
 
 Fern uses [Shiki](https://shiki.matsu.io/) for syntax highlighting in code blocks. 
@@ -303,15 +304,107 @@ To disable scrolling and wrap overflow onto the next line, use the `wordWrap` pr
 </Tabs>
 
 
+## Deep linking
+
+You can make specific text within code blocks clickable by defining a `links` map. This is useful for linking to documentation, API references, or related resources directly from your code examples.
+
+The `links` property accepts a map where keys are matching patterns (exact strings or regex) and values are the URLs to link to.
+
+### Exact string matching
+
+<Tabs>
+  <Tab title="Example">
+    <CodeBlock
+      links={{"PlantClient": "/learn/docs/writing-content/demo#plantclient", "createPlant": "/learn/docs/writing-content/demo#createplant"}}
+    >
+    ```typescript
+    import { PlantClient } from "@plantstore/sdk";
+
+    const client = new PlantClient({ apiKey: "YOUR_API_KEY" });
+    const plant = await client.createPlant({
+      name: "Monstera",
+      species: "Monstera deliciosa"
+    });
+    ```
+    </CodeBlock>
+  </Tab>
+  <Tab title="Markdown">
+    ````markdown
+    <CodeBlock
+      links={{"PlantClient": "/learn/docs/writing-content/demo#plantclient", "createPlant": "/learn/docs/writing-content/demo#create_plant"}}
+    >
+    ```typescript 
+    import { PlantClient } from "@plantstore/sdk";
+
+    const client = new PlantClient({ apiKey: "YOUR_API_KEY" });
+    const plant = await client.createPlant({
+      name: "Monstera",
+      species: "Monstera deliciosa"
+    });
+    ```
+    </CodeBlock>
+    ````
+  </Tab>
+</Tabs>
+
+<Note>
+      The `links` property uses JSON format. Each key in the map is matched exactly against text in the Code Block, and matching text becomes a clickable link to the corresponding URL.
+    </Note>
+
+### Regex pattern matching
+
+You can use regex patterns for more flexible matching. This is useful when you want to link multiple variations or patterns of text. 
+
+In the example below, the pattern `/get\\w+/` matches both `getPlant` and `getGarden`, while `/Plant(Store|Client)/` matches both `PlantStore` and `PlantClient`.
+
+<Tabs>
+  <Tab title="Example">
+    <CodeBlock
+      links={{"/get\\w+/": "/learn/docs/writing-content/demo#get-methods", "/Plant(Store|Client)/": "/learn/docs/writing-content/demo#type-definitions"}}
+    >
+    ```python
+    from plantstore import PlantStore, PlantClient
+
+    store = PlantStore(api_key="YOUR_API_KEY")
+    client = PlantClient(store)
+
+    plant = store.getPlant(plant_id="123")
+    garden = store.getGarden(garden_id="456")
+    ```
+    </CodeBlock>
+  </Tab>
+  <Tab title="Markdown">
+    ````markdown
+    <CodeBlock
+       links={{"/get\\w+/": "/learn/docs/writing-content/demo#get-methods", "/Plant(Store|Client)/": "/learn/docs/writing-content/demo#type-definitions"}}
+    >
+    ```python
+    from plantstore import PlantStore, PlantClient
+
+    store = PlantStore(api_key="YOUR_API_KEY")
+    client = PlantClient(store)
+
+    plant = store.getPlant(plant_id="123")
+    garden = store.getGarden(garden_id="456")
+    ```
+    </CodeBlock>
+    ````
+  </Tab>
+</Tabs>
+
+<Note>
+      When using regex patterns, remember to escape special characters with double backslashes (e.g., `\\w+`, `\\d+`) in the JSON string.
+    </Note>
+
 ## Combining props
 
-You can combine the `title`, `highlight`, `focus`, `startLine`, `maxLines`, and `wordWrap`
+You can combine the `title`, `highlight`, `focus`, `startLine`, `maxLines`, `wordWrap`, and `links`
 props to create a code block with a title, highlighted lines, specific starting line,
-and a maximum height.
+a maximum height, and clickable links.
 
 <Tabs>
   <Tab title="Example">
-    ```javascript title="Hello, World!" {6-8} maxLines=5 startLine={4}
+    ```javascript title="Hello, World!" {6-8} maxLines=5 startLine={4} links={{"console": "/learn/docs/writing-content/demo"}}
     console.log("Line 1");
     console.log("Line 2");
     console.log("Line 3");
@@ -325,8 +418,8 @@ and a maximum height.
     ```
   </Tab>
   <Tab title = "Markdown">
-    ````markdown maxLines=5
-    ```javascript title="Hello, World!" {6-8} maxLines=5 startLine={4}
+    ````markdown
+    ```javascript title="Hello, World!" {6-8} maxLines=5 startLine={4} links={{"console": "/learn/docs/writing-content/demo"}}
     console.log("Line 1");
     console.log("Line 2");
     console.log("Line 3");

fern/products/docs/pages/component-library/demo.mdx

@@ -0,0 +1,118 @@
+---
+title: Component demos
+hidden: true
+---
+
+This page contains demo content for testing and showcasing various documentation components. It's hidden from navigation but can be linked to from examples.
+
+## API client examples
+
+### PlantClient
+
+The `PlantClient` class is the main entry point for interacting with the Plant Store API. It handles authentication, request management, and provides access to all API endpoints.
+
+**Constructor parameters:**
+- `apiKey` (string, required): Your API authentication key
+- `baseUrl` (string, optional): Custom API base URL for testing
+- `timeout` (number, optional): Request timeout in milliseconds
+
+**Example usage:**
+```typescript
+import { PlantClient } from "@plantstore/sdk";
+
+const client = new PlantClient({ 
+  apiKey: "your-api-key-here" 
+});
+```
+
+### PlantConfig
+
+Configuration object for customizing the Plant Store SDK behavior.
+
+**Properties:**
+- `retryAttempts` (number): Number of retry attempts for failed requests
+- `cacheEnabled` (boolean): Enable response caching
+- `logLevel` (string): Logging verbosity level
+
+### createPlant
+
+Creates a new plant entry in the database.
+
+**Parameters:**
+- `name` (string, required): Common name of the plant
+- `species` (string, required): Scientific species name
+- `description` (string, optional): Plant description
+- `careLevel` (string, optional): Care difficulty level
+
+**Returns:** Promise resolving to the created plant object
+
+**Example:**
+```typescript
+const plant = await client.createPlant({
+  name: "Monstera",
+  species: "Monstera deliciosa",
+  careLevel: "easy"
+});
+```
+
+## API method examples
+
+### create_plant
+
+Python method for creating a new plant entry.
+
+**Signature:**
+```python
+def create_plant(
+    name: str,
+    species: str,
+    description: Optional[str] = None,
+    care_level: Optional[str] = None
+) -> Plant
+```
+
+### fetchPlants
+
+Retrieves a list of plants from the API with optional filtering.
+
+**Parameters:**
+- `filters` (object, optional): Filter criteria
+- `limit` (number, optional): Maximum number of results
+- `offset` (number, optional): Pagination offset
+
+**Returns:** Promise resolving to an array of plant objects
+
+## Type definitions
+
+### PlantStore
+
+The `PlantStore` class manages plant data storage and retrieval operations.
+
+**Constructor parameters:**
+- `apiKey` (string, required): Your API authentication key
+- `config` (PlantConfig, optional): Configuration options
+
+### PlantClient
+
+The `PlantClient` class provides a client interface for interacting with PlantStore.
+
+**Constructor parameters:**
+- `store` (PlantStore, required): PlantStore instance to use
+
+### PlantResponse
+
+Response object returned from plant-related API calls.
+
+**Properties:**
+- `plants` (Array): List of plant objects
+- `total` (number): Total count of plants
+- `hasMore` (boolean): Whether more results are available
+
+## Get methods
+
+Common retrieval methods for accessing plant store resources.
+
+| Method | Description | Parameters | Returns |
+|--------|-------------|------------|---------|
+| `getPlant` | Retrieves a single plant by its ID | `plant_id` (string, required): The unique identifier of the plant | Plant object |
+| `getGarden` | Retrieves a single garden by its ID | `garden_id` (string, required): The unique identifier of the garden | Garden object |