splendid
Splendid is a static website compiler in Node.JS. It is flexible to build websites either small or large, and utilises the power of Closure Compiler and Closure Stylesheets to compile JS and CSS assets. Instead of JS SPAs, it produces HTML code that can even be shown without any JavaScript. This is achieved with static server-side rendered elements together with dynamic client-side components which are written in JSX syntax and implemented using Preact. The number of dependencies is very small and the software does not rely on Babel.
yarn add -D splendidyarn add global splendid
Here are some of the cool features of Splendid that makes it the best choice for building static websites.
Elements & Components Wiki
JSX Components And Elements 📇Each website will have a set of elements that might be reused across pages. It will also have interactive components. The best way to write both is using JSX syntax:
- By simply exporting an element from the
/elements/my-element.jsx
file, it will be statically rendered into compiled HTML. - On the other hand, by exporting it from the
/components/my-component.jsx
file, it will be added to the page dynamically at run time.
In both cases, properties are passed from pages' HTML in arguments: <my-element src="example.png">
. This means you can continue creating websites in old fashion using HTML, only making use of JSX when you need to program elements.
Bootstrap Wiki
Bootstrap Integration 🚥Bootstrap elements can be used natively since Splendid implements their semantics as elements, with appropriate tags. The utilities defined in attributes will be added to the class name. Attributes that correspond to CSS properties will also be converted into a style. This makes it really easy to write layout:
Hello World
Assets Wiki
JS Compilation And CSS Minification 🗜All style and script assets that are added to pages will undergo a compilation and optimisation using Closure tools.
- Closure Compiler will create the smallest possible JavaScript transpiled into ES2015 and split it in chunks so that all common code can be shared by pages.
- Whereas Closure Stylesheets will process CSS files to combine them into a single minified one.
Components can also access CSS API in order to rename their classes, e.g,. .MyComponent .HelloWorld
becomes .MyComponent .a
. CSS rules also automatically recieve browser prefix expansion (transform
-> -webkit-transform
) for greater compatibility.
Rendering Wiki
Lazy Rendering Of Components 🧩Components will be rendered only when they are scrolled into view (allowed for render margin). They will also get a chance to download additional assets such as CSS, or JS libraries, before rendering, so that these resources don't block the initial rendering of the page. There are generally 3 types of components:
- Preact components which are either functions or implementations of the Preact Component, and implement the
render
method called by Preact. - Plain components that implement the
render
method which is called directly when they are called into view. - Plain components that can download server-built HTML code and inject it into DOM when needed. They allow to keep the number of nodes in critical render path small so that initial layout and parsing can be performed faster.
In every case, components will be added to the page just before the user views them. <noscript>
implementations can also be provided for users with disabled JavaScript.
- JSX Components And Elements 📇 Elements & Components Wiki
- Bootstrap Integration 🚥 Bootstrap Wiki
- JS Compilation And CSS Minification 🗜Assets Wiki
- Lazy Rendering Of Components 🧩 Rendering Wiki
- Usage
- Splendid Configuration
- Pages Configuration
- Default Structure
- Development Server
- Copyright & License
Usage
splendid
when called from the command line will trigger a build. It will read the splendid/config.js
relative to the cwd.
$ splendid created page markdown.htmlcreated page index.htmlcreated page highlightjs.htmlcopied styles/app.css to website/styles/app.csscopied styles/default.css to website/styles/default.csscopied img/favicon.ico to website/img/favicon.icocopied img/logo.jpg to website/img/logo.jpgcopied js/main.js to website/js/main.js
The --watch
flag will result in observing files in the app directory for changes (including the config) and rebuilding when necessary.
Splendid Configuration
A configuration object for a new website can use import
statements.
/** @type {import('splendid').Config} */const config = layout: 'splendid/layout/main.html' replacements: re: /{{ company }}/g replacement: '[Splendid](https://splendid.sh)' // output: 'docs', // appDir: 'splendid', // to generate sitemaps, use either folder or domain website. // url: 'https://website.github.io/splendid', // url: 'https://splendid.page',
Pages Configuration
Each page need to be specified in the Pages
config.
/** * @type {import('splendid').Page} */const main = title: 'Main Page' url: 'index.html' file: 'index' menuUrl: '/' seo: 'The 150-160 characters search engine meta:description' og: image: '/img/logo.jpg'
The path to the file is relative to the pages dir.
structures/website/splendid/pages├── index│ ├── 1-intro.html│ └── index.md└── index.js
Default Structure
splendid
comes with a simple default website. To initiate splendid
in the current working directory with the default structure, run splendid --init
(or the shorter version is splendid -I
).
$ MacBook:test-website zavr$ splendid --init
Added Dockerfile, nginx.conf, splendid to .
Run splendid again to compile.
Development Server
To serve the static website locally during the development of the website, the development server is added to splendid
. It will be started on http://localhost:5000 with the splendid -s
command.
Copyright & License
(c) Splendid 2019