more sidenote/reference features

6 files changed, 96 insertions, 21 deletions

diff --git a/mmm/mmmfs/plugins/cites.moon b/mmm/mmmfs/plugins/cites.moon
index 0223807..04e809d 100644
--- a/mmm/mmmfs/plugins/cites.moon
+++ b/mmm/mmmfs/plugins/cites.moon
@@ -1,13 +1,32 @@
-import div, a, i, b from require 'mmm.dom'
+import div, span, sup, a, i, b from require 'mmm.dom'
+
+parse_bibtex = (src) ->
+  type, key, kv = src\match '@(%w+){(.-),(.*)}'
+  with info = { _type: type, _key: key }
+    for key, val in kv\gmatch '([a-z]-)%s*=%s*{(.-)}'
+      info[key] = val
 
 title = (info) ->
   assert info.title, "cite doesn't have title"
   inner = i info.title
   if info.url
-    a inner, href: info.url
+    a inner, href: info.url, style: display: 'inline'
   else
     b inner
 
+format_full = (info) ->
+  tt = title info
+  dot, com = if info.title\match '[.?!]$' then '', '' else '.', ','
+  switch info._type
+    when 'book', 'article'
+      span "#{info.author} (#{info.year}), ", tt, "#{dot} #{info.publisher}"
+    when 'web'
+      -- note = if info.note then ", #{info.note}" else ''
+      visited = if info.visited then " from #{info.visited}" else ""
+      span tt, "#{com} #{info.url}#{visited}"
+    else
+      span "#{info.author} (#{info.year}), ", tt, "#{dot} #{info.publisher}"
+
 {
   converts: {
     {
@@ -26,22 +45,31 @@ title = (info) ->
       inp: 'text/bibtex'
       out: 'mmm/dom'
       cost: 1
-      transform: (src) =>
-        type, key, kv = src\match '@(%w+){(.-),(.*)}'
-        info = {}
-        for key, val in kv\gmatch '([a-z]-)%s*=%s*{(.-)}'
-          info[key] = val
-
-        tt = title info
-        dot, com = if info.title\match '[.?!]$' then '', '' else '.', ','
-        switch type
-          when 'book', 'article'
-            div "#{info.author} (#{info.year}), ", tt, "#{dot} #{info.publisher}"
-          when 'web'
-            -- note = if info.note then ", #{info.note}" else ''
-            div tt, "#{com} #{info.url} from #{info.visited}"
-          else
-            div "#{info.author} (#{info.year}), ", tt, "#{dot} #{info.publisher}"
+      transform: (bib) => format_full parse_bibtex bib
+    }
+    {
+      inp: 'text/bibtex'
+      out: 'mmm/dom+link'
+      cost: 1
+      transform: (bib) =>
+        info = parse_bibtex bib
+        note = format_full info
+
+        key = tostring 1
+        id = "sideref-#{key}"
+
+        intext = sup a key, href: "##{id}"
+
+        span intext, div {
+            class: 'sidenote'
+            style:
+              'margin-top': '-1rem'
+
+            div :id, class: 'hook'
+            b key, class: 'ref'
+            ' '
+            note
+          }
     }
   }
 }
diff --git a/mmm/mmmfs/util.moon b/mmm/mmmfs/util.moon
index 970dd42..8887187 100644
--- a/mmm/mmmfs/util.moon
+++ b/mmm/mmmfs/util.moon
@@ -53,6 +53,9 @@ tourl = (path) ->
   link_to = (fileder, name, origin, attr) ->
     fileder = find_fileder fileder, origin
 
+    link = fileder\get 'mmm/dom+link'
+    return link if link
+
     name or= fileder\get 'title: mmm/dom'
     name or= fileder\gett 'name: alpha'
 
diff --git a/scss/_browser.scss b/scss/_browser.scss
index adf9dd1..118842f 100644
--- a/scss/_browser.scss
+++ b/scss/_browser.scss
@@ -26,6 +26,14 @@
       background: inherit;
     }
 
+    .subnav {
+      display: flex;
+      flex: 0;
+      background: $gray-darker;
+      border-bottom: 2px solid $gray-dark;
+      padding: 0.5em;
+    }
+
     .content {
       margin: 0;
       padding: 0;
diff --git a/scss/_content.scss b/scss/_content.scss
index ad854de..a5b626a 100644
--- a/scss/_content.scss
+++ b/scss/_content.scss
@@ -5,8 +5,8 @@
   }
 
   .markdown {
-    max-width: 640px;
     position: relative;
+    max-width: 640px;
 
     &.wide {
       max-width: max-content;
diff --git a/scss/_reset.scss b/scss/_reset.scss
index 396c3e7..724624d 100644
--- a/scss/_reset.scss
+++ b/scss/_reset.scss
@@ -13,6 +13,11 @@ body, html, h1, h2, h3, h4, h5, h6 {
 }
 
 h1, h2, h3, h4, h5, h6 { font-weight: bold; }
+h1 { font-size: 1.6em; }
+h2 { font-size: 1.4em; }
+h3 { font-size: 1.17em; }
+h4, h5, h6 { font-size: 1em; }
+
 input, select, button {
   color: initial;
   &:disabled {
@@ -23,10 +28,16 @@ tt, code, kbd, samp { font-family: monospace; }
 code { font-size: 0.8em; }
 b, strong { font-weight: bold; }
 em, i { font-style: italic; }
-a { font-size: 1em; cursor: pointer; }
 hr { clear: both; }
 ul { margin: 0; }
 
+sup, sub {
+  vertical-align: baseline;
+  position: relative;
+  top: -0.4em;
+}
+sub { top: 0.4em; }
+
 body {
   display: flex;
   flex-direction: column;
@@ -40,11 +51,12 @@ body {
 
 a {
   display: inline-block;
-
+  font-size: 1em;
   font-weight: bold;
   text-decoration: underline;
   text-decoration-color: transparent;
 
+  cursor: pointer;
   &:hover {
     filter: invert(40%);
     text-decoration-color: currentColor;
diff --git a/scss/_sidenotes.scss b/scss/_sidenotes.scss
index eddebc1..28b1494 100644
--- a/scss/_sidenotes.scss
+++ b/scss/_sidenotes.scss
@@ -20,6 +20,30 @@ $sidenote-width: 14rem;
     font-size: 0.8em;
     word-break: break-word;
 
+    .hook {
+      position: absolute;
+      top: -4rem;
+      width: 0;
+      height: 0;
+
+      @media print {
+        top: 0;
+      }
+    }
+
+    .ref {
+      display: block;
+      position: absolute;
+
+      width: 1rem;
+      margin-left: -1.2rem;
+      text-align: right;
+    }
+
+    a {
+      display: inline;
+    }
+
     @include media-medium {
       width: initial;
       position: initial;