Skip to content

Releases

v0.3.0

Choose a tag to compare

@github-actions github-actions released this 04 Nov 19:22
2f5e54e
  • New package: rehype-tsquare, the same plugin on HTML instead of Markdown: it turns <pre><code class="language-tsquare"> into boards, so it works wherever rehype plugins run (Docusaurus, Astro, Starlight, MDX, HTML pages). Same options and the same HTML as the other two. A syntax highlighter that runs first turns the blocks into plain code (Astro's does, unless excludeLangs has "tsquare"); the plugin notices (a code block in the page has exactly the text of a tsquare fence in its source) and warns with the setting to add (strict fails the build).
  • Works with tsquare 0.14 as well as 0.13 (from 0.13.2), so a site on tsquare 0.14 shares one copy with the plugins.
  • The npm pages link to https://tsquare.dev/docs/markdown-plugins (package.json homepage), each to its own section with setup for its frameworks. The source stays linked as the repository.

v0.2.0

Choose a tag to compare

@github-actions github-actions released this 27 Oct 16:03
f51be24
  • Needs tsquare 0.13.2 or later (it was 0.12.2). Boards get tsquare's renderer fixes from 0.12.3 to 0.13.2.
  • A board's image size and its zoom view's screen buttons are exact on boards with notes: they come from tsquare's measureBoardLayout, which measures notes as drawn, next to the SVG (in markdown-it-tsquare's worker). boardLayout's estimate could be a line or more off for a note that wraps differently than its length suggests, so the image was scaled into a slightly wrong box.

v0.1.1

Choose a tag to compare

@github-actions github-actions released this 27 Oct 01:24
150c5c4
  • Works with tsquare 0.13 as well as 0.12 (from 0.12.2). A site that installs tsquare 0.13 now shares one copy with the plugins instead of getting a second one. Nothing else changed; the tests pass on both 0.12.2 and 0.13.0.

v0.1.0

Choose a tag to compare

@github-actions github-actions released this 21 Oct 18:45
036d278

The first release: two plugins that turn ```tsquare code blocks into wireframe images when a site is built. They make the same HTML and take the same options. Node 20 or newer; they use tsquare 0.12.2 or later in 0.12.

  • remark-tsquare: for Docusaurus, Astro, MDX and anything on unified.
  • markdown-it-tsquare: for VitePress, Eleventy and anything on markdown-it. markdown-it renders synchronously, so boards are drawn in a worker thread the render waits for (about 0.3 s to start, then 15–90 ms a board).
  • Boards: each becomes a <figure class="tsquare-board"> with the board's SVG inside an <img> (a data: URL, with width, height and alt text from the board's title). Nothing is sent anywhere. Boards are cached by their text, so dev servers redraw only what changed.
  • Problems: a block with problems lists them in its place by line, and the build log shows them with the file and line. strict: true fails the build instead.
  • Zoom (zoom, default "auto"): readers can open a board that a docs column shrinks ("auto": boards wider than 800px; true: every board; false: none).
    • Without a script: it covers the window at full size, using a popover that sits in the page until it's opened (Esc, Close or a click puts it back).
    • With the zoom script (<package>/client, 3 KB compressed): it opens in tsquare's viewer, with zoom, pan, pinch and a button per screen.
    • Loading the script: MDX pages import it on their own, so Docusaurus needs no setup. VitePress imports it in the theme, Astro in a layout <script>, and Eleventy loads client.standalone.js (the viewer built in) with a <script> tag.
  • link (default off): an "Open in playground" link under each board, to tsquare.dev or your own playground, with the wireframe after the #.
  • flows (default on): draw the flow arrows between screens.