From 4ed8756cbb8773abcf088b26855887d54b7d59e1 Mon Sep 17 00:00:00 2001
From: Paul Hibbitts <paul@paulhibbitts.com>
Date: Thu, 15 Feb 2024 09:33:45 -0800
Subject: [PATCH] Use docsify-loading plugin and add docsify-footnotes plugin.

---
 docs/home.md    | 27 ++++++++++++++++++++++++++-
 docs/index.html | 14 ++++++--------
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/docs/home.md b/docs/home.md
index 29461a0..b9b7790 100644
--- a/docs/home.md
+++ b/docs/home.md
@@ -15,4 +15,29 @@
 <a class="embedly-card" data-card-controls="0" data-card-align="left" href="http://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/">The Art of Guerrilla Usability Testing | UX Booth</a>
 
 ### Week 5 Slides to be Discussed
-[Usability Testing](https://www.google.ca/slides/about/)
\ No newline at end of file
+[Usability Testing](https://www.google.ca/slides/about/)
+
+## Markdown Footnote
+Here is a simple footnote[^1]. With some additional text after it.
+
+## HTML iFrame (YouTube)
+<iframe width="560" height="315" src="https://www.youtube.com/embed/lJIrF4YjHfQ">
+</iframe>
+
+## HTML iFrame (YouTube, Styled with Docsify-This CSS Class `video-container-4by3`)
+<div class="video-container-4by3"><iframe width="560" height="315" src="https://www.youtube.com/embed/lJIrF4YjHfQ">
+</iframe></div>
+
+## HTML iFrame (Google Slides)
+<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vRnnRFelgw1ksq_p8Eryg3dnyLCRRLPf5fBgdwdv9p-tCIwcxqWvzDGrGbjxGHL7HqEJVpmV26ntk3a/embed?start=false&loop=false&delayms=3000" frameborder="0" width=780" height="585" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
+
+## HTML iFrame (Google Slides, Styled with Docsify-This CSS Class `video-container-4by3`)
+<div class="video-container-4by3"><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vRnnRFelgw1ksq_p8Eryg3dnyLCRRLPf5fBgdwdv9p-tCIwcxqWvzDGrGbjxGHL7HqEJVpmV26ntk3a/embed?start=false&loop=false&delayms=3000" frameborder="0" width=780" height="585" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></div>
+
+## HTML iFrame (H5P) 
+<iframe src="https://h5p.org/h5p/embed/214115" width="778" height="279" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *" title="User-Centered Design"></iframe><script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script>
+
+## HTML Embed (using Embed.ly) 
+<a class="embedly-card" data-card-controls="0" data-card-align="left" href="https://blog.prototypr.io/defining-usability-e7bf42e8abd0">Defining usability</a>
+
+[^1]: My reference.
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 1844bd6..f807e4e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -281,14 +281,6 @@
             }
             */
 
-            /* Support Browser-level image lazy loading of images */
-            htmlElement.innerHTML = htmlElement.innerHTML.replace(/<img(.*?)>/g, function (match, p1) {
-              if (p1.indexOf('loading=') === -1) {
-                return match.replace('>', ' loading="lazy">');
-              }
-              return match;
-            });
-
             next(htmlElement.innerHTML);
 
           });
@@ -390,12 +382,18 @@
   <!-- Run External Scripts Plugin -->
   <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/external-script.min.js"></script>
 
+  <!-- Footnotes Plugin -->
+  <script src="//cdn.jsdelivr.net/npm/@sy-records/docsify-footnotes/lib/index.min.js"></script>
+
   <!-- Footer Plugin -->
   <script src="//cdn.jsdelivr.net/npm/@alertbox/docsify-footer/dist/docsify-footer.min.js"></script>
 
   <!-- Pagination Plugin -->
   <script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
 
+  <!-- Docsify Browser-level Image Lazy Loading Plugin -->
+  <script src="//cdn.jsdelivr.net/npm/@sy-records/docsify-loading/lib/index.min.js"></script>
+
   <!-- Table of Contents Plugin -->
   <script>
     if (getURLParameterByName('toc') || ToC) {