diff options
| author | Volpeon <git@volpeon.ink> | 2021-04-15 20:21:14 +0200 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2021-04-15 20:21:14 +0200 |
| commit | 9e373cfbb0bd98480560a00978fd6d51113ffe06 (patch) | |
| tree | e8755ba923c66b992e1b5de591fb24a37a27d43b | |
| parent | Update (diff) | |
| download | volpeon.ink-9e373cfbb0bd98480560a00978fd6d51113ffe06.tar.gz volpeon.ink-9e373cfbb0bd98480560a00978fd6d51113ffe06.tar.bz2 volpeon.ink-9e373cfbb0bd98480560a00978fd6d51113ffe06.zip | |
Fetch pages of sections
| -rw-r--r-- | assets/css/_basics.scss | 2 | ||||
| -rw-r--r-- | assets/css/layouts/_landing.scss | 5 | ||||
| -rw-r--r-- | assets/css/layouts/_section.scss | 11 | ||||
| -rw-r--r-- | content/personal/infinite-skyscrapers/index.md (renamed from content/personal/infinite-skyscrapers.md) | 0 | ||||
| -rwxr-xr-x | scripts/build_content.sh | 33 | ||||
| -rw-r--r-- | scripts/metadata_filter.lua | 17 | ||||
| -rw-r--r-- | templates/layouts/index.html | 192 | ||||
| -rw-r--r-- | templates/symbols.svg | 2 |
8 files changed, 127 insertions, 135 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index b739d2a..becf68a 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss | |||
| @@ -31,7 +31,7 @@ html { | |||
| 31 | 31 | ||
| 32 | body { | 32 | body { |
| 33 | margin: 0; | 33 | margin: 0; |
| 34 | padding: prop(--dims --outer, $global: true) 0 0; | 34 | padding: 0; |
| 35 | } | 35 | } |
| 36 | 36 | ||
| 37 | pre, | 37 | pre, |
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss index aa85679..500849e 100644 --- a/assets/css/layouts/_landing.scss +++ b/assets/css/layouts/_landing.scss | |||
| @@ -10,7 +10,6 @@ | |||
| 10 | 10 | ||
| 11 | @include layout(namespace()) { | 11 | @include layout(namespace()) { |
| 12 | display: flex; | 12 | display: flex; |
| 13 | box-sizing: border-box; | ||
| 14 | flex-direction: row; | 13 | flex-direction: row; |
| 15 | align-items: center; | 14 | align-items: center; |
| 16 | 15 | ||
| @@ -30,9 +29,7 @@ | |||
| 30 | } | 29 | } |
| 31 | 30 | ||
| 32 | @include media('<=md') { | 31 | @include media('<=md') { |
| 33 | flex-direction: column; | 32 | display: block; |
| 34 | align-items: stretch; | ||
| 35 | justify-content: center; | ||
| 36 | 33 | ||
| 37 | @include element('side') { | 34 | @include element('side') { |
| 38 | display: none; | 35 | display: none; |
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss index 38b20aa..a005ece 100644 --- a/assets/css/layouts/_section.scss +++ b/assets/css/layouts/_section.scss | |||
| @@ -1,14 +1,15 @@ | |||
| 1 | @include namespace('section') { | 1 | @include namespace('section') { |
| 2 | @include layout(namespace()) { | 2 | @include layout(namespace()) { |
| 3 | display: flex; | 3 | box-sizing: border-box; |
| 4 | flex-direction: column; | ||
| 5 | align-items: stretch; | ||
| 6 | justify-content: flex-start; | ||
| 7 | min-height: 100%; | 4 | min-height: 100%; |
| 8 | margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)}); | 5 | margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)}); |
| 9 | padding-bottom: prop(--dims --outer, $global: true); | 6 | padding-bottom: prop(--dims --outer, $global: true); |
| 10 | 7 | ||
| 11 | @include element('heading') { | 8 | @include modifier('no-head') { |
| 9 | padding-top: prop(--dims --outer, $global: true); | ||
| 10 | } | ||
| 11 | |||
| 12 | @include element('head') { | ||
| 12 | display: flex; | 13 | display: flex; |
| 13 | position: sticky; | 14 | position: sticky; |
| 14 | z-index: 9000; | 15 | z-index: 9000; |
diff --git a/content/personal/infinite-skyscrapers.md b/content/personal/infinite-skyscrapers/index.md index a4a78e1..a4a78e1 100644 --- a/content/personal/infinite-skyscrapers.md +++ b/content/personal/infinite-skyscrapers/index.md | |||
diff --git a/scripts/build_content.sh b/scripts/build_content.sh index 8bcf7c2..c20eca8 100755 --- a/scripts/build_content.sh +++ b/scripts/build_content.sh | |||
| @@ -32,6 +32,7 @@ get_metadata() { | |||
| 32 | --metadata content_dir="$CONTENT_DIR" \ | 32 | --metadata content_dir="$CONTENT_DIR" \ |
| 33 | --metadata output_dir="$OUTPUT_DIR" \ | 33 | --metadata output_dir="$OUTPUT_DIR" \ |
| 34 | --metadata file_in="$1" \ | 34 | --metadata file_in="$1" \ |
| 35 | --metadata relative_to="$2" \ | ||
| 35 | --metadata-file metadata/metadata.yaml \ | 36 | --metadata-file metadata/metadata.yaml \ |
| 36 | --no-highlight \ | 37 | --no-highlight \ |
| 37 | --template scripts/metadata_tpl.json \ | 38 | --template scripts/metadata_tpl.json \ |
| @@ -50,37 +51,32 @@ get_content() { | |||
| 50 | --lua-filter scripts/metadata_filter.lua | 51 | --lua-filter scripts/metadata_filter.lua |
| 51 | } | 52 | } |
| 52 | 53 | ||
| 53 | get_subpages_basedir() { | ||
| 54 | local filename=$1 | ||
| 55 | filename=${filename%.md} | ||
| 56 | if [ "${filename##*/}" = "index" ]; then | ||
| 57 | filename=${filename%/index} | ||
| 58 | fi | ||
| 59 | echo "$filename" | ||
| 60 | } | ||
| 61 | |||
| 62 | get_subpages_metadata() { | 54 | get_subpages_metadata() { |
| 63 | local base_dir_in=$(get_subpages_basedir "$1") | 55 | local base_dir_in=${1%/index.md} |
| 56 | local relative_to="$2" | ||
| 57 | if [ -z "$2" ]; then | ||
| 58 | relative_to="$1" | ||
| 59 | fi | ||
| 64 | local child_pages=() | 60 | local child_pages=() |
| 65 | 61 | ||
| 66 | if [ -d "$base_dir_in" ]; then | 62 | if [ -d "$base_dir_in" ]; then |
| 67 | mapfile -d $'\0' child_pages < <(find "$base_dir_in" \ | 63 | mapfile -d $'\0' child_pages < <(find "$base_dir_in" \ |
| 68 | -maxdepth 2 \ | 64 | -maxdepth 2 \ |
| 69 | -type f \ | 65 | -type f \ |
| 70 | -name "*.md" \ | 66 | -wholename "$base_dir_in/*/index.md" \ |
| 71 | ! -name "_*.md" \ | 67 | ! -name "_*.md" \ |
| 72 | ! -wholename "$base_dir_in/index.md" \ | ||
| 73 | \( -wholename "$base_dir_in/*/index.md" -o ! -wholename "$base_dir_in/*/*.md" \) \ | ||
| 74 | -print0) | 68 | -print0) |
| 75 | fi | 69 | fi |
| 76 | 70 | ||
| 77 | local pages="[]" | 71 | local pages="[]" |
| 72 | local sections="{}" | ||
| 78 | 73 | ||
| 79 | for file_in in "${child_pages[@]}"; do | 74 | for file_in in "${child_pages[@]}"; do |
| 75 | local section=$(basename "${file_in%/index.md}") | ||
| 80 | local content=$(get_content "$file_in" | sed -z 's/\\/\\\\/g;s/\n/\\n/g;s/"/\\"/g') | 76 | local content=$(get_content "$file_in" | sed -z 's/\\/\\\\/g;s/\n/\\n/g;s/"/\\"/g') |
| 81 | |||
| 82 | local metadata=$(get_metadata "$file_in" | jq "{ \ | 77 | local metadata=$(get_metadata "$file_in" | jq "{ \ |
| 83 | file_out: .file_out, \ | 78 | file_out: .file_out, \ |
| 79 | url: .url, \ | ||
| 84 | author: .author, \ | 80 | author: .author, \ |
| 85 | title: .title, \ | 81 | title: .title, \ |
| 86 | date: .date, \ | 82 | date: .date, \ |
| @@ -88,11 +84,18 @@ get_subpages_metadata() { | |||
| 88 | category: .category, \ | 84 | category: .category, \ |
| 89 | content: \"$content\" \ | 85 | content: \"$content\" \ |
| 90 | } | del(.[] | nulls)") | 86 | } | del(.[] | nulls)") |
| 87 | local title=$(echo "$metadata" | jq ".title") | ||
| 88 | local subpages="[]" | ||
| 89 | |||
| 90 | if [ -z "$2" ]; then | ||
| 91 | subpages=$(get_subpages_metadata "$file_in" "$1" | jq ".pages") | ||
| 92 | fi | ||
| 91 | 93 | ||
| 92 | pages=$(echo "$pages" | jq ". += [ $metadata ]") | 94 | pages=$(echo "$pages" | jq ". += [ $metadata ]") |
| 95 | sections=$(echo "$sections" | jq ". += { \"$section\": { title: $title, pages: $subpages } }") | ||
| 93 | done | 96 | done |
| 94 | 97 | ||
| 95 | echo "{ \"pages\": $pages }" | 98 | echo "{ \"pages\": $pages, \"sections\": $sections }" |
| 96 | } | 99 | } |
| 97 | 100 | ||
| 98 | handle () { | 101 | handle () { |
diff --git a/scripts/metadata_filter.lua b/scripts/metadata_filter.lua index 7823130..499cf3e 100644 --- a/scripts/metadata_filter.lua +++ b/scripts/metadata_filter.lua | |||
| @@ -260,8 +260,14 @@ function Meta(meta) | |||
| 260 | 260 | ||
| 261 | meta.file_out = get_file_out(meta.rewrites, meta.content_dir, | 261 | meta.file_out = get_file_out(meta.rewrites, meta.content_dir, |
| 262 | meta.output_dir, meta.file_in) | 262 | meta.output_dir, meta.file_in) |
| 263 | if meta.relative_to == nil then | ||
| 264 | meta.relative_to = meta.file_in | ||
| 265 | end | ||
| 266 | meta.relative_to_out = get_file_out(meta.rewrites, meta.content_dir, | ||
| 267 | meta.output_dir, meta.relative_to) | ||
| 263 | 268 | ||
| 264 | meta.url = resolve_url(meta.site.url, meta.output_dir, meta.file_out, meta.file_out) | 269 | meta.url = resolve_url(meta.site.url, meta.output_dir, meta.relative_to_out, |
| 270 | meta.file_out) | ||
| 265 | 271 | ||
| 266 | meta.date = format_date(meta.date) | 272 | meta.date = format_date(meta.date) |
| 267 | if meta.last_update ~= nil then | 273 | if meta.last_update ~= nil then |
| @@ -276,14 +282,16 @@ function Meta(meta) | |||
| 276 | 282 | ||
| 277 | if meta.page_type == "feed" then | 283 | if meta.page_type == "feed" then |
| 278 | meta.page = pandoc.MetaMap({ | 284 | meta.page = pandoc.MetaMap({ |
| 279 | url = resolve_url(meta.site.url, meta.output_dir, meta.file_out, | 285 | url = resolve_url(meta.site.url, meta.output_dir, |
| 286 | meta.relative_to_out, | ||
| 280 | meta.file_out:gsub("%.xml$", ".html")) | 287 | meta.file_out:gsub("%.xml$", ".html")) |
| 281 | }) | 288 | }) |
| 282 | end | 289 | end |
| 283 | 290 | ||
| 284 | if meta.create_feed then | 291 | if meta.create_feed then |
| 285 | meta.feed = pandoc.MetaMap({ | 292 | meta.feed = pandoc.MetaMap({ |
| 286 | url = resolve_url(meta.site.url, meta.output_dir, meta.file_out, | 293 | url = resolve_url(meta.site.url, meta.output_dir, |
| 294 | meta.relative_to_out, | ||
| 287 | meta.file_out:gsub("%.html$", ".xml")) | 295 | meta.file_out:gsub("%.html$", ".xml")) |
| 288 | }) | 296 | }) |
| 289 | end | 297 | end |
| @@ -296,7 +304,8 @@ function Meta(meta) | |||
| 296 | if meta.pages then | 304 | if meta.pages then |
| 297 | local pages, categories = organize_subpages(meta.site.url, | 305 | local pages, categories = organize_subpages(meta.site.url, |
| 298 | meta.output_dir, | 306 | meta.output_dir, |
| 299 | meta.file_out, meta.pages) | 307 | meta.relative_to_out, |
| 308 | meta.pages) | ||
| 300 | meta.pages = pages | 309 | meta.pages = pages |
| 301 | meta.categories = categories | 310 | meta.categories = categories |
| 302 | end | 311 | end |
diff --git a/templates/layouts/index.html b/templates/layouts/index.html index d39e70a..4163093 100644 --- a/templates/layouts/index.html +++ b/templates/layouts/index.html | |||
| @@ -1,113 +1,95 @@ | |||
| 1 | <main> | 1 | <main> |
| 2 | <section class="l-section l-landing"> | 2 | <section class="l-section l-section--no-head l-landing"> |
| 3 | <header class="l-landing__banner"> | 3 | <header class="l-landing__banner"> |
| 4 | <div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content"> | 4 | <div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content"> |
| 5 | <h1 class="c-landing-banner__title"> | 5 | <h1 class="c-landing-banner__title"> |
| 6 | <span class="c-landing-banner__title-inner"> | 6 | <span class="c-landing-banner__title-inner"> |
| 7 | I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise. | 7 | I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise. |
| 8 | </span> | 8 | </span> |
| 9 | </h1> | 9 | </h1> |
| 10 | <p class="c-landing-banner__text"> | 10 | <p class="c-landing-banner__text"> |
| 11 | Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces. | 11 | Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces. |
| 12 | </p> | 12 | </p> |
| 13 | </div> | 13 | </div> |
| 14 | </header> | 14 | </header> |
| 15 | 15 | ||
| 16 | <section class="l-landing__content"> | 16 | <section class="l-landing__content"> |
| 17 | <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body u-pt0@md-lo"> | 17 | <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body u-pt0@md-lo"> |
| 18 | <div class="l-card-grid"> | 18 | <div class="l-card-grid"> |
| 19 | $for(profiles)$ | 19 | $for(profiles)$ |
| 20 | $if(it.featured)$ | 20 | $if(it.featured)$ |
| 21 | $if(it.url)$ | 21 | $if(it.url)$ |
| 22 | <a class="l-card-grid__card c-card" href="$it.url$"> | 22 | <a class="l-card-grid__card c-card" href="$it.url$"> |
| 23 | $else$ | 23 | $else$ |
| 24 | <div class="l-card-grid__card c-card"> | 24 | <div class="l-card-grid__card c-card"> |
| 25 | $endif$ | 25 | $endif$ |
| 26 | $if(it.icon)$ | 26 | $if(it.icon)$ |
| 27 | <svg class="c-card__icon o-icon"> | 27 | <svg class="c-card__icon o-icon"> |
| 28 | <use href="#icon-$it.icon$"></use> | 28 | <use href="#icon-$it.icon$"></use> |
| 29 | </svg> | 29 | </svg> |
| 30 | $endif$ | 30 | $endif$ |
| 31 | <div class="c-card__content"> | 31 | <div class="c-card__content"> |
| 32 | <strong class="u-db">$it.platform$</strong> | 32 | <strong class="u-db">$it.platform$</strong> |
| 33 | <small class="u-db">$it.username$</small> | 33 | <small class="u-db">$it.username$</small> |
| 34 | </div> | 34 | </div> |
| 35 | $if(it.url)$ | 35 | $if(it.url)$ |
| 36 | <svg class="c-card__icon o-icon"> | 36 | <svg class="c-card__icon o-icon"> |
| 37 | <use href="#icon-link-external"></use> | 37 | <use href="#icon-arrow-up-right"></use> |
| 38 | </svg> | 38 | </svg> |
| 39 | $endif$ | 39 | $endif$ |
| 40 | $if(it.url)$ | 40 | $if(it.url)$ |
| 41 | </a> | 41 | </a> |
| 42 | $else$ | 42 | $else$ |
| 43 | </div> | 43 | </div> |
| 44 | $endif$ | 44 | $endif$ |
| 45 | $endif$ | 45 | $endif$ |
| 46 | $endfor$ | 46 | $endfor$ |
| 47 | </div> | 47 | </div> |
| 48 | 48 | ||
| 49 | $body$ | 49 | $body$ |
| 50 | </div> | 50 | </div> |
| 51 | </section> | 51 | </section> |
| 52 | </section> | 52 | </section> |
| 53 | 53 | ||
| 54 | <section class="l-section"> | 54 | <section class="l-section"> |
| 55 | <header class="l-section__heading"> | 55 | <header class="l-section__head"> |
| 56 | <a class="c-outer-button" href="#projects" id="projects"> | 56 | <a class="c-outer-button" href="#projects" id="projects"> |
| 57 | <span class="c-outer-button__icon"> | 57 | <span class="c-outer-button__icon"> |
| 58 | <svg class="c-outer-button__icon-symbol o-icon"> | 58 | <svg class="c-outer-button__icon-symbol o-icon"> |
| 59 | <use href="#icon-arrow-down-right"></use> | 59 | <use href="#icon-arrow-down-right"></use> |
| 60 | </svg> | 60 | </svg> |
| 61 | </span> | 61 | </span> |
| 62 | <span class="c-outer-button__content"> | 62 | <span class="c-outer-button__content"> |
| 63 | Projects | 63 | $sections.projects.title$ |
| 64 | </span> | 64 | </span> |
| 65 | </a> | 65 | </a> |
| 66 | </header> | 66 | </header> |
| 67 | 67 | ||
| 68 | <div class="l-container l-container--pad-x l-container--pad-y l-card-grid u-my-auto"> | 68 | <div class="l-container l-container--pad-x l-container--pad-y l-container--content l-card-grid"> |
| 69 | <a class="l-card-grid__card c-card" href="projects/blobfox-emojis/"> | 69 | $for(sections.projects.pages)$ |
| 70 | <div class="c-card__content"> | 70 | <a class="l-card-grid__card c-card" href="$it.url.rel$"> |
| 71 | <small class="u-db">Emojis</small> | 71 | <div class="c-card__content"> |
| 72 | <strong class="u-db">Blobfox</strong> | 72 | <small class="u-db">$it.category.name$</small> |
| 73 | </div> | 73 | <strong class="u-db">$it.title$</strong> |
| 74 | <svg class="c-card__icon o-icon"> | 74 | </div> |
| 75 | <use href="#icon-arrow-right"></use> | 75 | <svg class="c-card__icon o-icon"> |
| 76 | </svg> | 76 | <use href="#icon-arrow-right"></use> |
| 77 | </a> | 77 | </svg> |
| 78 | </a> | ||
| 79 | $endfor$ | ||
| 80 | </div> | ||
| 81 | </section> | ||
| 78 | 82 | ||
| 79 | <a class="l-card-grid__card c-card" href="projects/bunhd-emojis/"> | 83 | <footer class="c-footer"> |
| 80 | <div class="c-card__content"> | 84 | <a class="c-outer-button c-outer-button--icon-only" href="#" title="To the top"> |
| 81 | <small class="u-db">Emojis</small> | 85 | <span class="c-outer-button__icon"> |
| 82 | <strong class="u-db">BunHD</strong> | 86 | <svg class="c-outer-button__icon-symbol o-icon"> |
| 83 | </div> | 87 | <use href="#icon-arrow-up"></use> |
| 84 | <svg class="c-card__icon o-icon"> | 88 | </svg> |
| 85 | <use href="#icon-arrow-right"></use> | 89 | </span> |
| 86 | </svg> | 90 | </a> |
| 87 | </a> | 91 | <div class="c-footer__content u-ar"> |
| 88 | 92 | 9thPK7O3xn | |
| 89 | <!--<a class="l-card-grid__card c-card" href="#"> | 93 | </div> |
| 90 | <div class="c-card__content"> | 94 | </footer> |
| 91 | <small class="u-db">Icons</small> | ||
| 92 | <strong class="u-db">iro</strong> | ||
| 93 | </div> | ||
| 94 | <svg class="c-card__icon o-icon"> | ||
| 95 | <use href="#icon-arrow-right"></use> | ||
| 96 | </svg> | ||
| 97 | </a>--> | ||
| 98 | </div> | ||
| 99 | </section> | ||
| 100 | |||
| 101 | <footer class="c-footer"> | ||
| 102 | <a class="c-outer-button c-outer-button--icon-only" href="#" title="To the top"> | ||
| 103 | <span class="c-outer-button__icon"> | ||
| 104 | <svg class="c-outer-button__icon-symbol o-icon"> | ||
| 105 | <use href="#icon-arrow-up"></use> | ||
| 106 | </svg> | ||
| 107 | </span> | ||
| 108 | </a> | ||
| 109 | <div class="c-footer__content u-ar"> | ||
| 110 | 9thPK7O3xn | ||
| 111 | </div> | ||
| 112 | </footer> | ||
| 113 | </main> | 95 | </main> |
diff --git a/templates/symbols.svg b/templates/symbols.svg index a5907e1..d884bc0 100644 --- a/templates/symbols.svg +++ b/templates/symbols.svg | |||
| @@ -37,7 +37,7 @@ | |||
| 37 | stroke="currentColor" /> | 37 | stroke="currentColor" /> |
| 38 | </symbol> | 38 | </symbol> |
| 39 | 39 | ||
| 40 | <symbol id="icon-link-external" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | 40 | <symbol id="icon-arrow-up-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> |
| 41 | <path d="m5.25 4.25h6.5v6.5m0-6.5-7.5 7.5" fill="none" stroke="currentColor" /> | 41 | <path d="m5.25 4.25h6.5v6.5m0-6.5-7.5 7.5" fill="none" stroke="currentColor" /> |
| 42 | </symbol> | 42 | </symbol> |
| 43 | 43 | ||
