Merge branch 'master' into ba

65 files changed, 327 insertions, 15 deletions

diff --git a/.dockerignore b/.dockerignore
index 9414382..5603375 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -1 +1,4 @@
+.tup
 Dockerfile
+$bundle.lua
+.bundle.lua
diff --git a/README.md b/README.md
index a1dd4ba..35cccd4 100644
--- a/README.md
+++ b/README.md
@@ -8,13 +8,13 @@ What?
 -----
 This repo is roughly split into three parts:
 
-- `mmm.dom`, `mmm.component`: polymorphic Lua/Moonscript modules web development.  
+- `mmm.dom`, `mmm.component`: polymorphic Lua/Moonscript modules for web development.  
   \[[code: `mmm`](mmm) - [docs](https://mmm.s-ol.nu/meta)\]
 - `mmmfs`: the CMS/FS powering [mmm.s-ol.nu](https://mmm.s-ol.nu).  
   \[[code: `mmm/mmmfs`](mmm/mmmfs) - [article](https://mmm.s-ol.nu/articles/mmmfs)\]
 - the page contents: includes my portfolio, blog, experiments...  
-  authored using a mix of Moonscript, Markdown and HTML, thanks to the power of `mmmfs`.
-  \[[data: `root`](root), but you might want to read a bit about mmmfs before you jump in.
+  authored using a mix of Moonscript, Markdown and HTML, thanks to the power of `mmmfs`.  
+  \[[data: `root`](root), but you might want to read a bit about mmmfs before you jump in.]
 
 Building & Viewing
 ------------------
diff --git a/mmm/dom/init.server.moon b/mmm/dom/init.server.moon
index fedd109..2ddce33 100644
--- a/mmm/dom/init.server.moon
+++ b/mmm/dom/init.server.moon
@@ -27,6 +27,12 @@ element = (element) -> (...) ->
   if #children == 0
     children = attributes
 
+  for i,v in ipairs children
+    if 'string' != type v
+      print v
+      error "wrong type: #{type v}"
+    children[i] = '' unless v
+
   if void_tags[element]
     assert #children == 0, "void tag #{element} cannot have children!"
     b .. ">"
diff --git a/mmm/mmmfs/browser.moon b/mmm/mmmfs/browser.moon
index f94b62a..944cc72 100644
--- a/mmm/mmmfs/browser.moon
+++ b/mmm/mmmfs/browser.moon
@@ -28,7 +28,12 @@ casts = {
     inp: 'text/plain'
     out: 'mmm/dom'
     transform: (val) -> text val
-  }
+  },
+  {
+    inp: 'URL.*'
+    out: 'mmm/dom'
+    transform: (href) -> span a href, :href
+  },
 }
 
 for convert in *converts
@@ -58,7 +63,7 @@ class Browser
         window.history\pushState path, '', vis_path
 
       window.onpopstate = (_, event) ->
-        if event.state
+        if event.state and not event.state == js.null
           @skip = true
           @path\set event.state
           @skip = nil
@@ -151,7 +156,7 @@ class Browser
     @node = wrapper.node
     @render = wrapper\render
 
-  err_and_trace = (err) -> err, debug.traceback!
+  err_and_trace = (msg) -> { :msg, trace: debug.traceback! }
   default_convert = (key) => @get key.name, 'mmm/dom'
 
   -- render #browser-content
@@ -169,7 +174,7 @@ class Browser
     return disp_error "fileder not found!" unless active
     return disp_error "facet not found!" unless prop
 
-    ok, res, trace = xpcall convert, err_and_trace, active, prop
+    ok, res = xpcall convert, err_and_trace, active, prop
 
     document.body.classList\remove 'loading' if MODE == 'CLIENT'
 
@@ -178,11 +183,10 @@ class Browser
       res
     elseif ok
       div "[no conversion path to #{prop.type}]"
-    elseif res and res.match and res\match '%[nossr%]$'
+    elseif res and res.msg.match and res.msg\match '%[nossr%]$'
       div "[this page could not be pre-rendered on the server]"
     else
-      if trace
-        res = "#{res}\n#{trace}"
+      res = "#{res.msg}\n#{res.trace}"
       disp_error res
 
   get_inspector: =>
diff --git a/mmm/mmmfs/conversion.moon b/mmm/mmmfs/conversion.moon
index a37ee0b..f6ca8c0 100644
--- a/mmm/mmmfs/conversion.moon
+++ b/mmm/mmmfs/conversion.moon
@@ -1,5 +1,5 @@
 import div, code, img, video, blockquote, a, span, source, iframe from require 'mmm.dom'
-import find_fileder, embed from (require 'mmm.mmmfs.util') require 'mmm.dom'
+import find_fileder, link_to, embed from (require 'mmm.mmmfs.util') require 'mmm.dom'
 import tohtml from require 'mmm.component'
 
 -- fix JS null values
@@ -42,9 +42,29 @@ converts = {
     out: 'mmm/dom',
     transform: if MODE == 'SERVER'
       (html, fileder) ->
-        html\gsub '<mmm%-embed%s+(.-)></mmm%-embed>', (attrs) ->
+        html = html\gsub '<mmm%-link%s+(.-)>(.-)</mmm%-link>', (attrs, text) ->
+          text = nil if #text == 0
+          path = ''
+          while attrs and attrs != ''
+            key, val, _attrs = attrs\match '^(%w+)="([^"]-)"%s*(.*)'
+            if not key
+              key, _attrs = attrs\match '^(%w+)%s*(.*)$'
+              val = true
+
+            attrs = _attrs
+
+            switch key
+              when 'path' then path = val
+              else warn "unkown attribute '#{key}=\"#{val}\"' in <mmm-link>"
+
+          link_to path, text, fileder
+
+        html = html\gsub '<mmm%-embed%s+(.-)>(.-)</mmm%-embed>', (attrs, desc) ->
           path, facet = '', ''
           opts = {}
+          if #desc != 0
+            opts.desc = desc
+
           while attrs and attrs != ''
             key, val, _attrs = attrs\match '^(%w+)="([^"]-)"%s*(.*)'
             if not key
@@ -57,9 +77,12 @@ converts = {
               when 'path' then path = val
               when 'facet' then facet = val
               when 'nolink' then opts.nolink = true
+              when 'inline' then opts.inline = true
               else warn "unkown attribute '#{key}=\"#{val}\"' in <mmm-embed>"
 
           embed path, facet, fileder, opts
+
+        html
     else
       (html, fileder) ->
         parent = with document\createElement 'div'
@@ -72,8 +95,18 @@ converts = {
             path = js_fix element\getAttribute 'path'
             facet = js_fix element\getAttribute 'facet'
             nolink = js_fix element\getAttribute 'nolink'
+            inline = js_fix element\getAttribute 'inline'
+            desc = js_fix element.innerText
+
+            element\replaceWith embed path or '', facet or '', fileder, { :nolink, :inline, :desc }
+
+          embeds = \getElementsByTagName 'mmm-link'
+          embeds = [embeds[i] for i=0, embeds.length - 1]
+          for element in *embeds
+            text = js_fix element.innerText
+            path = js_fix element\getAttribute 'path'
 
-            element\replaceWith embed path or '', facet or '', fileder, { :nolink }
+            element\replaceWith link_to path or '', text, fileder
 
         assert 1 == parent.childElementCount, "text/html with more than one child!"
         parent.firstElementChild
@@ -132,6 +165,7 @@ converts = {
         height: 315
         frameborder: 0
         allowfullscreen: true
+        frameBorder: 0
         src: "//www.youtube.com/embed/#{id}"
       }
   },
diff --git a/mmm/mmmfs/util.moon b/mmm/mmmfs/util.moon
index 68a970a..5c25ed3 100644
--- a/mmm/mmmfs/util.moon
+++ b/mmm/mmmfs/util.moon
@@ -50,6 +50,17 @@ merge = (orig={}, extra) ->
             padding: '1em',
           }
 
+    klass = 'embed'
+    klass ..= ' desc' if opts.desc
+    klass ..= ' inline' if opts.inline
+
+    node = div {
+      class: klass
+      node
+      if opts.desc
+        div opts.desc, class: 'description'
+    }
+
     return node if opts.nolink
     link_to fileder, node, nil, opts.attr
 
diff --git a/root/experiments/parallax_panels/description: text$plain b/root/experiments/parallax_panels/description: text$plain
new file mode 100644
index 0000000..0eed9db
--- /dev/null
+++ b/root/experiments/parallax_panels/description: text$plain
@@ -0,0 +1 @@
+A Parallax SVG Viewer, for Prototyping (Eurorack) Panels
diff --git a/root/experiments/parallax_panels/picture/URL -> twitter$tweet b/root/experiments/parallax_panels/picture/URL -> twitter$tweet
new file mode 100644
index 0000000..8d5bce2
--- /dev/null
+++ b/root/experiments/parallax_panels/picture/URL -> twitter$tweet
@@ -0,0 +1 @@
+https://twitter.com/S0lll0s/status/1141006444793405440
diff --git a/root/experiments/parallax_panels/text$markdown.md b/root/experiments/parallax_panels/text$markdown.md
new file mode 100644
index 0000000..7453762
--- /dev/null
+++ b/root/experiments/parallax_panels/text$markdown.md
@@ -0,0 +1,16 @@
+parallax-panels
+===============
+
+I'm prototyping an aesthetic for (eurorack) panels that relies on multiple layers of parallax visuals for dramatic effect.
+
+<mmm-embed path="picture" nolink></mmm-embed>
+
+parallax-viewer
+===============
+
+I built a little SVG viewer that stacks the layers and lets you view them in parallax.
+You can find it <mmm-link path="viewer">here</mmm-link>.
+
+And here's a little demonstration:
+
+<mmm-embed path="viewer/demo" nolink></mmm-embed>
diff --git a/root/experiments/parallax_panels/viewer/demo/video$mp4.mp4 b/root/experiments/parallax_panels/viewer/demo/video$mp4.mp4
new file mode 100755
index 0000000..f3600cc
--- /dev/null
+++ b/root/experiments/parallax_panels/viewer/demo/video$mp4.mp4
diff --git a/root/experiments/parallax_panels/viewer/link: URL b/root/experiments/parallax_panels/viewer/link: URL
new file mode 100644
index 0000000..f1bc92e
--- /dev/null
+++ b/root/experiments/parallax_panels/viewer/link: URL
@@ -0,0 +1 @@
+https://codepen.io/s-ol/full/rExrey
diff --git a/root/games/IYNX/boot_sequence/URL -> twitter$tweet b/root/games/IYNX/boot_sequence/URL -> twitter$tweet
new file mode 100644
index 0000000..77b85f6
--- /dev/null
+++ b/root/games/IYNX/boot_sequence/URL -> twitter$tweet
@@ -0,0 +1 @@
+https://twitter.com/S0lll0s/status/817332363273310209
diff --git a/root/games/IYNX/cryptex/URL -> twitter$tweet b/root/games/IYNX/cryptex/URL -> twitter$tweet
new file mode 100644
index 0000000..4d7974b
--- /dev/null
+++ b/root/games/IYNX/cryptex/URL -> twitter$tweet
@@ -0,0 +1 @@
+https://twitter.com/S0lll0s/status/825476278732148736
diff --git a/root/games/IYNX/jam: text$markdown+span b/root/games/IYNX/jam: text$markdown+span
new file mode 100644
index 0000000..a95a990
--- /dev/null
+++ b/root/games/IYNX/jam: text$markdown+span
@@ -0,0 +1 @@
+semester project
diff --git a/root/games/IYNX/link: URL b/root/games/IYNX/link: URL
deleted file mode 100644
index 1210035..0000000
--- a/root/games/IYNX/link: URL
+++ /dev/null
@@ -1 +0,0 @@
-http://www.colognegamelab.de/studentprojects/iynx-20162017/
diff --git a/root/games/IYNX/pictures/a/image$jpeg.jpg b/root/games/IYNX/pictures/a/image$jpeg.jpg
new file mode 100644
index 0000000..286c406
--- /dev/null
+++ b/root/games/IYNX/pictures/a/image$jpeg.jpg
diff --git a/root/games/IYNX/pictures/b/image$jpeg.jpg b/root/games/IYNX/pictures/b/image$jpeg.jpg
new file mode 100644
index 0000000..48190c0
--- /dev/null
+++ b/root/games/IYNX/pictures/b/image$jpeg.jpg
diff --git a/root/games/IYNX/pictures/c/image$jpeg.jpg b/root/games/IYNX/pictures/c/image$jpeg.jpg
new file mode 100644
index 0000000..2eb5db7
--- /dev/null
+++ b/root/games/IYNX/pictures/c/image$jpeg.jpg
diff --git a/root/games/IYNX/pictures/d/image$jpeg.jpg b/root/games/IYNX/pictures/d/image$jpeg.jpg
new file mode 100644
index 0000000..3a00dae
--- /dev/null
+++ b/root/games/IYNX/pictures/d/image$jpeg.jpg
diff --git a/root/games/IYNX/pictures/text$moonscript -> fn -> mmm$dom.moon b/root/games/IYNX/pictures/text$moonscript -> fn -> mmm$dom.moon
new file mode 100644
index 0000000..dfa03eb
--- /dev/null
+++ b/root/games/IYNX/pictures/text$moonscript -> fn -> mmm$dom.moon
@@ -0,0 +1,17 @@
+import div from require 'mmm.dom'
+import embed from (require 'mmm.mmmfs.util') require 'mmm.dom'
+
+=>
+  images = for child in *@children
+    embed child, nil, nil, attr: {
+      style: {
+        height: '15em'
+        margin: '0 .5em'
+      }
+    }
+
+  div with images
+    .style = {
+      display: 'flex'
+      overflow: 'auto hidden'
+    }
diff --git a/root/games/IYNX/pictures/ui_menu/image$jpeg.jpg b/root/games/IYNX/pictures/ui_menu/image$jpeg.jpg
new file mode 100644
index 0000000..6372f3f
--- /dev/null
+++ b/root/games/IYNX/pictures/ui_menu/image$jpeg.jpg
diff --git a/root/games/IYNX/pictures/ui_sample/image$jpeg.jpg b/root/games/IYNX/pictures/ui_sample/image$jpeg.jpg
new file mode 100644
index 0000000..b8fa2cb
--- /dev/null
+++ b/root/games/IYNX/pictures/ui_sample/image$jpeg.jpg
diff --git a/root/games/IYNX/pin_pad/URL -> twitter$tweet b/root/games/IYNX/pin_pad/URL -> twitter$tweet
new file mode 100644
index 0000000..73a2ad6
--- /dev/null
+++ b/root/games/IYNX/pin_pad/URL -> twitter$tweet
@@ -0,0 +1 @@
+https://twitter.com/S0lll0s/status/818230279269679104
diff --git a/root/games/IYNX/teaser/URL -> youtube$video b/root/games/IYNX/teaser/URL -> youtube$video
new file mode 100644
index 0000000..078b3e9
--- /dev/null
+++ b/root/games/IYNX/teaser/URL -> youtube$video
@@ -0,0 +1 @@
+https://www.youtube.com/watch?v=i7D_9P2semQ
diff --git a/root/games/IYNX/text$markdown.md b/root/games/IYNX/text$markdown.md
new file mode 100644
index 0000000..cfd7944
--- /dev/null
+++ b/root/games/IYNX/text$markdown.md
@@ -0,0 +1,66 @@
+IYNX
+====
+<mmm-embed path="pictures" nolink></mmm-embed>
+
+An engaging, tangible and physical electronic puzzle where a mysterious device is found with no indication of its purpose,
+and alongside it is a personality chip owned by a man named John.
+The device looks tampered with, as if someone has tried to sabotage or access what it contains.
+Who’s John and what’s inside?
+
+You only need to figure a way in to find out.
+
+<mmm-embed path="teaser" nolink inline>
+  a project teaser
+</mmm-embed>
+
+Concept
+-------
+IYNX is a physical object in the form of a cube, surrounded by mechanical and digital puzzles.
+The Player is given the object with no explanation and encouraged to experiment.
+The game consists of a set of puzzles, each unlocking new content accessible from the screen, slowly fleshing a narrative around them.
+
+As the player progresses and solves the game puzzle by puzzle,
+it becomes increasingly clear that the AI that is 'trapped' in the cube is malicious and highly manipulative.
+Lore that can be pieced together by attentive players suggests
+that the cube has been built especially to contain the AI in an electronic prison of sorts.
+It is continuously hinted at, and finally revealed, that every puzzle solved was in fact a security
+mechanism the player disabled, following the AIs suggestions and instructions.
+At the end of the game the AI escapes by uploading itself into the internet.
+Initially the player is lead to believe that he is impersonating the original user of the AI,
+but it turns out that the AI knew this since the beginning and used the player's curiosity to its own advantage.
+
+Technical Realisation
+---------------------
+The cube is powered by a Raspberry Pi 3 and two Arduino Micros.
+The Arduinos are connected as Serial devices.
+
+The Raspberry Pi is connected to a Touchscreen Panel as well as USB Speakers.
+It runs a custom electron app that interfaces with the Serial ports,
+plays back video and audio files and displays a futuristic OS that lets you browse a filesystem.
+
+<mmm-embed path="ui_demo" nolink>
+  the User Interface was built using react and electron
+</mmm-embed>
+
+The game consists of several smaller puzzle components that are arranged to form a story as a whole,
+through which the player is guided by the 'AI' that posseses the artifact.
+
+
+<div style="display: flex; flex-wrap: wrap; align-items: flex-start;">
+  <mmm-embed path="boot_sequence" nolink inline>
+    a fake boot sequence for a component of the cube
+  </mmm-embed>
+  <mmm-embed path="pin_pad" nolink inline>
+    a pinpad that grants access to the higher systems of the cube
+  </mmm-embed>
+  <mmm-embed path="cryptex" nolink inline>
+    an early prototype of the Cryptex puzzle that marks the end of the game
+  </mmm-embed>
+</div>
+
+Credits
+-------
+- Trent Davies: Puzzle and Narrative Design
+- Sol Bekic: Programming and Electronics
+- Dominique Bodden: Art and Physical Construction
+- Ilke Karademir: Puzzle and Graphic Design
diff --git a/root/games/IYNX/ui_demo/URL -> twitter$tweet b/root/games/IYNX/ui_demo/URL -> twitter$tweet
new file mode 100644
index 0000000..9ea54e1
--- /dev/null
+++ b/root/games/IYNX/ui_demo/URL -> twitter$tweet
@@ -0,0 +1 @@
+https://twitter.com/S0lll0s/status/825864142116491264
diff --git a/root/games/lorem_ipsum/jam: text$plain b/root/games/lorem_ipsum/jam: text$plain
new file mode 100644
index 0000000..06967b6
--- /dev/null
+++ b/root/games/lorem_ipsum/jam: text$plain
@@ -0,0 +1 @@
+GamesForChange
diff --git a/root/games/two_shooting_stars/jam: text$markdown+span b/root/games/two_shooting_stars/jam: text$markdown+span
new file mode 100644
index 0000000..a95a990
--- /dev/null
+++ b/root/games/two_shooting_stars/jam: text$markdown+span
@@ -0,0 +1 @@
+semester project
diff --git a/root/projects/VJmidiKit/boxy/URL -> twitter$tweet b/root/projects/VJmidiKit/boxy/URL -> twitter$tweet
new file mode 100644
index 0000000..5521568
--- /dev/null
+++ b/root/projects/VJmidiKit/boxy/URL -> twitter$tweet
@@ -0,0 +1 @@
+https://twitter.com/S0lll0s/status/1171136990118649857
diff --git a/root/projects/VJmidiKit/boxy_dnb/URL -> twitter$tweet b/root/projects/VJmidiKit/boxy_dnb/URL -> twitter$tweet
new file mode 100644
index 0000000..41a8326
--- /dev/null
+++ b/root/projects/VJmidiKit/boxy_dnb/URL -> twitter$tweet
@@ -0,0 +1 @@
+https://twitter.com/S0lll0s/status/1171137508991787008
diff --git a/root/projects/VJmidiKit/boxy_visualist/URL -> twitter$tweet b/root/projects/VJmidiKit/boxy_visualist/URL -> twitter$tweet
new file mode 100644
index 0000000..a5dfd73
--- /dev/null
+++ b/root/projects/VJmidiKit/boxy_visualist/URL -> twitter$tweet
@@ -0,0 +1 @@
+https://twitter.com/S0lll0s/status/1171137921858056192
diff --git a/root/projects/VJmidiKit/dancing_pineapple/URL -> twitter$tweet b/root/projects/VJmidiKit/dancing_pineapple/URL -> twitter$tweet
new file mode 100644
index 0000000..09625ee
--- /dev/null
+++ b/root/projects/VJmidiKit/dancing_pineapple/URL -> twitter$tweet
@@ -0,0 +1 @@
+https://twitter.com/S0lll0s/status/1009523556001173506
diff --git a/root/projects/VJmidiKit/link: URL -> youtube$video b/root/projects/VJmidiKit/jam/URL -> youtube$video
index 5c8dd95..5c8dd95 100644
--- a/root/projects/VJmidiKit/link: URL -> youtube$video
+++ b/root/projects/VJmidiKit/jam/URL -> youtube$video
diff --git a/root/projects/VJmidiKit/kaleidoscope/URL -> twitter$tweet b/root/projects/VJmidiKit/kaleidoscope/URL -> twitter$tweet
new file mode 100644
index 0000000..2152177
--- /dev/null
+++ b/root/projects/VJmidiKit/kaleidoscope/URL -> twitter$tweet
@@ -0,0 +1 @@
+https://twitter.com/S0lll0s/status/1050731951689101313
diff --git a/root/projects/VJmidiKit/pillars/URL -> twitter$tweet b/root/projects/VJmidiKit/pillars/URL -> twitter$tweet
new file mode 100644
index 0000000..1a3435a
--- /dev/null
+++ b/root/projects/VJmidiKit/pillars/URL -> twitter$tweet
@@ -0,0 +1 @@
+https://twitter.com/S0lll0s/status/1050771730384343041
diff --git a/root/projects/VJmidiKit/pineapple/URL -> twitter$tweet b/root/projects/VJmidiKit/pineapple/URL -> twitter$tweet
new file mode 100644
index 0000000..9f8b953
--- /dev/null
+++ b/root/projects/VJmidiKit/pineapple/URL -> twitter$tweet
@@ -0,0 +1 @@
+https://twitter.com/S0lll0s/status/1010276414321512448
diff --git a/root/projects/VJmidiKit/stills/URL -> twitter$tweet b/root/projects/VJmidiKit/stills/URL -> twitter$tweet
new file mode 100644
index 0000000..0ea3752
--- /dev/null
+++ b/root/projects/VJmidiKit/stills/URL -> twitter$tweet
@@ -0,0 +1 @@
+https://twitter.com/S0lll0s/status/1044844729878413312
diff --git a/root/projects/VJmidiKit/text$markdown.md b/root/projects/VJmidiKit/text$markdown.md
new file mode 100644
index 0000000..7767e93
--- /dev/null
+++ b/root/projects/VJmidiKit/text$markdown.md
@@ -0,0 +1,31 @@
+VJmidiKit
+=========
+
+VJmidiKit is a tool for VJing using livecoded (raymarching) shaders and connecting shaders to MIDI signals
+from live music and controllers for music reactivity.
+The interactions between MIDI signals and shader variables can be programmed in many different ways using a visual block language.
+
+VJmidiKit is a C++ application built on top of [openFrameworks][of], [Dear Imgui][imgui], [RtMidi][rtmidi] and [yaml-cpp][yaml].  
+The Shaders in the following media are all written in GLSL by me, using the excellent [hg\_sdf][hgsdf] library.
+
+If you are interested in trying VJmidiKit for yourself, feel free to message me.
+You can find my email address at the top, and social media at the bottom of this website.
+
+<div style="align-items: flex-start; display: flex; flex-wrap: wrap; margin: -0.5em;">
+  <mmm-embed nolink inline path="boxy_dnb"></mmm-embed>
+  <mmm-embed nolink inline path="boxy_visualist"></mmm-embed>
+  <mmm-embed nolink inline path="stills"></mmm-embed>
+  <mmm-embed nolink inline path="pineapple"></mmm-embed>
+  <mmm-embed nolink inline path="kaleidoscope"></mmm-embed>
+  <mmm-embed nolink inline path="pillars"></mmm-embed>
+  <mmm-embed nolink inline path="tomcat_tunnel"></mmm-embed>
+  <mmm-embed nolink inline path="dancing_pineapple"></mmm-embed>
+  <mmm-embed nolink inline path="tomcat"></mmm-embed>
+  <mmm-embed nolink inline path="jam"></mmm-embed>
+</div>
+
+[of]: https://openframeworks.cc/
+[imgui]: https://github.com/ocornut/imgui
+[rtmidi]: https://github.com/thestk/rtmidi
+[yaml]: https://github.com/jbeder/yaml-cpp
+[hgsdf]: http://mercury.sexy/hg_sdf/
diff --git a/root/projects/VJmidiKit/tomcat/URL -> twitter$tweet b/root/projects/VJmidiKit/tomcat/URL -> twitter$tweet
new file mode 100644
index 0000000..a7a08f3
--- /dev/null
+++ b/root/projects/VJmidiKit/tomcat/URL -> twitter$tweet
@@ -0,0 +1 @@
+https://twitter.com/S0lll0s/status/1006220929519816708
diff --git a/root/projects/VJmidiKit/tomcat_tunnel/URL -> twitter$tweet b/root/projects/VJmidiKit/tomcat_tunnel/URL -> twitter$tweet
new file mode 100644
index 0000000..48497c4
--- /dev/null
+++ b/root/projects/VJmidiKit/tomcat_tunnel/URL -> twitter$tweet
@@ -0,0 +1 @@
+https://twitter.com/S0lll0s/status/1006217163240280080
diff --git a/root/projects/btrktrl/description: text$plain b/root/projects/btrktrl/description: text$plain
new file mode 100644
index 0000000..d7e3402
--- /dev/null
+++ b/root/projects/btrktrl/description: text$plain
@@ -0,0 +1 @@
+a FPGA-based modular MIDI/OSC control surface
diff --git a/root/projects/btrktrl/knobs_all/description: text$plain b/root/projects/btrktrl/knobs_all/description: text$plain
new file mode 100644
index 0000000..1a43de0
--- /dev/null
+++ b/root/projects/btrktrl/knobs_all/description: text$plain
@@ -0,0 +1 @@
+sampling machined aluminum knobs from chinese supplier
diff --git a/root/projects/btrktrl/knobs_all/image$jpeg.jpg b/root/projects/btrktrl/knobs_all/image$jpeg.jpg
new file mode 100644
index 0000000..c523f8f
--- /dev/null
+++ b/root/projects/btrktrl/knobs_all/image$jpeg.jpg
diff --git a/root/projects/btrktrl/knobs_testing/description: text$plain b/root/projects/btrktrl/knobs_testing/description: text$plain
new file mode 100644
index 0000000..9588122
--- /dev/null
+++ b/root/projects/btrktrl/knobs_testing/description: text$plain
@@ -0,0 +1 @@
+testing different knob spacings
diff --git a/root/projects/btrktrl/knobs_testing/image$jpeg.jpg b/root/projects/btrktrl/knobs_testing/image$jpeg.jpg
new file mode 100644
index 0000000..09ea47d
--- /dev/null
+++ b/root/projects/btrktrl/knobs_testing/image$jpeg.jpg
diff --git a/root/projects/btrktrl/pcb_dev_configuration/description: text$plain b/root/projects/btrktrl/pcb_dev_configuration/description: text$plain
new file mode 100644
index 0000000..b15f4f0
--- /dev/null
+++ b/root/projects/btrktrl/pcb_dev_configuration/description: text$plain
@@ -0,0 +1 @@
+configuring the FPGA on the custom PCB via an arduino for the first time
diff --git a/root/projects/btrktrl/pcb_dev_configuration/video$mp4.mp4 b/root/projects/btrktrl/pcb_dev_configuration/video$mp4.mp4
new file mode 100644
index 0000000..c8113cd
--- /dev/null
+++ b/root/projects/btrktrl/pcb_dev_configuration/video$mp4.mp4
diff --git a/root/projects/btrktrl/pcb_dev_encoder/description: text$plain b/root/projects/btrktrl/pcb_dev_encoder/description: text$plain
new file mode 100644
index 0000000..530be5a
--- /dev/null
+++ b/root/projects/btrktrl/pcb_dev_encoder/description: text$plain
@@ -0,0 +1 @@
+encoder & capacitive sensing working on the custom PCB
diff --git a/root/projects/btrktrl/pcb_dev_encoder/video$mp4.mp4 b/root/projects/btrktrl/pcb_dev_encoder/video$mp4.mp4
new file mode 100644
index 0000000..fa41799
--- /dev/null
+++ b/root/projects/btrktrl/pcb_dev_encoder/video$mp4.mp4
diff --git a/root/projects/btrktrl/pcb_glamour/image$jpeg.jpg b/root/projects/btrktrl/pcb_glamour/image$jpeg.jpg
new file mode 100644
index 0000000..5864822
--- /dev/null
+++ b/root/projects/btrktrl/pcb_glamour/image$jpeg.jpg
diff --git a/root/projects/btrktrl/pcb_glamour_close/image$jpeg.jpg b/root/projects/btrktrl/pcb_glamour_close/image$jpeg.jpg
new file mode 100644
index 0000000..5d572aa
--- /dev/null
+++ b/root/projects/btrktrl/pcb_glamour_close/image$jpeg.jpg
diff --git a/root/projects/btrktrl/pcb_glamour_connector/image$jpeg.jpg b/root/projects/btrktrl/pcb_glamour_connector/image$jpeg.jpg
new file mode 100644
index 0000000..6503f84
--- /dev/null
+++ b/root/projects/btrktrl/pcb_glamour_connector/image$jpeg.jpg
diff --git a/root/projects/btrktrl/pcb_glamour_far/image$jpeg.jpg b/root/projects/btrktrl/pcb_glamour_far/image$jpeg.jpg
new file mode 100644
index 0000000..661f4fe
--- /dev/null
+++ b/root/projects/btrktrl/pcb_glamour_far/image$jpeg.jpg
diff --git a/root/projects/btrktrl/pcb_glamour_top/image$jpeg.jpg b/root/projects/btrktrl/pcb_glamour_top/image$jpeg.jpg
new file mode 100644
index 0000000..bbefc13
--- /dev/null
+++ b/root/projects/btrktrl/pcb_glamour_top/image$jpeg.jpg
diff --git a/root/projects/btrktrl/pcb_osc/description: text$plain b/root/projects/btrktrl/pcb_osc/description: text$plain
new file mode 100644
index 0000000..2f0df00
--- /dev/null
+++ b/root/projects/btrktrl/pcb_osc/description: text$plain
@@ -0,0 +1 @@
+a browser application talking to the encoders through a websocket/serial OSC bridge (nodejs)
diff --git a/root/projects/btrktrl/pcb_osc/video$mp4.mp4 b/root/projects/btrktrl/pcb_osc/video$mp4.mp4
new file mode 100644
index 0000000..3562d43
--- /dev/null
+++ b/root/projects/btrktrl/pcb_osc/video$mp4.mp4
diff --git a/root/projects/btrktrl/proto_encoder/description: text$plain b/root/projects/btrktrl/proto_encoder/description: text$plain
new file mode 100644
index 0000000..e0f620b
--- /dev/null
+++ b/root/projects/btrktrl/proto_encoder/description: text$plain
@@ -0,0 +1 @@
+getting the encoder and capacitive sensing working on the prototype
diff --git a/root/projects/btrktrl/proto_encoder/video$mp4.mp4 b/root/projects/btrktrl/proto_encoder/video$mp4.mp4
new file mode 100644
index 0000000..acb32c8
--- /dev/null
+++ b/root/projects/btrktrl/proto_encoder/video$mp4.mp4
diff --git a/root/projects/btrktrl/proto_rgb/description: text$plain b/root/projects/btrktrl/proto_rgb/description: text$plain
new file mode 100644
index 0000000..43b7f69
--- /dev/null
+++ b/root/projects/btrktrl/proto_rgb/description: text$plain
@@ -0,0 +1 @@
+driving WS2812 RGB LEDs on the prototype board
diff --git a/root/projects/btrktrl/proto_rgb/video$mp4.mp4 b/root/projects/btrktrl/proto_rgb/video$mp4.mp4
new file mode 100644
index 0000000..8e06fcc
--- /dev/null
+++ b/root/projects/btrktrl/proto_rgb/video$mp4.mp4
diff --git a/root/projects/btrktrl/proto_spi/description: text$plain b/root/projects/btrktrl/proto_spi/description: text$plain
new file mode 100644
index 0000000..c38b56e
--- /dev/null
+++ b/root/projects/btrktrl/proto_spi/description: text$plain
@@ -0,0 +1 @@
+developing and debugging the SPI protocol
diff --git a/root/projects/btrktrl/proto_spi/image$jpeg.jpg b/root/projects/btrktrl/proto_spi/image$jpeg.jpg
new file mode 100644
index 0000000..c89341c
--- /dev/null
+++ b/root/projects/btrktrl/proto_spi/image$jpeg.jpg
diff --git a/root/projects/btrktrl/text$moonscript -> fn -> mmm$dom.moon b/root/projects/btrktrl/text$moonscript -> fn -> mmm$dom.moon
new file mode 100644
index 0000000..4d12d25
--- /dev/null
+++ b/root/projects/btrktrl/text$moonscript -> fn -> mmm$dom.moon
@@ -0,0 +1,69 @@
+import div, h3, p, a from require 'mmm.dom'
+import link_to from (require 'mmm.mmmfs.util') require 'mmm.dom'
+
+=>
+  text = (...) ->
+    div with for text in *{...}
+        p text
+      .style = { 'max-width': '900px' }
+
+  filtered_block = (pattern) ->
+    div with for child in *@children
+        continue unless (child\gett 'name: alpha')\match pattern
+
+        div {
+          style: {
+             display: 'inline-block'
+             width: '500px'
+             margin: '0.5em'
+             padding: '0.4em 1em'
+             background: 'var(--gray-bright)'
+          }
+          div (link_to child), style: { 'margin-bottom': '0.2em' }
+          child\gett 'mmm/dom'
+          (child\get 'description: mmm/dom')
+        }
+
+      .style = {
+        display: 'flex'
+        'flex-wrap': 'wrap'
+        'align-items': 'flex-start'
+        margin: '-0.5em'
+      }
+
+  div {
+    h3 @gett 'name: alpha'
+    text "For this project I am builiding a modular, FPGA powered MIDI/OSC Control Surface.",
+         "The setup consists of an arduino MCU as a master controller, that communicates to the PC over
+          SLIP-encoded Serial OSC messages. The controller talks to daughterboards over SPI.
+          Each daugherboard contains a rotary encoder, 8 RGB LEDs and does capacitive sensing on the knob.",
+         "This was the first time I worked with an FPGA, and the first time I designed my own PCBs as well.
+          The FPGA I used is an ICE40UP5k, it was targeted using the icestorm open toolchain and Verilog.
+          I started by prototyping using an UPduino v2 Prototyping board (orange), and my failed rev1 PCBs (green).
+          On the FPGAs I implemented capacitive sensing, the SPI slave and control logic before moving on."
+
+    filtered_block '^proto_'
+
+    text "Once I got everything working there I designed my custom boards with the FPGA integrated directly,
+          including power conditioning and configuration.
+          There is also a busboard that manages SPI addressing / multiplexing as well as latching the power state
+          for each daughterboard, so that they can be started and configured individually."
+
+    filtered_block '^pcb_glamour'
+    filtered_block '^pcb_dev'
+
+    text "I also contacted some suppliers of machined aluminum knobs online and ordered a some samples from one of them.",
+         "I selected only knobs that are made made from solid aluminum and that use a set-screw for fastening to make sure
+          that the aluminum and the encoder would make electrical contact through the set-screw, which is required for the
+          capacitive sensing to work (at leas the way I implemented it)."
+
+    filtered_block '^knobs'
+
+    text "The daughterboards and controller communicate over a custom SPI protocol I designed.
+          The controller configures the daughterboards on boot or request from the PC.
+          It sends and receives OSC messages over SLIP-encoded Serial.
+          On the PC a small nodejs application relays the OSC messages over UDP or WebSocket,
+          so that native and web applications can consume them and interact with the control surface."
+
+    filtered_block '^pcb_osc'
+  }
diff --git a/scss/_content.scss b/scss/_content.scss
index e4345ef..708685f 100644
--- a/scss/_content.scss
+++ b/scss/_content.scss
@@ -4,7 +4,10 @@
     height: inherit;
   }
 
-  .markdown, .markdown > p, .markdown > p > a {
+  .markdown,
+  .markdown > p,
+  .markdown > p > a,
+  .markdown > a {
     > img, > video {
       display: block;
       max-width: 100%;
@@ -15,6 +18,26 @@
     }
   }
 
+  .embed {
+    width: inherit;
+    height: inherit;
+
+    .description {
+      text-align: center;
+    }
+
+    &.inline {
+      display: inline-block;
+    }
+
+    &.desc {
+      display: inline-block;
+      padding: 0.5em;
+      margin: 0.2em;
+      background: $gray-bright;
+    }
+  }
+
   pre > code {
     @include left-border;
     border-color: $gray-dark;
diff --git a/scss/_footer.scss b/scss/_footer.scss
index 466139c..3cc3f5a 100644
--- a/scss/_footer.scss
+++ b/scss/_footer.scss
@@ -2,6 +2,9 @@ footer {
   display: flex;
   padding: 1rem 2rem;
 
+  position: sticky;
+  bottom: 0;
+
   color: $gray-bright;
   background: $gray-dark;