# Every block on this site

This page is assembled from the same blocks as the rest of the site. The label above each section is its Storyblok component name.

[How it works](/how-it-works)

## Feature grid

### Title and text

Each card is a nested feature block with a title and a short text.

### Optional link

Add a path and the whole card becomes a link.

[Optional link](/how-it-works)

## Steps

Numbered in the order editors arrange them.

1. **Drag to reorder**
   
   Moving a step in Storyblok renumbers the list.

2. **Link a file**
   
   A step can name the file that implements it.
   
   [src/components/Steps.tsx](https://github.com/marcop135/nextstory/blob/main/src/components/Steps.tsx)

## Rich text

Storyblok rich text renders on the server with ` StoryblokServerRichText `. It supports **bold**, links, and lists:

- paragraphs and headings
- inline code and links
- [the rich text docs](https://www.storyblok.com/docs/concepts/fields/rich-text)

## A page built from blocks

The image and text belong to one section. Editors can change both, move the image to the other side, and choose where the link leads.

![Watercolor wireframe sketches showing reusable sections in website layouts](https://images.unsplash.com/photo-1522542550221-31fd19575a2d?auto=format&fit=crop&w=1600&h=840&q=85)

Hal Gatewood / Unsplash: https://unsplash.com/photos/watercolor-wireframe-sketches-of-website-layouts-tZc3vjPCk-Q

[How it works](/how-it-works)

## A closer look at the blocks

## What can an editor change?

The fields in Storyblok control the content. Editors can reorder sections, update copy, and add any block allowed by the page model.

## Does this interaction need JavaScript?

No. This accordion uses the native HTML details and summary elements. It can be opened with a mouse, touch, or keyboard, even before JavaScript loads.

> One block at a time. Each with a concrete example.

The approach behind this project

## What changes in the CMS, what changes in code

Editors work with the blocks developers provide. The content model connects both sides.

Content and component ownership

| Task | Editor in Storyblok | Developer in the repository |
| --- | --- | --- |
| Copy and translations | Edit fields and publish | No deploy needed |
| Arrange sections | Reorder existing blocks | Define allowed blocks in the schema |
| Add a new block | Use the available block | Add the schema, React component, and tests |

## The schema names resolve to React components

The server registers the component map before rendering a story. Each block name in the CMS resolves to its implementation.

```TypeScript
export function registerStoryblokComponents(): void {
  setComponents(storyblokComponents);
}
```

The registration function used by the server renderer.

[src/lib/storyblok.ts](https://github.com/marcop135/nextstory/blob/main/src/lib/storyblok.ts)

## View the source

The components and content models behind this page are on GitHub.

[View on GitHub](https://github.com/marcop135/nextstory)

## Learning notes

[Content relationships](/content-relationships)

Reuse one story across pages

[Cache invalidation](/cache-invalidation)

Publish once, refresh dependent pages

Canonical: https://nextstory.marcopontili.com/blocks
Content source: storyblok; published representation.