From afaa48b03c8d9dcbc7bbce47b94ec6bdd2da3502 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 26 Dec 2020 23:37:48 +0100
Subject: Improved CSS variable names, improved script variable names, added
 initial support for finding child pages

---
 assets/css/_basics.scss                 | 32 +++++++-------
 assets/css/_vars.scss                   | 64 ++++++++++++++--------------
 assets/css/components/_nav.scss         | 20 ++++-----
 assets/css/components/_page-header.scss |  2 +-
 assets/css/layouts/_container.scss      | 14 +++----
 assets/css/scopes/_page.scss            | 29 +++++++------
 content/blog/index.md                   |  4 +-
 content/blog/test1.md                   |  0
 content/blog/test2/index.md             |  0
 content/index.md                        |  4 +-
 content/projects/index.md               |  4 +-
 metadata/metadata.json                  | 25 -----------
 metadata/metadata.yaml                  | 15 +++++++
 scripts/build_content.sh                | 74 +++++++++++++++++++++++++++------
 scripts/watch_content.sh                | 10 ++---
 scripts/watch_metadata.sh               |  2 +-
 scripts/watch_sass.sh                   |  2 +-
 scripts/watch_templates.sh              |  2 +-
 templates/base.html                     |  4 +-
 19 files changed, 172 insertions(+), 135 deletions(-)
 create mode 100644 content/blog/test1.md
 create mode 100644 content/blog/test2/index.md
 delete mode 100644 metadata/metadata.json
 create mode 100644 metadata/metadata.yaml

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index da971d4..9505cdd 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -13,8 +13,8 @@
 }
 
 ::selection {
-  color: var(--select-fg);
-  background-color: var(--select-bg);
+  color: var(--select--fg);
+  background-color: var(--select--bg);
 }
 
 html,
