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 items live in a .rcpy copybook. COPY FROM includes it at compile time. The item data stays in the component — not scattered across the main program. Each 05-level pair is one link.
* components/nav.rcpy 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". PROCEDURE DIVISION. COMPONENT. DISPLAY NAVIGATION USING NAV-ITEMS WITH STICKY YES WITH LOGO "MY SITE". STOP SECTION. * index.rcl PROCEDURE DIVISION. RENDER-NAV. COPY FROM "components/nav.rcpy". STOP RUN.
The .rcpy file owns its data and its rendering. The main program uses one line: COPY FROM. The output is still one self-contained HTML file.
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 can declare an ACCEPTS contract. Load the component in COMPONENT DIVISION, then use DISPLAY WITH DATA to bind values. This is the @semanticintent/recall-ui pattern.
* npm install @semanticintent/recall-ui ENVIRONMENT DIVISION. COPY FROM @semanticintent/recall-ui/themes/dark.rcpy. COMPONENT DIVISION. COPY FROM @semanticintent/recall-ui/components/nav.rcpy. 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". 05 NAV-ITEM-2 PIC X(20) VALUE "ABOUT". 05 NAV-ITEM-2-HREF PIC X(80) VALUE "/about.html". PROCEDURE DIVISION. RENDER-NAV. DISPLAY SITE-NAV WITH DATA SITE-LOGO "MY SITE", NAV-ITEMS NAV-ITEMS. STOP RUN.
ACCEPTS declares the component contract. WITH DATA satisfies it. The component defines the interface — the program provides the values.
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.