Long-form

Prose & Code Split

Runs the explanation and the code sample it's describing side by side instead of stacking a code block under a wall of text — prose on one side, a labelled, independently scrollable code box on the other. Drops to a single column on mobile with the explanation first. No syntax-highlighter dependency to maintain or theme.

Subscription Included with the Velocity Components subscription.

bash

$ velocityx add prose-code-split

Built for astro.

Full docs for Prose & Code Split →

Needs a licence key — subscribe here, then velocityx loginonce.

astro v1.0.1

Prose & Code Split

Every request passes through this function before it reaches a route handler, which makes it the right place to bounce a signed-out visitor back to the login page before any page logic runs.

middleware.ts ts

export function middleware(req) {
  if (!req.cookies.get('session')) {
    return NextResponse.redirect('/login');
  }
  return NextResponse.next();
}

Props

Name	Type	Required	Default
filename	string	No
lang	string	No
reverse	boolean	No	false

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text

components/velocity/prose-code-split/ProseCodeSplit.astro

Using the Prose & Code Split component

Install it with velocityx add prose-code-split. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

All 406 components

Prose & Code Split

Props

File this creates

Using the Prose & Code Split component

Related components