---
title: "Scrollycoding on a page without a table of contents"
description: "A demo page. A scrollycoding block with long lines spreads past the content column to show its steps beside the code."
url: "https://ewels.github.io/starlight-codeblocks/features/scrollycoding/wide/"
markdown: "https://ewels.github.io/starlight-codeblocks/features/scrollycoding/wide.md"
site: "starlight-codeblocks documentation"
context: "This page is from the documentation of starlight-codeblocks. A Starlight plugin that adds focus, line states, annotations, API auto-linking and 22 more features to the code blocks of a site."
index: "https://ewels.github.io/starlight-codeblocks/llms.txt"
---

# Scrollycoding on a page without a table of contents

> A demo page. A scrollycoding block with long lines spreads past the content column to show its steps beside the code.

This page shows [scrollycoding](https://ewels.github.io/starlight-codeblocks/features/scrollycoding/) on a page that has no table of contents. The text stays in Starlight's content column. The block below has lines too long for that column, so it spreads over the free space on each side. Then it shows the steps beside the code. Make the window narrower to see each step get its own copy of the block.

```py title="orders.py"
import csv
from collections import Counter
from pathlib import Path


def load_orders(path: Path) -> list[dict[str, str]]:
    with path.open(newline="", encoding="utf-8") as fh:
        return [row for row in csv.DictReader(fh) if row["status"]]
```

`load_orders` takes the path of a CSV file and returns one dict for each row.

`newline=""` lets the CSV reader handle the line ends.

Rows with no status are left out.

```py title="orders.py"
import csv
from collections import Counter
from pathlib import Path


def load_orders(path: Path) -> list[dict[str, str]]:
    with path.open(newline="", encoding="utf-8") as fh:
        return [row for row in csv.DictReader(fh) if row["status"]]


def count_by_status(orders: list[dict[str, str]]) -> Counter[str]:
    return Counter(order["status"] for order in orders)
```

`count_by_status` counts the orders for each status.

`Counter` comes from the standard library.

The text after the block is in the content column again.