@seip/blue-bird 0.3.8 → 0.4.0

package/core/template.js

@@ -91,6 +91,9 @@ class Template {
  *
  * @param {string} [options.metaTags.langMeta]
  * Alternative language metadata value.
+ * 
+ * @param {boolean} [options.skeleton=true]
+ * Enables skeleton loading.
  *
  * @returns {void}
  * Sends a complete HTML response to the client.
@@ -120,7 +123,8 @@ class Template {
  *     keywordsMeta: "express, react, framework",
  *     authorMeta: "Blue Bird",
  *     langMeta: "en"
- *   }
+ *   },
+ *   skeleton: true
  * };
  *
  * Template.renderReact(res, "App", { title: "Hello World" }, options);
@@ -135,7 +139,8 @@ class Template {
                 scriptsInHead = [],
                 scriptsInBody = [],
                 cache = true,
-                metaTags
+                metaTags,
+                skeleton = true
             } = options;
             const metaTagsDefault = {
                 titleMeta: props.titleMeta,
@@ -177,12 +182,20 @@ class Template {
                 .map(item => `<script src="${item.src}"></script>`)
                 .join("");
 
-            const scriptsBodyTags = scriptsInBody
+            let scriptsBodyTags = scriptsInBody
                 .map(item => `<script src="${item.src}"></script>`)
                 .join("");
 
             const propsJson = JSON.stringify(componentProps).replace(/'/g, "&#39;");
 
+            const stylesSkeleton = skeleton
+                ? `<style>${this.skeletonStyles()}</style>`
+                : "";
+
+            const skeletonHtml = skeleton
+                ? this.skeletonHtml()
+                : "";
+
             let html = BASE_TEMPLATE
                 .replace(/__LANG__/g, this.escapeHtml(langHtml))
                 .replace(/__TITLE__/g, title)
@@ -196,7 +209,9 @@ class Template {
                 .replace(/__COMPONENT__/g, component)
                 .replace(/__PROPS__/g, propsJson)
                 .replace(/__VITE_ASSETS__/g, this.vite_assets())
-                .replace(/__SCRIPTS_BODY__/g, scriptsBodyTags);
+                .replace(/__SCRIPTS_BODY__/g, scriptsBodyTags)
+                .replace(/__STYLES_SKELETON__/g, stylesSkeleton)
+                .replace(/__SKELETON__/g, skeletonHtml);
 
             html = this.minifyHtml(html);
             CACHE_TEMPLATE[cacheKey] = html;
@@ -287,6 +302,182 @@ window.__vite_plugin_react_preamble_installed__ = true;
             .replace(/"/g, "&quot;")
             .replace(/'/g, "&#39;");
     }
+    static skeletonStyles() {
+        return `
+            @keyframes sk-pulse {
+                0%, 100% { opacity: 1; }
+                50% { opacity: 0.5; }
+            }
+            .sk-animate-pulse {
+                animation: sk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+            }
+            .sk-container {
+                min-height: 100vh;
+                width: 100%;
+                background-color: #f9fafb; /* bg-gray-50 */
+                padding: 1rem;
+                box-sizing: border-box;
+            }
+            .sk-inner {
+                display: flex;
+                flex-direction: column;
+                gap: 1.5rem;
+            }
+            .sk-header {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                width: 100%;
+                margin-bottom: 1rem;
+            }
+            .sk-btn-text {
+                height: 2.5rem;
+                width: 8rem;
+                background-color: #d1d5db; /* bg-gray-300 */
+                border-radius: 0.5rem;
+            }
+            .sk-header-actions {
+                display: flex;
+                gap: 1rem;
+            }
+            .sk-avatar {
+                height: 2.5rem;
+                width: 2.5rem;
+                background-color: #d1d5db;
+                border-radius: 9999px;
+            }
+            .sk-btn {
+                height: 2.5rem;
+                width: 6rem;
+                background-color: #d1d5db;
+                border-radius: 0.5rem;
+            }
+            .sk-hero {
+                height: 12rem;
+                width: 100%;
+                background-color: #d1d5db;
+                border-radius: 1rem;
+            }
+            .sk-grid {
+                display: grid;
+                grid-template-columns: repeat(1, minmax(0, 1fr));
+                gap: 1.5rem;
+            }
+            .sk-card {
+                display: flex;
+                flex-direction: column;
+                gap: 0.75rem;
+            }
+            .sk-card-img {
+                height: 10rem;
+                width: 100%;
+                background-color: #d1d5db;
+                border-radius: 0.75rem;
+            }
+            .sk-text-34 {
+                height: 1rem;
+                width: 75%;
+                background-color: #d1d5db;
+                border-radius: 0.25rem;
+            }
+            .sk-text-12 {
+                height: 1rem;
+                width: 50%;
+                background-color: #d1d5db;
+                border-radius: 0.25rem;
+            }
+            .sk-footer {
+                display: flex;
+                flex-direction: column;
+                gap: 0.5rem;
+                margin-top: 1rem;
+            }
+            .sk-text-full {
+                height: 1rem;
+                width: 100%;
+                background-color: #e5e7eb; /* bg-gray-200 */
+                border-radius: 0.25rem;
+            }
+            .sk-text-23 {
+                height: 1rem;
+                width: 66.666667%;
+                background-color: #e5e7eb;
+                border-radius: 0.25rem;
+            }
+
+            @media (min-width: 768px) {
+                .sk-container {
+                    padding: 2rem;
+                }
+                .sk-hero {
+                    height: 16rem;
+                }
+                .sk-grid {
+                    grid-template-columns: repeat(3, minmax(0, 1fr));
+                }
+            }
+ 
+            html.dark .sk-container {
+                background-color: #0b0f19; /* bg-gray-950/900 */
+            }
+            html.dark .sk-btn-text,
+            html.dark .sk-avatar,
+            html.dark .sk-btn,
+            html.dark .sk-hero,
+            html.dark .sk-card-img,
+            html.dark .sk-text-34,
+            html.dark .sk-text-12 {
+                background-color: #374151; /* bg-gray-700 */
+            }
+            html.dark .sk-text-full,
+            html.dark .sk-text-23 {
+                background-color: #1f2937; /* bg-gray-800 */
+            }
+        `;
+    }
+
+    static skeletonHtml() {
+        return `
+            <div class="sk-container">
+                <div class="sk-inner sk-animate-pulse">
+                    <div class="sk-header">
+                        <div class="sk-btn-text"></div>
+                        <div class="sk-header-actions">
+                            <div class="sk-avatar"></div>
+                            <div class="sk-btn"></div>
+                        </div>
+                    </div>
+                    
+                    <div class="sk-hero"></div>
+
+                    <div class="sk-grid">
+                        <div class="sk-card">
+                            <div class="sk-card-img"></div>
+                            <div class="sk-text-34"></div>
+                            <div class="sk-text-12"></div>
+                        </div>
+                        <div class="sk-card">
+                            <div class="sk-card-img"></div>
+                            <div class="sk-text-34"></div>
+                            <div class="sk-text-12"></div>
+                        </div>
+                        <div class="sk-card">
+                            <div class="sk-card-img"></div>
+                            <div class="sk-text-34"></div>
+                            <div class="sk-text-12"></div>
+                        </div>
+                    </div>
+
+                    <div class="sk-footer">
+                        <div class="sk-text-full"></div>
+                        <div class="sk-text-full"></div>
+                        <div class="sk-text-23"></div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
 }
 
 export default Template;

package/frontend/index.html

@@ -13,16 +13,13 @@
     __LINK_STYLES__
     __SCRIPTS_HEAD__
     __VITE_ASSETS__
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-        tailwind.config = {
-            darkMode: 'class'
-        }
-    </script>
+    __STYLES_SKELETON__
 </head>
 
 <body class="__CLASS_BODY__">
-    <div id="root" data-react-component="__COMPONENT__" data-props='__PROPS__'></div>
+    <div id="root" data-react-component="__COMPONENT__" data-props='__PROPS__'>
+        __SKELETON__
+    </div>
     __SCRIPTS_BODY__
 </body>
 

package/frontend/resources/css/tailwind.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));

package/frontend/resources/js/App.jsx

@@ -1,8 +1,11 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import Home from './pages/Home';
-import About from './pages/About';
 import { ThemeProvider } from './blue-bird/contexts/ThemeContext.jsx';
+import Skeleton from './blue-bird/components/Skeleton.jsx';
+import { LanguageProvider } from './blue-bird/contexts/LanguageContext.jsx'
+
+const Home = lazy(() => import('./pages/Home'));
+const About = lazy(() => import('./pages/About'));
 
 export default function App(_props) {
   const {
@@ -16,12 +19,16 @@ export default function App(_props) {
 
   return (
     <ThemeProvider>
-      <Router>
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/about" element={<About />} />
-        </Routes>
-      </Router>
+      <LanguageProvider>
+        <Router>
+          <Suspense fallback={<Skeleton />}>
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/about" element={<About />} />
+            </Routes>
+          </Suspense>
+        </Router>
+      </LanguageProvider>
     </ThemeProvider>
   );
 }

package/frontend/resources/js/Main.jsx

@@ -1,18 +1,19 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
+import "../css/tailwind.css"
 
 
 document.addEventListener('DOMContentLoaded', () => {
-    document.querySelectorAll('[data-react-component]').forEach(el => {
-      const component = {
-        component:el.dataset.reactComponent
-      };
-      const props = JSON.parse(el.dataset.props || '{}'); 
-      const allProps={
-        ...props,
-        ...component
-      }
-        createRoot(el).render(<App {...allProps} />); 
-    });   
+  document.querySelectorAll('[data-react-component]').forEach(el => {
+    const component = {
+      component: el.dataset.reactComponent
+    };
+    const props = JSON.parse(el.dataset.props || '{}');
+    const allProps = {
+      ...props,
+      ...component
+    }
+    createRoot(el).render(<App {...allProps} />);
+  });
 });

package/frontend/resources/js/blue-bird/components/Card.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
+import Typography from './Typography';
 
 export default function Card({ children, className = '', title, description, border = true, shadow = true }) {
     return (
         <div className={`rounded-lg ${border ? "border border-slate-200 dark:border-slate-800" : ""} ${shadow ? "shadow-sm" : ""} bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 ${className}`}>
             {(title || description) && (
                 <div className="flex flex-col space-y-1.5 p-6">
-                    {title && <h3 className="font-semibold leading-none tracking-tight">{title}</h3>}
-                    {description && <p className="text-sm text-slate-500 dark:text-slate-400">{description}</p>}
+                    {title && <Typography variant='h5' className="font-semibold leading-none tracking-tight">{title}</Typography>}
+                    {description && <Typography variant='p' className="text-sm text-slate-500 dark:text-slate-400">{description}</Typography>}
                 </div>
             )}
             <div className={`p-6 ${title || description ? 'pt-0' : ''}`}>

package/frontend/resources/js/blue-bird/components/Skeleton.jsx

@@ -0,0 +1,45 @@
+export default function Skeleton() {
+    return (
+        <div className="min-h-screen w-full bg-gray-50 p-4 md:p-8">
+            <div className="animate-pulse flex flex-col gap-6">
+
+                <div className="flex items-center justify-between w-full mb-4">
+                    <div className="h-10 w-32 bg-gray-300 rounded-lg"></div>
+                    <div className="flex space-x-4">
+                        <div className="h-10 w-10 bg-gray-300 rounded-full"></div>
+                        <div className="h-10 w-24 bg-gray-300 rounded-lg"></div>
+                    </div>
+                </div>
+
+                <div className="h-48 md:h-64 w-full bg-gray-300 rounded-2xl"></div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div className="space-y-3">
+                        <div className="h-40 w-full bg-gray-300 rounded-xl"></div>
+                        <div className="h-4 w-3/4 bg-gray-300 rounded"></div>
+                        <div className="h-4 w-1/2 bg-gray-300 rounded"></div>
+                    </div>
+
+                    <div className="space-y-3">
+                        <div className="h-40 w-full bg-gray-300 rounded-xl"></div>
+                        <div className="h-4 w-3/4 bg-gray-300 rounded"></div>
+                        <div className="h-4 w-1/2 bg-gray-300 rounded"></div>
+                    </div>
+
+                    <div className="space-y-3">
+                        <div className="h-40 w-full bg-gray-300 rounded-xl"></div>
+                        <div className="h-4 w-3/4 bg-gray-300 rounded"></div>
+                        <div className="h-4 w-1/2 bg-gray-300 rounded"></div>
+                    </div>
+                </div>
+
+                <div className="space-y-2 mt-4">
+                    <div className="h-4 w-full bg-gray-200 rounded"></div>
+                    <div className="h-4 w-full bg-gray-200 rounded"></div>
+                    <div className="h-4 w-2/3 bg-gray-200 rounded"></div>
+                </div>
+
+            </div>
+        </div>
+    )
+}

package/frontend/resources/js/blue-bird/contexts/LanguageContext.jsx

@@ -17,7 +17,18 @@ export const LanguageProvider = ({ children }) => {
      * @param {string} key - the string config key
      * @returns {string} The translated text
      */
-    const t = (key) => translations[lang][key] || key;
+    const t = (key) => {
+        const keys = key.split('.');
+        let value = translations[lang];
+        for (const k of keys) {
+            if (value && typeof value === 'object' && value !== null && k in value) {
+                value = value[k];
+            } else {
+                return key;
+            }
+        }
+        return value !== undefined ? value : key;
+    };
 
     return (
         <LanguageContext.Provider value={{ lang, setLang, t }}>

package/frontend/resources/js/blue-bird/locales/en.json

@@ -1,4 +1,22 @@
 {
+    "home_page": {
+        "title": "Welcome to Blue Bird",
+        "description": "The elegant, fast, and weightless framework for modern web development.",
+        "lightweight": "Lightweight",
+        "lightweightDescription": "Built with performance and simplicity in mind.",
+        "reactPowered": "React Powered",
+        "reactPoweredDescription": "Full React + Vite integration.",
+        "expressBackend": "Express Backend",
+        "expressBackendDescription": "Robust and scalable backend architecture."
+    },
+    "about_page": {
+        "title": "About Blue Bird",
+        "description": "Blue Bird is a modern framework designed to bridge the gap between backend routing and frontend interactivity.",
+        "description2": "It provides a seamless developer experience for building fast, reactive web applications.",
+        "check_your_console": "Check your console JS"
+    },
+    "home": "Home",
+    "about": "About",
     "login": "Login",
     "register": "Register",
     "email": "Email address",

package/frontend/resources/js/blue-bird/locales/es.json

@@ -1,4 +1,22 @@
 {
+    "home_page": {
+        "title": "Bienvenido a Blue Bird",
+        "description": "El framework elegante, rápido y ligero para el desarrollo web moderno.",
+        "lightweight": "Ligero",
+        "lightweightDescription": "Construido pensando en el rendimiento y la simplicidad.",
+        "reactPowered": "Impulsado por React",
+        "reactPoweredDescription": "Integración completa con React + Vite.",
+        "expressBackend": "Backend con Express",
+        "expressBackendDescription": "Arquitectura de backend robusta y escalable."
+    },
+    "about_page": {
+        "title": "Acerca de Blue Bird",
+        "description": "Blue Bird es un framework moderno diseñado para cerrar la brecha entre el enrutamiento de backend y la interactividad de frontend.",
+        "description2": "Proporciona una experiencia de desarrollador perfecta para crear aplicaciones web rápidas y reactivas.",
+        "check_your_console": "Revisa tu consola JS"
+    },
+    "home": "Inicio",
+    "about": "Acerca de",
     "login": "Iniciar Sesión",
     "register": "Registrarse",
     "email": "Correo Electrónico",

package/frontend/resources/js/components/Header.jsx

@@ -0,0 +1,53 @@
+import { Link } from "react-router-dom";
+import { useState } from "react";
+import Button from "../blue-bird/components/Button";
+import { useLanguage } from "../blue-bird/contexts/LanguageContext";
+import { useTheme } from "../blue-bird/contexts/ThemeContext";
+
+export default function Header() {
+    const { t, setLang } = useLanguage();
+    const { changeTheme } = useTheme();
+
+    const [emojiTheme, setEmojiTheme] = useState("🌞");
+
+    const changeThemeEmoji = () => {
+        if (emojiTheme === "🌞") {
+            setEmojiTheme("🌙");
+            changeTheme("dark");
+        } else {
+            setEmojiTheme("🌞");
+            changeTheme("light");
+        }
+    }
+
+    return (
+        <header>
+            <nav
+                className='bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 border-b border-gray-200 dark:border-slate-800 px-4 py-4 flex justify-between items-center gap-4 sticky top-0 z-10'
+            >
+                <div className='font-bold text-xl text-slate-900 dark:text-slate-100'>
+                    Blue Bird
+                </div>
+                <div className='flex justify-between items-center gap-4'>
+                    <div className="flex justify-between items-center gap-4">
+                        <Button variant="outline" size="sm" onClick={() => setLang("es")} >
+                            ES
+                        </Button>
+                        <Button variant="outline" size="sm" onClick={() => setLang("en")} >
+                            EN
+                        </Button>
+                        <Button variant="ghost" size="icon" onClick={changeThemeEmoji}>
+                            {emojiTheme}
+                        </Button>
+                    </div>
+                    <div className="flex justify-between items-center gap-4">
+                        <Link to="/" className='text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100 transition-colors'>{t("home")}</Link>
+                        <Link to="/about" className='text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100 transition-colors'>{t("about")}</Link>
+                    </div>
+
+                </div>
+            </nav>
+        </header>
+
+    )
+}

package/frontend/resources/js/pages/About.jsx

@@ -1,33 +1,31 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import Header from '../components/Header';
+import { useLanguage } from '../blue-bird/contexts/LanguageContext';
+
+import Card from '../blue-bird/components/Card';
+import Typography from '../blue-bird/components/Typography'
 
 export default function About() {
+  const { t } = useLanguage();
   return (
     <div
       className="bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 min-h-screen"
     >
-      <nav
-        className='bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 border-b border-gray-200 dark:border-slate-800 px-4 py-4 flex justify-between items-center gap-4 sticky top-0 z-10'
-      >
-        <div className='font-bold text-xl text-blue-600 dark:text-blue-400'>
-          Blue Bird
-        </div>
-        <div className='flex justify-between items-center gap-4'>
-          <Link to="/" className='text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'>Home</Link>
-          <Link to="/about" className='text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'>About</Link>
-        </div>
-      </nav>
-      <main className='max-w-7xl mx-auto'>
-        <div className='p-4'>
-          <h1 className='text-xl font-bold text-gray-900 dark:text-gray-100 mb-4'>About Blue Bird</h1>
-          <p className='text-gray-500 dark:text-gray-400 leading-1.6'>
-            Blue Bird is a modern framework designed to bridge the gap between backend routing and frontend interactivity.
-            It provides a seamless developer experience for building fast, reactive web applications.
-          </p>
-          <p className='text-red-500 text-xl mt-8  '>
-            Check your console JS
-          </p>
-        </div>
+      <Header />
+      <main className='max-w-3xl mx-auto mt-8 p-4'>
+        <Card>
+          <Typography variant='h1' className='text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100 mb-4'>
+            {t("about_page.title")}
+          </Typography>
+          <Typography className='text-slate-500 dark:text-slate-400 leading-7'>
+            {t("about_page.description")}
+          </Typography>
+          <div className='mt-8 pt-4 border-t border-slate-200 dark:border-slate-800'>
+            <Typography className='text-sm text-red-500 font-medium'>
+              {t("about_page.check_your_console")}
+            </Typography>
+          </div>
+        </Card>
       </main>
     </div>
   );