A headless Next.js frontend for the Timberland WordPress framework. Fetches design tokens from the WordPress REST API and compiles Bootstrap CSS using the active theme's variables.
- Node.js 22+
- A running Timberland WordPress site (for token sync)
npm installCreate .env.local with your WordPress backend URL:
TIMBERLAND_API_URL=https://your-wp-site.com
Then sync design tokens and start the dev server:
npm run devThe predev hook runs sync-tokens automatically before the dev server starts.
| Command | Description |
|---|---|
npm run dev |
Sync tokens, then start Next.js dev server |
npm run build |
Production build |
npm run sync-tokens |
Fetch Bootstrap tokens from WordPress and write _synced.generated.scss |
npm run lint |
Run ESLint |
scripts/sync-tokens.mjs fetches GET /wp-json/timberland/v1/design-tokens from the WordPress backend and writes 14 Bootstrap variable values to src/scss/non-printing/_synced.generated.scss. Bootstrap compiles against those values so the headless frontend stays in step with the active WordPress theme's typography, colors, and spacing.
src/scss/non-printing/libs/_bootstrap.scss consumes the generated file using Sass if():
@use "../synced.generated" as s;
$line-height-base: if(s.$line-height-base != null, s.$line-height-base, 1.4);
$h1-font-size: if(s.$h1-font-size != null, s.$h1-font-size, calc(#{$font-size-base} * 2.75));
// ...When TIMBERLAND_API_URL is not set, sync-tokens writes null placeholders so the build still succeeds using the starter's own defaults.
SYNC_TOKENS=false
- name: Sync design tokens
env:
TIMBERLAND_API_URL: ${{ secrets.TIMBERLAND_API_URL }}
run: npm run sync-tokens
- name: Build
run: npm run buildsrc/scss/
├── non-printing/
│ ├── _synced.generated.scss ← AUTO-GENERATED by sync-tokens (gitignored)
│ ├── libs/
│ │ └── _bootstrap.scss ← Bootstrap variable overrides + if() sync pattern
│ ├── _colors.scss
│ └── _type.scss
└── printing/
└── libs/
└── _bootstrap-root.scss ← Bootstrap :root CSS custom properties