akkartik/mastodon-unfurl.love - Change TLFRUXVL6JC3E5EGO3COZ2EBYTOL23A6SYKID7PT6HC7GJY3SKLAC

readme

Created by Kartik K. Agaram on February 19, 2023

TLFRUXVL6JC3E5EGO3COZ2EBYTOL23A6SYKID7PT6HC7GJY3SKLAC

Dependencies

In channels

main

Change contents

Replacement in README.md at line 1 [9.6]

B:BD[9.6] → [10.17:193]

B:BD[10.234] → [10.234:1349]

# LuaML: An experimental markup language and 'browser' for it
Demo of a simple structured editor for formatted text atop an infinite 2D
surface that can be panned and zoomed.
For ease of implementation, LuaML documents are always legal Lua objects
rather than a first-class language like HTML. A simple example:
```
{ type='text', data={'hello, world!',} }
```
Text object data consists of an array of strings, one for each line. No
newlines at the moment. (Everything is subject to change.)
You can draw various shapes on the surface:
```
{type='line', data={0,0, 0,600}},
{type='line', data={0,0, 800,0}},
{type='text', data={'0'}, x=-20,y=-20},
{type='rectangle', x=50,y=50, w=20,h=80, r=1,g=0,b=0},
{type='text', data={'abc', 'def'}, x=150, y=50, w=50,h=50, fg={r=0,g=0.4, b=0.9}},
{type='circle', x=300,y=200, radius=40, r=1,g=0,b=1},
{type='arc', x=0,y=0, radius=50, angle1=0, angle2=math.pi*2/3},
{type='ellipse', x=100,y=100, radiusx=10, radiusy=50},
{type='bezier', data={25,25, 25,125, 75,25, 125,25}},
```
But most of the design effort so far has focused on the 3 text types:
* `text` for runs of text to be line-wrapped over the given `width`.
* `rows` and `cols`, the only hierarchical types, ways to compose `text` nodes
  into various grid layouts.
Some more examples.

[9.6]

[10.1349]

# Visualize a Mastodon thread tree

Replacement in README.md at line 3 [9.6]

B:BD[10.1350] → [10.1350:1510]

Adjust foreground/background color (akin to a `div` with inline `style`):
```
{ type='text', fg={r=1,g=0,b=0}, bg={r=1,g=1,b=0},
  data={'hello, world!'}
}
```

[10.1350]

[10.1510]

An experiment inspired by Colin Wright's [Chartodon](https://mathstodon.xyz/@Chartodon).

Replacement in README.md at line 5 [9.6]

B:BD[10.1511] → [10.1511:1642]

Two-column text:
```
{ type='cols', data={
  {type='text', data={'first column'}},
  {type='text', data={'second column'}},
}}
```

[10.1511]

[10.1642]

TODO: img

Replacement in README.md at line 7 [9.6]

B:BD[10.1643] → [10.1643:1732]

B:BD[10.1732] → [6.17:83]

∅:D[6.83] → [10.1794:1824]

B:BD[10.1794] → [10.1794:1824]

B:BD[10.1824] → [6.84:150]

∅:D[6.150] → [10.1886:1899]

B:BD[10.1886] → [10.1886:1899]

A table with two rows and two columns:
```
{ type='cols', data={
  { type='rows', data={
    {type='text', data={'abc'}},
    {type='text', data={'def'}},
  }},
  { type='rows', data={
    {type='text', data={'ghi'}},
    {type='text', data={'jkl'}},
  }},
}}
```

[10.1643]

[10.1899]

Cons:
  * Doesn't run in a browser. You need to install two (small, reputable)
    programs.
  * Not as pretty as Chartodon.
  * Might not work on Windows. Please report your experience if you try it.

Replacement in README.md at line 13 [9.6]

B:BD[10.1900] → [10.1900:2032]

(With the current design, cols of rows seem strictly superior to rows of cols.
Column boundaries line up consistently across rows.)

[10.1900]

[10.2032]

Pros:
  * Use keyboard shortcuts to browse the graph.
      * `ctrl+up` to parent
      * `ctrl+down` to first child
      * `ctrl+left` to previous sibling
      * `ctrl+right` to next sibling
  * Much easier to modify to your needs than a web browser. You can
    modify it while it's running (see below).

Replacement in README.md at line 22 [9.6]

