embeddable youtube fileders!

18 files changed, 150 insertions, 136 deletions

diff --git a/mmm/mmmfs/conversion.moon b/mmm/mmmfs/conversion.moon
index 8edccbb..dbaabea 100644
--- a/mmm/mmmfs/conversion.moon
+++ b/mmm/mmmfs/conversion.moon
@@ -1,6 +1,13 @@
-import div, text, code from require 'mmm.dom'
+import div, text, code, img, video, source, iframe from require 'mmm.dom'
+import find_fileder, embed from (require 'mmm.mmmfs.util') require 'mmm.dom'
 import tohtml from require 'mmm.component'
 
+-- fix JS null values
+js_fix = if MODE == 'CLIENT'
+  (arg) ->
+    return if arg == js.null
+    arg
+
 -- limit function to one argument
 single = (func) -> (val) -> func val
 
@@ -21,21 +28,6 @@ converts = {
     transform: (val, fileder) -> val fileder
   },
   {
-    inp: 'text/plain',
-    out: 'mmm/dom',
-    transform: single text
-  },
-  {
-    inp: 'alpha',
-    out: 'mmm/dom',
-    transform: single code
-  },
-  {
-    inp: 'URL -> .*',
-    out: 'mmm/dom',
-    transform: single code
-  },
-  {
     inp: 'mmm/component',
     out: 'mmm/dom',
     transform: single tohtml
@@ -49,11 +41,30 @@ converts = {
     inp: 'text/html',
     out: 'mmm/dom',
     transform: if MODE == 'SERVER'
-      (html) -> div html
+      (html, fileder) ->
+        div html\gsub '<mmm%-embed%s+(.-)></mmm%-embed>', (attrs) ->
+          path, facet = '', ''
+          while attrs and attrs != ''
+            key, val, attrs = attrs\match '^(%w+)="([^"]-)"%s*(.*)'
+            switch key
+              when 'path' then path = val
+              when 'facet' then facet = val
+              else warn "unkown attribute '#{key}=\"#{val}\"' in <mmm-embed>"
+
+          embed path, facet, fileder
     else
-      (html) ->
+      (html, fileder) ->
         with document\createElement 'div'
           .innerHTML = html
+
+          -- copy to iterate safely, HTMLCollections update when nodes are GC'ed
+          embeds = \getElementsByTagName 'mmm-embed'
+          embeds = [embeds[i] for i=0, embeds.length - 1]
+          for element in *embeds
+            path = js_fix element\getAttribute 'path'
+            facet = js_fix element\getAttribute 'facet'
+
+            element\replaceWith embed path, facet, fileder
   },
   {
     inp: 'text/lua -> (.+)',
@@ -68,10 +79,7 @@ converts = {
         path, facet = expr\match '^([%w%-_%./]*)%+(.*)'
         assert path, "couldn't match TPL expression '#{expr}'"
 
-        target = fileder\walk path
-        assert target, "couldn't resolve path '#{path}' relative to #{fileder}"
-
-        target\gett facet
+        (find_fileder path, fileder)\gett facet
   },
   {
     inp: 'time/iso8601-date',
@@ -80,7 +88,53 @@ converts = {
       year, _, month, day = val\match '^%s*(%d%d%d%d)(%-?)([01]%d)%2([0-3]%d)%s*$'
       assert year, "failed to parse ISO 8601 date: '#{val}'"
       os.time :year, :month, :day
-  }
+  },
+  {
+    inp: 'URL -> youtube',
+    out: 'mmm/dom',
+    transform: (link) ->
+      id = link\match 'youtu%.be/([^/]+)'
+      id or= link\match 'youtube.com/watch.*[?&]v=([^&]+)'
+      id or= link\match 'youtube.com/[ev]/([^/]+)'
+      id or= link\match 'youtube.com/embed/([^/]+)'
+
+      assert id, "couldn't parse youtube URL: #{link}"
+
+      iframe {
+        width: 560
+        height: 315
+        frameborder: 0
+        allowfullscreen: true
+        src: "//www.youtube.com/embed/#{id}"
+      }
+  },
+  {
+    inp: 'URL -> image/.+',
+    out: 'mmm/dom',
+    transform: (src, fileder) -> img :src
+  },
+  {
+    inp: 'URL -> video/.+',
+    out: 'mmm/dom',
+    transform: (src) ->
+      -- @TODO: add parsed MIME type
+      video (source :src), controls: true
+  },
+  {
+    inp: 'text/plain',
+    out: 'mmm/dom',
+    transform: single text
+  },
+  {
+    inp: 'alpha',
+    out: 'mmm/dom',
+    transform: single code
+  },
+  {
+    inp: 'URL -> .*',
+    out: 'mmm/dom',
+    transform: single code
+  },
 }
 
 if MODE == 'SERVER'
@@ -111,7 +165,12 @@ do
   local markdown
   if MODE == 'SERVER'
     success, discount = pcall require, 'discount'
-    markdown = discount if success
+    if not success
+      warn "NO MARKDOWN SUPPORT!", discount
+
+    markdown = success and (md) ->
+      res, err = discount.compile md, 'githubtags'
+      res.body
   else
     markdown = window and window.marked and window\marked
 
diff --git a/mmm/mmmfs/fileder.moon b/mmm/mmmfs/fileder.moon
index 489171d..0055a88 100644
--- a/mmm/mmmfs/fileder.moon
+++ b/mmm/mmmfs/fileder.moon
@@ -78,8 +78,8 @@ class Fileder
   -- * path - the path to walk to
   walk: (path) =>
     -- fix relative paths
-    if path != '' and '/' != path\sub 1, 1
-      path = "#{@path}/#{path}"
+    return @ if path == ''
+    path = "#{@path}/#{path}" if '/' != path\sub 1, 1
 
     -- early-out if we are outside of the path already
     return unless @path == path\sub 1, #@path
diff --git a/mmm/mmmfs/util.moon b/mmm/mmmfs/util.moon
index 80d1dd2..e7a4c4e 100644
--- a/mmm/mmmfs/util.moon
+++ b/mmm/mmmfs/util.moon
@@ -1,8 +1,15 @@
 (elements) ->
   import a from elements
 
-  link_to = (fileder, name) ->
-    assert fileder, "no fileder passed"
+  find_fileder = (fileder, origin) ->
+    if 'string' == type fileder
+      assert origin, "cannot resolve path '#{fileder}' without origin!"
+      assert (origin\walk fileder), "couldn't resolve path '#{fileder}' from #{origin}"
+    else
+      assert fileder, "no fileder passed."
+
+  link_to = (fileder, name, origin) ->
+    fileder = find_fileder fileder, origin
 
     name or= fileder\get 'title: mmm/dom'
     name or= fileder\gett 'name: alpha'
@@ -17,6 +24,14 @@
           BROWSER\navigate fileder.path
       }
 
