Templates & Partials

Reusable code snippets and template interpolation in Spry

Template Interpolation

Use JavaScript template literals inside your SQL code blocks for dynamic content generation:

```sql users.sql
SELECT 'table' AS component;
SELECT ${paginate("users", 20)} AS page_size;

Built-in Template Functions

Spry provides several built-in template functions:

Pagination

Add pagination to your queries:

SELECT ${paginate("table_name", 25)} AS component;

Generate navigation menu items:

SELECT ${md.link("route", ["param1", "param2"], "label")} AS content;

Breadcrumbs

Automatically generate breadcrumb navigation:

SELECT ${md.breadcrumbs()} AS component;

Partials System

Partials are reusable code snippets that can be injected into multiple places:

# Partials

```sql _partial_header.sql
SELECT 'shell' AS component,
       'My App' AS title,
       'menu' AS menu_component;
```

# Use the partial

```sql index.sql
${include('_partial_header')}

SELECT 'hero' AS component,
       'Welcome!' AS title;
```

Auto-Injection with Globs

Use glob patterns to automatically inject partials into matching files:

```sql _partial_auth.sql { inject: "admin/**/*.sql" }
-- Check if user is authenticated
SELECT CASE
  WHEN NOT EXISTS (SELECT 1 FROM sessions WHERE active = 1)
  THEN sqlpage.redirect('/login')
END;

This partial will be automatically injected at the top of all SQL files in the admin/ directory.

Variable Substitution

Define variables and use them throughout your Spryfile:

# Configuration

```javascript config
export const APP_NAME = "My Application";
export const VERSION = "1.0.0";
export const ITEMS_PER_PAGE = 25;
```

# Use variables

```sql index.sql
SELECT 'hero' AS component,
       '${APP_NAME}' AS title,
       'Version ${VERSION}' AS subtitle;
```

Practical Example

Here’s a complete example using templates and partials:

# Shared Layout

```sql _layout.sql { inject: "**/*.sql" }
SELECT 'shell' AS component,
       'My App' AS title,
       'menu' AS menu_component;

SELECT 'menu' AS component;
SELECT '/' AS link, 'Home' AS title;
SELECT '/about' AS link, 'About' AS title;
SELECT '/contact' AS link, 'Contact' AS title;
```

# Homepage

```sql index.sql
SELECT 'hero' AS component,
       'Welcome!' AS title;

SELECT 'card' AS component, 3 AS columns;
${generateFeatureCards(['Fast', 'Simple', 'Powerful'])}
```