Feat/redesign visual

.github/workflows/preview.yml

@@ -0,0 +1,64 @@
+name: Preview
+
+on:
+  pull_request:
+    branches: [ main ]
+    types: [opened, reopened, synchronize, closed]
+
+permissions:
+  contents: read
+  pull-requests: write
+
+# Serialize: all previews share one deploy branch on site-preview.
+concurrency:
+  group: site-preview-deploy
+  cancel-in-progress: false
+
+jobs:
+  deploy-preview:
+    # Fork PRs (e.g. Weblate) can't access PREVIEW_TOKEN.
+    if: github.event.pull_request.head.repo.full_name == github.repository
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Set up PHP 8.4
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: 8.4
+          tools: composer
+
+      - name: Install dependencies
+        run: composer i
+
+      - name: Disable Matomo on previews
+        run: sed -i "/'matomo_container'/d" config.production.php
+
+      - name: Build site
+        run: composer prod
+
+      # mix() and locale_path() emit root-relative URLs ("/assets/...", "/posts"),
+      # but previews live under a sub-path — prefix them so assets/links resolve.
+      # Only the first URL per attribute is prefixed and CSS url(/...) is untouched;
+      # revisit if responsive `srcset` or root-relative `url()` gets added.
+      - name: Rewrite root-relative URLs to the PR sub-path
+        run: |
+          BASE="/site-preview/pr-preview/pr-${{ github.event.pull_request.number }}"
+          find build_production -name '*.html' -print0 \
+            | xargs -0 perl -i -pe "s{(href|src|srcset|content)=\"/(?!/)}{\$1=\"${BASE}/}g"
+
+      - name: Deploy preview
+        uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: ./build_production/
+          pages-base-url: librecodecoop.github.io/site-preview
+          deploy-repository: LibreCodeCoop/site-preview
+          preview-branch: main
+          wait-for-pages-deployment: false
+          token: ${{ secrets.PREVIEW_TOKEN }}
+          comment: ${{ github.event.pull_request.user.type != 'Bot' }}

config.php

@@ -5,6 +5,9 @@
 return [
     'production' => false,
     'matomo_container' => 'Ux1Y5m98_dev_08f02616a270a3d80b35beb7',
+    // Public client-side widget identifier (not a secret): it is always visible in the rendered HTML.
+    // Kept in config so it is configurable per environment, like matomo_container.
+    'chatwoot_token' => '1FWLmSUAXnZd8qhUB5rsPCdq',
     'baseUrl' => '/',
     'title' => 'LibreCode',
     'description' => 'Cooperativa de tecnologia da informação especializada em desenvolvimento de soluções com licença livre.',

package.json

@@ -17,10 +17,14 @@
         "sass-loader": "^12.6.0",
         "tailwindcss": "^3.1.6"
     },
