From 6a30fbd239b31e293c0833c2bbcbb8def44707f1 Mon Sep 17 00:00:00 2001
From: s-ol <s-ol@users.noreply.github.com>
Date: Sat, 26 Oct 2019 13:30:58 +0200
Subject: mmmfs cleanup

---
 .../mmmfs/examples/empty/title: text$plain         |   1 +
 .../examples/gallery/actual_image/image$png.png    | Bin 0 -> 678429 bytes
 .../gallery/actual_image/preview: image$png.png    | Bin 0 -> 31880 bytes
 .../gallery/link_to_image/URL -> image$png         |   1 +
 .../link_to_image/preview: URL -> image$png        |   1 +
 .../preview: text$moonscript -> fn -> mmm$dom.moon |   7 +++++
 ...ow: text$moonscript -> fn -> mmm$component.moon |  19 ++++++++++++
 .../gallery/text$moonscript -> fn -> mmm$dom.moon  |  12 ++++++++
 .../mmmfs/examples/gallery/title: text$plain       |   1 +
 .../articles/mmmfs/examples/image/URL -> image$png |   1 +
 .../preview: text$moonscript -> fn -> mmm$dom.moon |   5 ++++
 .../mmmfs/examples/image/title: text$plain         |   1 +
 .../javascript/text$javascript -> mmm$dom.js       |  15 ++++++++++
 .../language_support/javascript/title: text$plain  |   1 +
 .../language_support/lua/text$lua -> mmm$dom.lua   |   9 ++++++
 .../language_support/lua/title: text$plain         |   1 +
 .../moonscript/text$moonscript -> mmm$dom.moon     |  10 +++++++
 .../language_support/moonscript/title: text$plain  |   1 +
 .../language_support/preview: text$markdown        |   6 ++++
 .../text$moonscript -> fn -> mmm$dom.moon          |  16 +++++++++++
 .../examples/language_support/title: text$plain    |   1 +
 .../examples/markdown/preview: text$markdown.md    |   6 ++++
 .../mmmfs/examples/markdown/title: text$plain      |   1 +
 .../examples/text$moonscript -> fn -> mmm$dom.moon |  32 +++++++++++++++++++++
 24 files changed, 148 insertions(+)
 create mode 100644 root/articles/mmmfs/examples/empty/title: text$plain
 create mode 100644 root/articles/mmmfs/examples/gallery/actual_image/image$png.png
 create mode 100644 root/articles/mmmfs/examples/gallery/actual_image/preview: image$png.png
 create mode 100644 root/articles/mmmfs/examples/gallery/link_to_image/URL -> image$png
 create mode 100644 root/articles/mmmfs/examples/gallery/link_to_image/preview: URL -> image$png
 create mode 100644 root/articles/mmmfs/examples/gallery/preview: text$moonscript -> fn -> mmm$dom.moon
 create mode 100644 root/articles/mmmfs/examples/gallery/slideshow: text$moonscript -> fn -> mmm$component.moon
 create mode 100644 root/articles/mmmfs/examples/gallery/text$moonscript -> fn -> mmm$dom.moon
 create mode 100644 root/articles/mmmfs/examples/gallery/title: text$plain
 create mode 100644 root/articles/mmmfs/examples/image/URL -> image$png
 create mode 100644 root/articles/mmmfs/examples/image/preview: text$moonscript -> fn -> mmm$dom.moon
 create mode 100644 root/articles/mmmfs/examples/image/title: text$plain
 create mode 100644 root/articles/mmmfs/examples/language_support/javascript/text$javascript -> mmm$dom.js
 create mode 100644 root/articles/mmmfs/examples/language_support/javascript/title: text$plain
 create mode 100644 root/articles/mmmfs/examples/language_support/lua/text$lua -> mmm$dom.lua
 create mode 100644 root/articles/mmmfs/examples/language_support/lua/title: text$plain
 create mode 100644 root/articles/mmmfs/examples/language_support/moonscript/text$moonscript -> mmm$dom.moon
 create mode 100644 root/articles/mmmfs/examples/language_support/moonscript/title: text$plain
 create mode 100644 root/articles/mmmfs/examples/language_support/preview: text$markdown
 create mode 100644 root/articles/mmmfs/examples/language_support/text$moonscript -> fn -> mmm$dom.moon
 create mode 100644 root/articles/mmmfs/examples/language_support/title: text$plain
 create mode 100644 root/articles/mmmfs/examples/markdown/preview: text$markdown.md
 create mode 100644 root/articles/mmmfs/examples/markdown/title: text$plain
 create mode 100644 root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon

(limited to 'root/articles/mmmfs/examples')

