mdat-plugin-tldraw 1.0.0

package/license.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Eric Mika
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "mdat-plugin-tldraw",
+  "version": "1.0.0",
+  "description": "Mdat plugin to embed tldraw diagrams in Markdown files.",
+  "keywords": [
+    "markdown",
+    "mdat-plugin",
+    "mdat",
+    "npm-package",
+    "tldraw"
+  ],
+  "homepage": "https://github.com/kitschpatrol/mdat-plugin-tldraw",
+  "bugs": "https://github.com/kitschpatrol/mdat-plugin-tldraw/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kitschpatrol/mdat-plugin-tldraw.git"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Eric Mika",
+    "email": "eric@ericmika.com",
+    "url": "https://ericmika.com"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "files": [
+    "dist/*"
+  ],
+  "dependencies": {
+    "@kitschpatrol/tldraw-cli": "^5.0.0",
+    "type-fest": "^5.2.0"
+  },
+  "devDependencies": {
+    "@kitschpatrol/shared-config": "^5.7.4",
+    "@types/node": "^20.19.24",
+    "bumpp": "^10.3.1",
+    "path-type": "^6.0.0",
+    "tsdown": "^0.15.12",
+    "typescript": "~5.9.3",
+    "vitest": "^4.0.6",
+    "zod": "^3.25.76"
+  },
+  "peerDependencies": {
+    "mdat": "^1.1.0"
+  },
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown --tsconfig tsconfig.build.json",
+    "clean": "git rm -f pnpm-lock.yaml ; git clean -fdX",
+    "fix": "ksc fix",
+    "lint": "ksc lint",
+    "release": "bumpp --commit 'Release: %s' && pnpm run build && NPM_AUTH_TOKEN=$(op read 'op://Personal/npm/token') && pnpm publish",
+    "test": "vitest --no-file-parallelism"
+  }
+}

package/readme.md

@@ -0,0 +1,103 @@
+<!--+ Warning: Content inside HTML comment blocks was generated by mdat and may be overwritten. +-->
+
+<!-- title -->
+
+# mdat-plugin-tldraw
+
+<!-- /title -->
+
+<!-- badges -->
+
+[![NPM Package mdat-plugin-tldraw](https://img.shields.io/npm/v/mdat-plugin-tldraw.svg)](https://npmjs.com/package/mdat-plugin-tldraw)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+<!-- /badges -->
+
+<!-- short-description -->
+
+**Mdat plugin to embed tldraw diagrams in Markdown files.**
+
+<!-- /short-description -->
+
+## Overview
+
+_**This is a plugin for the [mdat CLI tool](https://github.com/kitschpatrol/mdat), which is a simple Markdown templating system optimized for embedding dynamic content in repository readmes and the like.**_
+
+This plugin makes it easy to embed [tldraw](https://www.tldraw.com) diagrams as SVG images in your Markdown files.
+
+The plugin automatically generates both "light" and "dark" SVG variations of a tldraw sketch, and emits a `<picture>` element per [GitHub's guidelines](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to) to present the correctly themed image based on the viewer's preferences.
+
+Generated assets are intelligently hashed to aide in cache busting. For locally referenced files, the image will only be regenerated when the content in the source file changes.
+
+The rule Accepts either a path to a local `.tldr` file, or remote tldraw URLs.
+
+The implementation is based on [@kitschpatrol/tldraw-cli](https://github.com/kitschpatrol/tldraw-cli), which depends on Puppeteer to generate the assets, so it can be a bit slow. Referencing local files instead of remote URLs is recommended for improved performance.
+
+## Getting started
+
+### Dependencies
+
+We'll assume you have [mdat](https://github.com/kitschpatrol/mdat) installed either globally or in your local project.
+
+### Installation
+
+Install the plugin as a development dependency:
+
+```bash
+pnpm add -D mdat-plugin-tldraw
+```
+
+Register the plugin in your mdat config file, e.g. `mdat.config.ts`:
+
+```ts
+import type { Config } from 'mdat'
+import tldraw from 'mdat-plugin-tldraw'
+
+export default {
+  rules: {
+    ...tldraw,
+  },
+} satisfies Config
+```
+
+## Usage
+
+Assuming you have a `sketch.tldr` file in the root of your project, you can embed it in your Markdown file this:
+
+```markdown
+<!-- tldraw { src: "./sketch.tldr" } -->
+```
+
+Then run the `mdat` CLI command on your Markdown file to expand the rule and embed the diagram:
+
+```markdown
+<!-- tldraw { src: "./sketch.tldr" } -->
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="assets/sketch-63a3366c-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="assets/sketch-63a3366c-light.svg">
+  <img alt="tldraw diagram" src="assets/sketch-63a3366c-light.svg">
+</picture>
+
+<!-- /tldraw -->
+```
+
+## Maintainers
+
+[@kitschpatrol](https://github.com/kitschpatrol)
+
+<!-- contributing -->
+
+## Contributing
+
+[Issues](https://github.com/kitschpatrol/mdat-plugin-tldraw/issues) and pull requests are welcome.
+
+<!-- /contributing -->
+
+<!-- license -->
+
+## License
+
+[MIT](license.txt) © Eric Mika
+
+<!-- /license -->