Browse Source

feat(modules): add fractal forest module for bpg image format support

closes #8
pull/73/head
Josh Habdas 2 years ago
parent
commit
8aa35b21f4
Signed by: jhabdas GPG Key ID: B148B31154C75A74
8 changed files with 20 additions and 90 deletions
  1. +7
    -7
      archetypes/post.md
  2. +10
    -5
      bin/install.sh
  3. +0
    -5
      layouts/partials/async-scripts.html
  4. +3
    -0
      layouts/partials/modules.html
  5. BIN
      static/bpg/cinemagraph-6.bpg
  6. +0
    -23
      static/js/bpgdec.js
  7. +0
    -23
      static/js/bpgdec8.js
  8. +0
    -27
      static/js/bpgdec8a.js

+ 7
- 7
archetypes/post.md View File

@ -13,17 +13,17 @@ images = [
Before you continue, please take a moment to configure your archetypes.
Archetypes are located in the `archetypes` directory in the source of your site. To learn more about archetypes, visit [Archetypes](https://gohugo.io/content-management/archetypes/) on the Hugo website. And when you're ready, check out the [Customizing](https://comfusion.github.io/after-dark/#customizing) section of the After Dark documentation for additional options.
To see this message again run `hugo serve` with the `--buildDrafts` flag. For help run `hugo --help`.
Archetypes are located in the `archetypes` directory in the source of your site. To learn more about archetypes, visit [Archetypes](https://gohugo.io/content-management/archetypes/) on the Hugo website. And when you're ready, check out the [Customizing](https://git.habd.as/comfusion/after-dark#customizing) section of the After Dark documentation for additional options.
<!--more-->
This information appears below the [Summary Split](https://gohugo.io/content-management/summaries/).
After Dark supports the `bpg` image format without any additional configuration necessary. Here's an example BPG image animation:
After Dark ships with a custom module system and provides a number of prebuilt modules. Shown here, an animation made possible by the `Fractal Forest` module:
<img width="494" height="371" src="/bpg/cinemagraph-6.bpg" alt="BPG file format example">
<img src="/bpg/cinemagraph-6.bpg" alt="BPG file format example">
The Fractal Forest module gives After Dark the special ability to render images encoded using Fabrice Bellard's [BPG Image format](https://bellard.org/bpg/) and comes preinstalled for sites set-up using the installation script located in the `bin` directory.
BPG compresses the above animation to `48KB`, about **97% smaller** than what would be possible with GIF. In addition to animation BPG handles still images as well. Head to the [side-by-side comparisons](http://xooyoozoo.github.io/yolo-octo-bugfixes/#vallee-de-colca&jpg=s&bpg=s) to see BPG stacked up against JPEG. Create your own BPG images using the [BPG web encoder](https://webencoder.libbpg.org/) for use on your After Dark site.
To learn more about Fractal Forest and see a list of other available modules please see the [After Dark `README`](https://git.habd.as/comfusion/after-dark#after-dark) once you've configured your `archetypes`.
See the <a href="https://git.habd.as/comfusion/after-dark/src/branch/master/README.md" target="_blank" rel="noopener">After Dark `README`</a> for more info.
To see this message again run `hugo serve` with the `--buildDrafts` flag. For help running `hugo` commands run `hugo --help` in a terminal emulator.

+ 10
- 5
bin/install.sh View File

@ -28,8 +28,9 @@ fi
echo "Installing After Dark ..."
# Clone repo
(cd themes; git clone -q --depth 1 https://git.habd.as/comfusion/after-dark || { echo "cloning failed :/"; exit 1; })
# Clone theme and bpg image format module
git clone -q --depth 1 https://git.habd.as/comfusion/after-dark themes/after-dark || { echo "failed to clone theme"; exit 1; }
git clone -q --depth 1 https://git.habd.as/comfusion/fractal-forest themes/fractal-forest || { echo "failed to theme module"; exit 1; }
# Copy archetypes
cp themes/after-dark/archetypes/* ./archetypes
@ -48,6 +49,7 @@ paginate = 11 # Number of posts to show before paginating
# Controls default theme and theme components
theme = [
"fractal-forest",
"after-dark"
]
@ -60,7 +62,7 @@ footnoteReturnLinkContents = "↩" # Provides a nicer footnote return link
[params]
description = "" # Suggested, controls default description meta
author = "" # Optional, controls author name display on posts
hide_author = false # Optional, set true to hide author name on posts
hide_author = true # Optional, set true to hide author name on posts
show_menu = false # Optional, set true to enable section menu
powered_by = true # Optional, set false to disable credits
images = [
@ -71,6 +73,9 @@ footnoteReturnLinkContents = "↩" # Provides a nicer footnote return link
disabled = false # Optional, set `true` to disable hackcss
mode = "hack" # Optional, choose from `standard` or `hack` display modes
palette = "dark" # Optional, choose `dark`, `dark-grey` or `solarized-dark`
[params.modules.fractal_forest]
decoders = ["bpgdec8a"]
TOML
echo "Creating an example post to get you started ..."
@ -83,10 +88,10 @@ echo "Serving your After Dark site ..."
# Serve site backgrounded over Docker-friendly loopback
hugo serve --buildDrafts --port 1337 --bind "0.0.0.0" &
# Wait a second for Hugo server to fire up
# Wait for Hugo to start
sleep 1
# Pop the site in terminal browser, if installed
# Open site in elinks, if installed
if [[ "elinks" != "" ]]; then
elinks http://0.0.0.0:1337/
fi

+ 0
- 5
layouts/partials/async-scripts.html View File

@ -1,6 +1 @@
<script async src={{ "/js/lazysizes.min.js" | relURL }}></script>
{{ if ne .Site.Params.seo.disable_bpg true }}
<script async src={{ "/js/bpgdec8a.js" | relURL }}></script>
<script async src={{ "/js/bpgdec8.js" | relURL }}></script>
<script async src={{ "/js/bpgdec.js" | relURL }}></script>
{{ end }}

+ 3
- 0
layouts/partials/modules.html View File

@ -1,4 +1,7 @@
{{ with .Site.Params.modules }}
{{ with .fractal_forest }}
{{ partial "modules/fractal-forest/index.html" . }}
{{ end }}
{{ with .voyeur }}
{{ partial "modules/voyeur/index.html" . }}
{{ end }}

BIN
static/bpg/cinemagraph-6.bpg View File


+ 0
- 23
static/js/bpgdec.js
File diff suppressed because it is too large
View File


+ 0
- 23
static/js/bpgdec8.js
File diff suppressed because it is too large
View File


+ 0
- 27
static/js/bpgdec8a.js
File diff suppressed because it is too large
View File


Loading…
Cancel
Save