SYNTAX SHOWCASE

The syntax is the documentation.

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.

EXAMPLE 01 — HELLO WORLD

A minimal RECALL program.

Three divisions are required: IDENTIFICATION, DATA, and PROCEDURE. ENVIRONMENT can be omitted on minimal pages. STOP RUN closes the program.

recall 
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.
EXAMPLE 02 — NAVIGATION

Navigation via component copybook.

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.

recall 
* 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.
TIP

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.

EXAMPLE 03 — CARD GRID

Group data as a card layout.

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.

recall 
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.
EXAMPLE 04 — COPYBOOKS

Components with typed data contracts.

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.

recall 
* 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.
NOTE

ACCEPTS declares the component contract. WITH DATA satisfies it. The component defines the interface — the program provides the values.

EXAMPLE 06 — LIVE CHANGELOG

A personal changelog powered by LOAD FROM.

LOAD FROM reads a JSON file at compile time and generates WORKING-STORAGE scalars and ITEMS groups automatically. Update the JSON, run recall compile, push. No template engine. No CMS. The source knows where its data comes from.

recall 
DATA DIVISION.
   LOAD FROM " changelog.json".

PROCEDURE DIVISION.

   RENDER-LOG.
      DISPLAY SECTION ID " log"
         WITH LAYOUT STACK.
         DISPLAY TABLE LOG
            WITH COLUMNS " Date, Project, Change, Status"
            WITH STRIPED YES.
      STOP SECTION.

   STOP RUN.
TIP

This is a live example — view the compiled output at /changelog.html. Update changelog.json and recompile to publish changes.

View Live Changelog
EXAMPLE 05 — DOCS LAYOUT

Sidebar navigation for documentation.

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.

recall 
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.
TIP

This documentation site is itself written in RECALL. View source on any page to see the .rcl origin embedded in the HTML.