+  embed = (fileder, name='', origin) ->
+    fileder = find_fileder fileder, origin
+
+    node = fileder\gett name, 'mmm/dom'
+    link_to fileder, node
+
   {
+    :find_fileder
     :link_to
+    :embed
   }
diff --git a/root/Tupdefault.lua b/root/Tupdefault.lua
index 7616065..260ca2e 100644
--- a/root/Tupdefault.lua
+++ b/root/Tupdefault.lua
@@ -5,6 +5,7 @@ render = LUA_PATH .. ' moon ' .. build .. '/render_fileder.moon'
 local _facets, facets = {}, {}
 for i, file in ipairs(tup.glob '*$*') do _facets[file] = true end
 for i, file in ipairs(tup.glob '*:*') do _facets[file] = true end
+for i, file in ipairs(tup.glob '*->*') do _facets[file] = true end
 
 for file in pairs(_facets) do facets += file end
 table.sort(facets)
diff --git a/root/blog/automating_my_rice/mmm$tpl -> text$markdown.md b/root/blog/automating_my_rice/mmm$tpl -> text$markdown.md
index 80c3516..87b3405 100644
--- a/root/blog/automating_my_rice/mmm$tpl -> text$markdown.md
+++ b/root/blog/automating_my_rice/mmm$tpl -> text$markdown.md
@@ -23,19 +23,19 @@ The script is pretty straightforward:
 
 So here are all my current themes:
 
