Note	As of the latest commit in `config-refactor` branch, future development has moved to Coulomb repository.

Static site editor elements

SSE (Static Site Editor) aims to simplify the creation of cross-platform user-friendly GUIs for editing static websites with Electron, and provides an assortment of tools to that effect.

SSE is based on React and Typescript. Its UI widgets build upon Blueprint 3, and it uses Isomorphic Git to provide collaboration tools.

Modules provided by SSE are organized by functionality. Each module may contain renderer and/or main submodules; those contain units usable in Electron’s renderer (e.g., React components) or main (e.g., storage-related code) threads respectively. Anything not under those two modules is (must be) importable anywhere regardless of thread.

For example, storage contains code for handling Git repository interaction (main-only), and also offers a “data synchronizer” UI component (renderer-only).

Architecture

The app is organized in a way where a lot of the functionality involves API calls between main and renderer threads. E.g., when a window needs to be opened, renderer code (browser window) would call a main API endpoint, and main thread will launch the window as required.

Provided modules

At its current (fairly early) stage it consists of following components:

settings: Manipulate application settings exposed to the user in some way
localizer: Work with data that is translatable in multiple languages
storage: Manipulate structured data, e.g. Jekyll posts or such, and synchronize it with upstream using VCS. Currently supports YAML and Git
preflight: Check data for problems, which may help identify issues that would break site build
spotlight: Look up objects in the database
api: Offers tools for communication between Electron main and renderer processes through API endpoints
main/window: Offers tools for Electron window manipulation
renderer/widgets: Offers a set of Blueprint 3-based widgets

Installation & usage

The project is not distributed through NPM currently.

Add the following runtime requirement to your package.json (for current_version, replace it with latest version per repository tags):

"sse": "https://github.com/riboseinc/sse-elements#sse-elements-<current_version>-gitpkg",

Usage docs are coming, but for now you’re welcome to see how ITU OB editor app uses this library.

Contribution

Authoring React components

The convention is to use functional components.

interface MyWidgetProps {
  someProp: SomeType,
  // ...
}
export const MyWidget: React.FC<MyWidgetProps> = function ({ someProp }) {
  return <p>{someProp.toLowerCase()}</p>;
};

Styling React components

Styling is kept in styles.scss files next to each component.

For example, in /src/renderer/my_component/index.tsx:

import styles from './styles.scss';

export const MyComponent: React.FC<{}> = function () {
  return <p className={styles.myParagraphClassName}>Paragraph text…</p>
};

…and in /src/renderer/my_component/styles.scss:

@import "~@blueprintjs/core/lib/scss/variables";

:local .myParagraphClassName {
  color: $pt-text-color;
}

To access CSS selectors provided by Blueprint within your local selectors, use :global notation. For example:

:local .myParagraphClassName {
  :global .bp3-active {
    // ...
  }
}

Release process

Make sure you have gitkpg globally installed (yarn global add gitpkg).

From repository root:

# Edit dist/package-dist.json to increment version and (if changed) port dependencies from main packgage.json
yarn prepublish
cd dist
gitpkg publish

riboseinc / sse-elements