ultimate-jekyll-manager 0.0.81 → 0.0.83

package/CLAUDE.md

@@ -39,6 +39,19 @@ src/assets/themes = Theme scss and js files that are can be picked and used by t
 DO NOT USE `bg-light`, `bg-dark`, `text-light`, or `text-dark`. We support BOTH light and dark mode, so instead use `bg-body`, `bg-body-secondary`, `bg-body-tertiary`, `text-body` and for buttons you can use `btn-adaptive` or `btn-outline-adaptive`.
 These classes adapt to light and dark mode automatically.
 
+## Libraries
+I have some library preferences that I want you to follow:
+
+### WebManager
+We use a custom library called `web-manager` to manage various aspects of the site. Please make yourself familiar with it by reviewing it: `/Users/ian/Developer/Repositories/ITW-Creative-Works/web-manager/src`
+It offers various ultities like webManager.auth(), webManager.utilities(), webManager.sentry(), webManager.dom(). You should be using these utilities instead of writing your own code all the time.
+
+## FormManager
+We use a custom library called `form-manager` to manage forms on the site. Please make yourself familiar with it by reviewing it: `/Users/ian/Developer/Repositories/ITW-Creative-Works/ultimate-jekyll-manager/src/assets/js/libs/form-manager.js`
+* A good example of how to use it is the contact page
+  * HTML: `/Users/ian/Developer/Repositories/ITW-Creative-Works/ultimate-jekyll-manager/src/defaults/dist/_layouts/themes/classy/frontend/pages/contact.html`
+  * JS: `/Users/ian/Developer/Repositories/ITW-Creative-Works/ultimate-jekyll-manager/src/assets/js/pages/contact/index.js`
+
 ## Audits
 I may ask you to help me fix problems identified by the AUDIT TASK (@src/gulp/tasks/audit.js)
 * In that case, please LOOK AT THE AUDIT FILES (Which I will provide the location to) and help me fix the issues ONE BY ONE.

package/TODO.md

