fix inline code

6 files changed, 127 insertions, 33 deletions

diff --git a/app/mmmfs/init.moon b/app/mmmfs/init.moon
index 0a63fec..626c323 100644
--- a/app/mmmfs/init.moon
+++ b/app/mmmfs/init.moon
@@ -5,24 +5,16 @@ import Fileder from require 'lib.mmmfs'
 root = Fileder {
   -- main content
   -- doesn't have a name prefix (e.g. preview: moon -> mmm/dom)
-  -- uses the 'moon ->' conversion to execute the lua/moonscript function on get
+  -- uses the 'moon ->' conversion to execute the lua/pre moon function on get
   -- resolves to a value of type mmm/dom
   'moon -> mmm/dom': () =>
     html = require 'lib.dom'
     import article, h1, h2, h3, p, div, a, sup, ol, li, span, code, pre, br from html
 
-    moonscript = do
-      highlight = (id) ->
-        d_o = -> window.hljs\highlightBlock document\getElementById id
-        window\setTimeout d_o, 0
-
-      i = 0
-      (str) ->
-        id = "__code_#{i}"
-        i += 1
-        str = str\match '^ *(..-) *$'
-        on_client highlight, id
-        pre (code str), :id, class: 'lang-moonscript'
+    moon = (str) ->
+      result = window.hljs\highlight 'moonscript', (str\match '^ *(..-) *$'), true
+      with code class: 'hljs'
+        .innerHTML = result.value
 
     article with  _this = {}
       append = (a) -> table.insert _this, a
@@ -124,7 +116,7 @@ root = Fileder {
         p "Fileders are made up of two main parts. The first is the list of ", (html.i 'properties'), ",
         which are values identified by a ", name, " and ", type, ". These values are queried using strings like ",
         (code 'title: text/plain'), " or ", (code 'mmm/dom'), ", which describe both the ", name,
-        " of a property (", (code '"title"'), " and ", (code '""'), ", the unnamed/main property) and the ", type,
+        " of a property (", (moon '"title"'), " and ", (moon '""'), ", the unnamed/main property) and the ", type,
         " of a property. Property types can be something resembling a MIME-type or a more complex structure
         (see ", (html.i "type chains"), " below). A fileder can have multiple properties of different types
         set that share a ", name, ". In this case the overlapping properties are considered equivalent and the one
@@ -158,7 +150,7 @@ root = Fileder {
         type conversion. This means that you generally ask for content in whichever format suits your application,
         and rely on the type resolution mechanism to make that happen."
 
-      append moonscript [[
+      append pre moon [[
 -- render a preview block
 preview = (title, content) -> div {
   h3 title, style: { ... },
@@ -181,7 +173,7 @@ append div for child in *@children
         be ", (html.i "defined"), " as these types.
         For example, the markdown child below only provides ", (code 'preview'), " as ", (code 'text/markdown'), ":"
 
-      append moonscript [[
+      append pre moon [[
 Fileder {
   'title: text/plain': "I'm not even five lines of markdown but i render myself!",
   'preview: text/markdown': "See I have like
@@ -196,7 +188,7 @@ and some bold **text** and `code tags` with me.",
       append p "Then, globally, there are some conversion paths specified; such as one that maps from ",
         (code 'text/markdown'), " to ", (code 'mmm/dom'), ":"
 
-      append moonscript [[
+      append pre moon [[
 {
   inp: 'text/markdown',
   out: 'mmm/dom',
@@ -209,13 +201,13 @@ and some bold **text** and `code tags` with me.",
       append h3 "type chains"
       append p "In addition, a property type can be encoded using multiple types in a ", (code 'type chain'), ".
         For example the root node you are viewing currently is actually defined as ", (code 'moon -> mmm/dom'), ",
-        meaning it's value is a moonscript function returing a regular ", (code 'mmm/dom'), " value."
+        meaning it's value is a pre moon function returing a regular ", (code 'mmm/dom'), " value."
 
       append p "Both value chains and 'sideways' converts are resolved using the same mechanism,
-        so this page is being rendered just using ", (code "append root\\get 'mmm/dom'"), " as well.
+        so this page is being rendered just using ", (moon "append root\\get 'mmm/dom'"), " as well.
         The convert that resolves the moon type is defined as follows:"
 
-      append moonscript [[
+      append pre moon [[
 {
   inp: 'moon -> (.+)',
   out: '%1',
@@ -233,7 +225,7 @@ and some bold **text** and `code tags` with me.",
         use the URL directly instead.
         This is what the image demo does in order to pass the URL to an ", (code 'img'), " tag's ", (code 'src'), " attribute:"
 
-      append moonscript [[
+      append pre moon [[
 Fileder {
   'title: text/plain': "Hey I'm like a link to picture or smth",
   'URL -> image/png': 'https://picsum.photos/200?random',
@@ -265,7 +257,7 @@ If you are reading this in the source, then c'mon, just scroll past and give me
     -- main content is image/png, to be interpreted by URL to access
     'URL -> image/png': 'https://picsum.photos/200?random',
 
-    -- preview is a lua/moonscript function that neturns an mmm/dom value
+    -- preview is a lua/pre moon function that neturns an mmm/dom value
     'preview: moon -> mmm/dom': =>
       import img from require 'lib.dom'
       img src: @gett 'URL -> image/png' -- look for main content with 'URL to png' type
diff --git a/app/mmmfs/koch.moon b/app/mmmfs/koch.moon
new file mode 100644
index 0000000..0fea944
--- /dev/null
+++ b/app/mmmfs/koch.moon
@@ -0,0 +1,104 @@
+on_client ->
+  Math = window.Math
+
+  import CanvasApp from require 'lib.canvasapp'
+  import hsl from require 'lib.color'
+
+  class KochDemo extends CanvasApp
+    width: 600
+    height: 600
+    length: math.pi * 2
+
+    new: (@iterations=3) =>
+      super true
+      hue = Math.random!
+      @background = {1 - hue, .3, .3}
+
+      @shades = setmetatable {}, __index: (tbl, key) ->
+        with val = hsl { hue, .7, .9 - .5 * (key / @iterations)} do rawset tbl, key, val
+
+    a_sixth = math.pi / 3
+    a_third = 2 * a_sixth
+    cossin = (a) -> (math.cos a), math.sin a
+    triangle: (color) =>
+      @ctx.fillStyle = color
+      @ctx\beginPath!
+      @ctx\moveTo cossin 0
+      @ctx\lineTo cossin a_third
+      @ctx\lineTo cossin 2*a_third
+      @ctx\fill!
+
+    update: (dt) =>
+      super dt * 1.6
+
+    draw: =>
+      @ctx.fillStyle = hsl @background
+      @ctx\fillRect 0, 0, @width, @height
+
+      @ctx\translate @width/2, @height/2
+      s = .3 * math.min @width, @height
+      @ctx\scale s, s
+
+      _scale = 0.8 + 0.2 * math.sin math.pi + @time
+
+      ttime = @time - math.pi/2
+      transfer, flipped = 0
+      if ttime > 0 and ttime < math.pi
+        transfer = .5 - .5 * math.cos ttime
+        flipped = true
+
+      draw = (i, pop) ->
+        @triangle @shades[i]
+
+        extra = not pop and flipped
+        return unless i > (if extra then -1 else 0)
+
+        scale = _scale
+        if (pop and i < 1) or (not pop and i < 0)
+          scale = transfer
+
+        @ctx\save!
+        @ctx\rotate -(a_sixth + a_third)
+        @ctx\scale scale, scale
+
+        for o=1,2
+          @ctx\rotate a_third
+          @ctx\save!
+          @ctx\translate .5 + .5/scale, 0
+          draw i - 1, pop
+          @ctx\restore!
+
+        @ctx\restore!
+
+      @ctx\rotate a_sixth/2
+      @ctx\translate -transfer, 0
+      @ctx\rotate a_sixth * transfer
+
+      @triangle @shades[3 - transfer]
+
+      @ctx\save!
+      @ctx\rotate a_sixth
+      @ctx\scale _scale, _scale
+
+      @ctx\save!
+      @ctx\translate .5 + .5/_scale, 0
+      draw 2 - transfer
+      @ctx\restore!
+
+      @ctx\rotate a_third
+
+      @ctx\save!
+      @ctx\translate .5 + .5/_scale, 0
+      draw 2 - transfer
+      @ctx\restore!
+
+      @ctx\rotate a_third
+
+      @ctx\save!
+      @ctx\translate .5 + .5/_scale, 0
+      draw 2 + transfer, true
+      @ctx\restore!
+
+      @ctx\restore!
+
+  append KochDemo!.node
diff --git a/lib/component.client.moon b/lib/component.client.moon
index 617deb5..7357f50 100644
--- a/lib/component.client.moon
+++ b/lib/component.client.moon
@@ -93,6 +93,7 @@ class ReactiveElement
     for unsub in *@_subscriptions do unsub!
 
   set: (attr, value) =>
+    attr = 'className' if attr == 'class'
     if 'table' == (type value) and ReactiveVar.isinstance value
       table.insert @_subscriptions, value\subscribe (...) -> @set attr, ...
       value = value\get!
diff --git a/lib/dom.client.moon b/lib/dom.client.moon
index b8f2bd5..a5a319b 100644
--- a/lib/dom.client.moon
+++ b/lib/dom.client.moon
@@ -10,6 +10,7 @@ element = (element) -> (...) ->
 
   with e = document\createElement element
     for k,v in pairs attributes
+      k = 'className' if k == 'class'
       if k == 'style' and 'table' == type v
         for kk,vv in pairs v
           e.style[kk] = vv
diff --git a/scss/hljs.scss b/scss/hljs.scss
index 1b4121c..0acf4a2 100644
--- a/scss/hljs.scss
+++ b/scss/hljs.scss
@@ -6,11 +6,16 @@ vim-hybrid theme by w0ng (https://github.com/w0ng/vim-hybrid)
 
 /*background color*/
 .hljs {
+  background: #1d1f21;
+  border-radius: 6px;
+  padding: 0.2em 0.5em;
+  white-space: nowrap;
+}
+
+pre > .hljs {
   display: block;
   overflow-x: auto;
   padding: 1em;
-  background: #1d1f21;
-  border-radius: 10px;
   white-space: pre-wrap;
   margin: 0 2em;
 }
diff --git a/scss/main.scss b/scss/main.scss
index 86fe58e..ca2f11c 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -41,15 +41,6 @@ body {
   }
 }
 
-pre {
-  color: #eeeeee;
-  background-color: #212121;
-  border-radius: 10px;
-  padding: 1em;
-  white-space: pre-wrap;
-  margin: 0 2em;
-}
-
 h1 .icons {
   display: inline-flex;
   float: right;