Simplified metadata processing, improved design

8 files changed, 114 insertions, 64 deletions

diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 0df3a61..78a451b 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -26,7 +26,7 @@ $content--width:  42rem;
 
 $gray0: hsl(220, 7%, 7%);
 $gray1: hsl(220, 7%, 11%);
-$gray2: hsl(220, 7%, 18%);
+$gray2: hsl(220, 7%, 17%);
 $gray3: hsl(220, 7%, 23%);
 $gray4: hsl(220, 7%, 38%);
 $gray5: hsl(220, 7%, 60%);
@@ -57,7 +57,7 @@ $gray7: hsl(220, 7%, 100%);
             --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
         ),
 
-        --focus-ring: var(--colors--accent--color),
+        --focus-ring: var(--colors--fg-lo),
 
         --select: (
             --bg:     rgba($gray7, .996),
@@ -67,7 +67,11 @@ $gray7: hsl(220, 7%, 100%);
 
         --link: (
             --idle: var(--colors--fg-lo),
-        )
+            --colored: (
+                --idle:    hsl(210, 90%, 72%), // hsl(354, 100%, 66%),
+                --visited: hsl(270, 60%, 75%), // hsl(354, 50%, 66%),
+            )
+        ),
     )
 ));
 
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index e54c83d..21f78f4 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -26,7 +26,7 @@
         color:            prop(--colors --fg);
         font-size:        1rem;
         font-weight:      700;
-        letter-spacing:   1px;
+        letter-spacing:   .5px;
         text-decoration:  none;
         text-transform:   uppercase;
 
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss
new file mode 100644
index 0000000..7787efd
--- /dev/null
+++ b/assets/css/components/_post-list.scss
@@ -0,0 +1,56 @@
+@include namespace('post-list') {
+    @include store((
+        --colors: (
+            --cat: (
+                --fg: prop(--colors --fg-lo, $global: true),
+            ),
+            --post: (
+                --bg:     prop(--colors --bg-lo, $global: true),
+                --border: prop(--colors --obj-hi, $global: true),
+            ),
+            --meta: (
+                --fg: prop(--colors --fg-hi, $global: true),
+            )
+        ),
+        --dims: (
+            --pad-x: 1em,
+            --pad-y: .6em,
+        )
+    ));
+
+    @include component(namespace()) {
+        @include element('category-header') {
+            color:          prop(--colors --cat --fg);
+            font-size:      1 / 16 * 14em;
+            letter-spacing: 1px;
+            text-transform: uppercase;
+
+            @include next-element('post') {
+                margin-top: $line-height * .5rem;
+            }
+        }
+
+        @include element('post') {
+            display:          flex;
+            align-items:      baseline;
+            padding:          prop(--dims --pad-y) prop(--dims --pad-x);
+            background-color: prop(--colors --post --bg);
+
+            @include next-twin-element {
+                border-top: 1px solid prop(--colors --post --border);
+            }
+        }
+
+        @include element('post-title') {
+            margin-right: 1em;
+            font-size:    1 / 16 * 17em;
+        }
+
+        @include element('post-date') {
+            flex:        0 0 auto;
+            margin-left: auto;
+            color:       prop(--colors --meta --fg);
+            font-size:   1 / 16 * 14em;
+        }
+    }
+}
diff --git a/assets/css/scopes/_colored-links.scss b/assets/css/scopes/_colored-links.scss
index 25ed289..9be0f93 100644
--- a/assets/css/scopes/_colored-links.scss
+++ b/assets/css/scopes/_colored-links.scss
@@ -2,8 +2,8 @@
     @include store((
         --colors: (
             --link: (
-                --idle:    hsl(210, 90%, 72%), // hsl(354, 100%, 66%),
-                --visited: hsl(270, 60%, 75%), // hsl(354, 50%, 66%),
+                --idle:    prop(--colors --link --colored --idle, $global: true),
+                --visited: prop(--colors --link --colored --visited, $global: true),
             )
         )
     ));
diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss
index 8b75708..367e093 100644
--- a/assets/css/scopes/_headlines.scss
+++ b/assets/css/scopes/_headlines.scss
@@ -38,7 +38,6 @@
         h3 {
             @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);
 
-            letter-spacing: .05em;
             text-transform: uppercase;
         }
 
@@ -47,7 +46,7 @@
         h6 {
             @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale);
 
-            letter-spacing: .1em;
+            letter-spacing: .5px;
             text-transform: uppercase;
         }
 
diff --git a/assets/css/style.scss b/assets/css/style.scss
index e4a36b0..30878fe 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -23,6 +23,7 @@
 @import 'components/footer';
 @import 'components/card';
 @import 'components/project';
+@import 'components/post-list';
 
 @import 'scopes/colored-links';
 @import 'scopes/headlines';
diff --git a/scripts/metadata_filter.lua b/scripts/metadata_filter.lua
index b8a9059..5f2d9af 100644
--- a/scripts/metadata_filter.lua
+++ b/scripts/metadata_filter.lua
@@ -6,20 +6,24 @@ function format_date(date)
     if not year then return nil end
 
     local time = os.time({year = tonumber(year), month = tonumber(month), day = tonumber(day)})
-    return pandoc.MetaMap({
+    return {
         yyyy_mm_dd = os.date("%F", time),
         yyyy = os.date("%Y", time),
         mm = os.date("%m", time),
         dd = os.date("%d", time),
         rfc3339 = os.date("%FT%T+00:00", time),
         long = os.date("%B %d, %Y", time),
-    })
+    }
 end
 
-function table_to_list(t, cmp)
+function table_to_list(t, kv, cmp)
     local l = pandoc.List()
 