diff --git a/root/articles/mmmfs/examples/empty/title: text$plain b/root/articles/mmmfs/examples/empty/title: text$plain
new file mode 100644
index 0000000..911f98b
--- /dev/null
+++ b/root/articles/mmmfs/examples/empty/title: text$plain	
@@ -0,0 +1 @@
+Hey I'm an almost empty Fileder.
diff --git a/root/articles/mmmfs/examples/gallery/actual_image/image$png.png b/root/articles/mmmfs/examples/gallery/actual_image/image$png.png
new file mode 100644
index 0000000..b499413
Binary files /dev/null and b/root/articles/mmmfs/examples/gallery/actual_image/image$png.png differ
diff --git a/root/articles/mmmfs/examples/gallery/actual_image/preview: image$png.png b/root/articles/mmmfs/examples/gallery/actual_image/preview: image$png.png
new file mode 100644
index 0000000..f9dbfad
Binary files /dev/null and b/root/articles/mmmfs/examples/gallery/actual_image/preview: image$png.png differ
diff --git a/root/articles/mmmfs/examples/gallery/link_to_image/URL -> image$png b/root/articles/mmmfs/examples/gallery/link_to_image/URL -> image$png
new file mode 100644
index 0000000..7cf76ff
--- /dev/null
+++ b/root/articles/mmmfs/examples/gallery/link_to_image/URL -> image$png	
@@ -0,0 +1 @@
+https://picsum.photos/600/600/?image=101
diff --git a/root/articles/mmmfs/examples/gallery/link_to_image/preview: URL -> image$png b/root/articles/mmmfs/examples/gallery/link_to_image/preview: URL -> image$png
new file mode 100644
index 0000000..2b2233b
--- /dev/null
+++ b/root/articles/mmmfs/examples/gallery/link_to_image/preview: URL -> image$png	
@@ -0,0 +1 @@
+https://picsum.photos/200/200/?image=101
diff --git a/root/articles/mmmfs/examples/gallery/preview: text$moonscript -> fn -> mmm$dom.moon b/root/articles/mmmfs/examples/gallery/preview: text$moonscript -> fn -> mmm$dom.moon
new file mode 100644
index 0000000..5285629
--- /dev/null
+++ b/root/articles/mmmfs/examples/gallery/preview: text$moonscript -> fn -> mmm$dom.moon	
@@ -0,0 +1,7 @@
+import div, img, br from require 'mmm.dom'
+
+=> div {
+  'the first pic as a little taste:',
+  br!,
+  img src: @children[1]\get 'preview', 'URL -> image/png'
+}
diff --git a/root/articles/mmmfs/examples/gallery/slideshow: text$moonscript -> fn -> mmm$component.moon b/root/articles/mmmfs/examples/gallery/slideshow: text$moonscript -> fn -> mmm$component.moon
new file mode 100644
index 0000000..0178ac2
--- /dev/null
+++ b/root/articles/mmmfs/examples/gallery/slideshow: text$moonscript -> fn -> mmm$component.moon	
@@ -0,0 +1,19 @@
+import ReactiveVar, text, elements from require 'mmm.component'
+import div, a, img from elements
+
+=>
+  index = ReactiveVar 1
+
+  prev = (i) -> math.max 1, i - 1
+  next = (i) -> math.min #@children, i + 1
+
+  div {
+    div {
+      a 'prev', href: '#', onclick: -> index\transform prev
+      index\map (i) -> text " image ##{i} "
+      a 'next', href: '#', onclick: -> index\transform next
+    },
+    index\map (i) ->
+      child = assert @children[i], "image not found!"
+      img src: @children[i]\gett 'URL -> image/png'
+  }
diff --git a/root/articles/mmmfs/examples/gallery/text$moonscript -> fn -> mmm$dom.moon b/root/articles/mmmfs/examples/gallery/text$moonscript -> fn -> mmm$dom.moon
new file mode 100644
index 0000000..9bdac54
--- /dev/null
+++ b/root/articles/mmmfs/examples/gallery/text$moonscript -> fn -> mmm$dom.moon	
@@ -0,0 +1,12 @@
+import div, h1, a, img, br from require 'mmm.dom'
+
+=>
+  link = (child) -> a {
+    href: '#',
+    onclick: -> BROWSER\navigate child.path
+    img src: child\gett 'preview', 'URL -> image/png'
+  }
+
+  content = [link child for child in *@children]
+  table.insert content, 1, h1 'gallery index'
+  div content
diff --git a/root/articles/mmmfs/examples/gallery/title: text$plain b/root/articles/mmmfs/examples/gallery/title: text$plain
new file mode 100644
index 0000000..ad74eec
--- /dev/null
+++ b/root/articles/mmmfs/examples/gallery/title: text$plain	
@@ -0,0 +1 @@
+A Gallery of 25 random pictures, come on in!
diff --git a/root/articles/mmmfs/examples/image/URL -> image$png b/root/articles/mmmfs/examples/image/URL -> image$png
new file mode 100644
index 0000000..c586722
--- /dev/null
+++ b/root/articles/mmmfs/examples/image/URL -> image$png	
@@ -0,0 +1 @@
+https://picsum.photos/200?random
diff --git a/root/articles/mmmfs/examples/image/preview: text$moonscript -> fn -> mmm$dom.moon b/root/articles/mmmfs/examples/image/preview: text$moonscript -> fn -> mmm$dom.moon
new file mode 100644
index 0000000..6c431d0
--- /dev/null
+++ b/root/articles/mmmfs/examples/image/preview: text$moonscript -> fn -> mmm$dom.moon	
@@ -0,0 +1,5 @@
+import img from require 'mmm.dom'
+
+-- look for main content with 'URL to png' type
+-- and wrap in an mmm/dom image tag
+=> img src: @gett 'URL -> image/png'
diff --git a/root/articles/mmmfs/examples/image/title: text$plain b/root/articles/mmmfs/examples/image/title: text$plain
new file mode 100644
index 0000000..60a556f
--- /dev/null
+++ b/root/articles/mmmfs/examples/image/title: text$plain	
@@ -0,0 +1 @@
+Hey I'm like a link to a picture or smth
diff --git a/root/articles/mmmfs/examples/language_support/javascript/text$javascript -> mmm$dom.js b/root/articles/mmmfs/examples/language_support/javascript/text$javascript -> mmm$dom.js
new file mode 100644
index 0000000..de56531
--- /dev/null
+++ b/root/articles/mmmfs/examples/language_support/javascript/text$javascript -> mmm$dom.js	
@@ -0,0 +1,15 @@
+const e = (elem, children) => {
+  const node = document.createElement(elem);
+
+  if (typeof children === 'string')
+    node.innerText = children;
+  else
+    children.forEach(child => node.appendChild(child));
+
+  return node;
+};
+
+return e('article', [
+  e('h1', 'JavaScript'),
+  e('p', 'JavaScript is supported natively in the browser but is not currently pre-rendered on the server.'),
+]);
diff --git a/root/articles/mmmfs/examples/language_support/javascript/title: text$plain b/root/articles/mmmfs/examples/language_support/javascript/title: text$plain
new file mode 100644
index 0000000..581fbc7
--- /dev/null
+++ b/root/articles/mmmfs/examples/language_support/javascript/title: text$plain	
@@ -0,0 +1 @@
+JavaScript
diff --git a/root/articles/mmmfs/examples/language_support/lua/text$lua -> mmm$dom.lua b/root/articles/mmmfs/examples/language_support/lua/text$lua -> mmm$dom.lua
new file mode 100644
index 0000000..62e79f1
--- /dev/null
+++ b/root/articles/mmmfs/examples/language_support/lua/text$lua -> mmm$dom.lua	
@@ -0,0 +1,9 @@
+local d = require 'mmm.dom'
+
+local lua = d.a { 'Lua', href = 'https://www.lua.org/' }
+local fengari = d.a { 'fengari.io', href = 'https://fengari.io/' }
+
+return d.article {
+  d.h1 'Lua',
+  d.p { lua, ' is fully supported using ', fengari, ' on the Client.' }
+}
diff --git a/root/articles/mmmfs/examples/language_support/lua/title: text$plain b/root/articles/mmmfs/examples/language_support/lua/title: text$plain
new file mode 100644
index 0000000..0f9d550
--- /dev/null
+++ b/root/articles/mmmfs/examples/language_support/lua/title: text$plain	
@@ -0,0 +1 @@
+Lua
diff --git a/root/articles/mmmfs/examples/language_support/moonscript/text$moonscript -> mmm$dom.moon b/root/articles/mmmfs/examples/language_support/moonscript/text$moonscript -> mmm$dom.moon
new file mode 100644
index 0000000..5cc50e6
--- /dev/null
+++ b/root/articles/mmmfs/examples/language_support/moonscript/text$moonscript -> mmm$dom.moon	
@@ -0,0 +1,10 @@
+import a, article, h1, p from require 'mmm.dom'
+
+moonscript = a 'MoonScript', href: 'https://moonscript.org/'
+lua = a 'Lua', href: 'https://www.lua.org/'
+fengari = a 'fengari.io', href: 'https://fengari.io/'
+
+article {
+  h1 'MoonScript',
+  p moonscript, " is compiled to ", lua, " on the server, which is then executed on the client using ", fengari, "."
+}
diff --git a/root/articles/mmmfs/examples/language_support/moonscript/title: text$plain b/root/articles/mmmfs/examples/language_support/moonscript/title: text$plain
new file mode 100644
index 0000000..f8871ac
--- /dev/null
+++ b/root/articles/mmmfs/examples/language_support/moonscript/title: text$plain	
@@ -0,0 +1 @@
+MoonScript
diff --git a/root/articles/mmmfs/examples/language_support/preview: text$markdown b/root/articles/mmmfs/examples/language_support/preview: text$markdown
new file mode 100644
index 0000000..d6c2845
--- /dev/null
+++ b/root/articles/mmmfs/examples/language_support/preview: text$markdown	
@@ -0,0 +1,6 @@
+this Fileder contains some minimal examples showing support for various languages `mmmfs` supports currently.
+
+Language support is mostly limited by the fact that `mmmfs` currently targets web browsers,
+on the server any scripting language that can be executed can theoretically be integrated with minimal effort.
+
+Using the inspector mode to view the source of the Fileders below is encouraged.
diff --git a/root/articles/mmmfs/examples/language_support/text$moonscript -> fn -> mmm$dom.moon b/root/articles/mmmfs/examples/language_support/text$moonscript -> fn -> mmm$dom.moon
new file mode 100644
index 0000000..4ae0679
--- /dev/null
+++ b/root/articles/mmmfs/examples/language_support/text$moonscript -> fn -> mmm$dom.moon	
@@ -0,0 +1,16 @@
+import article, h1, p, ul, li, a from require 'mmm.dom'
+
+single = (a) -> a
+
+=>
+  children = for child in *@children
+    title = child\gett 'title: text/plain'
+    li a title, href: child.path, onclick: (e) =>
+      e\preventDefault!
+      BROWSER\navigate child.path
+
+  article {
+    h1 single @gett 'title: text/plain'
+    p single @gett 'preview: mmm/dom'
+    ul children
+  }
diff --git a/root/articles/mmmfs/examples/language_support/title: text$plain b/root/articles/mmmfs/examples/language_support/title: text$plain
new file mode 100644
index 0000000..ae06474
--- /dev/null
+++ b/root/articles/mmmfs/examples/language_support/title: text$plain	
@@ -0,0 +1 @@
+scripting language support
diff --git a/root/articles/mmmfs/examples/markdown/preview: text$markdown.md b/root/articles/mmmfs/examples/markdown/preview: text$markdown.md
new file mode 100644
index 0000000..4b38ef2
--- /dev/null
+++ b/root/articles/mmmfs/examples/markdown/preview: text$markdown.md	
@@ -0,0 +1,6 @@
+See I have like
+
+- a list of things
+- (two things)
+
+and some bold **text** and `code tags` with me.
diff --git a/root/articles/mmmfs/examples/markdown/title: text$plain b/root/articles/mmmfs/examples/markdown/title: text$plain
new file mode 100644
index 0000000..319068d
--- /dev/null
+++ b/root/articles/mmmfs/examples/markdown/title: text$plain	
@@ -0,0 +1 @@
+  I'm not even five lines of markdown but i render myself!
diff --git a/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon b/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon
new file mode 100644
index 0000000..ca9078c
--- /dev/null
+++ b/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon	
@@ -0,0 +1,32 @@
+-- main content
+-- doesn't have a name prefix (e.g. preview: fn -> mmm/dom)
+-- uses the 'fn ->' conversion to execute the lua function on @get
+-- resolves to a value of type mmm/dom
+=>
+  html = require 'mmm.dom'
+  import h4, div, a, span from html
+
+  -- render a preview block
+  preview = (child) ->
+    -- get 'title' as 'text/plain' (error if no value or conversion possible)
+    title = child\gett 'title', 'text/plain'
+
+    -- get 'preview' as a DOM description (nil if no value or conversion possible)
+    content = child\get 'preview', 'mmm/dom'
+
+    div {
+      h4 title, style: { margin: 0, cursor: 'pointer' }, onclick: -> BROWSER\navigate child.path
+      content or span '(no renderable content)', style: { color: 'red' },
+      style: {
+        display: 'inline-block',
+        width: '300px',
+        height: '200px',
+        padding: '4px',
+        margin: '8px',
+        border: '4px solid #eeeeee',
+        overflow: 'hidden',
+      },
+    }
+
+  div for child in *@children
+    preview child
-- 
cgit v1.2.3


From ce998c8ca5b6364314b65cd8bf3d698ace03ced7 Mon Sep 17 00:00:00 2001
From: s-ol <s-ol@users.noreply.github.com>
Date: Fri, 1 Nov 2019 13:47:23 +0100
Subject: fsck root dir

---
 root/articles/mmmfs/examples/$order                  | 5 +++++
 root/articles/mmmfs/examples/gallery/$order          | 2 ++
 root/articles/mmmfs/examples/language_support/$order | 3 +++
 3 files changed, 10 insertions(+)
 create mode 100644 root/articles/mmmfs/examples/$order
 create mode 100644 root/articles/mmmfs/examples/gallery/$order
 create mode 100644 root/articles/mmmfs/examples/language_support/$order

(limited to 'root/articles/mmmfs/examples')

diff --git a/root/articles/mmmfs/examples/$order b/root/articles/mmmfs/examples/$order
new file mode 100644
index 0000000..7428a7e
--- /dev/null
+++ b/root/articles/mmmfs/examples/$order
@@ -0,0 +1,5 @@
+language_support
+image
+markdown
+empty
+gallery
diff --git a/root/articles/mmmfs/examples/gallery/$order b/root/articles/mmmfs/examples/gallery/$order
new file mode 100644
index 0000000..9d438bd
--- /dev/null
+++ b/root/articles/mmmfs/examples/gallery/$order
@@ -0,0 +1,2 @@
+link_to_image
+actual_image
diff --git a/root/articles/mmmfs/examples/language_support/$order b/root/articles/mmmfs/examples/language_support/$order
new file mode 100644
index 0000000..3cc0e47
--- /dev/null
+++ b/root/articles/mmmfs/examples/language_support/$order
@@ -0,0 +1,3 @@
+javascript
+moonscript
+lua
-- 
cgit v1.2.3


From 5ec1fe2fc943ad4123fac138de70d4152e8b341d Mon Sep 17 00:00:00 2001
From: s-ol <s-ol@users.noreply.github.com>
Date: Mon, 25 Nov 2019 15:54:28 +0100
Subject: add pinwall example

---
 root/articles/mmmfs/examples/$order                |   1 +
 root/articles/mmmfs/examples/pinwall/$order        |   3 +
 .../mmmfs/examples/pinwall/image/image$png.png     | Bin 0 -> 128929 bytes
 .../examples/pinwall/image/pinwall_info: text$json |   1 +
 .../pinwall/text$moonscript -> fn -> mmm$dom.moon  | 120 +++++++++++++++++++++
 .../examples/pinwall/text/pinwall_info: text$json  |   1 +
 .../mmmfs/examples/pinwall/text/text$plain.txt     |   4 +
 .../mmmfs/examples/pinwall/title: text$plain       |   1 +
 .../mmmfs/examples/pinwall/video/URL -> video$mp4  |   1 +
 .../examples/pinwall/video/pinwall_info: text$json |   1 +
 10 files changed, 133 insertions(+)
 create mode 100644 root/articles/mmmfs/examples/pinwall/$order
 create mode 100644 root/articles/mmmfs/examples/pinwall/image/image$png.png
 create mode 100644 root/articles/mmmfs/examples/pinwall/image/pinwall_info: text$json
 create mode 100644 root/articles/mmmfs/examples/pinwall/text$moonscript -> fn -> mmm$dom.moon
 create mode 100644 root/articles/mmmfs/examples/pinwall/text/pinwall_info: text$json
 create mode 100644 root/articles/mmmfs/examples/pinwall/text/text$plain.txt
 create mode 100644 root/articles/mmmfs/examples/pinwall/title: text$plain
 create mode 100644 root/articles/mmmfs/examples/pinwall/video/URL -> video$mp4
 create mode 100644 root/articles/mmmfs/examples/pinwall/video/pinwall_info: text$json

