# fwtoolkit

<p align="center"><img src="https://git.fiduswriter.org/fiduswriter/fwtoolkit/raw/branch/main/demo/logo.svg" alt="fwtoolkit logo" width="100" height="100"></p>

Fidus Writer Toolkit — reusable TypeScript utilities, UI helpers and styles
originally written for [Fidus Writer](https://fiduswriter.org) but usable in any
browser project.

## JavaScript usage

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

## TypeScript

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

```typescript
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:

```html
<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 Forgejo Pages:

**https://fiduswriter.pages.fiduswriter.org/fwtoolkit/**

To build and deploy the demos yourself, run:

```bash
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.pages.fiduswriter.org/fwtoolkit` and branch
filter `pages`.

## Development

```bash
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/` — Forgejo Pages demo site
- `test/` — Jest tests
