Merge pull request #4775 from galaxyproject/pinto-salak

Conditional loading of mermaid.js library
galaxyproject · Mar 6, 2024 · 8cf0f80 · 8cf0f80
2 parents 91ff5f0 + 700d5b6
commit 8cf0f80
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 19 deletions.
diff --git a/_config.yml b/_config.yml
@@ -48,15 +48,16 @@ javascript_bundles:
       - assets/js/theme.js
   main:
     preload: true
+    defer: true
+    async: true
     resources:
-      - assets/js/jquery.slim.min.js
-      - assets/js/popper.min.js
-      - assets/js/bootstrap.min.js
-      - assets/js/bootstrap-toc.min.js
-      - assets/js/clipboard.min.js
-      - assets/js/list.min.js
-      - assets/js/[email protected]
+      - assets/js/jquery.slim.min.js   # Mandatory for bootstrap.
+      - assets/js/popper.min.js        # Everywhere, dropdown menu.
+      - assets/js/bootstrap.min.js     # Everywhere
+      - assets/js/bootstrap-toc.min.js # Only tutorials, faqs
+      - assets/js/clipboard.min.js     # Used on anything with a pre
       - assets/js/main.js
+      # - assets/js/list.min.js # Potentially unused?
 
 # Conversion
 markdown: kramdown

diff --git a/_layouts/base.html b/_layouts/base.html
@@ -21,7 +21,7 @@
         <link rel="preload" href="{{ site.baseurl }}/assets/fonts/AtkinsonHyperlegible/Atkinson-Hyperlegible-Regular-102a.woff2" as="font" type="font/woff2" crossorigin>
         <link rel="preload" href="{{ site.baseurl }}/assets/fonts/AtkinsonHyperlegible/Atkinson-Hyperlegible-Bold-102a.woff2" as="font" type="font/woff2" crossorigin>
         <link rel="preload" href="{{ site.baseurl }}/assets/fonts/AtkinsonHyperlegible/Atkinson-Hyperlegible-Italic-102a.woff2" as="font" type="font/woff2" crossorigin>
-        {% if page.mathjax %}
+        {% if page.js_requirements.mathjax %}
         <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML" as="script" crossorigin>
         {% endif %}
         <link rel="preload" href="{{ site.baseurl }}/assets/css/main.css?v=3" as="style">
@@ -68,8 +68,13 @@
         {% include _includes/default-footer.html %}
 
         {{ 'main' | load_bundle }}
-        {% if page.mathjax %}
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
-        {% endif %}
+
+	{% if page.js_requirements.mathjax %}
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+	{% endif %}
+	{% if page.js_requirements.mermaid %}
+	<script src="{{ site.baseurl }}/assets/js/[email protected]" async></script>
+	<link rel="preload" href="{{ site.baseurl }}/assets/js/[email protected]" as="script" crossorigin>
+	{% endif %}
     </body>
 </html>
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -248,7 +248,7 @@ <h2>Meet & Join the Community!</h2>
             <h2>GTN Toots</h2>
 
 <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/js/emfed/toots.css">
-		<script type="module" src="{{ site.baseurl }}/assets/js/emfed/emfed.js"></script>
+		<script async defer type="module" src="{{ site.baseurl }}/assets/js/emfed/emfed.js"></script>
 		<a rel="me" class="mastodon-feed"
 		href="https://mstdn.science/@gtn"
 		data-toot-limit="3"

diff --git a/_plugins/jekyll-bundler.rb b/_plugins/jekyll-bundler.rb
@@ -13,7 +13,7 @@
     bundle = resources['resources'].map { |f| File.read(f) }.join("\n")
     hash = Digest::MD5.hexdigest(bundle)[0..7]
     site.config['javascript_bundles'][name]['hash'] = hash
-    site.config['javascript_bundles'][name]['path'] = "/assets/js/bundle.#{hash}.js"
+    site.config['javascript_bundles'][name]['path'] = "/assets/js/bundle.#{name}.#{hash}.js"
 
     Jekyll.logger.info "Analysing JS Bundle #{name} => #{bundle_timestamp} / #{hash}"
   end
@@ -64,7 +64,7 @@ def bundle_preloads_prod
       end
 
       bundles.map do |_name, bundle|
-        bundle_path = "#{baseurl}#{bundle['path']}?v=#{bundle['timestamp']}"
+        bundle_path = "#{baseurl}#{bundle['path']}"
         "<link rel='preload' href='#{bundle_path}' as='script'>"
       end.join("\n")
     end
@@ -89,8 +89,12 @@ def load_bundle_dev(name)
 
       baseurl = @context.registers[:site].config['baseurl']
 
+      attrs = ""
+      attrs += " async" if bundle['async']
+      attrs += " defer" if bundle['defer']
+
       bundle['resources'].map do |f|
-        "<script src='#{baseurl}/#{f}'></script>"
+        "<script #{attrs} src='#{baseurl}/#{f}'></script>"
       end.join("\n")
     end
 
@@ -99,8 +103,11 @@ def load_bundle_production(name)
       raise "Bundle #{name} not found in site config" if bundle.nil?
 
       baseurl = @context.registers[:site].config['baseurl']
-      bundle_path = "#{baseurl}#{bundle['path']}?v=#{bundle['timestamp']}"
-      "<script src='#{bundle_path}'></script>"
+      attrs = ""
+      attrs += " async" if bundle['async']
+      attrs += " defer" if bundle['defer']
+      bundle_path = "#{baseurl}#{bundle['path']}"
+      "<script #{attrs} src='#{bundle_path}'></script>"
     end
   end
 end

diff --git a/_plugins/jekyll-mathjax.rb b/_plugins/jekyll-mathjax.rb
@@ -1,3 +1,6 @@
 Jekyll::Hooks.register :pages, :post_init do |page|
-  page.data['mathjax'] = page.content =~ /\$\$/
+  page.data['js_requirements'] = {
+    'mathjax' => page.content =~ /\$\$/,
+    'mermaid' => page.content =~ /```mermaid/ || page.content =~ /pre class="mermaid"/ || page.data['layout'] == 'workflow-list',
+  }
 end
diff --git a/bin/commit-cache-update.rb b/bin/commit-cache-update.rb
@@ -1,5 +1,5 @@
 require 'jekyll'
-require './_plugins/gtn/mod.rb'
+require './_plugins/gtn/mod'
 
 # Write the commit log
 Gtn::ModificationTimes.generate_cache