DEV - Add Fontawesome scripts to build assets (#1982)

trallard · pre-commit-ci[bot] · web-flow · commit e7e9749c467a · 2024-09-27T10:28:07.000-05:00
I seem to have forgotten to add the FA scripts to the `pyproject.toml`
so I am adding it here (which should fix the FA rendering issue in the
dev version of the docs).

---------

Co-authored-by: pre-commit-ci[bot] &lt;66853113+pre-commit-ci[bot]@users.noreply.github.com&gt;
diff --git a/pyproject.toml b/pyproject.toml
@@ -10,8 +10,8 @@ theme-name = "pydata_sphinx_theme"
 additional-compiled-static-assets = [
   "webpack-macros.html",
   "vendor/",
-  "styles/bootstrap.css",
   "scripts/bootstrap.js",
+  "scripts/fontawesome.js",
   "locale/",
 ]
 
@@ -53,7 +53,7 @@ classifiers = [
 [project.optional-dependencies]
 doc = [
   "numpydoc",
-  "linkify-it-py",         # for link shortening
+  "linkify-it-py", # for link shortening
   "rich",
   "sphinxext-rediraffe",
   "sphinx-sitemap",
@@ -105,6 +105,7 @@ fix = true
 ignore = [
   "E501", # line too long | Black take care of it
   "D107", # Missing docstring in `__init__` | set the docstring in the class
+
 ]
 ignore-init-module-imports = true
 select = ["E", "F", "W", "I", "D", "RUF"]
diff --git a/src/pydata_sphinx_theme/assets/scripts/fontawesome.js b/src/pydata_sphinx_theme/assets/scripts/fontawesome.js
@@ -1,5 +1,4 @@
 // TODO: @trallard might end up moving this to the main JS file
 // Define the custom behavior of the page
-import { documentReady } from "./mixin";
 
 import "@fortawesome/fontawesome-free/js/all.min.js";
diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss
@@ -66,8 +66,6 @@ $all-colors: map.merge($pst-semantic-colors, $extra-semantic-colors);
 
 @mixin create-sd-colors($value, $name) {
   // define the pst variables, so that downstream user overrides will work
-  @debug "Creating color variables for semantic color: #{$name}";
-
   --pst-color-#{$name}: #{$value};
 
   // we are now using a11y-combination to calculate the text color - this is based
diff --git a/webpack.config.js b/webpack.config.js
@@ -23,7 +23,6 @@ const { Compilation } = require("webpack");
 
 const scriptPath = resolve(__dirname, "src/pydata_sphinx_theme/assets/scripts");
 const staticPath = resolve(__dirname, "src/pydata_sphinx_theme/theme/pydata_sphinx_theme/static");
-const vendorPath = resolve(staticPath, "vendor");
 
 /*******************************************************************************
  * functions to load the assets in the html head
@@ -32,8 +31,10 @@ const vendorPath = resolve(staticPath, "vendor");
  */
 
 function stylesheet(css) { return `<link href="{{ pathto('_static/${css}', 1) }}?digest=${this.hash}" rel="stylesheet" />`; }
-function preload(js) { return `<link rel="preload" as="script" href="{{ pathto('_static/${js}', 1) }}?digest=${this.hash}" />`; }
-function script(js) { return `<script defer src="{{ pathto('_static/${js}', 1) }}?digest=${this.hash}"></script>`; }
+function preloadScript(js) { return `<link rel="preload" as="script" href="{{ pathto('_static/${js}', 1) }}?digest=${this.hash}" />`; }
+function deferScript(js) { return `<script defer src="{{ pathto('_static/${js}', 1) }}?digest=${this.hash}"></script>`; }
+// Adding FA without preloading
+function script(js) { return `<script src="{{ pathto('_static/${js}', 1) }}?digest=${this.hash}"></script>`; }
 
 /*******************************************************************************
  * the assets to load in the macro
@@ -70,14 +71,15 @@ function macroTemplate({ compilation }) {
     {% endmacro %}
 
     {% macro head_js_preload() %}
+      <!-- So that users can add custom icons -->
+      ${fa_scripts.map(script.bind(compilation)).join("\n")}
       <!-- Pre-loaded scripts that we'll load fully later -->
-      ${theme_scripts.map(preload.bind(compilation)).join("\n")}
+      ${theme_scripts.map(preloadScript.bind(compilation)).join("\n")}
     {% endmacro %}
 
     {% macro body_post() %}
       <!-- Scripts loaded after <body> so the DOM is not blocked -->
-      ${fa_scripts.map(script.bind(compilation)).join("\n")}
-      ${theme_scripts.map(script.bind(compilation)).join("\n")}
+      ${theme_scripts.map(deferScript.bind(compilation)).join("\n")}
     {% endmacro %}
   `);
 }