B:BD[10.2033] → [10.2033:2362]

B:BD[10.2362] → [11.23:23]

∅:D[11.23] → [12.11634:11635]

∅:D[13.62] → [12.11634:11635]

∅:D[10.2362] → [12.11634:11635]

∅:D[14.813092] → [12.11634:11635]

B:BD[12.11634] → [12.11634:11635]

B:BD[12.11635] → [10.2363:2711]

B:BD[10.2711] → [7.23:23]

∅:D[7.23] → [15.18:19]

∅:D[11.25] → [15.18:19]

∅:D[13.252] → [15.18:19]

∅:D[10.2711] → [15.18:19]

∅:D[12.11832] → [15.18:19]

∅:D[14.813548] → [15.18:19]

B:BD[16.38] → [15.18:19]

B:BD[15.19] → [10.2712:2786]

This is still quite incomplete. Come help figure out its future. Currently
supported "attributes":
  * `fg`, `bg` for color (no `blink` tag yet)
  * `margin` (used as `margin-left` or `margin-top` depending on whether the
    parent node has `cols` or `rows` respectively)
  * `width` in pixels (I'd like to add '%' units here.)
Since this is all Lua, unrecognized attributes are silently ignored. In the
app itself you'll see attributes like `name` and `doc`. (This is a nightmare
if you imagine this turning into some sort of long-lived standard with
versions and compatibility guarantees. I don't. I just want an app-internal
format for creating UIs with very little code.)
LuaML.love is a fork of [lines.love](http://akkartik.name/lines.html), an

[10.2033]

[13.326]

This repo is a fork of [lines.love](http://akkartik.name/lines.html), an

Deletion in README.md at line 28 [9.6]

B:BD[17.53] → [8.33:34]

∅:D[8.34] → [17.54:266]

B:BD[18.19] → [17.54:266]


Install [LÖVE](https://love2d.org). It's just a 5MB download, open-source and
extremely well-behaved. I'll assume below that you can invoke it using the
`love` command, but that might vary depending on your OS.

Replacement in README.md at line 29 [9.6]

B:BD[19.21] → [11.26:146]

Run this app from the terminal, [passing its directory to LÖVE](https://love2d.org/wiki/Getting_Started#Running_Games)

[19.21]

[10.2900]

Install the [Lua](https://www.lua.org) programming language. Just a 200KB
download, open source and with a stellar reputation. I'll assume below that
you can invoke it using the `lua` command, but that might vary depending on
your OS.

Replacement in README.md at line 34 [9.6]

B:BD[10.2901] → [10.2901:2959]

You'll see a page that's currently hard-coded in the app.

[10.2901]

[10.2959]

Install the [LÖVE](https://love2d.org) game engine. It's just a 5MB download,
open-source and extremely well-behaved. I'll assume below that you can invoke
it using the `love` command, but that might vary depending on your OS.

Replacement in README.md at line 38 [9.6]

B:BD[10.2960] → [10.2960:2990]

![initial view](assets/1.png)

[10.2960]

[10.2990]

Run `unfurl.lua` from this directory, passing in a link to some toot. For
example:
```
lua unfurl.lua https://merveilles.town/@akkartik/108773157588384635
```

Replacement in README.md at line 44 [9.6]

B:BD[10.2991] → [10.2991:3106]

All text is currently editable. There's a table on the right that will grow
and shrink as you add and delete text.

[10.2991]

[11.147]

unfurl.lua will make some Mastodon API requests before passing the results to
LÖVE.

Replacement in README.md at line 47 [9.6]
∅:D[11.148] → [10.3107:3170]
B:BD[18.163] → [10.3107:3170]
```
Changes you make are currently not saved. This is just a demo.
```
[11.148]
[10.3170]
```
Click on a toot to copy its URL to the clipboard.
```
Deletion in README.md at line 49 [9.6]
B:BD[10.3171] → [10.3171:3300]
B:BD[10.3300] → [11.150:150]
∅:D[20.58] → [15.222:223]
∅:D[11.150] → [15.222:223]
∅:D[19.277] → [15.222:223]
∅:D[18.457] → [15.222:223]
∅:D[10.3300] → [15.222:223]
∅:D[14.813669] → [15.222:223]
B:BD[15.222] → [15.222:223]
```
To pan, drag the surface around. To increase/decrease zoom, press `ctrl+=`,
`ctrl+-` respectively. To reset zoom press `ctrl+0`.
```

Replacement in README.md at line 60 [9.6]

B:BD[15.662] → [11.319:339]

∅:D[11.339] → [15.682:816]

∅:D[14.813974] → [15.682:816]

B:BD[15.682] → [15.682:816]

While editing text:
* `ctrl+f` to find patterns within a file
* `ctrl+c` to copy, `ctrl+x` to cut, `ctrl+v` to paste
* `ctrl+z` to undo, `ctrl+y` to redo

[15.662]

[15.816]

* `ctrl` + arrow keys to move around

Deletion in README.md at line 62 [9.6]

B:BD[15.884] → [21.18:91]

B:BD[21.91] → [22.665:739]

∅:D[23.209894] → [24.18:19]

B:BD[15.1117] → [24.18:19]

B:BD[24.19] → [12.11984:12040]

∅:D[12.12040] → [24.95:170]

B:BD[24.95] → [24.95:170]

B:BD[24.170] → [2.18:69]

∅:D[2.69] → [15.1117:1118]

∅:D[24.219] → [15.1117:1118]

B:BD[15.1117] → [15.1117:1118]

B:BD[15.1118] → [5.17:196]

* `alt+right`/`alt+left` to jump to the next/previous word, respectively
* mouse drag or `shift` + movement to select text, `ctrl+a` to select all
Exclusively tested so far with a US keyboard layout. If
you use a different layout, please let me know if things worked, or if you
found anything amiss: http://akkartik.name/contact
When cursor is not in an editor:
* arrow keys pan the surface
* `shift`+arrow keys pan faster
  - `pagedown` and `pageup` are aliases for `shift+down` and `shift+up` respectively

Deletion in README.md at line 74 [9.6]

B:BD[25.15] → [26.18:95]

B:BD[26.95] → [12.12041:12110]

∅:D[27.101] → [28.276:277]

∅:D[26.109] → [28.276:277]

∅:D[29.319] → [28.276:277]

∅:D[30.703] → [28.276:277]

∅:D[12.12110] → [28.276:277]

B:BD[28.276] → [28.276:277]

B:BD[28.277] → [31.63:170]

B:BD[32.1172] → [32.1172:1375]

B:BD[32.1375] → [33.16:17]

∅:D[33.17] → [34.16:65]

B:BD[34.16] → [34.16:65]

* Undo/redo may be sluggish in large files. Large files may grow sluggish in
  other ways. Works well in all circumstances with files under 50KB.
* If you kill the process, say by force-quitting because things things get
  sluggish, you can lose data.
* Long wrapping lines can't yet distinguish between the cursor at end of one
  screen line and start of the next, so clicking the mouse to position the
  cursor can very occasionally do the wrong thing.
* Can't scroll while selecting text with mouse.

Replacement in README.md at line 80 [9.6]

B:BD[35.169] → [7.26:145]

∅:D[36.143] → [37.23:23]

∅:D[7.145] → [37.23:23]

B:BD[11.466] → [37.23:23]

B:BD[37.23] → [37.24:84]

Its immediate upstream is [the template repo for freewheeling apps](https://git.sr.ht/~akkartik/template-live-editor).
Updates to it can be downloaded from the following mirrors:

[35.169]

[7.147]

Its immediate upstream is [a simple Lua-based markup language](https://git.sr.ht/~akkartik/luaML.love).
Updates to it can be downloaded from:

Replacement in README.md at line 83 [9.6]
B:BD[37.86] → [37.87:128]
B:BD[37.128] → [7.149:149]
B:BD[7.149] → [7.150:193]
```
* https://git.sr.ht/~akkartik/luaML.love
* https://codeberg.org/akkartik/luaML.love
```
[15.1529]
[15.1609]
```
* https://git.sr.ht/~akkartik/mastodon-unfurl.love
```
Deletion in README.md at line 86 [9.6]
B:BD[12.12675] → [14.814242:814243]
B:BD[14.814243] → [7.194:267]
∅:D[7.267] → [11.542:587]
B:BD[11.542] → [11.542:587]
```
* https://git.sr.ht/~akkartik/driver.love - the driver app for modifying
  freewheeling apps without restarting them.
```