(limited to 'root/articles/mmmfs/examples')

diff --git a/root/articles/mmmfs/examples/$order b/root/articles/mmmfs/examples/$order
index 7428a7e..348f5fe 100644
--- a/root/articles/mmmfs/examples/$order
+++ b/root/articles/mmmfs/examples/$order
@@ -3,3 +3,4 @@ image
 markdown
 empty
 gallery
+pinwall
diff --git a/root/articles/mmmfs/examples/pinwall/$order b/root/articles/mmmfs/examples/pinwall/$order
new file mode 100644
index 0000000..b8b054a
--- /dev/null
+++ b/root/articles/mmmfs/examples/pinwall/$order
@@ -0,0 +1,3 @@
+image
+text
+video
diff --git a/root/articles/mmmfs/examples/pinwall/image/image$png.png b/root/articles/mmmfs/examples/pinwall/image/image$png.png
new file mode 100644
index 0000000..1628d99
Binary files /dev/null and b/root/articles/mmmfs/examples/pinwall/image/image$png.png differ
diff --git a/root/articles/mmmfs/examples/pinwall/image/pinwall_info: text$json b/root/articles/mmmfs/examples/pinwall/image/pinwall_info: text$json
new file mode 100644
index 0000000..74fba2c
--- /dev/null
+++ b/root/articles/mmmfs/examples/pinwall/image/pinwall_info: text$json	
@@ -0,0 +1 @@
+{"x": 35.0, "y": 209.0, "w": 205.0, "h": 155.0}
\ No newline at end of file
diff --git a/root/articles/mmmfs/examples/pinwall/text$moonscript -> fn -> mmm$dom.moon b/root/articles/mmmfs/examples/pinwall/text$moonscript -> fn -> mmm$dom.moon
new file mode 100644
index 0000000..e611579
--- /dev/null
+++ b/root/articles/mmmfs/examples/pinwall/text$moonscript -> fn -> mmm$dom.moon	
@@ -0,0 +1,120 @@
+import article, div from require 'mmm.dom'
+import convert from require 'mmm.mmmfs.conversion'
+
+update_info = (fileder, x, y, w, h) ->
+  info = (fileder\get 'pinwall_info: table') or x: 100, y: 100, w: 300, h: 300
+  info.x = x if x
+  info.y = y if y
+  info.w = w if w
+  info.h = h if h
+
+  json = convert 'table', 'text/json', info, fileder, 'pinwall_info'
+  fileder\set 'pinwall_info: text/json', json
+
+CLIENT = MODE == 'CLIENT'
+
+=>
+
+  pending = {}
+  observe = if CLIENT
+    map = {}
+    observer = js.new js.global.ResizeObserver, (_, entries) ->
+      for entry in js.of entries
+        if child = map[entry.target]
+          rect = entry.contentRect
+          pending[child] = -> update_info child, nil, nil, rect.width, rect.height
+
+    (node, child) ->
+      map[node] = child
+      observer\observe node
+
+  drag = nil
+  
+  children = for child in *@children
+      info = (child\get 'pinwall_info: table') or x: 100, y: 100, w: 300, h: 300
+      wrapper = div {
+        style:
+          position: 'absolute'
+          padding: '10px'
+          resize: 'both'
+          overflow: 'hidden'
+          background: 'var(--gray-dark)'
+          border: '1px solid var(--gray-bright)'
+
+          left: "#{info.x}px"
+          top: "#{info.y}px"
+          width: "#{info.w}px"
+          height: "#{info.h}px"
+
+        -- handle for moving the child
+        div {
+          style:
+            top: '0'
+            left: '0'
+            right: '0'
+            height: '10px'
+            cursor: 'pointer'
+            position: 'absolute'
+
+          onmousedown: CLIENT and (_, e) ->
+            node = e.target.parentElement
+            drag = {
+              :child
+              :node
+
+              startX: tonumber node.style.left\match '(%d+)px'
+              startY: tonumber node.style.top\match '(%d+)px'
+              startMouseX: e.clientX
+              startMouseY: e.clientY
+            }
+        }
+
+        -- child content
+        div {
+          style:
+            width: '100%'
+            height: '100%'
+            background: 'var(--white)'
+
+          (child\gett 'mmm/dom')
+        }
+      }
+
+      -- listen for resize events
+      observe wrapper, child if CLIENT
+      wrapper
+
+  children.style = {
+    width: '1000px'
+    height: '500px'
+  }
+
+  if CLIENT
+    children.onmousemove = (_, e) ->
+      return unless drag
+
+      x = drag.startX + (e.clientX - drag.startMouseX)
+      y = drag.startY + (e.clientY - drag.startMouseY)
+      drag.node.style.left = "#{x}px"
+      drag.node.style.top = "#{y}px"
+
+    children.onmouseup = (_, e) ->
+      for k, func in pairs pending
+        func!
+      pending = {}
+
+      return unless drag
+
+      x = drag.startX + (e.clientX - drag.startMouseX)
+      y = drag.startY + (e.clientY - drag.startMouseY)
+      update_info drag.child, x, y
+      drag = nil
+
+    children.onmouseleave = (_, e) ->
+      return unless drag
+
+      drag.node.style.left = "#{drag.startX}px"
+      drag.node.style.top = "#{drag.startY}px"
+      drag = nil
+
+  article children
diff --git a/root/articles/mmmfs/examples/pinwall/text/pinwall_info: text$json b/root/articles/mmmfs/examples/pinwall/text/pinwall_info: text$json
new file mode 100644
index 0000000..d373545
--- /dev/null
+++ b/root/articles/mmmfs/examples/pinwall/text/pinwall_info: text$json	
@@ -0,0 +1 @@
+{"x": 91.0, "y": 17.0, "w": 186.0, "h": 128.0}
\ No newline at end of file
diff --git a/root/articles/mmmfs/examples/pinwall/text/text$plain.txt b/root/articles/mmmfs/examples/pinwall/text/text$plain.txt
new file mode 100644
index 0000000..8838e5a
--- /dev/null
+++ b/root/articles/mmmfs/examples/pinwall/text/text$plain.txt
@@ -0,0 +1,4 @@
+This is a pinwall example.
+Every box is a separate fileder.
+The boxes can be rearranged and resized freely.
+If the server is in read-write mode, the changes are saved persistently in real time.
diff --git a/root/articles/mmmfs/examples/pinwall/title: text$plain b/root/articles/mmmfs/examples/pinwall/title: text$plain
new file mode 100644
index 0000000..9d29c5d
--- /dev/null
+++ b/root/articles/mmmfs/examples/pinwall/title: text$plain	
@@ -0,0 +1 @@
+A pinwall
diff --git a/root/articles/mmmfs/examples/pinwall/video/URL -> video$mp4 b/root/articles/mmmfs/examples/pinwall/video/URL -> video$mp4
new file mode 100644
index 0000000..6364771
--- /dev/null
+++ b/root/articles/mmmfs/examples/pinwall/video/URL -> video$mp4	
@@ -0,0 +1 @@
+https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4
diff --git a/root/articles/mmmfs/examples/pinwall/video/pinwall_info: text$json b/root/articles/mmmfs/examples/pinwall/video/pinwall_info: text$json
new file mode 100644
index 0000000..30c947e
--- /dev/null
+++ b/root/articles/mmmfs/examples/pinwall/video/pinwall_info: text$json	
@@ -0,0 +1 @@
+{"x": 263.0, "y": 210.0, "w": 353.0, "h": 295.0}
\ No newline at end of file
-- 
cgit v1.2.3


From e5341f6ee4bceb1370acce7430d30c992433d08f Mon Sep 17 00:00:00 2001
From: s-ol <s-ol@users.noreply.github.com>
Date: Thu, 19 Dec 2019 20:47:10 +0100
Subject: lots of writing

---
 .../mmmfs/examples/intro: text$markdown.md         | 91 ++++++++++++++++++++++
 .../examples/pinwall/image/pinwall_info: text$json |  2 +-
 .../examples/pinwall/text/pinwall_info: text$json  |  2 +-
 .../examples/pinwall/video/pinwall_info: text$json |  2 +-
 .../examples/text$moonscript -> fn -> mmm$dom.moon |  6 +-
 5 files changed, 99 insertions(+), 4 deletions(-)
 create mode 100644 root/articles/mmmfs/examples/intro: text$markdown.md

(limited to 'root/articles/mmmfs/examples')

