Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/seven-mile/gatsby-transformer-typst
Typst transformer plugin for Gatsby.js
https://github.com/seven-mile/gatsby-transformer-typst
gatsby-plugin typst
Last synced: 18 days ago
JSON representation
Typst transformer plugin for Gatsby.js
- Host: GitHub
- URL: https://github.com/seven-mile/gatsby-transformer-typst
- Owner: seven-mile
- Created: 2024-03-17T08:51:50.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2024-11-27T03:21:40.000Z (about 1 month ago)
- Last Synced: 2024-12-04T10:06:05.092Z (about 1 month ago)
- Topics: gatsby-plugin, typst
- Language: JavaScript
- Homepage:
- Size: 72.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# `gatsby-transformer-typst`
A simple transformer plugin for Gatsby that converts `typ` / `typst` `File` nodes into `Typst` nodes.
## Node structure
Check `gatsby-node.js` for the node structure.
## How to use
Add this package and include this plugin in your `gatsby-config.js`:
```js
module.exports = {
plugins: [
/// ...
`gatsby-transformer-typst`,
],
}
```If you need tweak the scale of typst content, you can pass in a `domScale` option:
```js
module.exports = {
plugins: [
/// ...
{
resolve: `gatsby-transformer-typst`,
options: {
domScale: 1.17,
}
},
],
}
````domScale` align your font-size in the typst content (like `16pt`) with the one in HTML/CSS. Trying several values interactively should work.
## Example
Check out my [`blog-ng`](https://github.com/seven-mile/blog-ng) for an example of integrating it into a gatsby.js blog.
Use [this React component](https://github.com/seven-mile/blog-ng/blob/main/src/components/typst-doc.tsx) to render the `Typst` artifacts.