Browse Source

fix(help/home): add performance info & undocumented features

pull/149/head
Josh Habdas 2 years ago
parent
commit
a8e18c59ba
Signed by: jhabdas GPG Key ID: B148B31154C75A74
12 changed files with 193 additions and 78 deletions
  1. +3
    -0
      assets/css/theme.css
  2. +1
    -1
      bin/install
  3. +2
    -2
      docs/config.toml
  4. +59
    -39
      docs/content/_index.md
  5. +1
    -1
      docs/content/feature/code-highlighter.md
  6. +41
    -0
      docs/content/feature/fetch-injection.md
  7. +29
    -0
      docs/content/feature/jit-requests.md
  8. +1
    -1
      docs/content/feature/post-images.md
  9. +1
    -1
      docs/content/shortcode/figure.md
  10. +1
    -1
      docs/layouts/feature/list.html
  11. +53
    -31
      docs/layouts/index.html
  12. +1
    -1
      package.json

+ 3
- 0
assets/css/theme.css View File

@ -39,6 +39,9 @@ main, footer {
footer time[datetime$="M"]:before {
content: "\2013\0020";
}
body > footer p.muted {
margin-bottom: 0;
}
@media only screen
and ( max-width: 30em ) {
footer time[datetime$="M"] {

+ 1
- 1
bin/install View File

@ -134,5 +134,5 @@ echo "Site created in $SITE_DIR_ABS"
echo "Help server started at http://localhost:1414/"
echo "To stop it run \"kill \$(ps aux | awk '/[h]ugo.*1414/ {print \$2}')\"."
echo "To start it again run \"./themes/after-dark/bin/help\"."
echo "Run \"cd $SITE_DIR && hugo serve\" to start your site."
echo "Run \"cd $SITE_DIR && hugo serve --navigateToChanged\" to start your site."
echo "Thank you for choosing After Dark."

+ 2
- 2
docs/config.toml View File

@ -1,7 +1,7 @@
baseurl = "https://after-dark.habd.as/" # Controls base URL sitewide
languageCode = "en-US" # Controls site language
title = "After Dark" # Homepage title and page title suffix
paginate = 32 # Number of items to show before paginating
paginate = 33 # Number of items to show before paginating
# Controls default theme and theme components
theme = [
@ -18,7 +18,7 @@ sectionPagesMenu = "main" # Enable menu system for lazy bloggers
footnoteReturnLinkContents = "↩" # Provides a nicer footnote return link
[params]
description = "After Dark is a complete hypermedia authoring system for the Hugo Static Site Generator." # Suggested, controls default description meta
description = "After Dark is a robust hypermedia authoring system for the Hugo Static Site Generator." # Suggested, controls default description meta
author = "Josh Habdas" # Optional, controls author name display on posts
hide_author = true # Optional, set true to hide author name on posts
show_menu = true # Optional, set true to enable section menu

+ 59
- 39
docs/content/_index.md View File

@ -1,9 +1,9 @@
+++
title = "After Dark"
description = "After Dark is a complete hypermedia authoring system for the Hugo Static Site Generator."
description = "After Dark is a robust hypermedia authoring system for the Hugo Static Site Generator."
+++
<section class="grid">
<section class="grid logo">
<div class="cell -12of12">
<svg class="shaded animated" viewBox="0 0 46 45" width="92" height="90" xmlns="http://www.w3.org/2000/svg">
<title>After Dark</title>
@ -12,23 +12,22 @@ description = "After Dark is a complete hypermedia authoring system for the Hugo
</div>
</section>
<section class="grid">
<section class="grid tagline">
<div class="cell -12of12">
<p class="leading">After Dark is a complete hypermedia authoring system for the {{< external text="Hugo Static Site Generator" href="https://gohugo.io" />}} designed for the creation of engaging websites that are easy to build, fully customizable and secure by design.</p>
<p>After Dark is a robust hypermedia authoring system using {{< external text="Hugo Static Site Generator" href="https://gohugo.io" />}} for creating immersive websites that are incredibly fast, easy to customize and securely designed.</p>
</div>
</section>
<svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M30 10 L16 26 2 10 Z" />
</svg>
<svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M30 10 L16 26 2 10 Z" />
</svg>
<svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M30 10 L16 26 2 10 Z" />
</svg>
<section class="hero">
<svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M30 10 L16 26 2 10 Z" />
</svg>
<svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M30 10 L16 26 2 10 Z" />
</svg>
<svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M30 10 L16 26 2 10 Z" />
</svg>
{{< figure alt="After Dark screenshots" src="minimal-mac_1600x1200-fs8.png" lqipsrc="minimal-mac_800x600-fs8.png" >}}
</section>
@ -40,9 +39,23 @@ description = "After Dark is a complete hypermedia authoring system for the Hugo
<h2 id="feature-imaging">Unreal Graphics</h2>
<p>Create lazy-loading responsive images and galleries with low-quality image placeholders and special effects all without touching an image editor.</p>
<nav><p>
<a href="/feature/post-images">Responsive Images</a> |
<a href="/module/hall-of-mirrors">PhotoSwipe Galleries</a> |
<a href="/module/fractal-forest">Canvas Images</a>
<a href="/shortcode/figure">Figures</a> |
<a href="/feature/post-images">Post Images</a> |
<a href="/module/hall-of-mirrors">Galleries</a> |
<a href="/module/fractal-forest">BPG</a>
</p></nav>
</section>
<section class="speed">
<svg id="feature-speed" class="i-lightning" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M18 13 L26 2 8 13 14 19 6 30 24 19 Z" />
</svg>
<h2 id="feature-imaging">Ludicrous Speed</h2>
<p>Load entire pages in less than a half-second without relying on complex build systems or browser sniffing and may the schwartz be with you.</p>
<nav><p>
<a href="/feature/fetch-injection">Fetch Inject</a> |
<a href="/feature/lazy-loading">Lazy Load</a> |
<a href="/feature/jit-requests">JIT Requests</a>
</p></nav>
</section>
@ -53,9 +66,10 @@ description = "After Dark is a complete hypermedia authoring system for the Hugo
<h2 id="feature-customize">Fully Customizable</h2>
<p>Choose from one of eight styleable theme skins or disable theming entirely and use custom layouts and CSS to take complete design control.</p>
<nav><p>
<a href="/feature/display-variants">Theme Skins</a> |
<a href="/feature/custom-layouts">Custom Layouts</a> |
<a href="/feature/custom-styles">Custom Styles</a>
<a href="/feature/display-variants">Skins</a> |
<a href="/feature/custom-layouts">Layouts</a> |
<a href="/feature/custom-styles">Styles</a> |
<a href="/feature/svg-favicon">Favicons</a>
</p></nav>
</section>
@ -78,49 +92,55 @@ description = "After Dark is a complete hypermedia authoring system for the Hugo
<path d="M5 15 L5 30 27 30 27 15 Z M9 15 C9 9 9 5 16 5 23 5 23 9 23 15 M16 20 L16 23" />
<circle cx="16" cy="24" r="1" />
</svg>
<h2 id="feature-security">Secure by Design</h2>
<h2 id="feature-security">Securely Designed</h2>
<p>From PGP-signed cryptographic release hashes to ephemeral hosting options with end-to-end encryption security is tight as a drum, sir.</p>
<nav><p>
<a href="/feature/release-hashes">Release Hashes</a> |
<a href="/module/voyeur">Privacy Analytics</a> |
<a href="/feature/release-hashes">PGP Signed</a> |
<a href="/module/voyeur">Fathom Analytics</a> |
<a href="/feature/air-gapping">Air Gapping</a>
</p></nav>
</section>
<div class="grid">
<div class="cell -1of12">
{{< external title="Activity" rel="prefetch" target="_self" itemtype="significantLink" href="https://git.habd.as/comfusion/after-dark/activity" >}}
<svg id="activity" class="i-activity" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<section class="grid cta">
<div class="cell -2of12">
{{< external rel="prefetch" target="_self" itemtype="significantLink" href="https://git.habd.as/comfusion/after-dark/activity" >}}
<svg id="activity" aria-labelledby="activity-label" class="i-activity" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M4 16 L11 16 14 29 18 3 21 16 28 16" />
</svg>
<small role="tooltip" id="activity-label">Activity</small>
{{< /external >}}
</div>
<div class="cell -1of12">
{{< external title="Source" rel="prefetch" target="_self" itemtype="significantLink" href="https://git.habd.as/comfusion/after-dark/" >}}
<svg id="source" class="i-code" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<div class="cell -2of12">
{{< external rel="prefetch" target="_self" itemtype="significantLink" href="https://git.habd.as/comfusion/after-dark/" >}}
<svg id="source" aria-labelledby="source-label" class="i-code" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M10 9 L3 17 10 25 M22 9 L29 17 22 25 M18 7 L14 27" />
</svg>
<small role="tooltip" id="source-label">Source</small>
{{< /external >}}
</div>
<div class="cell -1of12">
{{< external title="Chat" rel="noopener" itemtype="significantLink" href="https://t.me/joinchat/Iw_6FEhmKL9sPUAukX9jzg" >}}
<svg id="chat" class="i-msg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M2 4 L30 4 30 22 16 22 8 29 8 22 2 22 Z" />
<div class="cell -2of12">
{{< external rel="noopener" itemtype="significantLink" href="https://t.me/joinchat/Iw_6FEhmKL9sPUAukX9jzg" >}}
<svg id="telegram" aria-labelledby="telegram-label" class="i-send" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M2 16 L30 2 16 30 12 20 Z M30 2 L12 20" />
</svg>
<small role="tooltip" id="telegram-label">Telegram</small>
{{< /external >}}
</div>
<div class="cell -1of12">
<div class="cell -2of12">
{{< external title="Download" rel="prefetch" target="_self" itemtype="significantLink" href="https://git.habd.as/comfusion/after-dark/#getting-started" >}}
<svg id="download" class="i-download" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<svg id="download" aria-labelledby="download-label" class="i-download" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30" />
</svg>
<small role="tooltip" id="download-label">Download</small>
{{< /external >}}
</div>
</div>
</section>
<section class="grid license" style="margin-top: 3em">
<section class="grid license">
<div class="cell -12of12">
<img width="96" src="wtfpl.svg">
{{< external rel="noopener license" href="https://choosealicense.com/licenses/wtfpl/" >}}
<img width="48" src="wtfpl.svg">
{{< /external >}}
</div>
</section>

+ 1
- 1
docs/content/feature/code-highlighter.md View File

@ -3,7 +3,7 @@ title = "Code Highlighter"
description = "Highlight code written in more than 160 languages."
categories = ["Experience"]
tags = ["color", "style", "syntax"]
features = ["snippets", "related content"]
features = ["snippets", "related content", "jit requests"]
+++
After Dark uses a customized version of {{< external href="https://atom.io/themes/one-dark-syntax" text="One Dark Syntax" />}} to produce print-friendly code highlighting for more than 160 languages.

+ 41
- 0
docs/content/feature/fetch-injection.md View File

@ -0,0 +1,41 @@
+++
title = "Fetch Injection"
description = "Load external scripts and styles with incredible speed."
categories = ["experience"]
tags = ["performance", "styles"]
features = ["snippets", "related content"]
+++
After Dark uses {{< external rel="external help" href="https://git.habd.as/jhabdas/fetch-inject" text="Fetch Inject" />}} library to load and execute external scripts and styles faster than native browsers are capable of doing it themselves.
<table>
<thead>
<tr>
<th rowspan="2" scope="col">Use Case</th>
<th colspan="2" scope="col">Google Chrome Performance Comparison</th>
</tr>
<tr>
<th scope="col">Without Fetch Inject</th>
<th scope="col">With Fetch Inject</th>
</tr>
</thead>
<tbody>
<td>{{< external href="https://habd.as/talks/screaming-fast-wordpress-redis-vultr/" text="WordPress Twenty Seventeen" />}}</td>
<td>~3.600s</td>
<td>~0.918s</td>
</tbody>
</table>
{{< external href="https://hackcabin.com/post/managing-async-dependencies-javascript/" text="Fetch Injection" />}} was conceptualized and first developed specifically for After Dark to make it possible to deep-link to full-sized [Image Gallery](/modules/hall-of-mirrors) images near-instantly and carries with it a number of other performance applications.
Use Fetch Inject in your [Custom Layouts](../custom-layouts) to load scripts and styles from your site `static` directory or include cross-origin resources:
{{< highlight html "linenos=inline" >}}
<script>
fetchInject(['/js/baffle.min.js']).then(() => {
baffle('header h1').start().reveal(1000);
})
</script>
{{< /highlight >}}
Fetch Inject is non-blocking, has 0 dependencies and is already included for use on all pages within After Dark. See the {{< external rel="external help" href="https://git.habd.as/jhabdas/fetch-inject" text="Fetch Inject" />}} `README` for use cases.

+ 29
- 0
docs/content/feature/jit-requests.md View File

@ -0,0 +1,29 @@
+++
title = "JIT Requests"
description = "Maximize resources while minimizing external requests."
categories = ["experience"]
tags = ["performance", "styles", "javascript"]
features = ["related content", "snippets", "code highlighter"]
+++
After Dark makes <abbr title="Just-In-Time">JIT</abbr> requests for some external assets to cut down on resource consumption and increase page performance.
Take the [Code Highlighter](../code-highlighter) stylesheet for example:
{{< highlight css >}}
{{< include "themes/after-dark/static/css/syntax.css" >}}
{{< /highlight >}}
The above highlighted code is, itself, highlighted using a JIT request. Confirm by viewing the network requests for this page and observe the `fetch` requests:
```sh
jit-requests (document)
├── lazysizes.min.js (fetch)
├── syntax.css (fetch)
```
Rather than blocking the page with an external request [Fetch Injection](../fetch-injection) is used to load them on-the-fly while the base layout takes care to ensure they're only on pages which actually need them.
Another example can be seen in the [Table Of Contents](../table-of-contents) whereby a {{< external href="https://devdocs.io/css/scroll-behavior" text="scroll-behavior" />}} polyfill is loaded but not until user shows intent to use the feature.
Study these patterns and try building your own in your own [Custom Layouts](../custom-layouts).

+ 1
- 1
docs/content/feature/post-images.md View File

@ -2,7 +2,7 @@
title = "Post Images"
description = "Add graphics to posts without touching an image editor."
categories = ["experience"]
tags = ["imaging", "graphics", "posts"]
tags = ["performance", "imaging", "graphics", "posts"]
features = ["code highlighter", "snippets", "related content"]
todo = [
"normalize with the actual code to create a responsive post image"

+ 1
- 1
docs/content/shortcode/figure.md View File

@ -2,7 +2,7 @@
title = "Figure"
description = "Present lazy-loaded images with LQIP support."
categories = ["experience"]
tags = ["images", "graphics"]
tags = ["performance", "images", "graphics"]
html_attributes = ["class", "alt", "src"]
custom_attributes = ["lqipsrc", "caption", "link", "linktarget", "attr", "attrlink", "title"]
snippets_used = ["code highlighter"]

+ 1
- 1
docs/layouts/feature/list.html View File

@ -5,7 +5,7 @@
<header>
<h1>{{ .Title }}</h1>
</header>
<p>From <a href="./air-gapping">Air Gapping</a> to <a href="./webmaster-tools">Webmaster Tools</a>, After Dark gives you the core features you need to create engaging hypermedia content online or off.</p>
<p>Explore the many features available to you in After Dark or run the <a href="./quick-installer">Quick Installer</a> to download the theme and use the <a href="./online-help">Online Help</a> try them yourself.</p>
<table>
<tr>
<th>{{ .Title | singularize }}</th>

+ 53
- 31
docs/layouts/index.html View File

@ -4,6 +4,11 @@
{{ define "header" }}
{{ partial "menu.html" . }}
<style>
:root {
--vertical-rhythm: 5rem;
--logo-animation-filter-start: drop-shadow(0px -25px 45px #ff2e88) brightness(1) drop-shadow(0px -55px 35px #ff2e88) brightness(1) drop-shadow(0px -35px 155px #ff9800) brightness(4);
--logo-animation-filter-end: drop-shadow(0px -20px 45px #ff2e88) brightness(.1) drop-shadow(0px 0px 5px #ff2e88) brightness(.7) drop-shadow(0px -20px 135px #ff2e88) brightness(2);
}
main, footer, header {
text-align: center;
}
@ -15,81 +20,98 @@
flex: 1;
}
}
[class="grid"] a {
border-bottom: none;
background-color: inherit;
}
.shaded {
--filter: drop-shadow(0px -25px 45px #ff2e88) brightness(1) drop-shadow(0px -55px 35px #ff2e88) brightness(1) drop-shadow(0px -35px 155px #ff9800) brightness(4);
filter: var(--filter);
filter: var(--logo-animation-filter-start);
opacity: 0;
}
.license {
filter: drop-shadow(0px -10px 35px #ff2e88) brightness(2);
}
.animated {
animation: reveal 2s both;
}
@keyframes reveal {
from {
filter: var(--filter);
filter: var(--logo-animation-filter-start);
}
to {
filter: drop-shadow(0px -20px 45px #ff2e88) brightness(.1) drop-shadow(0px 0px 5px #ff2e88) brightness(.7) drop-shadow(0px -20px 135px #ff2e88) brightness(2);
filter: var(--logo-animation-filter-end);
opacity: 1;
}
}
.hack section.logo {
margin-top: 3.5rem;
}
.hack section.hero {
margin-top: -1rem;
margin-bottom: -4rem;
}
.hack section.hero figure {
margin: 0;
line-height: 0;
min-height: 266px;
}
@media screen and (min-width: 768px) {
.hero img {
.hack section.hero figure img {
margin: -3em 0 -20px;
}
}
.hack p.leading {
.hack section.tagline p {
margin: 0;
font-size: 1.1rem;
line-height: 1.6;
}
.hack .grid {
justify-content: center;
}
.hack header {
text-align: center;
}
.hack header h1 {
margin-top: 0;
/* padding-top: 1em; */
}
.hack header h1:after {
content: none;
}
.hack h1 {
.hack header h1 {
padding: 0;
font-size: 3em;
display: inline-block;
}
.hack h1 sup {
.hack header h1 sup {
font-size: 1rem;
}
.hack h1 sup::before {
.hack header h1 sup::before {
content: " ";
}
.hack section,
.hack header {
margin-bottom: 3em;
.hack header h1 {
margin-top: 3rem;
}
.hack section {
margin: var(--vertical-rhythm) 0;
}
.hack section.cta {
margin-top: 6rem;
}
.hack section.cta a {
border-bottom: none;
background-color: inherit;
color: #ff9800;
display: inline-block;
}
.hack section.cta a:hover {
color: #fff;
}
.hack section.cta a small {
display: block;
}
.hack section.license {
display: block;
margin: 3rem;
}
.hack section.license a {
border-bottom: none;
background-color: inherit;
filter: var(--logo-animation-filter-end);
}
.hack section h2 {
margin-top: .8rem;
font-size: 1.2em;
margin-top: 0.5em;
}
.hack section h2:before {
content: "";
}
.hack section a {
border-bottom: none;
background-color: inherit;
}
</style>
{{ end }}
{{ define "main" }}

+ 1
- 1
package.json View File

@ -1,7 +1,7 @@
{
"name": "after-dark",
"version": "6.10.0",
"description": "Hypermedia authoring system for Hugo.",
"description": "A robust hypermedia authoring system for Hugo.",
"author": "Josh Habdas <jhabdas@protonmail.com>",
"keywords": [
"hugo",

Loading…
Cancel
Save