https://github.com/riboseinc/sse-elements
Tools & widgets for implementing static site editor (structured data entry) frontends in Electron
https://github.com/riboseinc/sse-elements
Last synced: about 2 months ago
JSON representation
Tools & widgets for implementing static site editor (structured data entry) frontends in Electron
- Host: GitHub
- URL: https://github.com/riboseinc/sse-elements
- Owner: riboseinc
- License: mit
- Created: 2019-10-29T03:06:39.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T11:12:39.000Z (over 2 years ago)
- Last Synced: 2025-04-11T03:46:49.313Z (about 2 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.26 MB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 27
-
Metadata Files:
- Readme: README.adoc
- License: LICENSE
Awesome Lists containing this project
README
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):
[source]
----
"sse": "https://github.com/riboseinc/sse-elements#sse-elements--gitpkg",
----
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.
[source,tsx]
----
interface MyWidgetProps {
someProp: SomeType,
// ...
}
export const MyWidget: React.FC = function ({ someProp }) {
return
{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`:
[source,tsx]
----
import styles from './styles.scss';
export const MyComponent: React.FC<{}> = function () {
return
Paragraph text…
};
----
…and in `/src/renderer/my_component/styles.scss`:
[source,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:
[source,scss]
----
:local .myParagraphClassName {
:global .bp3-active {
// ...
}
}
----
=== Release process
Make sure you have `gitkpg` globally installed (`yarn global add gitpkg`).
From repository root:
[source,sh]
----
# Edit dist/package-dist.json to increment version and (if changed) port dependencies from main packgage.json
yarn prepublish
cd dist
gitpkg publish
----