Browse Source

docs(help/feature): expand fetch-inject example

Josh Habdas 2 years ago
parent
commit
1a5ecbc12f
Signed by: Josh Habdas <jhabdas@protonmail.com> GPG Key ID: B148B31154C75A74
1 changed files with 28 additions and 8 deletions
  1. 28
    8
      docs/content/feature/fetch-injection.md

+ 28
- 8
docs/content/feature/fetch-injection.md View File

@@ -6,15 +6,15 @@ tags = ["performance", "styles"]
6 6
 features = ["snippets", "related content", "code highlighter"]
7 7
 +++
8 8
 
9
-After Dark uses the {{< 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 browsers are natively capable of themselves.
9
+After Dark uses the {{< 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 browsers are capable of otherwise.
10 10
 
11
-{{< 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 [PhotoSwipe  Gallery](/module/hall-of-mirrors) images near-instantly and some other useful performance applications:
11
+{{< external href="https://hackcabin.com/post/managing-async-dependencies-javascript/" text="Fetch Injection" />}} was conceptualized and developed for After Dark to make it possible to deep-link to full-sized [Image Gallery](/module/hall-of-mirrors) images without blocking page load and has other performance applications:
12 12
 
13 13
 <table>
14 14
   <thead>
15 15
     <tr>
16 16
       <th rowspan="2" scope="col">Use Case</th>
17
-      <th colspan="2" scope="col">Google Chrome Performance Comparison</th>
17
+      <th colspan="2" scope="col">Chrome Performance Comparison (4G simulated connection speed)</th>
18 18
     </tr>
19 19
     <tr>
20 20
       <th scope="col">Without Fetch Inject</th>
@@ -28,14 +28,34 @@ After Dark uses the {{< external rel="external help" href="https://git.habd.as/j
28 28
   </tbody>
29 29
 </table>
30 30
 
31
-Use Fetch Inject in your [Custom Layouts](../custom-layouts) to load scripts and styles from your site `static` directory or include cross-origin resources:
31
+Use Fetch Inject in your [Custom Layouts](../custom-layouts) to load scripts and styles cross-origin or from your site `static` directory.
32
+
33
+Given the following `static` folder contents:
34
+
35
+```
36
+├── layouts
37
+├── static
38
+│   ├── js
39
+│   │   ├── jquery.slim.min.js
40
+│   │   ├── tether.min.js
41
+│   │   └── bootstrap.min.js
42
+│   └── css
43
+│       └── font-awesome.min.css
44
+└── themes
45
+```
46
+
47
+You can dynamically load the entire Bootstrap 4 library including with Web Fonts on-the-fly:
32 48
 
33 49
 {{< highlight html "linenos=inline" >}}
34 50
 <script>
35
-  fetchInject(['/js/baffle.min.js']).then(() => {
36
-    baffle('header h1').start().reveal(1000);
37
-  })
51
+  fetchInject(['/js/bootstrap.min.js'],
52
+    fetchInject([
53
+      'jquery.slim.min.js',
54
+      'tether.min.js',
55
+      'font-awesome.min.css'
56
+    ])
57
+  ])
38 58
 </script>
39 59
 {{< /highlight >}}
40 60
 
41
-Fetch Inject is non-blocking, has 0 dependencies and is already included for use on all pages within After Dark. See {{< external rel="external help" href="https://git.habd.as/jhabdas/fetch-inject" text="Fetch Inject" />}} for additional use cases.
61
+Fetch Inject is non-blocking, has 0 dependencies and is included on all pages within After Dark by default. See {{< external rel="external help" href="https://git.habd.as/jhabdas/fetch-inject" text="Fetch Inject" />}} for additional use cases.

Loading…
Cancel
Save