artdecocodesplendid
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 splendid
yarn add global splendidHere are some of the cool features of Splendid that makes it the best choice for building static websites.
JSX Components And Elements <kbd>📇 Elements & Components Wiki</kbd>
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.jsxfile, it will be statically rendered into compiled HTML. - On the other hand, by exporting it from the
/components/my-component.jsxfile, 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 Integration <kbd>🚥 Bootstrap Wiki</kbd>
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:
<container transform="translateX(-10px)">
<row>
<col sm-3 d-md-inline>Hello World</col>
</row>
</container>
JS Compilation And CSS Minification <kbd>🗜Assets Wiki</kbd>
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.
Lazy Rendering Of Components <kbd>🧩 Rendering Wiki</kbd>
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
rendermethod called by Preact. - Plain components that implement the
rendermethod 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 <kbd>📇 Elements & Components Wiki</kbd>
- Bootstrap Integration <kbd>🚥 Bootstrap Wiki</kbd>
- JS Compilation And CSS Minification <kbd>🗜Assets Wiki</kbd>
- Lazy Rendering Of Components <kbd>🧩 Rendering Wiki</kbd>
- 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.html
created page index.html
created page highlightjs.html
copied styles/app.css to website/styles/app.css
copied styles/default.css to website/styles/default.css
copied img/favicon.ico to website/img/favicon.ico
copied img/logo.jpg to website/img/logo.jpg
copied js/main.js to website/js/main.jsThe --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',
}
export default config
Pages Configuration
Each page need to be specified in the Pages config.
/**
* @type {import('splendid').Page}
*/
export 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
