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 waylocalizer
: Work with data that is translatable in multiple languagesstorage
: Manipulate structured data, e.g. Jekyll posts or such, and synchronize it with upstream using VCS.
Currently supports YAML and Gitpreflight
: Check data for problems, which may help identify issues that would break site buildspotlight
: Look up objects in the databaseapi
: Offers tools for communication between Electron main and renderer processes through API endpointsmain/window
: Offers tools for Electron window manipulationrenderer/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):
Usage docs are coming, but for now you’re welcome to see how https://github.com/ituob/itu-ob-editor/[ITU OB editor app] uses this library.
== Contribution
=== Authoring React components
The convention is to use functional components.
{someProp.toLowerCase()}
; };==== 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';
Paragraph text…
};…and in /src/renderer/my_component/styles.scss
:
@import "~@blueprintjs/core/lib/scss/variables";
To access CSS selectors provided by Blueprint within your local selectors,
use :global
notation. For example:
=== Release process
Make sure you have gitkpg
globally installed (yarn global add gitpkg
).
From repository root: