From 381297c95c7446182e90e459cd0257a8fc86b4cf Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 29 Dec 2020 12:24:04 +0100
Subject: Improved CSS classes for page content, added proper ref list macro,
 build scripts load and watch Pandoc filters automatically

---
 Makefile                                |   5 +-
 assets/css/_utils.scss                  |   4 ++
 assets/css/components/_page-header.scss |  12 +++-
 assets/css/components/_page.scss        |  80 ++++++++++++++++++++++++
 assets/css/scopes/_page.scss            | 107 --------------------------------
 assets/css/scopes/_refs.scss            |   9 ---
 assets/css/style.scss                   |   2 +-
 content/index.md                        |   2 +-
 filters/element_classes.lua             |  15 +++++
 filters/links_to_refs.lua               |   3 -
 filters/macros.lua                      |  23 +++++++
 scripts/build_content.sh                |  32 ++++++++--
 scripts/metadata_tpl.json               |   0
 scripts/watch_filters.sh                |   7 +++
 templates/base.html                     |   4 +-
 templates/pageHeader.html               |   2 +-
 templates/pageHeaderSm.html             |   2 +-
 templates/pagelistByYear.html           |   4 +-
 18 files changed, 178 insertions(+), 135 deletions(-)
 create mode 100644 assets/css/components/_page.scss
 delete mode 100644 assets/css/scopes/_refs.scss
 create mode 100644 filters/element_classes.lua
 delete mode 100644 filters/links_to_refs.lua
 create mode 100644 filters/macros.lua
 mode change 100644 => 100755 scripts/metadata_tpl.json
 create mode 100755 scripts/watch_filters.sh

diff --git a/Makefile b/Makefile
index b8ebbbe..861b8b6 100644
--- a/Makefile
+++ b/Makefile
@@ -37,7 +37,10 @@ watch_templates: build_only
 watch_metadata: build_only
 	@scripts/watch_metadata.sh
 
-watch: watch_sass watch_content watch_templates watch_metadata
+watch_filters: build_only
+	@scripts/watch_filters.sh
+
+watch: watch_sass watch_content watch_templates watch_metadata watch_filters
 
 serve_only: build_only
 	@python -m http.server --bind 127.0.0.1 --directory output
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index e241d84..519a3a7 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -15,3 +15,7 @@
         }
     }
 }
+
+.u-mt0 {
+    margin-top: 0;
+}
diff --git a/assets/css/components/_page-header.scss b/assets/css/components/_page-header.scss
index ee86daf..7cf2aa1 100644
--- a/assets/css/components/_page-header.scss
+++ b/assets/css/components/_page-header.scss
@@ -1,5 +1,7 @@
 .c-page-header {
     margin-bottom: $line-height * 2em;
+    margin-left: -1 * $page--item-prefix--width;
+    padding-left: $page--item-prefix--width;
     overflow: hidden;
 
     &::after {
@@ -9,13 +11,19 @@
         z-index: -10;
         height: $line-height;
         margin-top: px-to-em(2px);
+        margin-left: -1 * $page--item-prefix--width;
         padding-top: px-to-em(2px);
         border-top: 1px solid var(--fg-hi);
         color: var(--fg-hi);
         line-height: $code-block--line-height;
     }
 
-    > :first-child {
-        margin-top: 0;
+    @media (max-width: map-get($breakpoints, 'sm')) {
+        margin-left: 0;
+        padding-left: 0;
+
+        &::after {
+            margin-left: 0;
+        }
     }
 }
diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss
new file mode 100644
index 0000000..21969d7
--- /dev/null
+++ b/assets/css/components/_page.scss
@@ -0,0 +1,80 @@
+.c-page {
+    &__content {
+        padding-left: $page--item-prefix--width;
+
+        > :first-child {
+            margin-top: 0;
+        }
+    }
+
+    &__prefixed {
+        position: relative;
+        margin-left: -1 * $page--item-prefix--width;
+        padding-left: $page--item-prefix--width;
+
+        &::before {
+            display: inline-block;
+            position: absolute;
+            box-sizing: border-box;
+            width: $page--item-prefix--width;
+            margin-left: -1 * $page--item-prefix--width;
+            padding-right: $page--item-prefix--pad;
+            color: var(--page--item-prefix--fg);
+            font-weight: normal;
+            text-align: right;
+        }
+
+        &--h1 {
+            font-size: px-to-em($content--h1--font-size);
+
+            &::before {
+                content: '#';
+                font-size: px-to-em($font-size, $content--h1--font-size);
+            }
+        }
+
+        &--h2::before {
+            content: '##';
+        }
+
+        &--h3::before {
+            content: '###';
+        }
+
+        &--pre {
+            $scale-factor: $font-size / $code-block--font-size;
+
+            margin-top: $line-height * 1em;
+            // margin-left: calc(#{-1 * $page--item-prefix--width} * #{$scale-factor});
+            // padding-left: calc(#{$page--item-prefix--width} * #{$scale-factor});
+    
+            &::before {
+                content: str-repeat('``\A', 40);
+                height: 100%;
+                overflow: hidden;
+                color: var(--page--item-prefix--fg);
+                // font-size: px-to-em($font-size, $code-block--font-size);
+                // line-height: $code-block--line-height / $scale-factor;
+            }
+        }
+
+        &--ref::before {
+            content: '->';
+        }
+    }
+
+    @media (max-width: map-get($breakpoints, 'sm')) {
+        &__content {
+            padding-left: 0;
+        }
+
+        &__prefixed {
+            margin-left: 0;
+            padding-left: 0;
+
+            &::before {
+                display: none;
+            }
+        }
+    }
+}
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
index 6448d08..bf3df8d 100644
--- a/assets/css/scopes/_page.scss
+++ b/assets/css/scopes/_page.scss
@@ -1,70 +1,4 @@
 .s-page {
-    &__content {
-        padding-left: $page--item-prefix--width;
-
-        > :first-child {
-            margin-top: 0;
-        }
-    }
-
-    h1,
-    h2,
-    h3,
-    .s-refs li,
-    pre {
-        position: relative;
-        margin-left: -1 * $page--item-prefix--width;
-        padding-left: $page--item-prefix--width;
-
-        &::before {
-            display: inline-block;
-            position: absolute;
-            box-sizing: border-box;
-            width: $page--item-prefix--width;
-            margin-left: -1 * $page--item-prefix--width;
-            padding-right: $page--item-prefix--pad;
-            color: var(--page--item-prefix--fg);
-            font-weight: normal;
-            text-align: right;
-        }
-    }
-
-    h1 {
-        font-size: px-to-em($content--h1--font-size);
-
-        &::before {
-            content: '#';
-            font-size: px-to-em($font-size, $content--h1--font-size);
-        }
-    }
-
-    h2::before {
-        content: '##';
-    }
-
-    h3::before {
-        content: '###';
-    }
-
-    .s-refs li::before {
-        content: '->';
-    }
-
-    pre {
-        margin-top: $line-height * 1em;
-
-        &::before {
-            content: str-repeat('``\A', 40);
-            height: 100%;
-            overflow: hidden;
-            color: var(--page--item-prefix--fg);
-        }
-    }
-
-    hr {
-        margin-left: -1 * $page--item-prefix--width;
-    }
-
     :link {
         color: var(--page--link--idle--fg);
     }
@@ -80,45 +14,4 @@
             color: var(--page--link--hover--fg);
         }
     }
-
-    .c-page-header {
-        margin-left: -1 * $page--item-prefix--width;
-        padding-left: $page--item-prefix--width;
-
-        &::after {
-            margin-left: -1 * $page--item-prefix--width;
-        }
-    }
-
-    @media (max-width: map-get($breakpoints, 'sm')) {
-        &__content {
-            padding-left: 0;
-        }
-
-        h1,
-        h2,
-        h3,
-        .s-refs li,
-        pre {
-            margin-left: 0;
-            padding-left: 0;
-
-            &::before {
-                display: none;
-            }
-        }
-
-        hr {
-            margin-left: 0;
-        }
-
-        .c-page-header {
-            margin-left: 0;
-            padding-left: 0;
-
-            &::after {
-                margin-left: 0;
-            }
-        }
-    }
 }
diff --git a/assets/css/scopes/_refs.scss b/assets/css/scopes/_refs.scss
deleted file mode 100644
index 79434ff..0000000
--- a/assets/css/scopes/_refs.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.s-refs {
-    li {
-        padding-left: 0;
-
-        &::before {
-            display: none;
-        }
-    }
-}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 90c1bfc..7986bd9 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -5,11 +5,11 @@
 @import 'components/spacer';
 @import 'components/hlist';
 @import 'components/nav';
+@import 'components/page';
 @import 'components/page-header';
 
 @import 'layouts/container';
 
-@import 'scopes/refs';
 @import 'scopes/page';
 
 @import 'utils';
diff --git a/content/index.md b/content/index.md
index f9111ef..8c49e44 100644
--- a/content/index.md
+++ b/content/index.md
@@ -22,7 +22,7 @@ Welcome to my website! I'm Volpeon and here's an [inline link](#d).
 1. Lorem ipsum dolor sit amet
 2. Another item
 
-::: { .s-refs }
+::: { macro=refs }
 - [Lorem ipsum dolor sit amet](#a)
 - [Another item](#b)
 :::
diff --git a/filters/element_classes.lua b/filters/element_classes.lua
new file mode 100644
index 0000000..643ff75
--- /dev/null
+++ b/filters/element_classes.lua
@@ -0,0 +1,15 @@
+function CodeBlock(el)
+    el.attributes.class = 'c-page__prefixed c-page__prefixed--pre'
+    return el
+end
+
+function Header(el)
+    if el.level == 1 then
+        el.attributes.class = 'c-page__prefixed c-page__prefixed--h1'
+    elseif el.level == 2 then
+        el.attributes.class = 'c-page__prefixed c-page__prefixed--h2'
+    elseif el.level == 3 then
+        el.attributes.class = 'c-page__prefixed c-page__prefixed--h3'
+    end
+    return el
+end
diff --git a/filters/links_to_refs.lua b/filters/links_to_refs.lua
deleted file mode 100644
index f19a0f9..0000000
--- a/filters/links_to_refs.lua
+++ /dev/null
@@ -1,3 +0,0 @@
-function Link (el)
-    return { pandoc.Span(el.content), pandoc.Note { pandoc.Plain(pandoc.Link(el.content, el.target, el.title)) } }
-end
diff --git a/filters/macros.lua b/filters/macros.lua
new file mode 100644
index 0000000..86e94ba
--- /dev/null
+++ b/filters/macros.lua
@@ -0,0 +1,23 @@
+function Div(el)
+    if el.attributes.macro == nil then
+        return el
+    end
+
+    if el.attributes.macro == 'refs' and el.content[1].tag == 'BulletList' then
+        local newchildren = pandoc.List()
+
+        newchildren:insert(pandoc.RawBlock('html', '<ul>'))
+
+        for k, children in ipairs(el.content[1].content) do
+            newchildren:insert(pandoc.RawBlock('html', '<li class="c-page__prefixed c-page__prefixed--ref">'))
+            newchildren:extend(children)
+            newchildren:insert(pandoc.RawBlock('html', '</li>'))
+        end
+
+        newchildren:insert(pandoc.RawBlock('html', '</ul>'))
+
+        el.content = newchildren
+    end
+
+    return el.content
+end
diff --git a/scripts/build_content.sh b/scripts/build_content.sh
index 719b7c9..b258449 100755
--- a/scripts/build_content.sh
+++ b/scripts/build_content.sh
@@ -1,14 +1,31 @@
 #!/bin/bash
 
 CONTENT_DIR="content/"
+FILTERS_DIR="filters/"
 METADATA_DIR="metadata/"
 TEMPLATES_DIR="templates/"
 OUTPUT_DIR="output/"
 
-CATEGORY_SHORT_LEN=3
 CATEGORY_MAP=$(cat "$METADATA_DIR/categories.json")
 
-target_filename () {
+get_filters() {
+    filters_args=""
+
+    mapfile -d $'\0' filters < <(find $FILTERS_DIR \
+        -type f \
+        -name "*.lua" ! -name ".*" \
+        -print0)
+
+    for file in "${filters[@]}"; do
+        filters_args="$filters_args --lua-filter $file"
+    done
+
+    echo $filters_args
+}
+
+FILTERS=$(get_filters)
+
+target_filename() {
     filename=$1
     filename=${filename#"$CONTENT_DIR"}
     if [ "${filename##*.}" = "md" ]; then
@@ -17,7 +34,7 @@ target_filename () {
     echo "$OUTPUT_DIR$filename"
 }
 
-target_url_rel () {
+target_url_rel() {
     basedir=$1
     filename=$2
     filename=$(realpath --relative-to="$basedir" "$filename")
@@ -28,7 +45,7 @@ target_url_rel () {
     echo "$filename"
 }
 
-target_url_abs () {
+target_url_abs() {
     echo "/$(target_url_rel "$CONTENT_DIR" "$1")"
 }
 
@@ -148,6 +165,10 @@ handle () {
         # echo "$(get_metadata "$1")"
         echo "$(get_metadata "$1")" > "$subpages_meta_file"
 
+        # echo $(pandoc "$1" \
+        #     -f markdown \
+        #     -t json)
+
         pandoc "$1" \
             -f markdown \
             -t html5 \
@@ -157,7 +178,8 @@ handle () {
             --metadata section=$section \
             --metadata "is$section" \
             --metadata-file metadata/metadata.yaml \
-            --metadata-file "$subpages_meta_file"
+            --metadata-file "$subpages_meta_file" \
+            $FILTERS
             # --lua-filter "filters/add_refs.lua"
 
         rm "$subpages_meta_file"
diff --git a/scripts/metadata_tpl.json b/scripts/metadata_tpl.json
old mode 100644
new mode 100755
diff --git a/scripts/watch_filters.sh b/scripts/watch_filters.sh
new file mode 100755
index 0000000..9bb3b44
--- /dev/null
+++ b/scripts/watch_filters.sh
@@ -0,0 +1,7 @@
+#!/bin/bash
+
+inotifywait -qrme close_write,delete,move --format "%w%f" filters \
+    | while read file
+        do
+            scripts/build_content.sh "all_md"
+        done
diff --git a/templates/base.html b/templates/base.html
index 330e759..3fca9f1 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -38,8 +38,8 @@
         </div>
     </nav>
         
-    <main class="s-page l-container l-container--content l-container--pad-v">
-        <div class="s-page__content">
+    <main class="c-page s-page l-container l-container--content l-container--pad-v">
+        <div class="c-page__content">
             $if(ishome)$
                 <header class="c-page-header u-hidden@sm-down" role="presentation">
 ${pageHeader()}
diff --git a/templates/pageHeader.html b/templates/pageHeader.html
index 40ee251..b44f394 100644
--- a/templates/pageHeader.html
+++ b/templates/pageHeader.html
@@ -7,7 +7,7 @@ $--  '|    \__,~"´   /:) /       |:\ \            ,~(    ) . | |  )   `,   '
 $-- ___\___.___:____(:/\_-,______\:.\_-,____.__\_.\______.__:___\__.___)_.___,/_____
 $-- ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 
-<pre class="u-hidden@sm-down">
+<pre class="c-page__prefixed c-page__prefixed--pre u-mt0 u-hidden@sm-down">
 ' |      '     '             '     '            '   | |    |           '     '  
   |      '     '             '       <strong>//\_</strong>       '   | ' .  |           '     '  
  .|      '      <strong>____,...,______..,_~``  -`..,</strong>   '   |    ' |           '     '  
diff --git a/templates/pageHeaderSm.html b/templates/pageHeaderSm.html
index c480773..232b5b2 100644
--- a/templates/pageHeaderSm.html
+++ b/templates/pageHeaderSm.html
@@ -3,7 +3,7 @@ $--  |      _.~-"""-----~``  ,-´      '   '      |'   |           '   '
 $-- '|   .´  ,~'\ ).,__,)/,,"         ' . '      |  | |           '  .' 
 $--  |_  `~´   (/\\,   (/\\,         _'   '_    _| '  |_         _'   '_
 
-<pre class="$if(ishome)$u-hidden@sm-up$endif$">
+<pre class="c-page__prefixed c-page__prefixed--pre u-mt0 $if(ishome)$u-hidden@sm-up$endif$">
 .|   <strong>                  //\__</strong>      '  .'      |  . |           ' . ' 
  |   <strong>   _.~-"""-----~``  ,-´</strong>      '   '      |'   |           '   ' 
 '|   <strong>.´  ,~'\ ).,__,)/,,"   </strong>      ' . '      |  | |           '  .' 
diff --git a/templates/pagelistByYear.html b/templates/pagelistByYear.html
index 20ce6c4..b884d89 100644
--- a/templates/pagelistByYear.html
+++ b/templates/pagelistByYear.html
@@ -2,9 +2,9 @@ $for(pages)$
 $for(it.by_year)$
 $-- <hr class="c-spacer" />
 $-- <h2>$it.key$</h2>
-<ul class="s-refs">
+<ul>
     $for(it.value)$
-    <li>
+    <li class="c-page__prefixed c-page__prefixed--ref">
         <a href="$it.url_rel$">$it.category/uppercase$ $it.date$ - $it.title$</a>
     </li>
     $endfor$
-- 
cgit v1.2.3-70-g09d2