fwtoolkit

Fidus Writer Toolkit — reusable TypeScript utilities, UI helpers and styles originally written for Fidus Writer but usable in any browser project.

JavaScript usage

import { escapeText, addAlert } from "fwtoolkit"
import { convertDataURIToBlob } from "fwtoolkit/blob.js"

TypeScript

The source is written in TypeScript and ships with declaration files:

import { Dialog } from "fwtoolkit/dialog.js"

CSS

The package ships the styles for its UI components under fwtoolkit/css/. Load at least colors.css and the component styles you need. If the host page has not already applied a CSS reset, also load reset.css before the component styles:

<link rel="stylesheet" href="node_modules/fwtoolkit/css/reset.css" />
<link rel="stylesheet" href="node_modules/fwtoolkit/css/colors.css" />
<link rel="stylesheet" href="node_modules/fwtoolkit/css/dialog.css" />
<link rel="stylesheet" href="node_modules/fwtoolkit/css/buttons.css" />

In Fidus Writer the CSS is copied automatically to the static files directory by the copy_fwtoolkit_css postinstall step.

Demos

Live demos are published on Codeberg Pages:

https://fiduswriter.codeberg.page/fwtoolkit/

To build and deploy the demos yourself, run:

npm run build
./scripts/deploy-pages.sh

You will also need to configure a Forgejo webhook in the repository settings with the target URL https://fiduswriter.codeberg.page/fwtoolkit and branch filter pages.

Development

npm install
npm run build
npm test

Contents

• src/ — TypeScript source
• dist/ — compiled JavaScript and declaration files (generated by npm run build)
• css/ — component styles and a minimal colors.css
• demo/ — Codeberg Pages demo site
• test/ — Jest tests