slicejs-web-framework 1.0.19 → 1.0.20

package/Slice/Components/Structural/Debugger/Debugger.js

@@ -9,11 +9,11 @@ export default class Debugger extends HTMLElement {
    }
 
    async enableDebugMode() {
-      const html = await slice.controller.fetchText('Debugger', 'html');
+      const html = await slice.controller.fetchText('Debugger', true, true, "/Slice/Components/Structural/Debugger/Debugger.html" );
       this.innerHTML = html;
-      const css = await slice.controller.fetchText('Debugger', 'css');
+      const css = await slice.controller.fetchText('Debugger', true, true, "/Slice/Components/Structural/Debugger/Debugger.css" );
       slice.stylesManager.registerComponentStyles('Debugger', css);
-
+      
       this.debuggerContainer = this.querySelector('#debugger-container');
       this.closeDebugger = this.querySelector('#close-debugger');
       this.componentDetails = this.querySelector('#component-details');

package/Slice/Slice.js

@@ -212,12 +212,13 @@ async function init() {
    await window.slice.router.init();
    
 
+   /*
    if (sliceConfig.translator.enabled) {
       const translator = await window.slice.build('Translator');
       window.slice.translator = translator;
       window.slice.logger.logInfo('Slice', 'Translator succesfuly enabled');
    }
-
+   */
 
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-web-framework",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "",
   "engines": {
     "node": ">=20"

package/src/Components/AppComponents/HomePage/HomePage.css

@@ -0,0 +1,203 @@
+/* Home page styles */
+slice-home-page {
+  display: block;
+  width: 100%;
+  font-family: var(--font-family);
+  color: var(--font-primary-color);
+}
+
+/* Hero section styles */
+.hero-section {
+  position: relative;
+  min-height: 80vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 2rem;
+  background-color: var(--primary-background-color);
+  overflow: hidden;
+}
+
+.hero-content {
+  max-width: 800px;
+  z-index: 1;
+}
+
+.hero-logo-container {
+  margin-bottom: 1.5rem;
+}
+
+.hero-logo {
+  max-width: 150px;
+  height: auto;
+}
+
+.hero-title {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  color: var(--font-primary-color);
+}
+
+.hero-title .highlight {
+  color: var(--primary-color);
+}
+
+.hero-subtitle {
+  font-size: 1.5rem;
+  margin-bottom: 1.5rem;
+  color: var(--font-secondary-color);
+}
+
+.hero-description {
+  font-size: 1.1rem;
+  margin-bottom: 2rem;
+  line-height: 1.6;
+}
+
+.cta-buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  margin-top: 2rem;
+}
+
+/* Features section styles */
+.features-section {
+  padding: 5rem 2rem;
+  background-color: var(--secondary-background-color);
+}
+
+.section-title {
+  text-align: center;
+  font-size: 2.5rem;
+  margin-bottom: 3rem;
+  color: var(--primary-color);
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.feature-item {
+  padding: 2rem;
+  background-color: var(--primary-background-color);
+  border-radius: var(--border-radius-slice);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.feature-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+}
+
+.feature-title {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  color: var(--primary-color);
+}
+
+.feature-description {
+  color: var(--font-secondary-color);
+  line-height: 1.6;
+}
+
+/* Example section styles */
+.example-section {
+  padding: 5rem 2rem;
+  background-color: var(--primary-background-color);
+}
+
+.section-description {
+  text-align: center;
+  max-width: 800px;
+  margin: 0 auto 3rem auto;
+  color: var(--font-secondary-color);
+  font-size: 1.2rem;
+}
+
+.examples-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 3rem;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.example-item {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 2rem;
+  background-color: var(--secondary-background-color);
+  border-radius: var(--border-radius-slice);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.example-item h3 {
+  margin: 0;
+  font-size: 1.3rem;
+  color: var(--primary-color);
+}
+
+/* Getting started section styles */
+.getting-started-section {
+  padding: 5rem 2rem;
+  background-color: var(--secondary-background-color);
+  text-align: center;
+}
+
+.code-sample {
+  max-width: 800px;
+  margin: 0 auto;
+  text-align: left;
+}
+
+/* Footer styles */
+.home-footer {
+  padding: 3rem 2rem;
+  text-align: center;
+  background-color: var(--primary-color);
+  color: var(--primary-color-contrast);
+}
+
+.copyright {
+  margin-top: 1rem;
+  font-size: 0.9rem;
+  opacity: 0.8;
+}
+
+/* Responsive styles */
+@media (max-width: 992px) {
+  .feature-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .examples-container {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .hero-title {
+    font-size: 2.5rem;
+  }
+  
+  .hero-subtitle {
+    font-size: 1.3rem;
+  }
+  
+  .feature-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .cta-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+}

package/src/Components/AppComponents/HomePage/HomePage.html

@@ -0,0 +1,49 @@
+<div class="home-page-container">
+  <div class="hero-section">
+    <div class="hero-content">
+      <div class="hero-logo-container">
+        <img src="/images/Slice.js-logo.png" alt="Slice.js Logo" class="hero-logo" />
+      </div>
+      <h1 class="hero-title">Welcome to <span class="highlight">Slice.js</span></h1>
+      <p class="hero-subtitle">Build Your Web App One Slice at a Time</p>
+      <p class="hero-description">
+        A modern, lightweight component-based framework for building web applications using vanilla JavaScript and web standards.
+      </p>
+      <div class="cta-buttons"></div>
+    </div>
+  </div>
+
+  <section class="features-section">
+    <h2 class="section-title">Why Choose Slice.js?</h2>
+    <div class="feature-grid"></div>
+  </section>
+
+  <section class="example-section">
+    <h2 class="section-title">Component Showcase</h2>
+    <p class="section-description">
+      Explore some of the ready-to-use components that come with Slice.js
+    </p>
+    <div class="examples-container"></div>
+  </section>
+
+  <section class="getting-started-section">
+    <h2 class="section-title">Get Started Now</h2>
+    <div class="code-sample">
+      <pre><code>
+// Initialize a new Slice.js project
+npm run slice:init
+
+// Create a new component
+npm run slice:create
+
+// Start your application
+npm run slice:start
+      </code></pre>
+    </div>
+  </section>
+
+  <footer class="home-footer">
+    <p>Made with ❤️ using Slice.js</p>
+    <p class="copyright">© 2025 Slice.js Framework</p>
+  </footer>
+</div>

package/src/Components/AppComponents/HomePage/HomePage.js

@@ -0,0 +1,196 @@
+export default class HomePage extends HTMLElement {
+   constructor(props) {
+      super();
+      slice.attachTemplate(this);
+      
+      this.$examplesContainer = this.querySelector('.examples-container');
+      
+      slice.controller.setComponentProps(this, props);
+      this.debuggerProps = [];
+   }
+
+   async init() {
+      // Crear la barra de navegación
+      const navbar = await slice.build('Navbar', {
+         position: 'fixed',
+         logo: {
+            src: '/images/Slice.js-logo.png',
+            path: '/',
+         },
+         items: [
+            { text: 'Home', path: '/' },
+            { text: 'Documentation', path: '/Documentation' },
+            { text: 'Playground', path: '/Playground' },
+            { text: 'Contributors', path: '/Team' }
+         ],
+         buttons: [
+            {
+               value: 'Change Theme',
+               onClickCallback: async () => {
+                  const currentTheme = slice.stylesManager.themeManager.currentTheme;
+                  if (currentTheme === 'Slice') {
+                     await slice.setTheme('Light');
+                  } else if (currentTheme === 'Light') {
+                     await slice.setTheme('Dark');
+                  } else {
+                     await slice.setTheme('Slice');
+                  }
+               },
+            },
+         ],
+      });
+      
+      // Crear botones para la sección de llamada a la acción
+      const docsButton = await slice.build('Button', {
+         value: 'Documentation',
+         onClickCallback: () => slice.router.navigate('/Documentation'),
+         customColor: {
+            button: 'var(--primary-color)',
+            label: 'var(--primary-color-contrast)'
+         }
+      });
+      
+      const componentsButton = await slice.build('Button', {
+         value: 'Components Library',
+         onClickCallback: () => slice.router.navigate('/Documentation/Visual'),
+         customColor: {
+            button: 'var(--secondary-color)',
+            label: 'var(--secondary-color-contrast)'
+         }
+      });
+      
+      // Añadir botones a la sección CTA
+      this.querySelector('.cta-buttons').appendChild(docsButton);
+      this.querySelector('.cta-buttons').appendChild(componentsButton);
+      
+      // Crear features section con un enfoque diferente (sin usar Cards)
+      await this.createFeatures();
+      
+      // Crear ejemplos de componentes
+      await this.createComponentExamples();
+      
+      // Configurar la sección de código de inicio
+      await this.setupGettingStartedSection();
+      
+      // Añadir la barra de navegación al inicio del componente
+      this.insertBefore(navbar, this.firstChild);
+   }
+   
+   async createFeatures() {
+      // Definir características
+      const features = [
+         {
+            title: 'Component-Based',
+            description: 'Build your app using modular, reusable components following web standards.'
+         },
+         {
+            title: 'Zero Dependencies',
+            description: 'Built with vanilla JavaScript. No external libraries required.'
+         },
+         {
+            title: 'Easy Routing',
+            description: 'Simple and powerful routing system for single page applications.'
+         },
+         {
+            title: 'Theme System',
+            description: 'Built-in theme support with easy customization through CSS variables.'
+         },
+         {
+            title: 'Developer Tools',
+            description: 'Integrated debugging and logging for faster development.'
+         },
+         {
+            title: 'Performance Focused',
+            description: 'Lightweight and optimized for fast loading and execution.'
+         }
+      ];
+      
+      const featureGrid = this.querySelector('.feature-grid');
+      
+      // Crear y añadir cada feature como un elemento HTML simple
+      for (const feature of features) {
+         const featureElement = document.createElement('div');
+         featureElement.classList.add('feature-item');
+         
+         const featureTitle = document.createElement('h3');
+         featureTitle.textContent = feature.title;
+         featureTitle.classList.add('feature-title');
+         
+         const featureDescription = document.createElement('p');
+         featureDescription.textContent = feature.description;
+         featureDescription.classList.add('feature-description');
+         
+         featureElement.appendChild(featureTitle);
+         featureElement.appendChild(featureDescription);
+         
+         featureGrid.appendChild(featureElement);
+      }
+   }
+   
+   async createComponentExamples() {
+      // Crear ejemplos para demostrar componentes
+      const inputExample = await slice.build('Input', {
+         placeholder: 'Try typing here...',
+         type: 'text'
+      });
+      
+      const switchExample = await slice.build('Switch', {
+         label: 'Toggle me',
+         checked: true
+      });
+      
+      const checkboxExample = await slice.build('Checkbox', {
+         label: 'Check me',
+         labelPlacement: 'right'
+      });
+      
+      const detailsExample = await slice.build('Details', {
+         title: 'Click to expand',
+         text: 'This is a collapsible details component that can contain any content.'
+      });
+      
+      // Crear sección para cada ejemplo
+      const exampleSections = [
+         { title: 'Input Component', component: inputExample },
+         { title: 'Switch Component', component: switchExample },
+         { title: 'Checkbox Component', component: checkboxExample },
+         { title: 'Details Component', component: detailsExample }
+      ];
+      
+      // Añadir cada ejemplo a la sección de ejemplos
+      for (const section of exampleSections) {
+         const container = document.createElement('div');
+         container.classList.add('example-item');
+         
+         const title = document.createElement('h3');
+         title.textContent = section.title;
+         
+         container.appendChild(title);
+         container.appendChild(section.component);
+         
+         this.$examplesContainer.appendChild(container);
+      }
+   }
+   
+   async setupGettingStartedSection() {
+      // Opcionalmente podríamos mejorar esta sección usando el CodeVisualizer component
+      // en lugar del código HTML estático en el template
+      const codeVisualizer = await slice.build('CodeVisualizer', {
+         value: `// Initialize a new Slice.js project
+npm run slice:init
+
+// Create a new component
+npm run slice:create
+
+// Start your application
+npm run slice:start`,
+         language: 'bash'
+      });
+      
+      const codeSample = this.querySelector('.code-sample');
+      codeSample.innerHTML = ''; // Clear the static code sample
+      codeSample.appendChild(codeVisualizer);
+   }
+}
+
+customElements.define('slice-home-page', HomePage);

package/src/Components/AppComponents/Playground/Playground.js

@@ -21,18 +21,6 @@ export default class Playground extends HTMLElement {
                text: 'Home',
                path: '/',
             },
-            {
-               text: 'Documentation',
-               path: '/Documentation',
-            },
-            {
-               text: 'Playground',
-               path: '/Playground',
-            },
-            {
-               text: 'Our Team',
-               path: '/Team',
-            }
          ],
          buttons: [
             {
@@ -58,13 +46,6 @@ export default class Playground extends HTMLElement {
 
       const sliceButton = await slice.build('Button', {
          value: 'Slice',
-         onClickCallback: () => {
-            if (slice.translator.currentLanguage == 'es') {
-               slice.translator.changeLanguage('en');
-            } else {
-               slice.translator.changeLanguage('es');
-            }
-         },
       });
       const sliceInput = await slice.build('Input', {
          placeholder: 'Enter text here...',

package/src/routes.js

@@ -1,98 +1,12 @@
 const routes = [
    // Rutas principales
-   { path: '/', component: 'LandingPage' },
-   {
-      path: '/Documentation',
-      component: 'DocumentationPage',
-      children: [
-         {
-            path: '/Slice',
-            component: 'WhatIsSlice',
-         },
-         {
-            path:'/Visual',
-            component: 'VisualDocumentation',
-         },
-         {
-            path:'/Service',
-            component: 'ServiceDocumentation',
-         },
-         {
-            path:'/Structural',
-            component: 'StructuralDocumentation',
-         },
-
-         {
-            path:'/Themes',
-            component: 'ThemesDocumentation',
-         },
-         {
-            path:'/Routing',
-            component: 'RoutingDocumentation',
-         },
-         {
-            path: '/Installation',
-            component: 'Installation',
-         },
-         {
-            path: '/The-build-method',
-            component: 'TheBuildMethod',
-         },
-         {
-            path:'/Components',
-            component: 'DocumentationPage',
-            children:[
-               {
-                  path: '/Visual',
-                  component: 'VisualDocumentation',
-                  children: [
-                     {
-                        path: '/Card',
-                        component: 'CardDocumentation',
-                     },
-                     {
-                        path:'/Button',
-                        component: 'ButtonDocumentation',
-                     },
-                     {
-                        path:'/Switch',
-                        component: 'SwitchDocumentation',
-                     },
-                     {
-                        path:'/Checkbox',
-                        component: 'CheckboxDocumentation',
-                     },
-                     {
-                        path:'/Input',
-                        component: 'InputDocumentation',
-                     }
-                  ]
-               },
-               /*{
-                  path: '/Service',
-                  component: 'ServiceDocumentation',
-                  children:[
-                     {
-                        path: '/FetchManager',
-                        component: 'FetchManagerDocumentation',
-                     }
-                  ]
-               }*/
-            ]
-         } 
-      ]
-   },
-   // Otras rutas
-   { path: '/Playground', component: 'Playground' },
+   { path: '/', component: 'HomePage' },
    { path: '/404', component: 'NotFound' },
    {
       path: '/Docum/${category}/${id}',
       component: 'LandingPage',
    },
-   {
-      path: '/Team',
-      component: 'TheSliceTeam',
-   }
+
 ];
 
 export default routes;

package/src/sliceConfig.json

@@ -22,9 +22,6 @@
             }
         }
     },
-    "translator": {
-        "enabled": false
-    },
     "paths": {
         "components": {
             "AppComponents":{

package/src/Components/AppComponents/ButtonDocumentation/ButtonDocumentation.css

@@ -1,16 +0,0 @@
-.buttonsGrid {
-  width: 100%;
-}
-.buttons {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-.buttonsContainer {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-  /* width: 100%; */
-}

package/src/Components/AppComponents/ButtonDocumentation/ButtonDocumentation.html

@@ -1,22 +0,0 @@
-<h1 id="sliceButton">Slice Button</h1>
-<div class="myButton">
-  <p>
-    To build a simple Slice Button you only need to use the "slice.build"
-    method, just like that you have a Slice Button that you can customize with a
-    value prop.
-  </p>
-</div>
-<div class="colorButton">
-  <h2 id="customization">Customization</h2>
-  <p>
-    You can also cutomize your Slice Button specifying it's background color
-    with "customColor.button" and it's font color with "customColor.label".
-  </p>
-</div>
-<div class="onClick">
-  <h2 id="onClickCallback">onClickCallback</h2>
-  <p>
-    At last but not least you can add a function to your button with the prop
-    "onClickCallback".
-  </p>
-</div>