-[![cavetree][cavetree]][cavetree]
-[![akira][akira]][akira]
-[![sidewalk][sidewalk]][sidewalk]
-[![hotline][hotline]][hotline]
-[![polar][polar]][polar]
-[![polysun][polysun]][polysun]
-[![psych][psych]][psych]
-[![trippy][trippy]][trippy]
-[![twostripe][twostripe]][twostripe]
-[![bwcube][bwcube]][bwcube]
+<mmm-embed path="cavetree"></mmm-embed>
+<mmm-embed path="akira"></mmm-embed>
+<mmm-embed path="sidewalk"></mmm-embed>
+<mmm-embed path="hotline"></mmm-embed>
+<mmm-embed path="polar"></mmm-embed>
+<mmm-embed path="polysun"></mmm-embed>
+<mmm-embed path="psych"></mmm-embed>
+<mmm-embed path="trippy"></mmm-embed>
+<mmm-embed path="twostripe"></mmm-embed>
+<mmm-embed path="bwcube"></mmm-embed>
 
 The wallpaper for the last one is intended to be tiled, not stretched, but that currently requries a manual change in my i3 config:
-[![dark][dark]][dark]
+<mmm-embed path="dark"></mmm-embed>
 
 I am thinking about implementing this as a Themer feature, but it would require it's own *presentation* plugin type,
 so everyone can choose their own commands, bars, and waiting time.
@@ -44,19 +44,3 @@ You can find more information about [Themer on the github page][themer], along w
 
 [themer]:     https://github.com/s-ol/themer
 [dotfiles]:   https://github.com/s-ol/dotfiles
-
-[akira]:      {{akira+URL -> image/png}}
-[bwcube]:     {{bwcube+URL -> image/png}}
-[cavetree]:   {{cavetree+URL -> image/png}}
-[dark]:       {{dark+URL -> image/png}}
-[hotline]:    {{hotline+URL -> image/png}}
-[laying]:     {{laying+URL -> image/png}}
-[polar]:      {{polar+URL -> image/png}}
-[polysun]:    {{polysun+URL -> image/png}}
-[psych]:      {{psych+URL -> image/png}}
-[sexy]:       {{sexy+URL -> image/png}}
-[sidewalk]:   {{sidewalk+URL -> image/png}}
-[tattooed]:   {{tattooed+URL -> image/png}}
-[touching]:   {{touching+URL -> image/png}}
-[trippy]:     {{trippy+URL -> image/png}}
-[twostripe]:  {{twostripe+URL -> image/png}}
diff --git a/root/blog/clocks_triggers_gates/mmm$tpl -> text$markdown.md b/root/blog/clocks_triggers_gates/mmm$tpl -> text$markdown.md
index e04d3f9..907b41d 100644
--- a/root/blog/clocks_triggers_gates/mmm$tpl -> text$markdown.md
+++ b/root/blog/clocks_triggers_gates/mmm$tpl -> text$markdown.md
@@ -22,7 +22,7 @@ I remembered the old wooden metronome that my grandma had at her piano and how I
 it as a child.  If we had a real metronome tick away, we could hold the needle in place,
 tap it to add an extra beat where there wasn't supposed to be one and more.
 
-![a wittner metronome][metronome.jpg]
+<mmm-embed path="metronome"></mmm-embed>
 
 Analog metronomes like this are actually pretty interesting little devices.
 They are purely mechanical and contain a spring that you have to wind up to give it power.
@@ -107,7 +107,7 @@ This is also a really nice effect actually and transforms rather simple beats in
 
 The schematic at this point is very simple:
 
