RECALL source reads like a structured document. Every division has a purpose. Every clause has a name. Nothing is hidden. These examples show what that looks like in practice.
Three divisions are required: IDENTIFICATION, DATA, and PROCEDURE. ENVIRONMENT can be omitted on minimal pages. STOP RUN closes the program.
IDENTIFICATION DIVISION. PROGRAM-ID. MY-SITE. PAGE-TITLE. "Hello, World.". DATA DIVISION. WORKING-STORAGE SECTION. 01 HERO-HEAD PIC X(40) VALUE "STILL HERE.". 01 HERO-BODY PIC X(200) VALUE "Built to last.". PROCEDURE DIVISION. RENDER-HERO. DISPLAY SECTION ID "hero" WITH LAYOUT CENTERED WITH PADDING LARGE. DISPLAY HEADING-1 HERO-HEAD. DISPLAY PARAGRAPH HERO-BODY. STOP SECTION. STOP RUN.
Navigation links live in the DATA DIVISION as ITEMS — a COBOL-style hierarchical group. Each 05-level entry is a link. The NAVIGATION element reads them at compile time.
DATA DIVISION. ITEMS SECTION. 01 NAV-ITEMS. 05 NAV-ITEM-1 PIC X(20) VALUE "DOCS". 05 NAV-ITEM-1-HREF PIC X(80) VALUE "/docs.html". 05 NAV-ITEM-2 PIC X(20) VALUE "EXAMPLES". 05 NAV-ITEM-2-HREF PIC X(80) VALUE "/examples.html". 05 NAV-ITEM-3 PIC X(20) VALUE "GITHUB". 05 NAV-ITEM-3-HREF PIC X(80) VALUE "https://github.com/semanticintent/recall". PROCEDURE DIVISION. RENDER-NAV. DISPLAY NAVIGATION USING NAV-ITEMS WITH STICKY YES WITH LOGO "RECALL". STOP SECTION. STOP RUN.
NAV-ITEM-N and NAV-ITEM-N-HREF must be consecutive 05-level entries. The NAVIGATION element pairs them automatically.
The ITEMS section holds hierarchical group data. Each 05-level entry becomes a card. The 10-level fields become the card title, description, tag, and link. CARD-LIST renders the group as a responsive grid.
DATA DIVISION. ITEMS SECTION. 01 PROJECT-ITEMS. 05 PROJECT-1. 10 PROJ-TITLE PIC X(60) VALUE "THE SOURCE IS THE ARTIFACT". 10 PROJ-DESC PIC X(200) VALUE "Every compiled page embeds its origin.". 10 PROJ-TAG PIC X(20) VALUE "CORE". 10 PROJ-HREF PIC X(80) VALUE "/docs.html". 05 PROJECT-2. 10 PROJ-TITLE PIC X(60) VALUE "ZERO DEPENDENCIES". 10 PROJ-DESC PIC X(200) VALUE "One file. Inline CSS. No framework.". 10 PROJ-TAG PIC X(20) VALUE "CONSTRAINT". 10 PROJ-HREF PIC X(80) VALUE "/docs.html". PROCEDURE DIVISION. RENDER-GRID. DISPLAY SECTION ID "projects" WITH LAYOUT STACK WITH PADDING MEDIUM. DISPLAY CARD-LIST USING PROJECT-ITEMS WITH COLUMNS 2 WITH HOVER-LIFT YES. STOP SECTION. STOP RUN.
Copybooks use the .rcpy extension — a direct reference to COBOL's .cpy format. They are never compiled standalone. COPY FROM inlines them at compile time. The output is still one self-contained HTML file.
* components/nav.rcpy IDENTIFICATION DIVISION. PROGRAM-ID. SITE-NAV. DATA DIVISION. ITEMS SECTION. 01 NAV-ITEMS. 05 NAV-ITEM-1 PIC X(20) VALUE "HOME". 05 NAV-ITEM-1-HREF PIC X(80) VALUE "/index.html". PROCEDURE DIVISION. COMPONENT. DISPLAY NAVIGATION USING NAV-ITEMS WITH STICKY YES WITH LOGO "MY SITE". STOP SECTION. * index.rcl — COPY FROM the copybook PROCEDURE DIVISION. RENDER-NAV. COPY FROM "components/nav.rcpy". STOP RUN.
recall build compiles all .rcl files and skips .rcpy files automatically. No config needed.
LAYOUT SIDEBAR creates a two-column grid. SIDEBAR-NAV reads a nested ITEMS group — each 05-level is a navigation section with a GROUP-LABEL and NAV-LINK pairs. Content sections nest inside the SIDEBAR section.
PROCEDURE DIVISION. RENDER-LAYOUT. DISPLAY SECTION ID "docs" WITH LAYOUT SIDEBAR WITH PADDING NONE. DISPLAY SIDEBAR-NAV USING DOCS-NAV WITH LOGO "MY DOCS" WITH STICKY YES. DISPLAY SECTION ID "intro" WITH LAYOUT STACK WITH PADDING LARGE. DISPLAY HEADING-1 "Introduction" WITH STYLE MONO. DISPLAY PARAGRAPH INTRO-BODY. DISPLAY CALLOUT "Note: always ends with STOP RUN." WITH TYPE NOTE. STOP SECTION. STOP SECTION. STOP RUN.
This documentation site is itself written in RECALL. View source on any page to see the .rcl origin embedded in the HTML.