@@ -3,6 +3,10 @@ NEW TODO
 - service working failing to load scripts??
 - test SW on live site (and lighthouse)
 - cloudflare 1y cache on js and css (it's CB anyway so this will never matter)
+- LOGIN NOT WORKING: email and password says its wrong, google just takes you back to the signin page and nothing happens
+- FIx formmanager .getData() it keeps returning an empty object, make it work flawlessyly
+- It keeps testing whether there is a "." every time it reads or writes. just call the getNested and setNested functions and then check for the DOT inside those functions
+- form manager should NOT submit if the button that was clicked is disabled (class or attribute)
 
 Make an admin dashboard backend
 
@@ -17,6 +21,10 @@ Admin dashboard backend pages
   * Create the product in stripe, paypal, etc
 
 
+REVIEW page
+- Make a rewarded review page. When the user lands there, it explains that they COULD win $25 Amazon giftcard for writing a reivew. They upload the screenshot then it sends them to a fake countdown page where 3 winners are picked every week. So it conts down and tells them to refresht he page. At the end of the week it picks 3 random winners but it should never axtually pick anyone and just tell them to try again next week. But it should look legit.
+
+
 MIGRATIONS
 
 TEST:
@@ -110,10 +118,8 @@ user:sign-up fetch request has new structure including context
 ---------
 
 
-INCLUDE THIS in css build process
-- src/defaults/dist/_includes/master/assets/css/defaults.css
-- src/defaults/dist/_includes/master/assets/css/cookieconsent.css
-- social buttons too?? or make our own??
+
+
 
 THINGS TO ADD
 - auto cached translations
@@ -141,6 +147,8 @@ Terms of service
 - https://sentry.io/terms/
 - https://docs.github.com/en/site-policy/github-terms/github-terms-of-service#the-github-terms-of-service
 - https://help.instagram.com/termsofuse
+- https://discord.com/terms
+- Update arbitration: https://www.equifax.com/terms/
 
 prechat-btn
 - should have width and height set to 0px INLINE so it doesnt appear HUGE when loading

package/dist/assets/css/core/exit-popup.scss

@@ -0,0 +1,17 @@
+// Simple wave animation for the hand icon
+.animation-hand-wave {
+  animation: wave 1s ease-in-out infinite;
+  transform-origin: 70% 70%;
+}
+
+// Keyframe animation for waving hand
+@keyframes wave {
+  0%, 100% { transform: rotate(0deg); }
+  10%, 30% { transform: rotate(14deg); }
+  20%, 40% { transform: rotate(-8deg); }
+  50% { transform: rotate(14deg); }
+  60% { transform: rotate(-4deg); }
+  70% { transform: rotate(14deg); }
+  80% { transform: rotate(-4deg); }
+  90% { transform: rotate(10deg); }
+}

package/dist/assets/css/core/utilities.scss

@@ -7,12 +7,20 @@
 
 // Properly hide things
 .hidden, [hidden] {
-  display: none !important
+  display: none !important;
 }
 
-// Show disabled mouse on disabled things
-.disabled, [disabled] {
+.disabled,
+[disabled],
+:disabled {
   cursor: not-allowed !important;
+  pointer-events: all !important;
+
+  // Disable pointer events on all children inside disabled buttons and links
+  // This helps fix event bubbling issues for click listeners
+  * {
+    pointer-events: none !important;
+  }
 }
 
 // Prevent pointer events on all children inside buttons and links

package/dist/assets/css/ultimate-jekyll-manager.scss

@@ -16,8 +16,8 @@
 @use 'core/initialize' as *;
 @use 'core/utilities' as *;
 @use 'core/animations' as *;
-@use 'core/buttons' as *;
 @use 'core/alert' as *;
+@use 'core/exit-popup' as *;
 
 // Import page-specific styles
 @use '_page-specific' as *;

package/dist/assets/js/core/exit-popup.js

@@ -23,24 +23,44 @@ export default function (Manager, options) {
     setupMouseLeaveDetection();
   });
 
+  // Make this available on window object in DEV mode for testing
+  /* @dev-only:start */
+  {
+    window.showExitPopup = showExitPopup;
+  }
+  /* @dev-only:end */
+
   function updateModalContent($modal) {
     // Update title
-    const $title = $modal.querySelector('.modal-title');
+    const $title = $modal.querySelector('.modal-exit-title');
     if ($title && config.title) {
       $title.textContent = config.title;
     }
 
-    // Update message
-    const $message = $modal.querySelector('.modal-body p');
+    // Update main message
+    const $message = $modal.querySelector('.modal-exit-message');
     if ($message && config.message) {
       $message.textContent = config.message;
     }
 
-    // Update button
-    const $button = $modal.querySelector('.modal-footer .btn-primary');
+    // Update offer title
+    const $offerTitleText = $modal.querySelector('.modal-exit-offer-title-text');
+    if ($offerTitleText && config.offerTitle) {
+      $offerTitleText.textContent = config.offerTitle;
+    }
+
+    // Update offer description
+    const $offerDesc = $modal.querySelector('.modal-exit-offer-description');
+    if ($offerDesc && config.offerDescription) {
+      $offerDesc.textContent = config.offerDescription;
+    }
+
+    // Update main button
+    const $button = $modal.querySelector('.modal-exit-button');
+    const $buttonText = $modal.querySelector('.modal-exit-button-text');
     if ($button && config.okButton) {
-      if (config.okButton.text) {
-        $button.textContent = config.okButton.text;
+      if ($buttonText && config.okButton.text) {
+        $buttonText.textContent = config.okButton.text;
       }
       if (config.okButton.link) {
         // Add UTM parameters to track exit popup conversions
@@ -52,6 +72,12 @@ export default function (Manager, options) {
       }
     }
 
+    // Update "Maybe later" link text if configured
+    const $dismissLink = $modal.querySelector('.modal-exit-dismiss');
+    if ($dismissLink && config.dismissText) {
+      $dismissLink.textContent = config.dismissText;
+    }
+
     // Remove hidden attribute to make modal available
     $modal.removeAttribute('hidden');
   }
@@ -116,11 +142,16 @@ export default function (Manager, options) {
     try {
       modal.show();
 
+      // Add fade class after modal is shown to avoid conflicts with animation-slide-up
+      $modalElement.addEventListener('shown.bs.modal', () => {
+        $modalElement.classList.add('fade');
+      }, { once: true });
+
       // Track exit popup shown
       trackExitPopupShown();
 
-      // Track button clicks on the exit popup
-      const $button = $modalElement.querySelector('.modal-footer .btn');
+      // Track button clicks on the exit popup (main CTA button)
+      const $button = $modalElement.querySelector('.modal-exit-button');
       if ($button && !$button.hasAttribute('data-exit-popup-tracked')) {
         $button.setAttribute('data-exit-popup-tracked', 'true');
         $button.addEventListener('click', () => {
@@ -128,6 +159,13 @@ export default function (Manager, options) {
         });
       }
 
+      // Remove focus from any focused element before hiding to prevent aria-hidden warning
+      $modalElement.addEventListener('hide.bs.modal', () => {
+        if (document.activeElement && $modalElement.contains(document.activeElement)) {
+          document.activeElement.blur();
+        }
+      }, { once: true });
+
       // Track modal dismiss
       $modalElement.addEventListener('hidden.bs.modal', () => {
         trackExitPopupDismissed();

package/dist/assets/js/core/{page-loader.js → init.js}

@@ -10,6 +10,21 @@ export default function (Manager, options) {
     }, 16);
   };
 
+  // Attach click listener to prevent clicks on disabled elements
+  document.addEventListener('click', (e) => {
+    const $target = e.target;
+    if ($target.closest('*[disabled], *.disabled, :disabled')) {
+      // Log disabled click attempt
+      console.log('Click prevented (disabled):', $target);
+
+      // Prevent all actions
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      e.stopPropagation();
+      return false;
+    }
+  }, { capture: true });
+
   // Check if the window is already loaded
   if (document.readyState === 'complete') {
     // Already loaded, remove immediately

package/dist/assets/js/libs/auth/pages.js

@@ -9,9 +9,15 @@ export default function (Manager) {
   // Form manager instance
   let formManager = null;
 
+  // Shared FormManager configuration
+  const formManagerConfig = {
+    allowMultipleSubmissions: false,
+    validateOnSubmit: true,
+  };
+
   // Check query string for popup parameter
   const url = new URL(window.location.href);
-  const useAuthPopup = url.searchParams.get('authPopup') === 'true';
+  const useAuthPopup = url.searchParams.get('authPopup') === 'true' || window !== window.top;
 
   // Handle DOM ready
   webManager.dom().ready()
@@ -58,11 +64,8 @@ export default function (Manager) {
   // Initialize signin form
   function initializeSigninForm() {
     formManager = new FormManager('#signin-form', {
-      submitButtonLoadingText: 'Signing in...',
-      allowMultipleSubmissions: false,
-      validateOnSubmit: false, // We'll handle validation conditionally
-      fieldErrorClass: 'is-invalid',
-      fieldSuccessClass: 'is-valid'
+      ...formManagerConfig,
+      submitButtonLoadingText: 'Signing in...'
     });
 
     // Handle form submission
@@ -85,7 +88,8 @@ export default function (Manager) {
 
       try {
         if (provider === 'email') {
-          await handleEmailSignin();
+          // Pass the already collected data to avoid re-collecting from disabled fields
+          await handleEmailSignin(data);
         } else if (provider) {
           await signInWithProvider(provider, 'signin');
         }
@@ -105,11 +109,8 @@ export default function (Manager) {
   // Initialize signup form
   function initializeSignupForm() {
     formManager = new FormManager('#signup-form', {
-      submitButtonLoadingText: 'Creating account...',
-      allowMultipleSubmissions: false,
-      validateOnSubmit: false, // We'll handle validation conditionally
-      fieldErrorClass: 'is-invalid',
-      fieldSuccessClass: 'is-valid'
+      ...formManagerConfig,
+      submitButtonLoadingText: 'Creating account...'
     });
 
     // Handle form submission
@@ -132,7 +133,8 @@ export default function (Manager) {
 
       try {
         if (provider === 'email') {
-          await handleEmailSignup();
+          // Pass the already collected data to avoid re-collecting from disabled fields
+          await handleEmailSignup(data);
         } else if (provider) {
           await signInWithProvider(provider, 'signup');
         }
@@ -152,12 +154,9 @@ export default function (Manager) {
   // Initialize reset form
   function initializeResetForm() {
     formManager = new FormManager('#reset-form', {
+      ...formManagerConfig,
       submitButtonLoadingText: 'Sending...',
-      submitButtonSuccessText: 'Email Sent!',
-      allowMultipleSubmissions: false,
-      validateOnSubmit: true,
-      fieldErrorClass: 'is-invalid',
-      fieldSuccessClass: 'is-valid'
+      submitButtonSuccessText: 'Email Sent!'
     });
 
     // Handle form submission
@@ -165,8 +164,11 @@ export default function (Manager) {
       // Prevent FormManager's default submit handler
       e.preventDefault();
 
+      const { data } = e.detail;
+
       try {
-        await handlePasswordReset();
+        // Pass the already collected data to avoid re-collecting from disabled fields
+        await handlePasswordReset(data);
       } catch (error) {
         // Set form back to ready state
         formManager.setFormState('ready');
@@ -330,9 +332,8 @@ export default function (Manager) {
     return userCredential;
   }
 
-  async function handleEmailSignup() {
-    // Get form data from FormManager (already validated by FormManager)
-    const formData = formManager.getData();
+  async function handleEmailSignup(formData) {
+    // Use the form data passed from the submit event (already validated)
 
     // Sanitize email by trimming
     const email = formData.email?.trim() || '';
@@ -384,14 +385,16 @@ export default function (Manager) {
     }
   }
 
-  async function handleEmailSignin() {
-    // Get form data from FormManager (already validated by FormManager)
-    const formData = formManager.getData();
+  async function handleEmailSignin(formData) {
+    // Use the form data passed from the submit event (already validated)
 
     // Sanitize email by trimming
     const email = formData.email?.trim() || '';
     const password = formData.password || '';
 
+    // Log
+    console.log('Attempting email sign-in for:', email);
+
     // Sign in with email and password
     const userCredential = await attemptEmailSignIn(email, password);
 
@@ -405,9 +408,8 @@ export default function (Manager) {
     formManager.setFormState('submitted');
   }
 
-  async function handlePasswordReset() {
-    // Get form data from FormManager (already validated by FormManager)
-    const formData = formManager.getData();
+  async function handlePasswordReset(formData) {
+    // Use the form data passed from the submit event (already validated)
 
     // Sanitize email by trimming
     const email = formData.email?.trim() || '';
@@ -462,10 +464,6 @@ export default function (Manager) {
 
       const auth = getAuth();
 
-      // Log auth configuration for debugging
-      console.log('[Debug] Auth domain:', auth.config.authDomain);
-      console.log('[Debug] API Key:', auth.config.apiKey ? 'Set' : 'Not set');
-
       let provider;
 
       // Create provider based on provider name
@@ -486,10 +484,19 @@ export default function (Manager) {
           throw new Error(`Unsupported provider: ${providerName}`);
       }
 
-      // Log current domain for debugging
-      console.log('[Debug] Current domain:', window.location.hostname);
-      console.log('[Debug] Current origin:', window.location.origin);
-      console.log('[Debug] Auth method:', useAuthPopup ? 'popup' : 'redirect');
+      // Show warning in dev mode when using redirect
+      if (webManager.isDevelopment() && !useAuthPopup) {
+        webManager.utilities().showNotification(
+          'OAuth redirect may fail in development. Use localhost:4000 or add ?authPopup=true to the URL',
+          {
+            type: 'warning',
+            timeout: 10000 // Show for 10 seconds
+          }
+        );
+
+        // Wait
+        await new Promise(resolve => setTimeout(resolve, 1000));
+      }
 
       // Use popup if query parameter is set, otherwise use redirect
       if (useAuthPopup) {

package/dist/assets/js/libs/form-manager.js

@@ -172,16 +172,29 @@ export class FormManager extends EventTarget {
     // Collect form data
     const formData = this.collectFormData();
 
+    // Build the submit event detail
+    const submitEvent = new CustomEvent('submit', {
+      detail: {
+        data: formData,
+        form: this.form,
+        submitButton: this.clickedSubmitButton
+      },
+      cancelable: true
+    });
+
     /* @dev-only:start */
     {
-      console.log(`[FormManager] Submit event triggered on ${this.form.id || 'form'}`, formData);
+      console.log(`[FormManager] Submit event triggered on ${this.form.id}`, formData, submitEvent.detail.submitButton);
     }
     /* @dev-only:end */
 
     // Validate if enabled
+    console.log('-----1');
     if (this.config.validateOnSubmit) {
+    console.log('-----2');
       const validation = this.validate(formData);
       if (!validation.isValid) {
+    console.log('-----3');
         this.showErrors(validation.errors);
         // Show a summary notification for validation errors
         const errorCount = Object.keys(validation.errors).length;
@@ -197,15 +210,6 @@ export class FormManager extends EventTarget {
     this.setFormState('submitting');
 
     // Emit submit event with the clicked submit button
-    const submitEvent = new CustomEvent('submit', {
-      detail: {
-        data: formData,
-        form: this.form,
-        submitButton: this.clickedSubmitButton
-      },
-      cancelable: true
-    });
-
     this.dispatchEvent(submitEvent);
 
     // Reset clicked button after dispatching event
@@ -511,6 +515,7 @@ export class FormManager extends EventTarget {
     const formData = new FormData(this.form);
     const data = {};
 
+
     // Convert FormData to plain object with support for dot notation
     for (const [key, value] of formData.entries()) {
       // Check if key contains dots for nested structure

package/dist/assets/js/pages/admin/notifications/new/index.js

@@ -89,6 +89,11 @@ function initializeUI() {
   // Title character counter
   const $titleInput = document.querySelector('input[name="notification.title"]');
   if ($titleInput) {
+    // Set default value in dev mode
+    if (webManager.isDevelopment()) {
+      $titleInput.value = 'Test Notification Title';
+    }
+
     $titleInput.addEventListener('input', (e) => {
       const length = e.target.value.length;
       const $titleCount = document.querySelector('#title-char-count');
@@ -102,6 +107,11 @@ function initializeUI() {
   // Body character counter
   const $bodyInput = document.querySelector('textarea[name="notification.body"]');
   if ($bodyInput) {
+    // Set default value in dev mode
+    if (webManager.isDevelopment()) {
+      $bodyInput.value = 'This is a test notification body message for development.';
+    }
+
     $bodyInput.addEventListener('input', (e) => {
       const length = e.target.value.length;
       const $bodyCount = document.querySelector('#body-char-count');
@@ -174,10 +184,8 @@ function handleFormChange(event) {
 
 // Handle form submission
 async function handleSubmit(event) {
-  const formData = formManager.getData();
-
-  // Log
-  console.log('Submitting notification with data:', formData);
+  // Get data from event detail if available, otherwise from formManager
+  const formData = event.detail?.data || formManager.getData();
 
   try {
     // Transform data for API
@@ -189,6 +197,7 @@ async function handleSubmit(event) {
       filtered: { total: stats.filteredUsers }
     };
 
+
     // Call API
     const response = await sendNotification(payload);
 
@@ -207,25 +216,38 @@ async function handleSubmit(event) {
 
 // Transform data for API
 function transformDataForAPI(formData) {
+  console.log('[Debug] transformDataForAPI called');
+  console.log('[Debug] formData received:', formData);
+  console.log('[Debug] formData.notification:', formData.notification);
+
   const now = new Date();
   const notification = formData.notification || {};
 
+  console.log('[Debug] notification object:', notification);
+  console.log('[Debug] notification.clickAction:', notification.clickAction);
+  console.log('[Debug] typeof notification:', typeof notification);
+  console.log('[Debug] Object.keys(notification):', Object.keys(notification));
+
   // Generate ID
   const id = now.getTime();
 
   // Build click action URL with tracking
-  const clickActionUrl = new URL('https://promo-server.itwcreativeworks.com/redirect/notification');
-  clickActionUrl.searchParams.set('id', id);
-  clickActionUrl.searchParams.set('type', 'notification');
-  clickActionUrl.searchParams.set('url', notification.clickAction);
+  const redirectUrl = new URL('https://promo-server.itwcreativeworks.com/redirect/notification');
+  redirectUrl.searchParams.set('id', id);
+  redirectUrl.searchParams.set('type', 'notification');
+
+  // Make sure we have the actual clickAction value
+  const clickActionValue = notification.clickAction || '';
+  console.log('[Debug] clickActionValue to be set in URL:', clickActionValue);
+  redirectUrl.searchParams.set('url', clickActionValue);
 
   return {
     id: id,
     notification: {
-      icon: notification.icon,
-      title: notification.title,
-      body: notification.body,
-      clickAction: clickActionUrl.toString()
+      icon: notification.icon || '',
+      title: notification.title || '',
+      body: notification.body || '',
+      clickAction: redirectUrl.toString()
     },
     created: now.toISOString(),
     channels: formData.channels || {},

package/dist/assets/js/pages/blog/index.js

@@ -39,8 +39,6 @@ function setupNewsletterForm() {
     resetOnSuccess: true,
     submitButtonLoadingText: 'Subscribing...',
     submitButtonSuccessText: 'Subscribed!',
-    fieldErrorClass: 'is-invalid',
-    fieldSuccessClass: 'is-valid'
   });
 
   // Listen to FormManager events

package/dist/assets/js/pages/contact/index.js

@@ -33,8 +33,6 @@ function setupForm() {
     resetOnSuccess: true,
     submitButtonLoadingText: 'Sending...',
     submitButtonSuccessText: 'Message Sent!',
-    fieldErrorClass: 'is-invalid',
-    fieldSuccessClass: 'is-valid'
   });
 
   // Listen to FormManager events

package/dist/assets/js/pages/download/index.js

@@ -300,8 +300,6 @@ function setupMobileEmailForms() {
       allowMultipleSubmissions: false,
       submitButtonLoadingText: 'Sending...',
       submitButtonSuccessText: 'Sent!',
-      fieldErrorClass: 'is-invalid',
-      fieldSuccessClass: 'is-valid'
     });
 
     formManager.addEventListener('submit', (e) => handleMobileEmailSubmit(e, platform));

package/dist/assets/js/ultimate-jekyll-manager.js

@@ -1,3 +1,10 @@
+// Static imports for core modules (bundled together for efficiency)
+import initModule from '__main_assets__/js/core/init.js';
+import authModule from '__main_assets__/js/core/auth.js';
+import lazyLoadingModule from '__main_assets__/js/core/lazy-loading.js';
+import queryStringsModule from '__main_assets__/js/core/query-strings.js';
+import serviceWorkerModule from '__main_assets__/js/core/service-worker.js';
+
 // Ultimate Jekyll Manager Module
 export default async function (Manager, options) {
   // Shortcuts
@@ -9,16 +16,14 @@ export default async function (Manager, options) {
   // Log
   console.log('Global module loaded successfully (assets/js/ultimate-jekyll-manager.js)');
 
-  // Core modules to always load
-  const fixedModules = [
-    'page-loader.js',
-    'auth.js',
-    'lazy-loading.js',
-    'query-strings.js',
-    'service-worker.js'
-  ];
+  // Initialize fixed modules synchronously (already loaded via static imports)
+  initModule(Manager, options);
+  authModule(Manager, options);
+  lazyLoadingModule(Manager, options);
+  queryStringsModule(Manager, options);
+  serviceWorkerModule(Manager, options);
 
-  // Conditionally loaded modules based on config
+  // Conditionally loaded modules based on config (keep as dynamic imports)
   const conditionalModules = [
     { path: 'chatsy.js', configKey: 'chatsy' },
     { path: 'cookieconsent.js', configKey: 'cookieConsent' },
@@ -26,18 +31,9 @@ export default async function (Manager, options) {
     { path: 'social-sharing.js', configKey: 'socialSharing' }
   ];
 
-  // Load all modules in parallel
+  // Load conditional modules in parallel
   const modulePromises = [];
 
-  // Add fixed modules
-  for (const modulePath of fixedModules) {
-    modulePromises.push(
-      import(`__main_assets__/js/core/${modulePath}`)
-        .then(({ default: moduleFunc }) => moduleFunc(Manager, options))
-        .catch(error => console.error(`Failed to load ${modulePath}:`, error))
-    );
-  }
-
   // Add conditional modules if enabled
   for (const module of conditionalModules) {
     const moduleConfig = webManager.config[module.configKey];
@@ -52,12 +48,12 @@ export default async function (Manager, options) {
     }
   }
 
-  // Add theme loading
+  // Add theme loading (keep as dynamic import since themes can vary)
   modulePromises.push(
     import('__theme__/_theme.js')
       .catch(error => console.error('Failed to load theme:', error))
   );
 
-  // Wait for all modules to load
+  // Wait for all conditional modules to load
   await Promise.all(modulePromises);
 }

package/dist/assets/themes/classy/_theme.scss

@@ -46,6 +46,7 @@ $border-radius-pill: 50rem;
 @import 'css/base/variables';
 
 // Import base styles
+@import 'css/base/animations';
 @import 'css/base/backgrounds';
 @import 'css/base/borders';
 @import 'css/base/soft-colors';
@@ -69,6 +70,7 @@ $border-radius-pill: 50rem;
 @import 'css/components/links';
 @import 'css/components/logo-scroll';
 @import 'css/components/spinners';
+@import 'css/components/text';
 
 // Global theme improvements
 body {