-![threshold schematic][threshold.jpg]
+<mmm-embed path="threshold"></mmm-embed>
 
 I used an LM393 dual comparator and tied the unused half to ground, as the datasheet recommends.
 
@@ -143,5 +143,3 @@ should put it in with the /7 missing. I guess it could be useful for a slow melo
 [cgs36]:        http://www.elby-designs.com/webtek/cgs/cgs36/cgs36_pulse_divider.html
 
 [cgs36-schematic.gif]:  http://www.elby-designs.com/webtek/cgs/cgs36/schem_cgs36v14_pulse_divider.gif
-[metronome.jpg]:        {{metronome+URL -> image/jpeg}}
-[threshold.jpg]:        {{threshold+URL -> image/jpeg}}
diff --git a/root/blog/love_lua_photoshop_and_games/mmm$tpl -> text$markdown.md b/root/blog/love_lua_photoshop_and_games/mmm$tpl -> text$markdown.md
index e49db99..7506135 100644
--- a/root/blog/love_lua_photoshop_and_games/mmm$tpl -> text$markdown.md
+++ b/root/blog/love_lua_photoshop_and_games/mmm$tpl -> text$markdown.md
@@ -1,7 +1,7 @@
 Recently I've been building a 2d game engine for my semester project at [CGL](http://colognegamelab.de).
 Below, I'll copy and paste two blog posts from my internal documentation blog:
 
---- 
+---
 
 After nailing down the basic narrative and gameplay idea in a lengthy group discussion on the first day,
 we each set goals for the next few days in order to kickstart the project.
@@ -91,7 +91,7 @@ Here's the main part for the animated-layer-loading:
 
 After being able to load simple animations from photoshop without even closing the game was working, I tried loading the scene İlke had created meanwhile:
 
-![outside1]({{outside1+URL -> image/jpeg}})
+<mmm-embed path="outside"></mmm-embed>
 
 Naturally, this failed at first.
 He was using clipping masks and blend modes, neither of which were implemented at the time,
@@ -116,9 +116,7 @@ Because this could also be done by a mixin, i am thinking about abolishing the _
 You can see the system working in this clip:
 
 
-<video controls>
-  <source src="{{animating+URL -> video/mp4}}" type="video/mp4" />
-</video>
+<mmm-embed path="animating"></mmm-embed>
 _making an animation out of the single rain layer_
 
 Moreover, I added a directory structure for mixins; to load a mixin called _name _for a scene called _scene_, it first looks in the scene specific directories:
@@ -227,9 +225,7 @@ Here's the code for both:
 By the end of the three day "test phase".
 This is how the first scene looked in-game:
 
-<video controls>
-  <source src="{{final+URL -> video/mp4}}" type="video/mp4" />
-</video>
+<mmm-embed path="final"></mmm-embed>
 
 Here's _psdscene.moon_, wrapping most things mentioned in this article:
 
diff --git a/root/blog/love_lua_photoshop_and_games/outside1/image$jpeg.jpg b/root/blog/love_lua_photoshop_and_games/outside/image$jpeg.jpg
index 85a29b1..85a29b1 100755
--- a/root/blog/love_lua_photoshop_and_games/outside1/image$jpeg.jpg
+++ b/root/blog/love_lua_photoshop_and_games/outside/image$jpeg.jpg
diff --git a/root/blog/ludum_dare_33_postmortem/mmm$tpl -> text$markdown.md b/root/blog/ludum_dare_33_postmortem/mmm$tpl -> text$markdown.md
index 30d89af..63f99c0 100644
--- a/root/blog/ludum_dare_33_postmortem/mmm$tpl -> text$markdown.md
+++ b/root/blog/ludum_dare_33_postmortem/mmm$tpl -> text$markdown.md
@@ -6,7 +6,7 @@ The theme was *You are the Monster*, and I wanted to really incorporate the them
 
 Many games I have seen took the theme quite literally and made the main character a monster:
 