-    for key, value in pairs(t) do l:insert(pandoc.MetaMap({key = key, value = value})) end
+    if kv then
+        for key, value in pairs(t) do l:insert({key = key, value = value}) end
+    else
+        for _, value in pairs(t) do l:insert(value) end
+    end
 
     l:sort(cmp or function(i1, i2) return i1.key < i2.key end)
 
@@ -96,13 +100,13 @@ function resolve_url(site_url, ref_file, target_file)
     local abs = target_file
     local rel = relative_to(ref_base_dir, abs):gsub("/index%.html$", "/")
 
-    return pandoc.MetaMap({abs = abs, rel = rel, full = (site_url .. abs)})
+    return {abs = abs, rel = rel, full = (site_url .. abs)}
 end
 
 function resolve_layout(layout)
     if layout then
         layout = pandoc.utils.stringify(layout)
-        return pandoc.MetaMap({id = layout, ["is_" .. layout] = pandoc.MetaBool(true)})
+        return {id = layout, ["is_" .. layout] = true}
     end
 end
 
@@ -112,16 +116,13 @@ function resolve_namespace(namespace)
     local root = "index"
     if namespace ~= "" then root = namespace:gsub("^/([^/]*).*$", "%1") end
 
-    return pandoc.MetaMap({
-        root = pandoc.MetaMap({id = root, ["is_" .. root] = pandoc.MetaBool(true)}),
-        full = namespace,
-    })
+    return {root = {id = root, ["is_" .. root] = true}, full = namespace}
 end
 
 function resolve_category(categories, category)
     if categories and category then
         category = pandoc.utils.stringify(category)
-        data = pandoc.MetaMap(categories[category])
+        data = categories[category]
         data.id = category
         return data
     end
@@ -133,14 +134,14 @@ function prep_menu(active_id, main_menu)
     for i = 1, #main_menu do
         local item = main_menu[i]
         local active = pandoc.utils.stringify(item.id) == active_id
-        item.active = pandoc.MetaBool(active)
+        item.active = active
         if active then active_item = item end
     end
 
-    return pandoc.MetaMap({
+    return {
         items = main_menu:filter(function(item) return not item.hidden or item.active end),
         active = active_item,
-    })
+    }
 end
 
 function process_pages(global, pages_by_id)
@@ -167,33 +168,23 @@ function process_pages(global, pages_by_id)
         end
     end)
 
-    local pages_categorized = pages_list:filter(function(p) return p.category ~= nil end)
-
-    local pages_by_category = group_by(pages_categorized, function(p) return p.category.id end)
-    pages_by_category =
-        table_to_list(pages_by_category, function(i1, i2) return i1.key < i2.key end)
-
-    local pages_data = pandoc.MetaMap({
-        all = pages_list,
-        by_id = pages_by_id,
-        by_category = pages_by_category,
-    })
-
-    local categories_data = group_by(pages_categorized,
-        function(p) return p.category and p.category.id end, function(stats, _, p)
-            if not stats then
-                return {name = p.category.name, count = 1}
+    local pages_by_category = pages_list:filter(function(p) return p.category ~= nil end)
+    pages_by_category = group_by(pages_by_category, function(p) return p.category.id end,
+        function(data, _, p)
+            if not data then
+                local l = pandoc.List()
+                l:insert(p)
+                return {name = pandoc.utils.stringify(p.category.name), pages = l}
             else
-                stats.count = stats.count + 1
+                data.pages:insert(p)
             end
         end)
-    categories_data = table_to_list(categories_data)
+    pages_by_category = table_to_list(pages_by_category, false,
+        function(i1, i2) return i1.name < i2.name end)
 
-    for i = 1, #categories_data do
-        categories_data[i].value.count = ("%d"):format(categories_data[i].value.count)
-    end
+    local pages_data = {all = pages_list, by_id = pages_by_id, by_category = pages_by_category}
 
-    return pages_data, categories_data
+    return pages_data
 end
 
 function process(global, meta)
@@ -222,9 +213,7 @@ function process(global, meta)
         meta.menus.main = prep_menu(meta.namespace.root.id, meta.menus.main)
     end
 
-    local pages, local_categories = process_pages(global, meta.pages)
-    meta.pages = pages
-    meta.local_categories = local_categories
+    meta.pages = process_pages(global, meta.pages)
 
     return meta
 end
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 5e2d4a5..0b445ee 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -1,30 +1,31 @@
 <section class="l-section l-section--fullscreen l-section--no-head">
     <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-colored-links">
-        <div class="s-headlines s-body">
+        <div class="s-headlines">
             <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
 
 $body$
         </div>
 
-        $for(pages.by_category)$
-            <h2 class="s-body__h3">
-                $for(it.value/first/first)$
-                    $it.category.name$
-                $endfor$
-            </h2>
-            <ul>
-                $for(it.value)$
-                    <li>
-                        $if(it.category.show_date)$
-                            $it.date.yyyy_mm_dd$: 
-                        $endif$
-                        <a href="$it.url.rel$">
+        <div class="c-post-list">
+            $for(pages.by_category)$
+                <h2 class="c-post-list__category-header">
+                    $it.name$
+                </h2>
+                $for(it.pages)$
+                    <div class="c-post-list__post">
+                        <a href="$it.url.rel$" class="c-post-list__post-title">
                             $it.title$
                         </a>
-                    </li>
+
+                        $if(it.category.show_date)$
+                            <time datetime="$it.date.yyyy_mm_dd$" class="c-post-list__post-date">
+                                $it.date.long$
+                            </time>
+                        $endif$
+                    </div>
                 $endfor$
-            </ul>
-        $endfor$
+            $endfor$
+        </div>
     </div>
 </section>