diff --git a/root/articles/mmmfs/examples/intro: text$markdown.md b/root/articles/mmmfs/examples/intro: text$markdown.md
new file mode 100644
index 0000000..a427ae8
--- /dev/null
+++ b/root/articles/mmmfs/examples/intro: text$markdown.md	
@@ -0,0 +1,91 @@
+# examples
+To illustrate the capabilities of the proposed system, and to compare the results with the framework introduced above,
+a number of example use cases have been chosen and implemented from the perspective of a user.
+In the following section I will introduce these use cases and briefly summarize the implementation
+approach in terms of the capabilities of the proposed system.
+
+## publishing and blogging
+### blogging
+Blogging is pretty straightforward, since it generally just involves publishing lightly-formatted text,
+interspersed with media such as images and videos or perhaps social media posts.
+Markdown is a great tool for this job, and has been integrated in the system to much success:
+There are two different types registered with *converts*: `text/markdown` and `text/markdown+span`.
+They both render to HTML (and DOM nodes), so they are immediately viewable as part of the system.
+The only difference for `text/markdown+span` is that it is limited to a single line,
+and doesn't render as a paragraph but rather just a line of text.
+This makes it suitable for denoting formatted-text titles and other small strings of text. 
+
+The problem of embedding other content together with text comfortably is also solved easily,
+becase Markdown allows embedding arbitrary HTML in the document.
+This made it possible to define a set of pseudo-HTML elements in the Markdown-convert,
+`<mmm-embed>` and `<mmm-link>`, which respectively embed and link to other content native to mmm.
+
+### scientific publishing
+<div class="sidenote">
+One of the 'standard' solutions, <a href="https://www.latex-project.org/">LaTeX</a>,
+is arguably at least as complex as the mmm system proposed here, but has a much narrower scope,
+since it does not support interaction.
+</div>
+Scientific publishing is notoriously complex, involving not only the transclusion of diagrams
+and other media, but generally requiring precise and consistent control over formatting and layout.
+Some of these complexities are tedious to manage, but present good opportunities for programmatic
+systems and media to do work for the writer.
+
+One such topic is the topic of references.
+References appear in various formats at multiple positions in a scientific document;
+usually they are referenced via a reduced visual form within the text of the document,
+and then shown again with full details at the end of the document.
+
+For the sake of this thesis, referencing has been implemented using a subset of the popular
+BibTeX format for describing citations. Converts have been implemented for the `text/bibtex`
+type to convert to a full reference format (to `mmm/dom`) and to an inline side-note reference
+(`mmm/dom+link`) that can be transcluded using the `<mmm-link>` pseudo-tag.
+
+For convenience, a convert from the `URL -> cite/acm` type has been provided to `URL -> text/bibtex`,
+which generates links to the ACM Digital Library<mmm-link path="../references/acm-dl"></mmm-link>
+API for accessing BibTeX citations for documents in the library.
+This means that it is enough to store the link to the ACM DL entry in mmmfs,
+and the reference will automatically be fetched (and track potential remote corrections).
+
+## pinwall
+In many situations, in particular for creative work, it is often useful to compile resources of
+different types for reference or inspiration, and arrange them spacially so that they can be viewed
+at a glance or organized into different contexts etc.
+Such a pinwall could serve for example to organise references to articles,
+to collect visual inspiration for a moodboard etc.
+
+As a collection, the Pinwall is primarily mapped to a Fileder in the system.
+Any content that is placed within can then be rendered by the Pinwall,
+which can constrain every piece of content to a rectangular piece on its canvas.
+This is possible through a simple script, e.g. of the type `text/moonscript -> fn -> mmm/dom`,
+which enumerates the list of children, wraps each in such a rectangular container,
+and outputs the list of containers as DOM elements.
+
+The position and size of each panel are stored in an ad-hoc facet, encoded in the JSON data format:
+`pinwall_info: text/json`. This facet can then set on each child and accessed whenever the script is called
+to render the children, plugging the values within the facet into the visual styling of the document.
+
+The script can also set event handlers that react to user input while the document is loaded,
+and allow the user to reposition and resize the individual pinwall items by clicking and dragging
+on the upper border or lower right-hand corner respectively.
+Whenever a change is made the event handler can then update the value in the `pinwall_info` facet,
+so that the script places the content at the updated position and size next time it is invoked.
+
+## slideshow
+Another common use of digital documents is as aids in a verbal presentation.
+These often take the form of slideshows, for the creation of which a number of established applications exist.
+In simple terms, a slideshow is simply a linear series of screen-sized documents, that can be
+advanced (and rewound) one by one using keypresses.
+
+The implementation of this is rather straightforward as well.
+The slideshow as a whole becomes a fileder with a script that generates a designated viewport rectangle,
+as well as a control interface with keys for advancing the active slide.
+It also allows putting the browser into fullscreen mode to maximise screenspace and remove  visual elements
+of the website that may distract from the presentation, and register an event handler for keyboard accelerators
+for moving through the presentation.
+
+Finally the script simply embeds the first of its child-fileders into the viewport rect.
+One the current slide is changed, the next embedded child is simply chosen.
+
+## code documentation
+/meta/mmm.dom/:%20text/html+interactive
diff --git a/root/articles/mmmfs/examples/pinwall/image/pinwall_info: text$json b/root/articles/mmmfs/examples/pinwall/image/pinwall_info: text$json
index 74fba2c..e5893ac 100644
--- a/root/articles/mmmfs/examples/pinwall/image/pinwall_info: text$json	
+++ b/root/articles/mmmfs/examples/pinwall/image/pinwall_info: text$json	
@@ -1 +1 @@
-{"x": 35.0, "y": 209.0, "w": 205.0, "h": 155.0}
\ No newline at end of file
+{"x": 94.0, "y": 265.0, "w": 205.0, "h": 155.0}
\ No newline at end of file
diff --git a/root/articles/mmmfs/examples/pinwall/text/pinwall_info: text$json b/root/articles/mmmfs/examples/pinwall/text/pinwall_info: text$json
index d373545..39bdb45 100644
--- a/root/articles/mmmfs/examples/pinwall/text/pinwall_info: text$json	
+++ b/root/articles/mmmfs/examples/pinwall/text/pinwall_info: text$json	
@@ -1 +1 @@
-{"x": 91.0, "y": 17.0, "w": 186.0, "h": 128.0}
\ No newline at end of file
+{"x": 53.0, "y": 64.0, "w": 396.0, "h": 74.0}
\ No newline at end of file
diff --git a/root/articles/mmmfs/examples/pinwall/video/pinwall_info: text$json b/root/articles/mmmfs/examples/pinwall/video/pinwall_info: text$json
index 30c947e..7be8702 100644
--- a/root/articles/mmmfs/examples/pinwall/video/pinwall_info: text$json	
+++ b/root/articles/mmmfs/examples/pinwall/video/pinwall_info: text$json	
@@ -1 +1 @@
-{"x": 263.0, "y": 210.0, "w": 353.0, "h": 295.0}
\ No newline at end of file
+{"x": 534.0, "y": 136.0, "w": 387.0, "h": 218.0}
\ No newline at end of file
diff --git a/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon b/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon
index ca9078c..a553f8d 100644
--- a/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon	
+++ b/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon	
@@ -28,5 +28,9 @@
       },
     }
 
-  div for child in *@children
+  content = for child in *@children
     preview child
+
+  table.insert content, 1, (@gett 'intro: mmm/dom')
+
+  div content
-- 
cgit v1.2.3


From 6e236eca27e9fafcd8eb628975496368a8197117 Mon Sep 17 00:00:00 2001
From: s-ol <s-ol@users.noreply.github.com>
Date: Fri, 20 Dec 2019 15:07:08 +0100
Subject: make mmmfs contents sidenote-mds

---
 .../examples/intro: text$markdown+sidenotes.md     | 91 ++++++++++++++++++++++
 .../mmmfs/examples/intro: text$markdown.md         | 91 ----------------------
 2 files changed, 91 insertions(+), 91 deletions(-)
 create mode 100644 root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md
 delete mode 100644 root/articles/mmmfs/examples/intro: text$markdown.md

(limited to 'root/articles/mmmfs/examples')

