12 changed files with 193 additions and 78 deletions
Split View
Diff Options
-
+3 -0assets/css/theme.css
-
+1 -1bin/install
-
+2 -2docs/config.toml
-
+59 -39docs/content/_index.md
-
+1 -1docs/content/feature/code-highlighter.md
-
+41 -0docs/content/feature/fetch-injection.md
-
+29 -0docs/content/feature/jit-requests.md
-
+1 -1docs/content/feature/post-images.md
-
+1 -1docs/content/shortcode/figure.md
-
+1 -1docs/layouts/feature/list.html
-
+53 -31docs/layouts/index.html
-
+1 -1package.json
+ 3
- 0
assets/css/theme.css
View File
+ 1
- 1
bin/install
View File
+ 2
- 2
docs/config.toml
View File
+ 59
- 39
docs/content/_index.md
View File
+ 1
- 1
docs/content/feature/code-highlighter.md
View File
+ 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). | |||