chore: load styles on development mode

2 files changed, 41 insertions, 0 deletions

diff --git a/htdocs/src/js/app.js b/htdocs/src/js/app.js
new file mode 100644
index 0000000..1b7bbc6
--- /dev/null
+++ b/htdocs/src/js/app.js
@@ -0,0 +1,22 @@
+import { isStyleJsExists } from './utilities/helpers';
+
+/**
+ * Add style.js script for development purposes.
+ */
+function loadWebpackStyles() {
+  if (isStyleJsExists()) {
+    const head = document.querySelector('head');
+    const script = document.createElement('script');
+    script.src = 'assets/js/style.js';
+    head.appendChild(script);
+  }
+}
+
+/**
+ * Initialize the website with the projects list.
+ */
+function init() {
+  loadWebpackStyles();
+}
+
+init();
diff --git a/htdocs/src/js/utilities/helpers.js b/htdocs/src/js/utilities/helpers.js
new file mode 100644
index 0000000..470c49c
--- /dev/null
+++ b/htdocs/src/js/utilities/helpers.js
@@ -0,0 +1,19 @@
+/**
+ * Check the size of the current viewport.
+ * @returns {Boolean} True if viewport lower than 1200px; false otherwise.
+ */
+function isSmallVw() {
+  return window.innerWidth < 1200;
+}
+
+/**
+ * Check if /assets/styles.js exists (Webpack dev mode).
+ * @returns {Boolean} True if style.js exists ; false otherwise.
+ */
+async function isStyleJsExists() {
+  const filePath = 'assets/js/style.js';
+  const response = await fetch(filePath);
+  return response.status === 200;
+}
+
+export { isSmallVw, isStyleJsExists };