-![Credit: @RedOshal][smert.png]  
+<mmm-embed path="smert"></mmm-embed>  
 [*image by @RedOshal*][smert_src]
 
 Although you play a monster in *The Monster Within*, I took the theme a bit further.
@@ -15,7 +15,7 @@ The theme reminded me of an exclamated "*Look at yourself! You've become a Monst
 The idea I came up with was the following: your main objective is to eliminate enemies from within a crowd of mostly civilians (in a generic top-down action game). However you turn into a Monster whenever you kill someone, which grants you a lot more power, but also impairs your senses; you can no longer differentiate between civilians and enemies.
 As a result, I figured, people would have to decide between two playstyles, going on a rampage and killing as many people as possible, regardless of their type, or trying to play strategically by memorizing the enemies in the crowd.
 
-![split view][split.png]  
+<mmm-embed path="split"></mmm-embed>  
 *The Monster Within, normal and beast mode*
 
 To make playing in "Beast Mode" more appealing I increased the primary attack (punch) range and added a secondary lunge attack that is exclusive to that mode. This, I hope, tempts players to make use of the beast mode and facilitates players stopping to play for the original objective - eliminating enemies - and instead try to kill as many people as possible (which is an intended effect).
@@ -91,6 +91,3 @@ You can check out *The Monster Within* on the [Ludum Dare entry page][entry], [o
 [steering]:   http://gamedevelopment.tutsplus.com/series/understanding-steering-behaviors--gamedev-12732
 [autonom]:    http://natureofcode.com/book/chapter-6-autonomous-agents/
 [rgamedev]:   https://reddit.com/r/gamedev
-
-[split.png]:  {{split+URL -> image/png}}
-[split.png]:  {{smert+URL -> image/png}}
diff --git a/root/blog/stencils_101/mmm$tpl -> text$markdown.md b/root/blog/stencils_101/mmm$tpl -> text$markdown.md
index 0e37596..67a3e8e 100644
--- a/root/blog/stencils_101/mmm$tpl -> text$markdown.md
+++ b/root/blog/stencils_101/mmm$tpl -> text$markdown.md
@@ -6,14 +6,14 @@ If I get better at hand drawing maybe one day I will sketch them up freehand rig
 
 As an example, let's take the Kill Bill Stencil I did a few days ago:
 
-![the Bride from Kill Bill][killbillfinal.jpg]
+<mmm-embed path="killbill_final"></mmm-embed>
 
 The first thing I did was create a new file in Photoshop, with the dimensions set to what I can print with my inkjet printer (International - A4).
 For the design process the canvas size doesn't really matter anyway and I like to work on a familiar size so I can judge how fine the details should be, also I print the images via my phone and so I need to have them in A4 size to get consistent results later anyway.
 
 The next thing I did was look for a picture to use, after a (very) quick google images tour I settled on this image:
 
-![Kill Bill movie poster][movieposter.jpg]
+<mmm-embed path="poster"></mmm-embed>
 
 In order to turn this into a stencil, I used the *Threshold* Image Adjustment, but before that I cut away all the background.
 With the Magic Wand and Quick Selection, I removed the black bar and yellow background.
@@ -37,7 +37,7 @@ Larger islands may be taped to the surface you are spraying on for art, but it's
 To visualize the final stencil, I have looked up the exact colors of the spraypaint I own at the manufacturers website and saved them as swatches in my photoshop.
 I use those to put a background behind the whole image and to color layers that I want to spraypaint in color later.
 
-![Final Stencil in PS][killbillstencil.png]
+<mmm-embed path="killbillstencil"></mmm-embed>
 
 One problem when you like working non-destructively on many layers, as I do, is that you normally cannot remove something on a layer below by painting over it.
 There are two options, either you can just draw the background color, which means you will have to flatten the image later to get the outline, or you can use the *Layer Blend Modes* to your advantage:
@@ -58,7 +58,7 @@ Cutting is very straightforward, I just try to get as many details as possible.
 I use a standard box cutter but a scalpel / x-acto knife would probably work even better.
 I have a rubber cutting mat that is specifically made for this and works very well.
 
-![Cutting Progress][killbillprogress.jpg]
+<mmm-embed path="killbill_progress"></mmm-embed>
 
 For small round holes I use an old screwdriver part that turned out to be a perfect hole-punching tool and hit it into the paper with a hammer (on a piece of wood).
 
@@ -73,10 +73,10 @@ I try not to hit the same spot too often or too long so the paint doesn't flow b
 # Results
 Here are some of my stencils:
 
-![The Bride][killbillfinal.jpg]
-![Electronic Revolution][elerev.jpg]
-![Suits][suits.jpg]
-![Balisong][balifinal.jpg]
+<mmm-embed path="killbill_final"></mmm-embed>
+<mmm-embed path="technofist_final"></mmm-embed>
+<mmm-embed path="suits_final"></mmm-embed>
+<mmm-embed path="balistencil_final"></mmm-embed>
 
 I tweet all my daily stencils with the [hashtag #astenciladay on twitter][#astenciladay] and post them in the [*Daily Stencil Art* streak on *streak.club*][dailystencil].
 
@@ -85,11 +85,3 @@ If you want any of the `psd`s or the printable outline `jpg`s, [shoot me a tweet
 [#astenciladay]:        https://twitter.com/hashtag/astenciladay
 [dailystencil]:         https://streak.club/s/614/daily-stencil-art
 [twitter]:              https://twitter.com/S0lll0s
-
-[killbillstencil.png]:  {{killbillstencil+URL -> image/png}}
-[killbillfinal.jpg]:    {{killbill_final+URL -> image/jpeg}}
-[movieposter.jpg]:      {{poster+URL -> image/jpeg}}
-[killbillprogress.jpg]: {{killbill_progress+URL -> image/jpeg}}
-[balifinal.jpg]:        {{balistencil_final+URL -> image/jpeg}}
-[elerev.jpg]:           {{technofist_final+URL -> image/jpeg}}
-[suits.jpg]:            {{suits_final+URL -> image/jpeg}}
diff --git a/root/blog/stretching_gates/mmm$tpl -> text$markdown.md b/root/blog/stretching_gates/mmm$tpl -> text$markdown.md
index d50a5a8..8312dc7 100644
--- a/root/blog/stretching_gates/mmm$tpl -> text$markdown.md
+++ b/root/blog/stretching_gates/mmm$tpl -> text$markdown.md
@@ -8,7 +8,7 @@ While the long steps can be useful to make an oscillator play long notes, shorte
 are much more interesting to create drum-ish sounds.
 Here's a crude drawing of how what the circuit was doing vs how it's supposed to work:
 
-![some graphs][crude.png]
+<mmm-embed path="crude"></mmm-embed>
 
 The black lines are the signal levels 'as they used to be': you can see that the comparator output
 has very short pulses of more or less random duration, the /2 output is on half of the time, the /3
@@ -23,7 +23,7 @@ The only missing part is the one that needs to hold the signal for a specified t
 Well, the famous 555 Timer IC has our back: in the *monostable Configuration* it will do just that.
 Here's a schematic of the basic circuit (pic taken from [here][555-src]):
 
-![monostable 555 circuit][monostable.jpg]
+![monostable][monostable.jpg]
 
 This is really half as bad as it looks, but the details are better read up on elsewhere.
 Basically, whenever the signal on the trigger (pin 2) goes __low__, the output (pin 3) goes high
@@ -37,7 +37,7 @@ always outputs the opposite result.
 ## putting it together
 Here's the final schematic as I built it:
 
-![the final schematic][schematic.jpg]
+<mmm-embed path="schematic"></mmm-embed>
 
 Some things you may notice:
 
@@ -60,7 +60,7 @@ After this was all working on the breadboard, I started to solder a second versi
 Before finishing the design I sketched some stripboard layouts on a piece of paper, but in the end I
 threw all care overboard and just placed components on the stripboard.
 
-![half-done stripboard][stripboard.jpg]
+<mmm-embed path="stripboard"></mmm-embed>
 
 I cut apart a large IC socket and soldered the two halfes to the sides of the board to simplify
 testing and panel wiring, but I'm not sure if it was the best idea bceause the sockets aren't really
@@ -71,7 +71,7 @@ sockets once all the cables are in place and tested.
 We used the Dremel that we had luckily gotten our hands on and started drilling holes for the audio
 jacks with a template made from paper.
 
-![the case][case.jpg]
+<mmm-embed path="case"></mmm-embed>
 
 The inside also needed some plastic spines ground away to make room for the jacks, but the Dremel
 made quick work of all that. Juan finished the top of the case with mounting holes for the two
@@ -84,9 +84,4 @@ through.
 
 [juan]:         https://twitter.com/juanorloz
 [555-src]:      https://electrosome.com/monostable-multivibrator-555-timer/
-
-[crude.png]:      {{crude+URL -> image/png}}
-[schematic.jpg]:  {{schematic+URL -> image/jpeg}}
-[stripboard.jpg]: {{stripboard+URL -> image/jpeg}}
-[case.jpg]:       {{case+URL -> image/jpeg}}
 [monostable.jpg]: https://electrosome.com/wp-content/uploads/2013/05/Monostable-Multivibrator-using-555-Timer-Circuit-Diagram.jpg
diff --git a/root/blog/video_synth_research/LZX_reel/URL -> youtube b/root/blog/video_synth_research/LZX_reel/URL -> youtube
new file mode 100644
index 0000000..4b95dc7
--- /dev/null
+++ b/root/blog/video_synth_research/LZX_reel/URL -> youtube
@@ -0,0 +1 @@
+https://www.youtube.com/watch?v=Aba7VD4h6G4
diff --git a/root/blog/video_synth_research/bent1/URL -> youtube b/root/blog/video_synth_research/bent1/URL -> youtube
new file mode 100644
index 0000000..ccc5ce9
--- /dev/null
+++ b/root/blog/video_synth_research/bent1/URL -> youtube
@@ -0,0 +1 @@
+https://www.youtube.com/watch?v=CwVHHz3ph_c
diff --git a/root/blog/video_synth_research/bent2/URL -> youtube b/root/blog/video_synth_research/bent2/URL -> youtube
new file mode 100644
index 0000000..5684f2a
--- /dev/null
+++ b/root/blog/video_synth_research/bent2/URL -> youtube
@@ -0,0 +1 @@
+https://www.youtube.com/watch?v=odBDytzF7ko
diff --git a/root/blog/video_synth_research/mmm$tpl -> text$markdown.md b/root/blog/video_synth_research/mmm$tpl -> text$markdown.md
index de46241..4073f7e 100644
--- a/root/blog/video_synth_research/mmm$tpl -> text$markdown.md
+++ b/root/blog/video_synth_research/mmm$tpl -> text$markdown.md
@@ -8,12 +8,7 @@ initially a bit worried about the complexity of it.
 I had found out about [LZX Industries][lzx] a few months ago, who make amazing modular video synth
 gear... that is very expensive. It looks amazing though:
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/Aba7VD4h6G4"
-  allowfullscreen
-></iframe>
+<mmm-embed path="LZX_reel"></mmm-embed>
 
 I think the price is probably justified, as a lot of engineering goes into making this work in the
 first place, and it looks very clean, which I would attribute to high quality components.
@@ -36,13 +31,7 @@ information in [this post summarizing forum gold][vfold].
 This led me onto the track of the MC1377 chip, an RGB-to-PAL/NTSC video encoder IC.
 At some point I found this video showcasing a video effect device based on it, the *Visualist*:
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/99j3V9t26pY"
-  frameborder="0"
-  allowfullscreen
-></iframe>
+<mmm-embed path="visualist"></mmm-embed>
 
 The best thing is that there is [awesome documentation][visualist] (hotlinked from original dropbox,
 I have a copy if it goes down) for this thing.
@@ -58,8 +47,8 @@ brightness level in a 7-step scale that you can adjust into a small module that
 but also mixed with other effects (perhaps an oscillator and external color input) so that we can
 sync to our music control signals.
 
-![][schematic.png]
-![][mine.jpg]
+<mmmdom path="schematic"></mmmdom>
+<mmmdom path="mine"></mmmdom>
 
 If you look closely you can see that I left some parts out and added a bit of logic to allow setting
 the amount of steps the brightness scale is sliced into.
@@ -83,7 +72,7 @@ that home video contest.
 Well, this is how it's intended to be used anyway. If your camera doesn't work (like mine), you can
 instead practice on a gray background:
 
-![][ich-bin-holz.jpg]
+<mmmdom path="ich_bin_holz"></mmmdom>
 
 So ideally, we can get a live camera as an input to this, and draw on it in *real time*!
 Like an ancient livestreaming tool like OBS.
@@ -92,20 +81,8 @@ Like an ancient livestreaming tool like OBS.
 Also some other people else has already circuit-bent this.
 It looks amazing, so we might just give that a go aswell:
 
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/CwVHHz3ph_c"
-  frameborder="0"
-  allowfullscreen
-></iframe>
-<iframe
-  width="560"
-  height="315"
-  src="https://www.youtube.com/embed/odBDytzF7ko"
-  frameborder="0"
-  allowfullscreen
-></iframe>
+<mmm-embed path="bent1"></mmm-embed>
+<mmm-embed path="bent2"></mmm-embed>
 
 Since taking this for a spin and making a BOM for the *Visualist*,
 I haven't spent any more time on the *Visualist* and turned to the audio side of things for now.
@@ -116,9 +93,3 @@ get ready to solder :)
 [lzx]:          https://www.lzxindustries.net/
 [vfold]:        https://vfoldsynth.wordpress.com/2013/01/23/hidden-stores-of-forum-gold/
 [visualist]:    https://www.dropbox.com/s/uhjd2e6gur972yo/VisualistKl.pdf?dl=0
-
-[schematic.png]:    {{schematic+URL -> image/png}}
-[mine.jpg]:         {{mine+URL -> image/jpeg}}
-[ich-bin-holz.jpg]: {{ich_bin_holz+URL -> image/jpeg}}
-
-<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
diff --git a/root/blog/video_synth_research/visualist/URL -> youtube b/root/blog/video_synth_research/visualist/URL -> youtube
new file mode 100644
index 0000000..7ace2f2
--- /dev/null
+++ b/root/blog/video_synth_research/visualist/URL -> youtube
@@ -0,0 +1 @@
+https://www.youtube.com/watch?v=99j3V9t26pY
diff --git a/root/text$moonscript -> fn -> mmm$dom.moon b/root/text$moonscript -> fn -> mmm$dom.moon
index c036c80..84aed7f 100644
--- a/root/text$moonscript -> fn -> mmm$dom.moon
+++ b/root/text$moonscript -> fn -> mmm$dom.moon
@@ -20,8 +20,9 @@ import link_to from (require 'mmm.mmmfs.util') require 'mmm.dom'
     a { 'here', href: 'https://github.com/s-ol/mmm' }
     '.'
     br!
-    'Most of the inner-workings of this page are documented in ',
+    'Most of the inner-workings of this page are documented in '
     link_to @walk 'articles/mmmfs'
+    '.'
   }
 
   for child in *@children
diff --git a/scss/_reset.scss b/scss/_reset.scss
index a8b1d49..6d37684 100644
--- a/scss/_reset.scss
+++ b/scss/_reset.scss
@@ -34,8 +34,9 @@ body {
 }
 
 a {
-  font-weight: bold;
+  display: inline-block;
 
+  font-weight: bold;
   text-decoration: underline;
   text-decoration-color: transparent;