diff --git a/root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md b/root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md
new file mode 100644
index 0000000..a427ae8
--- /dev/null
+++ b/root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md	
@@ -0,0 +1,91 @@
+# examples
+To illustrate the capabilities of the proposed system, and to compare the results with the framework introduced above,
+a number of example use cases have been chosen and implemented from the perspective of a user.
+In the following section I will introduce these use cases and briefly summarize the implementation
+approach in terms of the capabilities of the proposed system.
+
+## publishing and blogging
+### blogging
+Blogging is pretty straightforward, since it generally just involves publishing lightly-formatted text,
+interspersed with media such as images and videos or perhaps social media posts.
+Markdown is a great tool for this job, and has been integrated in the system to much success:
+There are two different types registered with *converts*: `text/markdown` and `text/markdown+span`.
+They both render to HTML (and DOM nodes), so they are immediately viewable as part of the system.
+The only difference for `text/markdown+span` is that it is limited to a single line,
+and doesn't render as a paragraph but rather just a line of text.
+This makes it suitable for denoting formatted-text titles and other small strings of text. 
+
+The problem of embedding other content together with text comfortably is also solved easily,
+becase Markdown allows embedding arbitrary HTML in the document.
+This made it possible to define a set of pseudo-HTML elements in the Markdown-convert,
+`<mmm-embed>` and `<mmm-link>`, which respectively embed and link to other content native to mmm.
+
+### scientific publishing
+<div class="sidenote">
+One of the 'standard' solutions, <a href="https://www.latex-project.org/">LaTeX</a>,
+is arguably at least as complex as the mmm system proposed here, but has a much narrower scope,
+since it does not support interaction.
+</div>
+Scientific publishing is notoriously complex, involving not only the transclusion of diagrams
+and other media, but generally requiring precise and consistent control over formatting and layout.
+Some of these complexities are tedious to manage, but present good opportunities for programmatic
+systems and media to do work for the writer.
+
+One such topic is the topic of references.
+References appear in various formats at multiple positions in a scientific document;
+usually they are referenced via a reduced visual form within the text of the document,
+and then shown again with full details at the end of the document.
+
+For the sake of this thesis, referencing has been implemented using a subset of the popular
+BibTeX format for describing citations. Converts have been implemented for the `text/bibtex`
+type to convert to a full reference format (to `mmm/dom`) and to an inline side-note reference
+(`mmm/dom+link`) that can be transcluded using the `<mmm-link>` pseudo-tag.
+
+For convenience, a convert from the `URL -> cite/acm` type has been provided to `URL -> text/bibtex`,
+which generates links to the ACM Digital Library<mmm-link path="../references/acm-dl"></mmm-link>
+API for accessing BibTeX citations for documents in the library.
+This means that it is enough to store the link to the ACM DL entry in mmmfs,
+and the reference will automatically be fetched (and track potential remote corrections).
+
+## pinwall
+In many situations, in particular for creative work, it is often useful to compile resources of
+different types for reference or inspiration, and arrange them spacially so that they can be viewed
+at a glance or organized into different contexts etc.
+Such a pinwall could serve for example to organise references to articles,
+to collect visual inspiration for a moodboard etc.
+
+As a collection, the Pinwall is primarily mapped to a Fileder in the system.
+Any content that is placed within can then be rendered by the Pinwall,
+which can constrain every piece of content to a rectangular piece on its canvas.
+This is possible through a simple script, e.g. of the type `text/moonscript -> fn -> mmm/dom`,
+which enumerates the list of children, wraps each in such a rectangular container,
+and outputs the list of containers as DOM elements.
+
+The position and size of each panel are stored in an ad-hoc facet, encoded in the JSON data format:
+`pinwall_info: text/json`. This facet can then set on each child and accessed whenever the script is called
+to render the children, plugging the values within the facet into the visual styling of the document.
+
+The script can also set event handlers that react to user input while the document is loaded,
+and allow the user to reposition and resize the individual pinwall items by clicking and dragging
+on the upper border or lower right-hand corner respectively.
+Whenever a change is made the event handler can then update the value in the `pinwall_info` facet,
+so that the script places the content at the updated position and size next time it is invoked.
+
+## slideshow
+Another common use of digital documents is as aids in a verbal presentation.
+These often take the form of slideshows, for the creation of which a number of established applications exist.
+In simple terms, a slideshow is simply a linear series of screen-sized documents, that can be
+advanced (and rewound) one by one using keypresses.
+
+The implementation of this is rather straightforward as well.
+The slideshow as a whole becomes a fileder with a script that generates a designated viewport rectangle,
+as well as a control interface with keys for advancing the active slide.
+It also allows putting the browser into fullscreen mode to maximise screenspace and remove  visual elements
+of the website that may distract from the presentation, and register an event handler for keyboard accelerators
+for moving through the presentation.
+
+Finally the script simply embeds the first of its child-fileders into the viewport rect.
+One the current slide is changed, the next embedded child is simply chosen.
+
+## code documentation
+/meta/mmm.dom/:%20text/html+interactive
diff --git a/root/articles/mmmfs/examples/intro: text$markdown.md b/root/articles/mmmfs/examples/intro: text$markdown.md
deleted file mode 100644
index a427ae8..0000000
--- a/root/articles/mmmfs/examples/intro: text$markdown.md	
+++ /dev/null
@@ -1,91 +0,0 @@
-# examples
-To illustrate the capabilities of the proposed system, and to compare the results with the framework introduced above,
-a number of example use cases have been chosen and implemented from the perspective of a user.
-In the following section I will introduce these use cases and briefly summarize the implementation
-approach in terms of the capabilities of the proposed system.
-
-## publishing and blogging
-### blogging
-Blogging is pretty straightforward, since it generally just involves publishing lightly-formatted text,
-interspersed with media such as images and videos or perhaps social media posts.
-Markdown is a great tool for this job, and has been integrated in the system to much success:
-There are two different types registered with *converts*: `text/markdown` and `text/markdown+span`.
-They both render to HTML (and DOM nodes), so they are immediately viewable as part of the system.
-The only difference for `text/markdown+span` is that it is limited to a single line,
-and doesn't render as a paragraph but rather just a line of text.
-This makes it suitable for denoting formatted-text titles and other small strings of text. 
-
-The problem of embedding other content together with text comfortably is also solved easily,
-becase Markdown allows embedding arbitrary HTML in the document.
-This made it possible to define a set of pseudo-HTML elements in the Markdown-convert,
-`<mmm-embed>` and `<mmm-link>`, which respectively embed and link to other content native to mmm.
-
-### scientific publishing
-<div class="sidenote">
-One of the 'standard' solutions, <a href="https://www.latex-project.org/">LaTeX</a>,
-is arguably at least as complex as the mmm system proposed here, but has a much narrower scope,
-since it does not support interaction.
-</div>
-Scientific publishing is notoriously complex, involving not only the transclusion of diagrams
-and other media, but generally requiring precise and consistent control over formatting and layout.
-Some of these complexities are tedious to manage, but present good opportunities for programmatic
-systems and media to do work for the writer.
-
-One such topic is the topic of references.
-References appear in various formats at multiple positions in a scientific document;
-usually they are referenced via a reduced visual form within the text of the document,
-and then shown again with full details at the end of the document.
-
-For the sake of this thesis, referencing has been implemented using a subset of the popular
-BibTeX format for describing citations. Converts have been implemented for the `text/bibtex`
-type to convert to a full reference format (to `mmm/dom`) and to an inline side-note reference
-(`mmm/dom+link`) that can be transcluded using the `<mmm-link>` pseudo-tag.
-
-For convenience, a convert from the `URL -> cite/acm` type has been provided to `URL -> text/bibtex`,
-which generates links to the ACM Digital Library<mmm-link path="../references/acm-dl"></mmm-link>
-API for accessing BibTeX citations for documents in the library.
-This means that it is enough to store the link to the ACM DL entry in mmmfs,
-and the reference will automatically be fetched (and track potential remote corrections).
-
-## pinwall
-In many situations, in particular for creative work, it is often useful to compile resources of
-different types for reference or inspiration, and arrange them spacially so that they can be viewed
-at a glance or organized into different contexts etc.
-Such a pinwall could serve for example to organise references to articles,
-to collect visual inspiration for a moodboard etc.
-
-As a collection, the Pinwall is primarily mapped to a Fileder in the system.
-Any content that is placed within can then be rendered by the Pinwall,
-which can constrain every piece of content to a rectangular piece on its canvas.
-This is possible through a simple script, e.g. of the type `text/moonscript -> fn -> mmm/dom`,
-which enumerates the list of children, wraps each in such a rectangular container,
-and outputs the list of containers as DOM elements.
-
-The position and size of each panel are stored in an ad-hoc facet, encoded in the JSON data format:
-`pinwall_info: text/json`. This facet can then set on each child and accessed whenever the script is called
-to render the children, plugging the values within the facet into the visual styling of the document.
-
-The script can also set event handlers that react to user input while the document is loaded,
-and allow the user to reposition and resize the individual pinwall items by clicking and dragging
-on the upper border or lower right-hand corner respectively.
-Whenever a change is made the event handler can then update the value in the `pinwall_info` facet,
-so that the script places the content at the updated position and size next time it is invoked.
-
-## slideshow
-Another common use of digital documents is as aids in a verbal presentation.
-These often take the form of slideshows, for the creation of which a number of established applications exist.
-In simple terms, a slideshow is simply a linear series of screen-sized documents, that can be
-advanced (and rewound) one by one using keypresses.
-
-The implementation of this is rather straightforward as well.
-The slideshow as a whole becomes a fileder with a script that generates a designated viewport rectangle,
-as well as a control interface with keys for advancing the active slide.
-It also allows putting the browser into fullscreen mode to maximise screenspace and remove  visual elements
-of the website that may distract from the presentation, and register an event handler for keyboard accelerators
-for moving through the presentation.
-
-Finally the script simply embeds the first of its child-fileders into the viewport rect.
-One the current slide is changed, the next embedded child is simply chosen.
-
-## code documentation
-/meta/mmm.dom/:%20text/html+interactive
-- 
cgit v1.2.3


From aab83d4f51ede07cad4152fa9d7b73db054a5963 Mon Sep 17 00:00:00 2001
From: s-ol <s-ol@users.noreply.github.com>
Date: Sun, 22 Dec 2019 16:01:47 +0100
Subject: lots more writing

---
 .../examples/text$moonscript -> fn -> mmm$dom.moon | 38 ++++++++++++----------
 1 file changed, 21 insertions(+), 17 deletions(-)

(limited to 'root/articles/mmmfs/examples')

diff --git a/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon b/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon
index a553f8d..c79ffcf 100644
--- a/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon	
+++ b/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon	
@@ -4,7 +4,8 @@
 -- resolves to a value of type mmm/dom
 =>
   html = require 'mmm.dom'
-  import h4, div, a, span from html
+  import h4, div, a, span, ul, li from html
+  import link_to from (require 'mmm.mmmfs.util') html
 
   -- render a preview block
   preview = (child) ->
@@ -14,23 +15,26 @@
     -- get 'preview' as a DOM description (nil if no value or conversion possible)
     content = child\get 'preview', 'mmm/dom'
 
-    div {
-      h4 title, style: { margin: 0, cursor: 'pointer' }, onclick: -> BROWSER\navigate child.path
-      content or span '(no renderable content)', style: { color: 'red' },
-      style: {
-        display: 'inline-block',
-        width: '300px',
-        height: '200px',
-        padding: '4px',
-        margin: '8px',
-        border: '4px solid #eeeeee',
-        overflow: 'hidden',
-      },
-    }
+    -- div {
+    --   h4 title, style: { margin: 0, cursor: 'pointer' }, onclick: -> BROWSER\navigate child.path
+    --   content or span '(no renderable content)', style: { color: 'red' },
+    --   style: {
+    --     display: 'inline-block',
+    --     width: '300px',
+    --     height: '200px',
+    --     padding: '4px',
+    --     margin: '8px',
+    --     border: '4px solid #eeeeee',
+    --     overflow: 'hidden',
+    --   },
+    -- }
 
-  content = for child in *@children
+    li link_to child
+
+  content = ul for child in *@children
     preview child
 
-  table.insert content, 1, (@gett 'intro: mmm/dom')
+  -- table.insert content, 1, (@gett 'intro: mmm/dom')
+  -- div content
 
-  div content
+  div (@gett 'intro: mmm/dom'), content
-- 
cgit v1.2.3


From 77777347b56d6914aa42aca19effc2ad664524ee Mon Sep 17 00:00:00 2001
From: s-ol <s-ol@users.noreply.github.com>
Date: Sun, 29 Dec 2019 14:49:49 +0100
Subject: much improved side-note referencing

---
 root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'root/articles/mmmfs/examples')

diff --git a/root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md b/root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md
index a427ae8..cce348c 100644
--- a/root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md	
+++ b/root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md	
@@ -42,7 +42,7 @@ type to convert to a full reference format (to `mmm/dom`) and to an inline side-
 (`mmm/dom+link`) that can be transcluded using the `<mmm-link>` pseudo-tag.
 
 For convenience, a convert from the `URL -> cite/acm` type has been provided to `URL -> text/bibtex`,
-which generates links to the ACM Digital Library<mmm-link path="../references/acm-dl"></mmm-link>
+which generates links to the ACM Digital Library<mmm-embed path="../references/acm-dl" wrap="sidenote"></mmm-embed>
 API for accessing BibTeX citations for documents in the library.
 This means that it is enough to store the link to the ACM DL entry in mmmfs,
 and the reference will automatically be fetched (and track potential remote corrections).
-- 
cgit v1.2.3


From 5db27ae44907974230dbdfba002182e68e59038e Mon Sep 17 00:00:00 2001
From: s-ol <s-ol@users.noreply.github.com>
Date: Mon, 30 Dec 2019 19:52:37 +0100
Subject: lots of fixes

---
 root/articles/mmmfs/examples/$order                 |  1 -
 .../articles/mmmfs/examples/empty/title: text$plain |  1 -
 .../preview: text$moonscript -> fn -> mmm$dom.moon  |  7 -------
 .../mmmfs/examples/gallery/title: text$plain        |  2 +-
 .../preview: text$moonscript -> fn -> mmm$dom.moon  |  5 -----
 .../articles/mmmfs/examples/image/title: text$plain |  2 +-
 .../examples/intro: text$markdown+sidenotes.md      | 21 ++++++++++++---------
 .../examples/markdown/preview: text$markdown.md     |  6 ------
 .../mmmfs/examples/markdown/text$markdown.md        | 20 ++++++++++++++++++++
 .../mmmfs/examples/markdown/title: text$plain       |  2 +-
 .../mmmfs/examples/pinwall/title: text$plain        |  2 +-
 .../examples/text$moonscript -> fn -> mmm$dom.moon  | 17 +++++++++++------
 12 files changed, 47 insertions(+), 39 deletions(-)
 delete mode 100644 root/articles/mmmfs/examples/empty/title: text$plain
 delete mode 100644 root/articles/mmmfs/examples/gallery/preview: text$moonscript -> fn -> mmm$dom.moon
 delete mode 100644 root/articles/mmmfs/examples/image/preview: text$moonscript -> fn -> mmm$dom.moon
 delete mode 100644 root/articles/mmmfs/examples/markdown/preview: text$markdown.md
 create mode 100644 root/articles/mmmfs/examples/markdown/text$markdown.md

(limited to 'root/articles/mmmfs/examples')

