layout fixes:

- link from logo to root - links to path/: unless `STATIC` is set
author: s-ol <s-ol@users.noreply.github.com> 2019-10-08 11:21:30 +0000
committer: s-ol <s-ol@users.noreply.github.com> 2019-10-08 11:21:30 +0000
commit: 198194ea194b6f091868e71f7b129e36caa4d6f4 (patch)
tree: e75ae5eb82a2ea7180ba57391baf31c50913b182
parent: add ba_log entry 2019-10-07 (diff)
download: mmm-198194ea194b6f091868e71f7b129e36caa4d6f4.tar.gz
mmm-198194ea194b6f091868e71f7b129e36caa4d6f4.zip
4 files changed, 156 insertions, 138 deletions
diff --git a/mmm/mmmfs/converts.moon b/mmm/mmmfs/converts.moon
index f8aad9f..f508d23 100644
--- a/mmm/mmmfs/converts.moon
+++ b/mmm/mmmfs/converts.moon
@@ -42,7 +42,9 @@ converts = {
   {
     inp: 'text/html%+frag',
     out: 'text/html',
-    transform: (html, fileder) -> render html, fileder
+    transform: (html, fileder) ->
+      html = '<div class="content">' .. html .. '</div>'
+      render html, fileder
   },
   {
     inp: 'text/html%+frag',
diff --git a/mmm/mmmfs/layout.moon b/mmm/mmmfs/layout.moon
index 47e511b..6eead6d 100644
--- a/mmm/mmmfs/layout.moon
+++ b/mmm/mmmfs/layout.moon
@@ -5,7 +5,7 @@ import navigate_to from (require 'mmm.mmmfs.util') require 'mmm.dom'
 pick = (...) ->
   num = select '#', ...
   i = math.ceil math.random! * num
-  select i, ...
+  (select i, ...)
 
 iconlink = (href, src, alt, style) -> a {
   class: 'iconlink',
@@ -30,37 +30,41 @@ logo = svg {
   }
 }
 
-header = header {
-  div {
-    h1 {
-      logo
-      span {
-        span 'mmm', class: 'bold'
-        '&#8203;'
-        '.s&#8209;ol.nu'
+gen_header = ->
+  header {
+    div {
+      h1 {
+        navigate_to '', logo
+        span {
+          span 'mmm', class: 'bold'
+          '&#8203;'
+          '.s&#8209;ol.nu'
+        }
       }
+      -- span "fun stuff with code and wires"
+      table.concat {
+        pick 'fun', 'cool', 'weird', 'interesting', 'new', 'pleasant'
+        pick 'stuff', 'things', 'projects', 'experiments', 'visuals', 'ideas'
+        pick "with", 'and'
+        pick 'mostly code', 'code and wires', 'silicon', 'electronics', 'shaders',
+             'oscilloscopes', 'interfaces', 'hardware', 'FPGAs'
+      }, ' '
     }
-    span "fun stuff with code and wires"
-  --        pick 'fun', 'cool', 'weird', 'interesting', 'new'
-  --        pick 'stuff', 'things', 'projects', 'experiments', 'news'
-  --        "with"
-  --        pick 'mostly code', 'code and wires', 'silicon', 'electronics'
-  }
-  aside {
-    navigate_to '/about', 'about me'
-    navigate_to '/games', 'games'
-    navigate_to '/projects', 'other'
-    a {
-      href: 'mailto:s%20[removethis]%20[at]%20s-ol.nu'
-      'contact'
-      script "
-        var l = document.currentScript.parentElement;
-        l.href = l.href.replace('%20[at]%20', '@');
-        l.href = l.href.replace('%20[removethis]', '') + '?subject=Hey there :)';
-      "
+    aside {
+      navigate_to '/about', 'about me'
+      navigate_to '/games', 'games'
+      navigate_to '/projects', 'other'
+      a {
+        href: 'mailto:s%20[removethis]%20[at]%20s-ol.nu'
+        'contact'
+        script "
+          var l = document.currentScript.parentElement;
+          l.href = l.href.replace('%20[at]%20', '@');
+          l.href = l.href.replace('%20[removethis]', '') + '?subject=Hey there :)';
+        "
+      }
     }
   }
-}
 
 footer = footer {
   span {
@@ -108,53 +112,59 @@ get_meta = =>
 
   meta
 
-render = (content, fileder) ->
+render = (content, fileder, opts={}) ->
+  opts.meta or= get_meta fileder
+  opts.scripts or= ''
+
+  unless opts.noview
+    content = [[
+      <div class="view main">
+        <div class="content">
+      ]] .. content .. [[
+        </div>
+      </div>
+    ]]
+
   buf = [[
 <!DOCTYPE html>
 <html>
   <head>
-    <link rel="stylesheet" type="text/css" href="/main.css" />
-    <!--
-    <link rel="preload" as="fetch" href="/mmm/dom/init.lua" />
-    <link rel="preload" as="fetch" href="/mmm/component/init.lua" />
-    <link rel="preload" as="fetch" href="/mmm/mmmfs/init.lua" />
-    <link rel="preload" as="fetch" href="/mmm/mmmfs/fileder.lua" />
-    <link rel="preload" as="fetch" href="/mmm/mmmfs/browser.lua" />
-    -->
-
-    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="/?main.css" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400" />
   ]]
   buf ..= "
     #{get_meta fileder}
   </head>
   <body>
-    #{header}
+    #{gen_header!}
 
     #{content}
 
     #{footer}
   "
   buf ..= [[
-    <script src="/highlight.pack.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.5.1/marked.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.min.js"></script>
-    <script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
-    <script src="/fengari-web.js"></script>
-    <script type="application/lua" src="/mmm.bundle.lua"></script>
+    <script type="application/javascript" src="/?highlight.pack.js"></script>
+    <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/marked/0.5.1/marked.min.js"></script>
+    <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.min.js"></script>
+    <script type="application/javascript" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
+    <script type="application/javascript" src="/?fengari-web.js"></script>
+    <script type="application/lua" src="/?mmm.bundle.lua"></script>
     <script type="application/lua">require 'mmm'</script>
   ]]
+
+  buf ..= opts.scripts
+  --  <script type=\"application/lua\">
+  --    on_load = on_load or {}
+  --    table.insert(on_load, function()
+  --      local path = #{string.format '%q', path}
+  --      local browser = require 'mmm.mmmfs.browser'
+  --      local root = dofile '/$bundle.lua'
+  --      root:mount('', true)
+
+  --      BROWSER = browser.Browser(root, path, true)
+  --    end)
+  --  </script>
   buf ..= "
-    <script type=\"application/lua\">
-      on_load = on_load or {}
-      table.insert(on_load, function()
-        local path = #{string.format '%q', path}
-        local browser = require 'mmm.mmmfs.browser'
-        local root = dofile '/$bundle.lua'
-        root:mount('', true)
-
-        BROWSER = browser.Browser(root, path, true)
-      end)
-    </script>
   </body>
 </html>
   "
diff --git a/mmm/mmmfs/util.moon b/mmm/mmmfs/util.moon
index 5c25ed3..db0c432 100644
--- a/mmm/mmmfs/util.moon
+++ b/mmm/mmmfs/util.moon
@@ -3,6 +3,12 @@ merge = (orig={}, extra) ->
     for k,v in pairs extra
       attr[k] = v
 
+tourl = (path) ->
+  if STATIC
+    path
+  else
+    "#{path}/:"
+
 (elements) ->
   import a, div, pre from elements
 
@@ -14,7 +20,7 @@ merge = (orig={}, extra) ->
       assert fileder, "no fileder passed."
 
   navigate_to = (path, name, opts={}) ->
-    opts.href = path
+    opts.href = tourl path
     opts.onclick = if MODE == 'CLIENT' then (e) =>
       e\preventDefault!
       BROWSER\navigate path
@@ -30,7 +36,7 @@ merge = (orig={}, extra) ->
       a name, merge attr, :href, target: '_blank'
     else
       a name, merge attr, {
-        href: fileder.path
+        href: tourl fileder.path
         onclick: if MODE == 'CLIENT' then (e) =>
           e\preventDefault!
           BROWSER\navigate fileder.path
diff --git a/scss/_browser.scss b/scss/_browser.scss
index 4d4a260..2bfc73e 100644
--- a/scss/_browser.scss
+++ b/scss/_browser.scss
@@ -3,109 +3,109 @@
   flex: 1;
 
   border-top: 0.2rem solid $gray-bright;
+}
 
-  .view {
-    display: flex;
-    flex-direction: column;
-
-    flex: 1 1 0;
-    min-width: 0;
+.view {
+  display: flex;
+  flex-direction: column;
 
-    &.inspector {
-      top: 0;
-      position: sticky;
-      max-height: 100vh;
-      color: #c5c8c6;
+  flex: 1 1 0;
+  min-width: 0;
 
-      @include left-border;
-      border-color: $gray-dark;
-      background: $gray-dark;
+  &.inspector {
+    top: 0;
+    position: sticky;
+    max-height: 100vh;
+    color: #c5c8c6;
 
-      nav {
-        background: inherit;
-      }
-
-      .content {
-        margin: 0;
-        padding: 0;
-        display: flex;
-        background: $gray-darker;
-
-        > * {
-          display: block;
-          margin: 0;
-          padding: 1em;
-          border-radius: 0;
-          border: 0;
-          flex: 1;
-        }
-      }
-    }
+    @include left-border;
+    border-color: $gray-dark;
+    background: $gray-dark;
 
     nav {
-      position: sticky;
-      top: 0;
+      background: inherit;
+    }
 
+    .content {
+      margin: 0;
+      padding: 0;
       display: flex;
-      flex: 0 0 auto;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      background: $gray-bright;
-      z-index: 1000;
-
-      > span:first-of-type {
-        flex: 1 0 auto;
-      }
+      background: $gray-darker;
 
       > * {
-        margin: 1em;
-        white-space: nowrap;
-      }
-
-      > .inspect-btn {
-        @include media-small() { display: none; }
+        display: block;
+        margin: 0;
+        padding: 1em;
+        border-radius: 0;
+        border: 0;
+        flex: 1;
       }
     }
+  }
+
+  nav {
+    position: sticky;
+    top: 0;
 
-    .error-wrap {
-      flex: 0 0 auto;
-      padding: 1em 2em;
-      overflow: hidden;
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background: $gray-bright;
+    z-index: 1000;
+
+    > span:first-of-type {
+      flex: 1 0 auto;
+    }
 
-      background: $gray-fail;
+    > * {
+      margin: 1em;
+      white-space: nowrap;
+    }
 
-      &.empty {
-        display: none;
-      }
+    > .inspect-btn {
+      @include media-small() { display: none; }
+    }
+  }
 
-      > span {
-        display: inline-block;
-        margin-bottom: 0.5em;
+  .error-wrap {
+    flex: 0 0 auto;
+    padding: 1em 2em;
+    overflow: hidden;
 
-        font-weight: bold;
-        color: #f00;
-      }
+    background: $gray-fail;
 
-      > pre {
-        margin: 0;
-      }
+    &.empty {
+      display: none;
     }
 
-    .content {
-      flex: 1 1 auto;
-      overflow: auto;
-      padding: 1em 2em;
+    > span {
+      display: inline-block;
+      margin-bottom: 0.5em;
+
+      font-weight: bold;
+      color: #f00;
+    }
 
-      position: relative;
+    > pre {
+      margin: 0;
     }
   }
 
   .content {
-    opacity: 1;
-    transition: opacity 150ms;
+    flex: 1 1 auto;
+    overflow: auto;
+    padding: 1em 2em;
 
-    body.loading & {
-      opacity: 0;
-    }
+    position: relative;
+  }
+}
+
+.content {
+  opacity: 1;
+  transition: opacity 150ms;
+
+  body.loading & {
+    opacity: 0;
   }
 }
author	s-ol <s-ol@users.noreply.github.com>	2019-10-08 11:21:30 +0000
committer	s-ol <s-ol@users.noreply.github.com>	2019-10-08 11:21:30 +0000
commit	198194ea194b6f091868e71f7b129e36caa4d6f4 (patch)
tree	e75ae5eb82a2ea7180ba57391baf31c50913b182
parent	add ba_log entry 2019-10-07 (diff)
download	mmm-198194ea194b6f091868e71f7b129e36caa4d6f4.tar.gz mmm-198194ea194b6f091868e71f7b129e36caa4d6f4.zip