@@ -38,14 +38,14 @@ body {
 }
 
 code {
-  color: var(--code-fg);
+  color: var(--code--fg);
 }
 
 pre {
   margin: 0;
-  color: var(--code-block-fg);
-  font-size: $code-block-font-size;
-  line-height: $code-block-line-height;
+  color: var(--code-block--fg);
+  font-size: $code-block--font-size;
+  line-height: $code-block--line-height;
   text-overflow: "";
   overflow: hidden;
 
@@ -68,13 +68,13 @@ ol {
 
 li {
   position: relative;
-  padding-left: $subcontent-indent;
+  padding-left: $subcontent--indent;
 
   &::before {
     position: absolute;
     display: inline-block;
-    width: $subcontent-indent;
-    margin-left: -1 * $subcontent-indent;
+    width: $subcontent--indent;
+    margin-left: -1 * $subcontent--indent;
     color: var(--fg-minus);
   }
 }
@@ -110,12 +110,12 @@ h3 {
 h1 {
   text-transform: uppercase;
   font-size: 1em;
-  color: var(--heading-fg);
+  color: var(--heading--fg);
 }
 
 h2 {
   font-size: 1em;
-  color: var(--heading-fg);
+  color: var(--heading--fg);
 }
 
 h3 {
@@ -133,17 +133,17 @@ p {
   z-index: 1000;
   padding: 0.2em 0.3em;
   margin: 0 -0.3em;
-  color: var(--link-idle-fg);
+  color: var(--link--idle--fg);
 
   &:hover {
-    background-color: var(--link-hover-bg);
-    color: var(--link-hover-fg);
+    background-color: var(--link--hover--bg);
+    color: var(--link--hover--fg);
     text-decoration: none;
   }
 }
 
 :visited {
-  color: var(--link-visited-fg);
+  color: var(--link--visited--fg);
 }
 
 hr {
@@ -156,6 +156,6 @@ hr {
 blockquote {
   position: relative;
   margin: ($line-height * 1em) 0 0;
-  padding-left: calc(#{$subcontent-indent} - 2px);
+  padding-left: calc(#{$subcontent--indent} - 2px);
   border-left: 2px solid var(--bg-plus);
 }
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index c061f4f..96e56c6 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -1,27 +1,27 @@
 $font-size: 17px;
-$nav-font-size: $font-size - 1;
-$code-block-font-size: $font-size - 1;
-$content-h1-font-size: $font-size + 1;
-
 $line-height: 1.5;
-$code-block-line-height: 1.4;
 
-$content-width: 80ch;
+$code-block--font-size: $font-size - 1;
+$code-block--line-height: 1.4;
+
+$content--width: 80ch;
+$content--h1--font-size: $font-size + 1;
 
-$container-pad-h: 2rem;
-$container-pad-h-sm: 1rem;
-$container-pad-v: $line-height * 2rem;
+$subcontent--indent: 4ch;
 
-$nav-item-spacing: 4ch;
-$nav-item-spacing-sm: 3ch;
-$nav-item-pad-h: 1ch;
-$nav-item-pad-v: 1em;
+$container--pad-h: 2rem;
+$container--pad-h-sm: 1rem;
+$container--pad-v: $line-height * 2rem;
 
-$page-item-prefix-max-chars: 3ch;
-$page-item-prefix-pad: 2ch;
-$page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad;
+$nav--font-size: $font-size - 1;
+$nav--item--spacing: 4ch;
+$nav--item--spacing-sm: 3ch;
+$nav--item--pad-h: 1ch;
+$nav--item--pad-v: 1em;
 
-$subcontent-indent: 4ch;
+$page--item-prefix--max-chars: 3ch;
+$page--item-prefix--pad: 2ch;
+$page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad;
 
 $breakpoints: (
   xs: 380px,
@@ -45,24 +45,24 @@ $breakpoints: (
   --fg-plus: var(--gray5);
   --fg-plus-2: var(--gray6);
 
-  --heading-fg: var(--fg-plus-2);
+  --heading--fg: var(--fg-plus-2);
 
-  --select-bg: hsla(270, 2%, 100%, 0.996);
-  --select-fg: var(--bg-minus);
+  --select--bg: hsla(270, 2%, 100%, 0.996);
+  --select--fg: var(--bg-minus);
 
-  --code-fg: var(--fg-minus);
-  --code-block-fg: var(--fg-minus);
+  --code--fg: var(--fg-minus);
+  --code-block--fg: var(--fg-minus);
 
-  --page-item-prefix-fg: var(--fg-minus);
+  --page--item-prefix--fg: var(--fg-minus);
 
-  --link-idle-fg: var(--fg-plus-2); //#90acf2;
-  --link-visited-fg: var(--fg-plus); //#bc9df2;
-  --link-hover-bg: var(--fg-plus-2);
-  --link-hover-fg: var(--bg-minus);
+  --link--idle--fg: var(--fg-plus-2); //#90acf2;
+  --link--visited--fg: var(--fg-plus); //#bc9df2;
+  --link--hover--bg: var(--fg-plus-2);
+  --link--hover--fg: var(--bg-minus);
 
-  --nav-bg: var(--bg-minus);
-  --nav-logo-fg: var(--fg-minus);
-  --nav-item-idle-fg: var(--fg);
-  --nav-item-hover-fg: var(--fg-plus-2);
-  --nav-item-active-fg: var(--fg-plus-2);
+  --nav--bg: var(--bg-minus);
+  --nav--logo--fg: var(--fg-minus);
+  --nav--item--idle--fg: var(--fg);
+  --nav--item--hover--fg: var(--fg-plus-2);
+  --nav--item--active--fg: var(--fg-plus-2);
 }
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 7f5eb19..a3f7004 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -1,6 +1,6 @@
 .c-nav {
-  background-color: var(--nav-bg);
-  font-size: $nav-font-size;
+  background-color: var(--nav--bg);
+  font-size: $nav--font-size;
 
   &__items {
     display: flex;
@@ -10,15 +10,15 @@
   &__logo {
     display: inline-block;
     margin: 0;
-    padding: $nav-item-pad-v 0;
-    color: var(--nav-logo-fg);
+    padding: $nav--item--pad-v 0;
+    color: var(--nav--logo--fg);
     text-decoration: none;
 
     &:link,
     &:visited {
       &:hover {
         background-color: transparent;
-        color: var(--nav-item-hover-fg);
+        color: var(--nav--item--hover--fg);
         font-weight: bold;
       }
     }
@@ -26,22 +26,22 @@
 
   &__item {
     display: inline-block;
-    padding: $nav-item-pad-v $nav-item-pad-h calc(#{$nav-item-pad-v} - 2px);
-    margin: 0 (-1 * $nav-item-pad-h) 0 ($nav-item-spacing - $nav-item-pad-h);
-    color: var(--nav-item-idle-fg);
+    padding: $nav--item--pad-v $nav--item--pad-h calc(#{$nav--item--pad-v} - 2px);
+    margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h);
+    color: var(--nav--item--idle--fg);
     text-decoration: none;
     border-bottom: 2px solid transparent;
 
     &:hover {
       background-color: transparent;
-      color: var(--nav-item-hover-fg);
+      color: var(--nav--item--hover--fg);
       font-weight: bold;
     }
   }
 
   @media (max-width: map-get($breakpoints, "sm")) {
     &__item {
-      margin-left: $nav-item-spacing-sm - $nav-item-pad-h;
+      margin-left: $nav--item--spacing-sm - $nav--item--pad-h;
     }
   }
 
diff --git a/assets/css/components/_page-header.scss b/assets/css/components/_page-header.scss
index ada20ab..dd273df 100644
--- a/assets/css/components/_page-header.scss
+++ b/assets/css/components/_page-header.scss
@@ -12,6 +12,6 @@
     padding-top: px-to-em(2px);
     color: var(--fg-minus);
     border-top: 1px solid var(--fg-minus);
-    line-height: $code-block-line-height;
+    line-height: $code-block--line-height;
   }
 }
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index 7f6e292..eb71070 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -1,20 +1,20 @@
 .l-container {
-  padding-left: $container-pad-h;
-  padding-right: $container-pad-h;
+  padding-left: $container--pad-h;
+  padding-right: $container--pad-h;
 
   &--content {
     margin-left: auto;
     margin-right: auto;
-    max-width: $content-width;
+    max-width: $content--width;
   }
 
   &--pad-v {
-    padding-top: $container-pad-v;
-    padding-bottom: $container-pad-v;
+    padding-top: $container--pad-v;
+    padding-bottom: $container--pad-v;
   }
 
   @media (max-width: map-get($breakpoints, "sm")) {
-    padding-left: $container-pad-h-sm;
-    padding-right: $container-pad-h-sm;
+    padding-left: $container--pad-h-sm;
+    padding-right: $container--pad-h-sm;
   }
 }
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss
index cdbdeb4..7c9e2d4 100644
--- a/assets/css/scopes/_page.scss
+++ b/assets/css/scopes/_page.scss
@@ -1,6 +1,6 @@
 .s-page {
   &__content {
-    padding-left: $page-item-prefix-width;
+    padding-left: $page--item-prefix--width;
 
     > :first-child {
       margin-top: 0;
@@ -13,28 +13,28 @@
   .c-refs__item,
   pre {
     position: relative;
-    margin-left: -1 * $page-item-prefix-width;
-    padding-left: $page-item-prefix-width;
+    margin-left: -1 * $page--item-prefix--width;
+    padding-left: $page--item-prefix--width;
 
     &::before {
       position: absolute;
       box-sizing: border-box;
       display: inline-block;
-      margin-left: -1 * $page-item-prefix-width;
-      padding-right: $page-item-prefix-pad;
-      width: $page-item-prefix-width;
-      color: var(--page-item-prefix-fg);
+      margin-left: -1 * $page--item-prefix--width;
+      padding-right: $page--item-prefix--pad;
+      width: $page--item-prefix--width;
+      color: var(--page--item-prefix--fg);
       font-weight: normal;
       text-align: right;
     }
   }
 
   h1 {
-    font-size: px-to-em($content-h1-font-size);
+    font-size: px-to-em($content--h1--font-size);
 
     &::before {
       content: "#";
-      font-size: px-to-em($font-size, $content-h1-font-size);
+      font-size: px-to-em($font-size, $content--h1--font-size);
     }
   }
 
@@ -54,22 +54,21 @@
     &::before {
       content: str-repeat("``\A", 40);
       height: 100%;
-      color: var(--page-item-prefix-fg);
+      color: var(--page--item-prefix--fg);
       overflow: hidden;
-      line-height: $code-block-line-height;
     }
   }
 
   hr {
-    margin-left: -1 * $page-item-prefix-width;
+    margin-left: -1 * $page--item-prefix--width;
   }
 
   .c-page-header {
-    margin-left: -1 * $page-item-prefix-width;
-    padding-left: $page-item-prefix-width;
+    margin-left: -1 * $page--item-prefix--width;
+    padding-left: $page--item-prefix--width;
 
     &::after {
-      margin-left: -1 * $page-item-prefix-width;
+      margin-left: -1 * $page--item-prefix--width;
     }
   }
 
diff --git a/content/blog/index.md b/content/blog/index.md
index 486c57b..d6de86f 100644
--- a/content/blog/index.md
+++ b/content/blog/index.md
@@ -1,6 +1,6 @@
 ---
-id: "blog"
-title: "Blog"
+id: blog
+title: Blog
 ---
 
 # Blog
diff --git a/content/blog/test1.md b/content/blog/test1.md
new file mode 100644
index 0000000..e69de29
diff --git a/content/blog/test2/index.md b/content/blog/test2/index.md
new file mode 100644
index 0000000..e69de29
diff --git a/content/index.md b/content/index.md
index 403eab5..d7ee4f8 100644
--- a/content/index.md
+++ b/content/index.md
@@ -1,6 +1,6 @@
 ---
-id: "home"
-title: "Home"
+id: home
+title: Home
 
 isHome: true
 ---
diff --git a/content/projects/index.md b/content/projects/index.md
index bc6204f..da34c2d 100644
--- a/content/projects/index.md
+++ b/content/projects/index.md
@@ -1,6 +1,6 @@
 ---
-id: "projects"
-title: "Projects"
+id: projects
+title: Projects
 ---
 
 # Projects
diff --git a/metadata/metadata.json b/metadata/metadata.json
deleted file mode 100644
index b53ac32..0000000
--- a/metadata/metadata.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-    "site": {
-        "title": "Volpeon's Den",
-        "logo": "\\\\\\\\/"
-    },
-    "menus": {
-        "main": [
-            {
-                "id": "home",
-                "label": "Home",
-                "url": "/"
-            },
-            {
-                "id": "blog",
-                "label": "Blog",
-                "url": "/blog/"
-            },
-            {
-                "id": "projects",
-                "label": "Projects",
-                "url": "/projects/"
-            }
-        ]
-    }
-}
diff --git a/metadata/metadata.yaml b/metadata/metadata.yaml
new file mode 100644
index 0000000..773f155
--- /dev/null
+++ b/metadata/metadata.yaml
@@ -0,0 +1,15 @@
+site:
+  title: Volpeon's Den
+  logo: \\\\/
+
+menus:
+  main:
+    - id: home
+      label: Home
+      url: /
+    - id: blog
+      label: Blog
+      url: /blog/
+    - id: projects
+      label: Projects
+      url: /projects/
diff --git a/scripts/build_content.sh b/scripts/build_content.sh
index 6b50cd8..1344be1 100755
--- a/scripts/build_content.sh
+++ b/scripts/build_content.sh
@@ -1,6 +1,6 @@
 #!/bin/bash
 
-target () {
+target_filename () {
     if [ "${1#*.}" = "md" ]; then
         echo "output/$(echo "${1%.md}.html" | cut -sd / -f 2-)"
     else
@@ -8,40 +8,88 @@ target () {
     fi
 }
 
+get_subpages_basedir() {
+    filename=$(basename "$1")
+    if [ "$filename" = "index.md" ]; then
+        dirname "$1"
+    else
+        echo "${1%.md}"
+    fi
+}
+
+get_subpages() {
+    basedir=$(get_subpages_basedir "$1")
+    child_pages=()
+
+    if [ -d "$basedir" ]; then
+        mapfile -d $'\0' child_pages_1 < <(find $basedir/ \
+            -type f \
+            -name "*.md" ! -name "index.md" \
+            -maxdepth 1 \
+            -print0)
+
+        mapfile -d $'\0' child_pages_2 < <(find $basedir/ \
+            -type f \
+            -name "index.md" \
+            -mindepth 2 \
+            -maxdepth 2 \
+            -print0)
+
+        child_pages=("${child_pages_1[@]}" "${child_pages_2[@]}")
+    fi
+
+    if [ ${#child_pages[@]} -ne 0 ]; then
+        echo -e "\033[0;90m[////////]\033[0m     Child pages:"
+
+        for file in "${child_pages[@]}"; do
+            echo -e "\033[0;90m[////////]\033[0m     - $file"
+        done
+    fi
+}
+
 handle () {
-    TARGET=$(target "$1")
-    mkdir -p $(dirname "$TARGET")
+    target=$(target_filename "$1")
+    mkdir -p $(dirname "$target")
 
     if [ "${1#*.}" = "md" ]; then
-        echo -e "\033[0;32m[COMPILE ]\033[0m $1 -> $TARGET"
+        echo -e "\033[0;32m[COMPILE ]\033[0m $1 -> $target"
+
+        subpages_meta=$(mktemp)
+
+        # $(get_subpages "$1") > "$subpages_meta"
+
+        get_subpages "$1"
 
         pandoc "$1" \
             -f markdown \
             -t html5 \
             --template templates/base.html \
-            -o "$TARGET" \
-            --metadata-file metadata/metadata.json
+            -o "$target" \
+            --metadata-file metadata/metadata.yaml \
+            --metadata-file "$subpages_meta"
+
+        rm "$subpages_meta"
     else
-        echo -e "\033[0;32m[COPY    ]\033[0m $1 -> $TARGET"
+        echo -e "\033[0;32m[COPY    ]\033[0m $1 -> $target"
 
-        cp "$1" "$TARGET"
+        cp "$1" "$target"
     fi
 }
 
 if [ -z "$1" ]; then
     find content/ \
         -type f \
-        | while read FILE
+        | while read file
             do
-                handle "$FILE"
+                handle "$file"
             done
 elif [ "$1" = "all_md" ]; then
     find content/ \
         -type f \
         -name "*.md" \
-        | while read FILE
+        | while read file
             do
-                handle "$FILE"
+                handle "$file"
             done
 elif [ "$1" = "single" ]; then
     if [ -z "$2" ]; then
@@ -53,7 +101,7 @@ elif [ "$1" = "delete" ]; then
     if [ -z "$2" ]; then
         echo -e "\033[0;31m[ERROR   ]\033[0m \"delete\" operation requires file argument"
     else
-        TARGET=$(target "$2")
+        TARGET=$(target_filename "$2")
         echo -e "\033[0;32m[DELETE  ]\033[0m $2 -> $TARGET"
         rm -rf $TARGET
     fi
diff --git a/scripts/watch_content.sh b/scripts/watch_content.sh
index 769f2c5..f0d1b42 100755
--- a/scripts/watch_content.sh
+++ b/scripts/watch_content.sh
@@ -1,11 +1,11 @@
 #!/bin/bash
 
 inotifywait -qrme close_write,delete,move --format "%w%f" content \
-    | while read FILENAME
+    | while read file
         do
-            if [ -f "$FILENAME" ]; then
-                scripts/build_content.sh "single" "$FILENAME"
-            elif [ ! -d "$FILENAME" ]; then
-                scripts/build_content.sh "delete" "$FILENAME"
+            if [ -f "$file" ]; then
+                scripts/build_content.sh "single" "$file"
+            elif [ ! -d "$file" ]; then
+                scripts/build_content.sh "delete" "$file"
             fi
         done
diff --git a/scripts/watch_metadata.sh b/scripts/watch_metadata.sh
index 41457e1..780177e 100755
--- a/scripts/watch_metadata.sh
+++ b/scripts/watch_metadata.sh
@@ -1,7 +1,7 @@
 #!/bin/bash
 
 inotifywait -qrme close_write,delete,move --format "%w%f" metadata \
-    | while read FILENAME
+    | while read file
         do
             scripts/build_content.sh "all_md"
         done
diff --git a/scripts/watch_sass.sh b/scripts/watch_sass.sh
index a5649e7..d451135 100755
--- a/scripts/watch_sass.sh
+++ b/scripts/watch_sass.sh
@@ -1,7 +1,7 @@
 #!/bin/bash
 
 inotifywait -qrme close_write,delete,move --format "%w%f" assets \
-    | while read FILENAME
+    | while read file
         do
             scripts/build_sass.sh
         done
diff --git a/scripts/watch_templates.sh b/scripts/watch_templates.sh
index 3482ac6..9b464d4 100755
--- a/scripts/watch_templates.sh
+++ b/scripts/watch_templates.sh
@@ -1,7 +1,7 @@
 #!/bin/bash
 
 inotifywait -qrme close_write,delete,move --format "%w%f" templates \
-    | while read FILENAME
+    | while read file
         do
             scripts/build_content.sh "all_md"
         done
diff --git a/templates/base.html b/templates/base.html
index cecb657..9bc4de9 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -21,8 +21,8 @@
     <style>
         .c-nav__item--$id$ {
             font-weight: bold;
-            color: var(--nav-item-active-fg);
-            border-bottom-color: var(--nav-item-active-fg);
+            color: var(--nav--item--active--fg);
+            border-color: var(--nav--item--active--fg);
         }
     </style>
     $endif$
-- 
cgit v1.2.3-54-g00ecf