19 files changed, 172 insertions, 135 deletions
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);
+  color: var(--select--fg);
-  background-color: var(--select-bg);
+  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);
+  color: var(--code-block--fg);
-  font-size: $code-block-font-size;
+  font-size: $code-block--font-size;
-  line-height: $code-block-line-height;
+  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;
+    width: $subcontent--indent;
-    margin-left: -1 * $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);
+    background-color: var(--link--hover--bg);
-    color: var(--link-hover-fg);
+    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;
+$subcontent--indent: 4ch;
-$container-pad-h-sm: 1rem;
-$container-pad-v: $line-height * 2rem;
-$nav-item-spacing: 4ch;
+$container--pad-h: 2rem;
-$nav-item-spacing-sm: 3ch;
+$container--pad-h-sm: 1rem;
-$nav-item-pad-h: 1ch;
+$container--pad-v: $line-height * 2rem;
-$nav-item-pad-v: 1em;
-$page-item-prefix-max-chars: 3ch;
+$nav--font-size: $font-size - 1;
-$page-item-prefix-pad: 2ch;
+$nav--item--spacing: 4ch;
-$page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad;
+$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--bg: hsla(270, 2%, 100%, 0.996);
-  --select-fg: var(--bg-minus);
+  --select--fg: var(--bg-minus);
-  --code-fg: var(--fg-minus);
+  --code--fg: var(--fg-minus);
-  --code-block-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--idle--fg: var(--fg-plus-2); //#90acf2;
-  --link-visited-fg: var(--fg-plus); //#bc9df2;
+  --link--visited--fg: var(--fg-plus); //#bc9df2;
-  --link-hover-bg: var(--fg-plus-2);
+  --link--hover--bg: var(--fg-plus-2);
-  --link-hover-fg: var(--bg-minus);
+  --link--hover--fg: var(--bg-minus);
-  --nav-bg: var(--bg-minus);
+  --nav--bg: var(--bg-minus);
-  --nav-logo-fg: var(--fg-minus);
+  --nav--logo--fg: var(--fg-minus);
-  --nav-item-idle-fg: var(--fg);
+  --nav--item--idle--fg: var(--fg);
-  --nav-item-hover-fg: var(--fg-plus-2);
+  --nav--item--hover--fg: var(--fg-plus-2);
-  --nav-item-active-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);
+  background-color: var(--nav--bg);
-  font-size: $nav-font-size;
+  font-size: $nav--font-size;
  &__items {
    display: flex;
@@ -10,15 +10,15 @@
  &__logo {
    display: inline-block;
    margin: 0;
-    padding: $nav-item-pad-v 0;
+    padding: $nav--item--pad-v 0;
-    color: var(--nav-logo-fg);
+    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);
+    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);
+    margin: 0 (-1 * $nav--item--pad-h) 0 ($nav--item--spacing - $nav--item--pad-h);
-    color: var(--nav-item-idle-fg);
+    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-left: $container--pad-h;
-  padding-right: $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-top: $container--pad-v;
-    padding-bottom: $container-pad-v;
+    padding-bottom: $container--pad-v;
  }
  @media (max-width: map-get($breakpoints, "sm")) {
-    padding-left: $container-pad-h-sm;
+    padding-left: $container--pad-h-sm;
-    padding-right: $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;
+    margin-left: -1 * $page--item-prefix--width;
-    padding-left: $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;
+      margin-left: -1 * $page--item-prefix--width;
-      padding-right: $page-item-prefix-pad;
+      padding-right: $page--item-prefix--pad;
-      width: $page-item-prefix-width;
+      width: $page--item-prefix--width;
-      color: var(--page-item-prefix-fg);
+      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;
+    margin-left: -1 * $page--item-prefix--width;
-    padding-left: $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"
+id: blog
-title: "Blog"
+title: Blog
 ---
 # Blog
diff --git a/content/blog/test1.md b/content/blog/test1.md
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/content/blog/test1.md
diff --git a/content/blog/test2/index.md b/content/blog/test2/index.md
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/content/blog/test2/index.md
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"
+id: home
-title: "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"
+id: projects
-title: "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")
+    target=$(target_filename "$1")
-    mkdir -p $(dirname "$TARGET")
+    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" \
+            -o "$target" \
-            --metadata-file metadata/metadata.json
+            --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
+            if [ -f "$file" ]; then
-                scripts/build_content.sh "single" "$FILENAME"
+                scripts/build_content.sh "single" "$file"
-            elif [ ! -d "$FILENAME" ]; then
+            elif [ ! -d "$file" ]; then
-                scripts/build_content.sh "delete" "$FILENAME"
+                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);
+            color: var(--nav--item--active--fg);
-            border-bottom-color: var(--nav-item-active-fg);
+            border-color: var(--nav--item--active--fg);
        }
    </style>
    $endif$