Style your documents deterministically.
- Fearless styling: Style once and forget about it ever breaking.
- Version control: Supercharge your documents with Git; know what changed when and why!
- Mass production: Automate building repetitive documents using the JSON API.
- Presets (WIP): Same you, different look? Create new styles without losing old ones.
This project isn't meant to be used out of the box; instead, this project provides an infrastructure for compiling custom data and pre-defined designs into HTML/PDF conveniently. The idea is that you define the designs and data formats and utilise the conversion structure provided by this project.
- Clone this repository.
- Run
nix develop
within this project's directory to install our build dependencies. - Run
npm install
to install our package dependencies.
- Rename
src/*/data.nix.example
tosrc/*/data.nix
and populate it with the necessary information. - Run
just
to see the available command options.build <design>
: Build the PDF choosing a design.watch <design>
: Watch the build. As you change files, the PDF will regenerate automatically.
- View your generated PDF at
dist/output.pdf
.
Note To use TailwindCSS, set
USE_TAILWINDCSS
to1
. To use a different file location, setINPUT_FILE_PATH
.
- Run
npm run dev
for local hosting andnpm run start
for production hosting. - The API routes are as follows:
POST <url>/pdf?target=<design>
:design
must match the exact folder name that you have stored for your design.- The body must be formatted as such:
{ "options": { "tailwindcss": true }, "data": {} }
POST <url>/html?target=<design>
: The rules are the same as the PDF endpoint.
Setup the project? Good. Here's what you need to know to kick-start developing your own designs:
-
The directory where you will be creating your design(s) is
src/<design>
. -
Within this directory, you must create a
page.svelte
file. This is the entry point of your design. From here, you can either expand to multiple.svelte
files via imports or stick to one, it's up to you.- For importing the data into your
page.svelte
file, export a variable nameddata
(see other designs for reference) - If you want to use TailwindCSS for styling, please see how to enable compiling TailwindCSS below.
- For importing the data into your
-
Once you've created your design, you have 2 options to feed it data.
- Using the CLI
- By running the server and calling the relevant API endpoints.
I recommend that you use option 1 for non-automated use cases, and option 2 for automated ones.
Thanks to @maan2003 for sharing his experience with building PDFs out of plaintext which helped kick-start this project!