ink

# Ink

Ink Core • Marketplace (opens new window) • @account (opens new window) • @author (opens new window) • @beta-reader (opens new window)

This is a hybrid webpack project for web and electron builds.

# Develop

yarn install
yarn [web|app]  # Serve dev web app or electron app

# Test

yarn lint
yarn test:unit  # Help! There's not much here a the moment

# Build

yarn build:web  # build web and link to docs/assets/
yarn build:app  # build all electron platforms
yarn build:site  # build mythulu.ink website in ../docs

Structure:

  • src: Vue app code. Some files are not compiled for the frontend bundle.
  • public: Support files for web and electron root page
  • build: Support files for electron:build
  • dist: Output for build
  • dist_electron: Output for electron:build
  • plugins: Git submodules for runtime plugins

Both frontend and backend refer to plugin sources so that built-in plugins are available without new requests. A backend can service any frontend that can get api tokens from it.

Frontend bundles:

  • src/index.js
  • src/app/src/services/preset-[web|electron].js (desired backend hosts config)
  • plugins/*/index.js

Backend bundles:

  • src/service/index.js
  • plugins/*/service/index.js

Electron bundles frontend and backend, plus:

  • src/background.js: Window controllers
  • src/preload.js: Context bridge to backend ("provider") api
    • exposes self-advertised provider id local, loads backend

Web bundles frontend and uses a static page to bootstrap the app:

  • public/index.html

Plugins are imported and bound to the app during loadProvider from app/src/extensions.js

# Plugins

Plugins can contain one or more type of "extension" to the Ink core. Since they are hierarchical in their design, Areas tend to include Activities, etc.

# Areas

exampleplugin/Area.vue

An "Area" is the user-facing term for a plugin's UI frontend, and appears on the main page of work areas. Each area is focused on a type of user, such as Author, Beta Reader, Editor, etc.

Each Area can include settings in its component for accent color, icon, etc.

# Activities

Area.activities routes list mounted on exampleplugin/Area.vue component.

Exposed in an Area's primary top-right nav, an "Activity" is geared toward a type of work that the user can do in that Area. The @author plugin Area offers writing and managing story bible, plot, and beta reader list.

By convention, Activities choose a layout for the whole work area, including left sidebar and right sidebar content sections.

Each Activity can include settings in its component for accent color, icon, etc.

# Tasks

Format TBD.

Tasks are individual views within an Activity. Most are configured to appear as center nav entries above the work area, but some may be hidden or shown situationally.

# Widgets

Format TBD.

Vue components that go in the right sidebar, and are assigned per-Task.

# services

exampleplugin/service/index.js

The backend code (if any) required for the component to function. The service directory is never loaded by a web build or electron's frontend. It can have its own package.json for new dependencies, which are built by whichever provider is including the plugin in its service agent.

App →