Attached Image

This section imports an image from the same post folder and renders it inside the body. Even with a wider content column, the image should not become oversized or break the reading flow.

Test image placed inside the post body width
SVG image attachment test from the post folder.

PDF Attachment

The PDF is stored under files/ in the same post folder. In the build output, the link should resolve to a static asset URL.

Open test PDF

Short Audio Data

A short WAV file is stored under audio/ and should be playable through the browser’s native audio controls.

Long Body Test 1

This section checks whether line length and table-of-contents placement remain stable when paragraphs continue like a real technical article. Unlike the home page, a post page is more about reading flow than decoration. The body can be wider, but each line still needs a practical limit.

The important point in long writing is that readers should not lose their current position. Consistent headings, table of contents, subheadings, and paragraph spacing reduce scroll fatigue even when the content grows. The same principle applies when code blocks and attachments are mixed into the article.

Long Body Test 2

Different attachment types such as images, PDFs, and audio files stay inside the same post folder. This makes it possible to move or delete a post together with its related files, and it reduces the chance of old assets being left somewhere else in the repository.

Authors edit the post around main.mdx and localized MDX files, then place supporting materials in images/, files/, and audio/. The screen template lives under src/, so content writing and page implementation stay clearly separated.

Long Body Test 3

When widening the body, desktop screens are not enough. Laptop widths also need to be checked. If the body is too narrow, the page looks empty; if it is too wide, each line requires too much eye movement. This test post gives us a baseline for that middle ground.

On desktop, the table of contents stays on the right; on smaller screens, it naturally falls above the body. This matters more for long posts. If the table of contents pushes too hard against the body or makes the body feel narrow, the whole reading surface feels off.

Long Body Test 4

Attachment links should appear only where the surrounding context makes them useful. This test post exposes each file type for rendering checks, but real posts should make it clear why a reader should download or play a file.

Even near the bottom of a long article, paragraph spacing, code styling, inline code backgrounds, and link styles should keep the same rhythm. Small inconsistencies become much more visible when repeated through a long page.

Long Body Test 5

The final section checks the bottom spacing and the sticky state of the table of contents. Even when the body grows, the last paragraph should not feel stuck to the bottom of the viewport.

This is a test post, but it uses the same content collection, route, and layout as a real post. If the build passes, the same authoring flow can handle images, PDFs, audio, and long translated body content.