@seip/blue-bird 0.6.2 → 0.6.4

package/backend/routes/frontend.js

@@ -4,7 +4,7 @@ import App from "@seip/blue-bird/core/app.js";
 
 const routerFrontendExample = new Router("/", { seo: true });
 
-routerFrontendExample.use(App.helmet());
+//routerFrontendExample.use(App.helmet());
 
 routerFrontendExample.get("/", (req, res) => {
   return Template.render(res, "index", {

package/docker-compose.yml

@@ -22,7 +22,7 @@ services:
     container_name: ${TITLE:-bluebird}-app
     restart: unless-stopped
     ports:
-      - "${PORT:-3000}:3000"
+      - "${PORT:-3000}:${PORT:-3000}"
     volumes:
       - .:/app
       - /app/node_modules

package/frontend/public/js/blue-bird.js

@@ -1197,11 +1197,11 @@ window.Animations = {
     fadeUp: (selector, delay = 0) => {
         return anime({
             targets: selector,
-            translateY: [40, 0],
+            translateY: [20, 0],
             opacity: [0, 1],
-            duration: 800,
+            duration: 350,
             delay: delay,
-            easing: 'easeOutQuint'
+            easing: 'easeOutQuad'
         });
     },
     fadeIn: (selector, delay = 0) => {
@@ -1216,21 +1216,21 @@ window.Animations = {
     staggerFadeUp: (selector) => {
         return anime({
             targets: selector,
-            translateY: [30, 0],
+            translateY: [15, 0],
             opacity: [0, 1],
-            delay: anime.stagger(200, { start: 200 }),
-            duration: 700,
-            easing: 'easeOutBack'
+            delay: anime.stagger(60, { start: 100 }),
+            duration: 300,
+            easing: 'easeOutCubic'
         });
     },
-    easeOutBack: (selector, delay = 300) => {
+    easeOutBack: (selector, delay = 150) => {
         return anime({
             targets: selector,
-            translateY: [15, 0],
+            translateY: [10, 0],
             opacity: [0, 1],
-            scale: [0.9, 1],
-            delay: anime.stagger(80, { start: delay }),
-            duration: 600,
+            scale: [0.95, 1],
+            delay: anime.stagger(50, { start: delay }),
+            duration: 350,
             easing: 'easeOutBack'
         });
     }
@@ -1262,12 +1262,12 @@ window.Animations = {
     async function navigate(url, push = true) {
         const container = document.getElementById(CONTENT_ID);
         
-        if (container) {
+        if (container && window.enabledAnime !== false) {
             await anime({
                 targets: container,
                 opacity: 0,
-                translateY: [0, -15],
-                duration: 150,
+                translateY: [0, -8],
+                duration: 100,
                 easing: 'easeInQuad'
             }).finished;
         }
@@ -1368,13 +1368,30 @@ window.Animations = {
                     }
                 }
 
-                anime({
-                    targets: container,
-                    opacity: [0, 1],
-                    translateY: [15, 0],
-                    duration: 300,
-                    easing: 'easeOutQuad'
-                });
+                if (window.enabledAnime !== false) {
+                    anime({
+                        targets: container,
+                        opacity: [0, 1],
+                        duration: 150,
+                        easing: 'easeOutQuad'
+                    });
+
+                    const animTargets = container.querySelectorAll('h1, h2, h3, h4, p, button, a.px-8, .grid > div, .bg-slate-900\\/50, .bg-slate-900\\/40, li');
+                    if (animTargets.length > 0) {
+                        anime({
+                            targets: animTargets,
+                            translateY: [12, 0],
+                            opacity: [0, 1],
+                            scale: [0.97, 1],
+                            delay: anime.stagger(35, { start: 40 }),
+                            duration: 300,
+                            easing: 'easeOutBack'
+                        });
+                    }
+                } else {
+                    container.style.opacity = 1;
+                    container.style.transform = 'none';
+                }
             }
 
             if (push) {

package/frontend/templates/about.html

@@ -11,6 +11,8 @@
     <meta name="author" content="{{author}}">
     <link rel="icon" href="/favicon.ico" />
     <script src="/js/tailwind.js"></script>
+    <!-- Enable or disable SPA transitions globally (default: true) -->
+    <script>window.enabledAnime = true;</script>
     <script src="/js/blue-bird.js"></script>
 </head>
 

package/frontend/templates/index.html

@@ -11,6 +11,8 @@
     <meta name="author" content="{{author}}">
     <link rel="icon" href="/favicon.ico" />
     <script src="/js/tailwind.js"></script>
+    <!-- Enable or disable SPA transitions globally (default: true) -->
+    <script>window.enabledAnime = true;</script>
     <script src="/js/blue-bird.js"></script>
 
 </head>

package/frontend/templates/preact_example.html

@@ -11,6 +11,8 @@
     <meta name="author" content="{{author}}">
     <link rel="icon" href="/favicon.ico" />
     <script src="/js/tailwind.js"></script>
+    <!-- Enable or disable SPA transitions globally (default: true) -->
+    <script>window.enabledAnime = true;</script>
     <script src="/js/blue-bird.js"></script>
 
 </head>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seip/blue-bird",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "Express opinionated framework with HTML rendering, API architecture, built-in JWT auth, validation, caching, and SEO",
   "type": "module",
   "bin": {