Solo

Solo is a one page website.

Its single HTML file provides a fully functionnal standalone website.

However, a collection of those websites can be gathered inside a unique domain.

Solo websites

Introduction

Discover the delights of a featherlight, smokin fast one page website:

Description

The basic principle of Solo is to use a simple and efficient website boilerplate to quickly set up a standalone website and deploy it to any CDN Solo is deployed on Netlify .

However, what does standalone mean for a website?

Well, it means that it’s a single page actually a single HTML file, with its associated pair of CSS stylesheet and JavaScript Service Worker reproducing the usual appearence of a multi page website, with sections clearly identified, always keeping the maximum simplicity andd flexibility in mind.

JavaScriptless, CSS classless

HTML5 and CSS alone are so performant in evergreen browsers that an advised developer can fairly rely on these stars to deliver a pretty simple but efficient website for an everyday use: for a blog, a project documentation, a portfolio or an ephemeral event, for instance.

Without JavaScript, no download delay and no debug! Without CSS classes, no messy cascade to hustle and blow up a quiet design. Hours spared to write content, that’s all.

Nonetheless, if needed, JavaScript scripts or CSS stylesheets can be easily added to Solo website.

Sections are all we need

To keep it simple, Solo content is fragmented in sections listed at the top of the website page as in a usual Menu. The sections number and names are not fixed, they are declared in the Front matter of the page.

Sometimes, it can be useful to group related website pages under a unique domain. Then, nothing is easier than grouping their links in a dedicated website page Solo uses an index website to do that, but any other name is possible .

A typical structure of a website page content could be:

Could be more, could be less: everything is driven by an array of names declared in the Front matter of the website page. Note that there is no obligation to separate images from text. Lightbox and slideshow components are there too for a presentation of grouped pictures lazily loaded.

Installation

Solo source code is available on Github.

Just type in the clone command in a project directory:

git clone https://github.com/octoxalis/soloFrame.git

then:

npm install

An environment file is needed to provide specific data. It must have defined the following key/value pairs:

AUTHOR_s   = owner_name
EMAIL_s    = owner_email
ID_s       = website_ID           # Github repository name 
NAME_s     = website_name         # name used in website content
                                  # (may be different)
LANGUAGE_s = website_language
URL_s      = website_url
LOCAL_s    = website_local_url    # with the usual port
DESCRIPT_s = a short description for search engines
GLOBAL_s   = a longer description for search engines

A _proto.md Markdown file is to be found in the source/matter/_prototype/ directory. Copy that file inside the source/matter/content/ directory, eventualy renaming it to index.md. From this file, Eleventy SSG will generate the index.html file of the website.

Edit this file, begining by its front matter part Located at the very top of the file, after the ----js { modifying the following JavaScript Object properties:

permalink: 'proto.html',  //: name of the new file
doc_n: 1,                 //: unique number
                          //: to sort files in a websites listing
title_s: 'proto',         //: website page title for browsers
section_a:                //: website section names
                          //: for navigation bar and headers
  [
    'Introduction',
    'Article',
    'Pictures',
    'Video'
  ],

All other properties are optional and for specific purposes, detailed in the extension section.

Internal linking

It’s always useful to be able to provide links within a website page As at the end of the previous paragraph. Following the StrictMarkdown formalisation, only full reference links are used, in the form:

[Link name][0]

The link label The [0] parthave to be exactly one symbol long:

As this enumeration is rather short, Unicode symbols may be used.

This is a recommandation: using another convention will not break Solo code.

Extension

Although offering many features in its default configuration, Solo provides a simple and powerful extension mechanism to add either JavaScript scripts or CSS stylesheets to its base code.

JavaScript scripts have to be located in the matrix/assets/scripts/js/ directory. To be loaded, the file name have to be declared in the script_a Array property of the front matter, for instance:

----js
{
  ...
  script_a: ['extend.min.js'],
  ...
}
----

The same procedure is to be followed for CSS stylesheets, located in the matrix/assets/styles/css/ directory:

----js
{
  ...
  css_a: ['extend.min.css'],
  ...
}
----

Solo proceeds this way when video, slideshow or lightbox components are needed. Styles for these components are not loaded by default in the inline style tag To avoid blocking resources in the page renderingand it is mandatory to declare the related stylesheets for sections that need them.

Colorable

Solo provides a very easy way to modifiy a webside colors, apart of its dual light mode The now usual Light and Dark modes. The source/make/data/C_o.js file Where some global data for Eleventy SSG are declaredhas a CSS constants section with four properties to defined the website base color and luminosity mode:

HUE_P_n:        228,  //: theme PRIMARY color in range [0...359]
LUM_MODE_n:     -1,   //: luminosity mode: 1 (light) || -1 (dark)
LUM_BASE_n:     50,
LUM_CONTRAST_n: 49,   //: luminosity contrast in range [30...49]
                      //: (30 is a softer contrast than 49)
                      //: see https://www.w3.org/TR/WCAG20/ §1.4.1

Have a look at the color.css file to understand how this works.