+    "overrides": {
+        "webpackbar": "^7.0.0"
+    },
     "dependencies": {
         "animate.css": "^4.1.0",
         "bootstrap": "^5.0.0",
         "glightbox": "^3.1.0",
+        "gsap": "^3.12.5",
         "ionicons": "^5.0.1",
         "isotope-layout": "^3.0.6",
         "jquery": "^3.5.1",

source/_assets/js/main.js

@@ -15,9 +15,52 @@ import '../../../source/assets/lib/mobile-nav/mobile-nav.js';
 import '../../../source/assets/lib/easing/easing.min.js';
 import '../../../source/assets/lib/waypoints/waypoints.min.js';
 
+// Exposed as globals so librecode-motion.js (a plain, non-module script) can use them.
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
+gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
+window.gsap = gsap;
+window.ScrollTrigger = ScrollTrigger;
+window.ScrollToPlugin = ScrollToPlugin;
+
 (function ($) {
   "use strict";
 
+  function normalizePath(path) {
+    return path.replace(/\/+$/, '') || '/';
+  }
+
+  function headerHeight() {
+    return $('#header').outerHeight() || 0;
+  }
+
+  // Smooth scroll via GSAP ScrollToPlugin, falling back to jQuery.
+  function smoothScrollTo(scrollTop) {
+    var targetScroll = Math.max(0, scrollTop);
+
+    $('html, body').stop(true);
+    if (window.gsap) {
+      window.gsap.killTweensOf(window);
+    }
+
+    if (window.gsap && window.ScrollToPlugin) {
+      window.gsap.to(window, {
+        duration: 0.9,
+        ease: 'power3.inOut',
+        overwrite: 'auto',
+        scrollTo: { y: targetScroll, autoKill: false },
+        onUpdate: function () {
+          if (window.ScrollTrigger) {
+            window.ScrollTrigger.update();
+          }
+        }
+      });
+    } else {
+      $('html, body').animate({ scrollTop: targetScroll }, 900, 'easeInOutExpo');
+    }
+  }
+
   // Preloader (if the #preloader div exists)
   $(window).on('load', function () {
     if ($('#preloader').length) {
@@ -36,7 +79,7 @@ import '../../../source/assets/lib/waypoints/waypoints.min.js';
     }
   });
   $('.back-to-top').click(function(){
-    $('html, body').animate({scrollTop : 0},1500, 'easeInOutExpo');
+    smoothScrollTo(0);
     return false;
   });
 
@@ -58,61 +101,67 @@ import '../../../source/assets/lib/waypoints/waypoints.min.js';
     $('#header').addClass('header-scrolled');
   }
 
-  // Smooth scroll for the navigation and links with .scrollto classes
-  $('.main-nav a, .mobile-nav a, .scrollto').on('click', function() {
-    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
-      var target = $(this.hash);
-      if (target.length) {
-        var top_space = 0;
+  // Smooth scroll for the navigation and same-page section links.
+  $('.main-nav a, .mobile-nav a, .scrollto, .lc-btn[href*="#"], .lc-footer a[href*="#"]').on('click', function(event) {
+    var href = this.getAttribute('href');
+    if (!href || href === '#') return;
+
+    try {
+      var url = new URL(href, window.location.href);
+
+      if (normalizePath(url.pathname) == normalizePath(location.pathname) && url.hostname == location.hostname) {
+        var target = $(url.hash);
+        if (target.length) {
+          event.preventDefault();
+          var top_space = 0;
 
-        if ($('#header').length) {
-          top_space = $('#header').outerHeight();
+          if ($('#header').length) {
+            top_space = headerHeight();
 
-          if (! $('#header').hasClass('header-scrolled')) {
-            top_space = top_space - 20;
+            if (! $('#header').hasClass('header-scrolled')) {
+              top_space = top_space - 20;
+            }
           }
-        }
 
-        $('html, body').animate({
-          scrollTop: target.offset().top - top_space
-        }, 1500, 'easeInOutExpo');
+          smoothScrollTo(target.offset().top - top_space);
 
-        if ($(this).parents('.main-nav, .mobile-nav').length) {
-          $('.main-nav .active, .mobile-nav .active').removeClass('active');
-          $(this).closest('li').addClass('active');
-        }
+          if ($(this).parents('.main-nav, .mobile-nav').length) {
+            $('.main-nav .active, .mobile-nav .active').removeClass('active');
+            $(this).closest('li').addClass('active');
+          }
 
-        if ($('body').hasClass('mobile-nav-active')) {
-          $('body').removeClass('mobile-nav-active');
-          $('.mobile-nav-toggle i').toggleClass('fa-times fa-bars');
-          $('.mobile-nav-overly').fadeOut();
+          if ($('body').hasClass('mobile-nav-active')) {
+            $('body').removeClass('mobile-nav-active');
+            $('.mobile-nav-toggle i').toggleClass('fa-times fa-bars');
+            $('.mobile-nav-overly').fadeOut();
+          }
+          return false;
         }
-        return false;
       }
-    }
+    } catch (e) { return; }
   });
 
   // Navigation active state on scroll
   var nav_sections = $('section[id], main[id]');
   var main_nav = $('.main-nav, .mobile-nav');
-  var main_nav_height = $('#header').outerHeight();
 
   function updateActiveNavOnScroll(current_scroll_position) {
     var matched = false;
+    var main_nav_height = headerHeight();
     nav_sections.each(function() {
       var $section = $(this);
       var top = $section.offset().top - main_nav_height;
       var bottom = top + $section.outerHeight();
 
       if (current_scroll_position >= top && current_scroll_position <= bottom) {
         var id = $section.attr('id');
-        var current_path = window.location.pathname.replace(/\/+$/, '');
+        var current_path = normalizePath(window.location.pathname);
         var $link = main_nav
           .find('a[href$="#' + id + '"]')
           .filter(function() {
             try {
               var url = new URL(this.getAttribute('href'), window.location.origin);
-              var link_path = url.pathname.replace(/\/+$/, '');
+              var link_path = normalizePath(url.pathname);
               return link_path === current_path;
             } catch (e) { return false; }
           });
@@ -135,20 +184,19 @@ import '../../../source/assets/lib/waypoints/waypoints.min.js';
     var hadMatch = updateActiveNavOnScroll($(window).scrollTop());
 
     if (!hadMatch && main_nav.find('li.active').length === 0) {
-      var current_path = window.location.pathname.replace(/\/+$/, '');
-      main_nav.find('a').each(function() {
+      var current_path = normalizePath(window.location.pathname);
+      var $matches = main_nav.find('a').filter(function() {
         var href = this.getAttribute('href');
-        if (!href || href.indexOf('#') !== -1) return;
+        if (!href || href.indexOf('#') !== -1) return false;
         try {
           var url = new URL(href, window.location.origin);
-          var link_path = url.pathname.replace(/\/+$/, '');
-          if (link_path === current_path) {
-            main_nav.find('li').removeClass('active');
-            $(this).parent('li').addClass('active');
-            return false;
-          }
-        } catch (e) { console.log(e); }
+          return normalizePath(url.pathname) === current_path;
+        } catch (e) { return false; }
       });
+      if ($matches.length) {
+        main_nav.find('li').removeClass('active');
+        $matches.parent('li').addClass('active');
+      }
     }
   });
 
@@ -175,4 +223,3 @@ import '../../../source/assets/lib/waypoints/waypoints.min.js';
   });
 
 })(jQuery);
-