diff --git a/root/articles/mmmfs/examples/$order b/root/articles/mmmfs/examples/$order
index 348f5fe..4ee3140 100644
--- a/root/articles/mmmfs/examples/$order
+++ b/root/articles/mmmfs/examples/$order
@@ -1,6 +1,5 @@
 language_support
 image
 markdown
-empty
 gallery
 pinwall
diff --git a/root/articles/mmmfs/examples/empty/title: text$plain b/root/articles/mmmfs/examples/empty/title: text$plain
deleted file mode 100644
index 911f98b..0000000
--- a/root/articles/mmmfs/examples/empty/title: text$plain	
+++ /dev/null
@@ -1 +0,0 @@
-Hey I'm an almost empty Fileder.
diff --git a/root/articles/mmmfs/examples/gallery/preview: text$moonscript -> fn -> mmm$dom.moon b/root/articles/mmmfs/examples/gallery/preview: text$moonscript -> fn -> mmm$dom.moon
deleted file mode 100644
index 5285629..0000000
--- a/root/articles/mmmfs/examples/gallery/preview: text$moonscript -> fn -> mmm$dom.moon	
+++ /dev/null
@@ -1,7 +0,0 @@
-import div, img, br from require 'mmm.dom'
-
-=> div {
-  'the first pic as a little taste:',
-  br!,
-  img src: @children[1]\get 'preview', 'URL -> image/png'
-}
diff --git a/root/articles/mmmfs/examples/gallery/title: text$plain b/root/articles/mmmfs/examples/gallery/title: text$plain
index ad74eec..2e9ef34 100644
--- a/root/articles/mmmfs/examples/gallery/title: text$plain	
+++ b/root/articles/mmmfs/examples/gallery/title: text$plain	
@@ -1 +1 @@
-A Gallery of 25 random pictures, come on in!
+a gallery of images
diff --git a/root/articles/mmmfs/examples/image/preview: text$moonscript -> fn -> mmm$dom.moon b/root/articles/mmmfs/examples/image/preview: text$moonscript -> fn -> mmm$dom.moon
deleted file mode 100644
index 6c431d0..0000000
--- a/root/articles/mmmfs/examples/image/preview: text$moonscript -> fn -> mmm$dom.moon	
+++ /dev/null
@@ -1,5 +0,0 @@
-import img from require 'mmm.dom'
-
--- look for main content with 'URL to png' type
--- and wrap in an mmm/dom image tag
-=> img src: @gett 'URL -> image/png'
diff --git a/root/articles/mmmfs/examples/image/title: text$plain b/root/articles/mmmfs/examples/image/title: text$plain
index 60a556f..dca924f 100644
--- a/root/articles/mmmfs/examples/image/title: text$plain	
+++ b/root/articles/mmmfs/examples/image/title: text$plain	
@@ -1 +1 @@
-Hey I'm like a link to a picture or smth
+link to a remote image
diff --git a/root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md b/root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md
index cce348c..709da5c 100644
--- a/root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md	
+++ b/root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md	
@@ -16,16 +16,17 @@ and doesn't render as a paragraph but rather just a line of text.
 This makes it suitable for denoting formatted-text titles and other small strings of text. 
 
 The problem of embedding other content together with text comfortably is also solved easily,
-becase Markdown allows embedding arbitrary HTML in the document.
+because Markdown allows embedding arbitrary HTML in the document.
 This made it possible to define a set of pseudo-HTML elements in the Markdown-convert,
 `<mmm-embed>` and `<mmm-link>`, which respectively embed and link to other content native to mmm.
 
 ### scientific publishing
-<div class="sidenote">
+<div class="sidenote" style="margin-top: 1.25rem">
 One of the 'standard' solutions, <a href="https://www.latex-project.org/">LaTeX</a>,
 is arguably at least as complex as the mmm system proposed here, but has a much narrower scope,
 since it does not support interaction.
 </div>
+
 Scientific publishing is notoriously complex, involving not only the transclusion of diagrams
 and other media, but generally requiring precise and consistent control over formatting and layout.
 Some of these complexities are tedious to manage, but present good opportunities for programmatic
@@ -43,9 +44,9 @@ type to convert to a full reference format (to `mmm/dom`) and to an inline side-
 
 For convenience, a convert from the `URL -> cite/acm` type has been provided to `URL -> text/bibtex`,
 which generates links to the ACM Digital Library<mmm-embed path="../references/acm-dl" wrap="sidenote"></mmm-embed>
-API for accessing BibTeX citations for documents in the library.
-This means that it is enough to store the link to the ACM DL entry in mmmfs,
-and the reference will automatically be fetched (and track potential remote corrections).
+API for accessing BibTeX citations for documents in the library. This means that it is enough to store the link to the
+ACM DL entry in mmmfs, and the reference will automatically be fetched, and therefore stay up to date with potential
+remote corrections.
 
 ## pinwall
 In many situations, in particular for creative work, it is often useful to compile resources of
@@ -62,14 +63,14 @@ which enumerates the list of children, wraps each in such a rectangular containe
 and outputs the list of containers as DOM elements.
 
 The position and size of each panel are stored in an ad-hoc facet, encoded in the JSON data format:
-`pinwall_info: text/json`. This facet can then set on each child and accessed whenever the script is called
+`pinwall_info: text/json`. Such a facet is set on each child and read whenever the script is called
 to render the children, plugging the values within the facet into the visual styling of the document.
 
 The script can also set event handlers that react to user input while the document is loaded,
 and allow the user to reposition and resize the individual pinwall items by clicking and dragging
 on the upper border or lower right-hand corner respectively.
 Whenever a change is made the event handler can then update the value in the `pinwall_info` facet,
-so that the script places the content at the updated position and size next time it is invoked.
+so that the updated position and size are stored for the next time the pinwall is opened.
 
 ## slideshow
 Another common use of digital documents is as aids in a verbal presentation.
@@ -84,8 +85,10 @@ It also allows putting the browser into fullscreen mode to maximise screenspace
 of the website that may distract from the presentation, and register an event handler for keyboard accelerators
 for moving through the presentation.
 
-Finally the script simply embeds the first of its child-fileders into the viewport rect.
-One the current slide is changed, the next embedded child is simply chosen.
+Finally the script simply embeds the first of its child-fileders into the viewport rectangle.
+Once the current slide is changed, the next embedded child is simply chosen.
 
+<!--
 ## code documentation
 /meta/mmm.dom/:%20text/html+interactive
+-->
diff --git a/root/articles/mmmfs/examples/markdown/preview: text$markdown.md b/root/articles/mmmfs/examples/markdown/preview: text$markdown.md
deleted file mode 100644
index 4b38ef2..0000000
--- a/root/articles/mmmfs/examples/markdown/preview: text$markdown.md	
+++ /dev/null
@@ -1,6 +0,0 @@
-See I have like
-
-- a list of things
-- (two things)
-
-and some bold **text** and `code tags` with me.
diff --git a/root/articles/mmmfs/examples/markdown/text$markdown.md b/root/articles/mmmfs/examples/markdown/text$markdown.md
new file mode 100644
index 0000000..880eedb
--- /dev/null
+++ b/root/articles/mmmfs/examples/markdown/text$markdown.md
@@ -0,0 +1,20 @@
+This is a markdown document rendered using [marked][marked] on the client, and [discount][discount] on the server.
+All Markdown features are supported, for example there is support for lists...
+
+- a list of things
+- (two things)
+
+...and syntax-highlighted code tags:
+
+```
+print "Hello World"
+```
+
+Since Markdown supports inline HTML, mmmfs shorthands can also be used to embed and reference content from elsewhere in
+the system. For example, the title of this fileder can be embedded using
+`<mmm-embed facet="title"></mmm-embed>`:
+
+<mmm-embed facet="title"></mmm-embed>
+
+[marked]: https://marked.js.org/
+[discount]: https://luarocks.org/modules/craigb/discount
diff --git a/root/articles/mmmfs/examples/markdown/title: text$plain b/root/articles/mmmfs/examples/markdown/title: text$plain
index 319068d..7915148 100644
--- a/root/articles/mmmfs/examples/markdown/title: text$plain	
+++ b/root/articles/mmmfs/examples/markdown/title: text$plain	
@@ -1 +1 @@
-  I'm not even five lines of markdown but i render myself!
+markdown content
diff --git a/root/articles/mmmfs/examples/pinwall/title: text$plain b/root/articles/mmmfs/examples/pinwall/title: text$plain
index 9d29c5d..c629992 100644
--- a/root/articles/mmmfs/examples/pinwall/title: text$plain	
+++ b/root/articles/mmmfs/examples/pinwall/title: text$plain	
@@ -1 +1 @@
-A pinwall
+a pinwall
diff --git a/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon b/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon
index c79ffcf..1401e95 100644
--- a/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon	
+++ b/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon	
@@ -13,7 +13,7 @@
     title = child\gett 'title', 'text/plain'
 
     -- get 'preview' as a DOM description (nil if no value or conversion possible)
