Skip to main content

@happyvertical/smrt-template-site-static-json

Template for static community news sites with JSON-based data storage. Generates a SvelteKit static site with weather integration (Caelus) and council meeting scraping (Praeco).

What This Template Provides​

  • SvelteKit with adapter-static for static site generation
  • JSON file-based data storage in data/
  • Config-driven site identity, navigation, categories, and theming via smrt.config.js
  • Weather forecasts via Caelus (Environment Canada)
  • Council meeting scraping and article generation via Praeco
  • Typed site config helper (initSiteConfig()/getSite())
  • Pre-built routes: home, about, contact
  • Markdown utility for content rendering

Prerequisites​

  • Node.js 18+
  • pnpm (recommended)
  • Gemini API key (for Praeco article generation)

Usage​

smrt gnode create my-town-site --template site-static-json \
  --location "My Town, AB" \
  --lat 53.5 --lon -113.5

cd my-town-site
pnpm install
cp .env.example .env      # Add your GEMINI_API_KEY
pnpm run init-data        # Initialize data directory
pnpm dev                  # Start dev server

Environment Variables​

Defined in .env.example:

VariableRequiredDescription
GEMINI_API_KEYYesGoogle Gemini API key for Praeco article generation
PUBLIC_GTM_IDNoGoogle Tag Manager container ID
CUSTOM_DOMAINNoCustom domain for deployment

Configuration​

Edit smrt.config.js to customize. Key sections:

  • site -- name, description, location, navigation links, theme colors
  • categories -- content categories for routing (e.g., politics/local)
  • modules.praeco -- council meeting sources and report configurations
  • modules.caelus -- weather location (set automatically from --lat/--lon flags)

Available Scripts​

ScriptDescription
pnpm devStart development server
pnpm buildBuild static site to ./build
pnpm previewPreview the built site
pnpm run init-dataInitialize JSON data files
pnpm run workflow:caelusFetch weather data
pnpm run workflow:praecoScrape council meetings
pnpm run validate:jsonValidate JSON data files
pnpm run validate:slugsValidate content slugs

Template Structure​

template/
├── .env.example              # Environment variables
├── .gitignore
├── package.json              # Scripts and dependency placeholders
├── smrt.config.js            # Site identity, modules, theme
├── svelte.config.js          # SvelteKit with adapter-static
├── tsconfig.json
├── vite.config.ts
├── data/                     # JSON data storage directory
├── scripts/
│   └── init-data.ts          # Data initialization script
└── src/
    ├── app.css               # Global styles
    ├── app.d.ts              # SvelteKit type declarations
    ├── app.html              # HTML shell
    ├── site.config.ts        # Typed config helper (initSiteConfig/getSite)
    ├── lib/
    │   └── utils/
    │       └── markdown.ts   # Markdown rendering utility
    └── routes/
        ├── +layout.server.ts # Loads site config for all routes
        ├── +layout.svelte    # Root layout
        ├── +page.server.ts   # Home page data
        ├── +page.svelte      # Home page
        ├── about/            # About page
        └── contact/          # Contact page

Placeholder Substitution​

During smrt gnode create, placeholders like {{SITE_NAME}}, {{LOCATION_NAME}}, {{LATITUDE}}, {{LONGITUDE}}, and {{TIMEZONE}} are replaced from CLI flags. See template.config.js for the full mapping.

Deployment​

This template uses SvelteKit's static adapter. Build and deploy to any static host:

pnpm build
# Deploy ./build to S3, Netlify, Vercel, Cloudflare Pages, etc.