Project Abbreviation: scu-ssg
URL Slug: readme-project/scu-ssg
Developer Emails: scott.rouse@summitcreditunion.com
NPM URL: https://www.npmjs.com/package/scu-ssg
Repo URL: https://bitbucket.org/summitcu/scu-ssg
Documentation URL: https://bitbucket.org/summitcu/scu-ssg
An SSG coupled primarily to Contentful, scu-ssg is a light weight static site generator that has a built in client side preview generator.
- Create a folder and initialize a project (create package.json file)
yarn init
- Install scu-ssg
yarn add scu-ssg
- Create your first Contentful Entry and create Models, Views, and Controller (see How to Use).
- Add scripts to package.json:
"build": "scu-ssg build",
"build:prod": "scu-ssg build --env prod",
"start": "scu-ssg start",
"start:ssg": "scu-ssg start --ssg true"
The framework is utilized by extending three types of files:
BaseContentfulAPIModel gives a Contentful API based model that enables you to hook up a Content Type to Contentful API requests. There should be a Model for each Content Model (1:1). The majority of use cases should take only some configuration:
- contentTypeId set to the id of the Content Type (ex: "page")
- lookupField set to a field that can be used in lieu of the entry's id (ex: "fields.urlSlug")
- requiredEntities set to an array of entries that are required to run this page by itself. (ex: "['2H0mLtfCSigvIiT6hxltbW']")
- loadAllEntries(). This is used during server SSG build versus the browser build. It generally loads in everything you need from this content type by default. Override this to return nothing if the content type is connected to another content type through a reference. Default is loading every instance of the content type.
- loadEntry(). Override this ONLY if you know what you are doing and need a super specific way of accessing this content type.
- processModelResults(). Override this is there is something specific you need to have done to the results. By default BaseContentfulAPIModel will add all the references within the results to the load queue, so you should rarely need to do anything more.
BaseView gives you a full class to create entries into the BaseController. This allows you to create a string (html usually) output and associate an extention with that output (defaults to 'html').
This is where all of the models and views are woven together. scu-ssg looks for './src/Controller.ts' as the entry point for all compiling.
A preview entry point will need to be created. This example loads in a configuration file and uses that to configure the SSG controller:
// preview/preview.ts
import Controller from '../Controller';
import { runPreview } from 'scu-ssg';
export default async function (route: string) {
const config = await fetch('../config.json').then((res) => res.json());
const controller = new Controller(config);
runPreview(controller, route);
}
In the html you will just need to load this file and run:
// preview/index.html
import run from './preview.js';
run();
From here you can run any page client side:
Entries can be found via the "lookupField" set in each model:
/_system/preview/?route=urlSlug
Entry Id will also work:
/_system/preview/?route=entryId
Home Page:
/_system/preview/?route=
With Extension:
/_system/preview/?route=&extension=json
Npm publish
Dynamically built using contentful-readme-generator. Do not edit directly.
updated: 9/19/2022, 1:48:13 PM
built: 11/17/2022, 8:38:52 AM
space: 7gg213tt004u
environment: sandbox
entity id: 2H0mLtfCSigvIiT6hxltbW