-    content = child\get 'preview', 'mmm/dom'
+    -- content = child\get 'preview', 'mmm/dom'
 
     -- div {
     --   h4 title, style: { margin: 0, cursor: 'pointer' }, onclick: -> BROWSER\navigate child.path
@@ -31,10 +31,15 @@
 
     li link_to child
 
-  content = ul for child in *@children
-    preview child
+  examples = div {
+    style:
+      position: 'relative'
+      'margin-top': '4rem'
 
-  -- table.insert content, 1, (@gett 'intro: mmm/dom')
-  -- div content
+    div "The online version is available at ", (a "s-ol.nu/ba", href: 'https://s-ol.nu/ba'), ".", class: 'sidenote'
+    "The following examples can be viewed and inspected in the interactive version online:"
+    ul for child in *@children
+      preview child
+  }
 
-  div (@gett 'intro: mmm/dom'), content
+  div (@gett 'intro: mmm/dom'), examples
-- 
cgit v1.2.3


From 2c3977673b94f67779cc439b7b1460f08d8d38df Mon Sep 17 00:00:00 2001
From: s-ol <s-ol@users.noreply.github.com>
Date: Tue, 31 Dec 2019 15:11:47 +0100
Subject: table-of-contents, reference order

---
 .../implementation: text$markdown+sidenotes.md     | 88 +++++++++++++++++++++
 .../examples/intro: text$markdown+sidenotes.md     | 92 +---------------------
 .../examples/text$moonscript -> fn -> mmm$dom.moon | 14 +---
 3 files changed, 94 insertions(+), 100 deletions(-)
 create mode 100644 root/articles/mmmfs/examples/implementation: text$markdown+sidenotes.md

(limited to 'root/articles/mmmfs/examples')

diff --git a/root/articles/mmmfs/examples/implementation: text$markdown+sidenotes.md b/root/articles/mmmfs/examples/implementation: text$markdown+sidenotes.md
new file mode 100644
index 0000000..d32b0db
--- /dev/null
+++ b/root/articles/mmmfs/examples/implementation: text$markdown+sidenotes.md	
@@ -0,0 +1,88 @@
+## 5.1 publishing and blogging
+### 5.1.1 blogging
+Blogging is pretty straightforward, since it generally just involves publishing lightly-formatted text,
+interspersed with media such as images and videos or perhaps social media posts.
+Markdown is a great tool for this job, and has been integrated in the system to much success:
+There are two different types registered with *converts*: `text/markdown` and `text/markdown+span`.
+They both render to HTML (and DOM nodes), so they are immediately viewable as part of the system.
+The only difference for `text/markdown+span` is that it is limited to a single line,
+and doesn't render as a paragraph but rather just a line of text.
+This makes it suitable for denoting formatted-text titles and other small strings of text. 
+
+The problem of embedding other content together with text comfortably is also solved easily,
+because Markdown allows embedding arbitrary HTML in the document.
+This made it possible to define a set of pseudo-HTML elements in the Markdown-convert,
+`<mmm-embed>` and `<mmm-link>`, which respectively embed and link to other content native to mmm.
+
+### 5.1.2 scientific publishing
+<div class="sidenote" style="margin-top: 1.25rem">
+One of the 'standard' solutions, <a href="https://www.latex-project.org/">LaTeX</a>,
+is arguably at least as complex as the mmm system proposed here, but has a much narrower scope,
+since it does not support interaction.
+</div>
+
+Scientific publishing is notoriously complex, involving not only the transclusion of diagrams
+and other media, but generally requiring precise and consistent control over formatting and layout.
+Some of these complexities are tedious to manage, but present good opportunities for programmatic
+systems and media to do work for the writer.
+
+One such topic is the topic of references.
+References appear in various formats at multiple positions in a scientific document;
+usually they are referenced via a reduced visual form within the text of the document,
+and then shown again with full details at the end of the document.
+
+For the sake of this thesis, referencing has been implemented using a subset of the popular
+BibTeX format for describing citations. Converts have been implemented for the `text/bibtex`
+type to convert to a full reference format (to `mmm/dom`) and to an inline side-note reference
+(`mmm/dom+link`) that can be transcluded using the `<mmm-link>` pseudo-tag.
+
+For convenience, a convert from the `URL -> cite/acm` type has been provided to `URL -> text/bibtex`,
+which generates links to the ACM Digital Library<mmm-embed path="../references/acm-dl" wrap="sidenote"></mmm-embed>
+API for accessing BibTeX citations for documents in the library. This means that it is enough to store the link to the
+ACM DL entry in mmmfs, and the reference will automatically be fetched, and therefore stay up to date with potential
+remote corrections.
+
+## 5.2 pinwall
+In many situations, in particular for creative work, it is often useful to compile resources of
+different types for reference or inspiration, and arrange them spacially so that they can be viewed
+at a glance or organized into different contexts etc.
+Such a pinwall could serve for example to organise references to articles,
+to collect visual inspiration for a moodboard etc.
+
+As a collection, the Pinwall is primarily mapped to a Fileder in the system.
+Any content that is placed within can then be rendered by the Pinwall,
+which can constrain every piece of content to a rectangular piece on its canvas.
+This is possible through a simple script, e.g. of the type `text/moonscript -> fn -> mmm/dom`,
+which enumerates the list of children, wraps each in such a rectangular container,
+and outputs the list of containers as DOM elements.
+
+The position and size of each panel are stored in an ad-hoc facet, encoded in the JSON data format:
+`pinwall_info: text/json`. Such a facet is set on each child and read whenever the script is called
+to render the children, plugging the values within the facet into the visual styling of the document.
+
+The script can also set event handlers that react to user input while the document is loaded,
+and allow the user to reposition and resize the individual pinwall items by clicking and dragging
+on the upper border or lower right-hand corner respectively.
+Whenever a change is made the event handler can then update the value in the `pinwall_info` facet,
+so that the updated position and size are stored for the next time the pinwall is opened.
+
+## 5.3 slideshow
+Another common use of digital documents is as aids in a verbal presentation.
+These often take the form of slideshows, for the creation of which a number of established applications exist.
+In simple terms, a slideshow is simply a linear series of screen-sized documents, that can be
+advanced (and rewound) one by one using keypresses.
+
+The implementation of this is rather straightforward as well.
+The slideshow as a whole becomes a fileder with a script that generates a designated viewport rectangle,
+as well as a control interface with keys for advancing the active slide.
+It also allows putting the browser into fullscreen mode to maximise screenspace and remove  visual elements
+of the website that may distract from the presentation, and register an event handler for keyboard accelerators
+for moving through the presentation.
+
+Finally the script simply embeds the first of its child-fileders into the viewport rectangle.
+Once the current slide is changed, the next embedded child is simply chosen.
+
+<!--
+## code documentation
+/meta/mmm.dom/:%20text/html+interactive
+-->
diff --git a/root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md b/root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md
index 709da5c..7b54d95 100644
--- a/root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md	
+++ b/root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md	
@@ -1,94 +1,8 @@
-# examples
+# 5. example use-cases
 To illustrate the capabilities of the proposed system, and to compare the results with the framework introduced above,
 a number of example use cases have been chosen and implemented from the perspective of a user.
 In the following section I will introduce these use cases and briefly summarize the implementation
 approach in terms of the capabilities of the proposed system.
 
-## publishing and blogging
-### blogging
-Blogging is pretty straightforward, since it generally just involves publishing lightly-formatted text,
-interspersed with media such as images and videos or perhaps social media posts.
-Markdown is a great tool for this job, and has been integrated in the system to much success:
-There are two different types registered with *converts*: `text/markdown` and `text/markdown+span`.
-They both render to HTML (and DOM nodes), so they are immediately viewable as part of the system.
-The only difference for `text/markdown+span` is that it is limited to a single line,
-and doesn't render as a paragraph but rather just a line of text.
-This makes it suitable for denoting formatted-text titles and other small strings of text. 
-
-The problem of embedding other content together with text comfortably is also solved easily,
-because Markdown allows embedding arbitrary HTML in the document.
-This made it possible to define a set of pseudo-HTML elements in the Markdown-convert,
-`<mmm-embed>` and `<mmm-link>`, which respectively embed and link to other content native to mmm.
-
-### scientific publishing
-<div class="sidenote" style="margin-top: 1.25rem">
-One of the 'standard' solutions, <a href="https://www.latex-project.org/">LaTeX</a>,
-is arguably at least as complex as the mmm system proposed here, but has a much narrower scope,
-since it does not support interaction.
-</div>
-
-Scientific publishing is notoriously complex, involving not only the transclusion of diagrams
-and other media, but generally requiring precise and consistent control over formatting and layout.
-Some of these complexities are tedious to manage, but present good opportunities for programmatic
-systems and media to do work for the writer.
-
-One such topic is the topic of references.
-References appear in various formats at multiple positions in a scientific document;
-usually they are referenced via a reduced visual form within the text of the document,
-and then shown again with full details at the end of the document.
-
-For the sake of this thesis, referencing has been implemented using a subset of the popular
-BibTeX format for describing citations. Converts have been implemented for the `text/bibtex`
-type to convert to a full reference format (to `mmm/dom`) and to an inline side-note reference
-(`mmm/dom+link`) that can be transcluded using the `<mmm-link>` pseudo-tag.
-
-For convenience, a convert from the `URL -> cite/acm` type has been provided to `URL -> text/bibtex`,
-which generates links to the ACM Digital Library<mmm-embed path="../references/acm-dl" wrap="sidenote"></mmm-embed>
-API for accessing BibTeX citations for documents in the library. This means that it is enough to store the link to the
-ACM DL entry in mmmfs, and the reference will automatically be fetched, and therefore stay up to date with potential
-remote corrections.
-
-## pinwall
-In many situations, in particular for creative work, it is often useful to compile resources of
-different types for reference or inspiration, and arrange them spacially so that they can be viewed
-at a glance or organized into different contexts etc.
-Such a pinwall could serve for example to organise references to articles,
-to collect visual inspiration for a moodboard etc.
-
-As a collection, the Pinwall is primarily mapped to a Fileder in the system.
-Any content that is placed within can then be rendered by the Pinwall,
-which can constrain every piece of content to a rectangular piece on its canvas.
-This is possible through a simple script, e.g. of the type `text/moonscript -> fn -> mmm/dom`,
-which enumerates the list of children, wraps each in such a rectangular container,
-and outputs the list of containers as DOM elements.
-
-The position and size of each panel are stored in an ad-hoc facet, encoded in the JSON data format:
-`pinwall_info: text/json`. Such a facet is set on each child and read whenever the script is called
-to render the children, plugging the values within the facet into the visual styling of the document.
-
-The script can also set event handlers that react to user input while the document is loaded,
-and allow the user to reposition and resize the individual pinwall items by clicking and dragging
-on the upper border or lower right-hand corner respectively.
-Whenever a change is made the event handler can then update the value in the `pinwall_info` facet,
-so that the updated position and size are stored for the next time the pinwall is opened.
-
-## slideshow
-Another common use of digital documents is as aids in a verbal presentation.
-These often take the form of slideshows, for the creation of which a number of established applications exist.
-In simple terms, a slideshow is simply a linear series of screen-sized documents, that can be
-advanced (and rewound) one by one using keypresses.
-
-The implementation of this is rather straightforward as well.
-The slideshow as a whole becomes a fileder with a script that generates a designated viewport rectangle,
-as well as a control interface with keys for advancing the active slide.
-It also allows putting the browser into fullscreen mode to maximise screenspace and remove  visual elements
-of the website that may distract from the presentation, and register an event handler for keyboard accelerators
-for moving through the presentation.
-
-Finally the script simply embeds the first of its child-fileders into the viewport rectangle.
-Once the current slide is changed, the next embedded child is simply chosen.
-
-<!--
-## code documentation
-/meta/mmm.dom/:%20text/html+interactive
--->
+<span class="sidenote">The online version is available at [s-ol.nu/ba](https://s-ol.nu/ba).</span>
+The following examples can be viewed and inspected in the interactive version online:
diff --git a/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon b/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon
index 1401e95..6c47270 100644
--- a/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon	
+++ b/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon	
@@ -31,15 +31,7 @@
 
     li link_to child
 
-  examples = div {
-    style:
-      position: 'relative'
-      'margin-top': '4rem'
+  examples = ul for child in *@children
+    preview child
 
-    div "The online version is available at ", (a "s-ol.nu/ba", href: 'https://s-ol.nu/ba'), ".", class: 'sidenote'
-    "The following examples can be viewed and inspected in the interactive version online:"
-    ul for child in *@children
-      preview child
-  }
-
-  div (@gett 'intro: mmm/dom'), examples
+  div (@gett 'intro: mmm/dom'), examples, (@gett 'implementation: mmm/dom')
-- 
cgit v1.2.3


From 719fe5d1a2f8b2d1e2c58b7aed18e6062656ca90 Mon Sep 17 00:00:00 2001
From: s-ol <s-ol@users.noreply.github.com>
Date: Tue, 31 Dec 2019 18:40:54 +0100
Subject: spellcheck

---
 .../examples/implementation: text$markdown+sidenotes.md    | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

(limited to 'root/articles/mmmfs/examples')

diff --git a/root/articles/mmmfs/examples/implementation: text$markdown+sidenotes.md b/root/articles/mmmfs/examples/implementation: text$markdown+sidenotes.md
index d32b0db..0a82a51 100644
--- a/root/articles/mmmfs/examples/implementation: text$markdown+sidenotes.md	
+++ b/root/articles/mmmfs/examples/implementation: text$markdown+sidenotes.md	
@@ -12,22 +12,22 @@ This makes it suitable for denoting formatted-text titles and other small string
 The problem of embedding other content together with text comfortably is also solved easily,
 because Markdown allows embedding arbitrary HTML in the document.
 This made it possible to define a set of pseudo-HTML elements in the Markdown-convert,
-`<mmm-embed>` and `<mmm-link>`, which respectively embed and link to other content native to mmm.
+`<mmm-embed>` and `<mmm-link>`, which respectively embed and link to other content native to mmmfs.
 
-### 5.1.2 scientific publishing
+### 5.1.2 academic publishing
 <div class="sidenote" style="margin-top: 1.25rem">
 One of the 'standard' solutions, <a href="https://www.latex-project.org/">LaTeX</a>,
 is arguably at least as complex as the mmm system proposed here, but has a much narrower scope,
 since it does not support interaction.
 </div>
 
-Scientific publishing is notoriously complex, involving not only the transclusion of diagrams
+Academic publishing is notoriously complex, involving not only the transclusion of diagrams
 and other media, but generally requiring precise and consistent control over formatting and layout.
 Some of these complexities are tedious to manage, but present good opportunities for programmatic
 systems and media to do work for the writer.
 
 One such topic is the topic of references.
-References appear in various formats at multiple positions in a scientific document;
+References appear in various formats at multiple positions in a academic document;
 usually they are referenced via a reduced visual form within the text of the document,
 and then shown again with full details at the end of the document.
 
@@ -44,9 +44,9 @@ remote corrections.
 
 ## 5.2 pinwall
 In many situations, in particular for creative work, it is often useful to compile resources of
-different types for reference or inspiration, and arrange them spacially so that they can be viewed
+different types for reference or inspiration, and arrange them spatially so that they can be viewed
 at a glance or organized into different contexts etc.
-Such a pinwall could serve for example to organise references to articles,
+Such a pinwall could serve for example to organize references to articles,
 to collect visual inspiration for a moodboard etc.
 
 As a collection, the Pinwall is primarily mapped to a Fileder in the system.
@@ -75,7 +75,7 @@ advanced (and rewound) one by one using keypresses.
 The implementation of this is rather straightforward as well.
 The slideshow as a whole becomes a fileder with a script that generates a designated viewport rectangle,
 as well as a control interface with keys for advancing the active slide.
-It also allows putting the browser into fullscreen mode to maximise screenspace and remove  visual elements
+It also allows putting the browser into fullscreen mode to maximize screen space and remove  visual elements
 of the website that may distract from the presentation, and register an event handler for keyboard accelerators
 for moving through the presentation.
 
-- 
cgit v1.2.3


From 3c03612dda10b3dcc38c9bc2c96d8a539518f2db Mon Sep 17 00:00:00 2001
From: s-ol <s-ol@users.noreply.github.com>
Date: Wed, 1 Jan 2020 19:41:01 +0100
Subject: introduction

---
 .../implementation: text$markdown+sidenotes.md     | 36 +++++++++++-----------
 .../examples/intro: text$markdown+sidenotes.md     |  4 ++-
 .../examples/text$moonscript -> fn -> mmm$dom.moon |  9 +++++-
 3 files changed, 29 insertions(+), 20 deletions(-)

(limited to 'root/articles/mmmfs/examples')

diff --git a/root/articles/mmmfs/examples/implementation: text$markdown+sidenotes.md b/root/articles/mmmfs/examples/implementation: text$markdown+sidenotes.md
index 0a82a51..8a6a185 100644
--- a/root/articles/mmmfs/examples/implementation: text$markdown+sidenotes.md	
+++ b/root/articles/mmmfs/examples/implementation: text$markdown+sidenotes.md	
@@ -1,20 +1,20 @@
-## 5.1 publishing and blogging
-### 5.1.1 blogging
-Blogging is pretty straightforward, since it generally just involves publishing lightly-formatted text,
+## 6.1&emsp;publishing and blogging
+### 6.1.1&emsp;blogging
+Blogging is pretty straightforward since it generally just involves publishing lightly-formatted text,
 interspersed with media such as images and videos or perhaps social media posts.
-Markdown is a great tool for this job, and has been integrated in the system to much success:
+Markdown is a great tool for this job, and has been integrated into the system to much success:
 There are two different types registered with *converts*: `text/markdown` and `text/markdown+span`.
 They both render to HTML (and DOM nodes), so they are immediately viewable as part of the system.
 The only difference for `text/markdown+span` is that it is limited to a single line,
 and doesn't render as a paragraph but rather just a line of text.
 This makes it suitable for denoting formatted-text titles and other small strings of text. 
 
-The problem of embedding other content together with text comfortably is also solved easily,
+The problem of embedding other content together with text comfortably is also solved easily
 because Markdown allows embedding arbitrary HTML in the document.
 This made it possible to define a set of pseudo-HTML elements in the Markdown-convert,
 `<mmm-embed>` and `<mmm-link>`, which respectively embed and link to other content native to mmmfs.
 
-### 5.1.2 academic publishing
+### 6.1.2&emsp;academic publishing
 <div class="sidenote" style="margin-top: 1.25rem">
 One of the 'standard' solutions, <a href="https://www.latex-project.org/">LaTeX</a>,
 is arguably at least as complex as the mmm system proposed here, but has a much narrower scope,
@@ -22,13 +22,13 @@ since it does not support interaction.
 </div>
 
 Academic publishing is notoriously complex, involving not only the transclusion of diagrams
-and other media, but generally requiring precise and consistent control over formatting and layout.
-Some of these complexities are tedious to manage, but present good opportunities for programmatic
+and other media but generally requiring precise and consistent control over formatting and layout.
+Some of these complexities are tedious to manage but present good opportunities for programmatic
 systems and media to do work for the writer.
 
 One such topic is the topic of references.
-References appear in various formats at multiple positions in a academic document;
-usually they are referenced via a reduced visual form within the text of the document,
+References appear in various formats at multiple positions in an academic document;
+usually, they are referenced via a reduced visual form within the text of the document
 and then shown again with full details at the end of the document.
 
 For the sake of this thesis, referencing has been implemented using a subset of the popular
@@ -42,18 +42,18 @@ API for accessing BibTeX citations for documents in the library. This means that
 ACM DL entry in mmmfs, and the reference will automatically be fetched, and therefore stay up to date with potential
 remote corrections.
 
-## 5.2 pinwall
-In many situations, in particular for creative work, it is often useful to compile resources of
-different types for reference or inspiration, and arrange them spatially so that they can be viewed
-at a glance or organized into different contexts etc.
+## 6.2&emsp;pinwall
+In many situations, and particularly for creative work, it is often useful to compile resources of
+different types for reference or inspiration and arrange them spatially so that they can be viewed
+at a glance or organized into different contexts, etc.
 Such a pinwall could serve for example to organize references to articles,
-to collect visual inspiration for a moodboard etc.
+to collect visual inspiration for a mood board, etc.
 
 As a collection, the Pinwall is primarily mapped to a Fileder in the system.
 Any content that is placed within can then be rendered by the Pinwall,
 which can constrain every piece of content to a rectangular piece on its canvas.
 This is possible through a simple script, e.g. of the type `text/moonscript -> fn -> mmm/dom`,
-which enumerates the list of children, wraps each in such a rectangular container,
+which enumerates the list of children, wraps each in such a rectangular container
 and outputs the list of containers as DOM elements.
 
 The position and size of each panel are stored in an ad-hoc facet, encoded in the JSON data format:
@@ -66,7 +66,7 @@ on the upper border or lower right-hand corner respectively.
 Whenever a change is made the event handler can then update the value in the `pinwall_info` facet,
 so that the updated position and size are stored for the next time the pinwall is opened.
 
-## 5.3 slideshow
+## 6.3&emsp;slideshow
 Another common use of digital documents is as aids in a verbal presentation.
 These often take the form of slideshows, for the creation of which a number of established applications exist.
 In simple terms, a slideshow is simply a linear series of screen-sized documents, that can be
@@ -79,7 +79,7 @@ It also allows putting the browser into fullscreen mode to maximize screen space
 of the website that may distract from the presentation, and register an event handler for keyboard accelerators
 for moving through the presentation.
 
-Finally the script simply embeds the first of its child-fileders into the viewport rectangle.
+Finally, the script simply embeds the first of its child-fileders into the viewport rectangle.
 Once the current slide is changed, the next embedded child is simply chosen.
 
 <!--
diff --git a/root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md b/root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md
index 7b54d95..126f407 100644
--- a/root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md	
+++ b/root/articles/mmmfs/examples/intro: text$markdown+sidenotes.md	
@@ -1,8 +1,10 @@
-# 5. example use-cases
+# 6&emsp;example use-cases
 To illustrate the capabilities of the proposed system, and to compare the results with the framework introduced above,
 a number of example use cases have been chosen and implemented from the perspective of a user.
 In the following section I will introduce these use cases and briefly summarize the implementation
 approach in terms of the capabilities of the proposed system.
 
+<div style="break-before: page;"></div>
+
 <span class="sidenote">The online version is available at [s-ol.nu/ba](https://s-ol.nu/ba).</span>
 The following examples can be viewed and inspected in the interactive version online:
diff --git a/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon b/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon
index 6c47270..2988f29 100644
--- a/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon	
+++ b/root/articles/mmmfs/examples/text$moonscript -> fn -> mmm$dom.moon	
@@ -34,4 +34,11 @@
   examples = ul for child in *@children
     preview child
 
-  div (@gett 'intro: mmm/dom'), examples, (@gett 'implementation: mmm/dom')
+  div {
+    style:
+      'break-after': 'page'
+
+    (@gett 'intro: mmm/dom')
+    examples
+    (@gett 'implementation: mmm/dom')
+  }
-- 
cgit v1.2.3