Templates & Partials
An overview of the Reusable code snippets and template interpolation in Spry.
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;Navigation Links
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;
```Partials starting with underscore (_) are not generated as standalone routes.
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'])}
```Template functions have access to all Deno APIs and can perform complex computations.
How is this guide?
Last updated on