slicejs-web-framework 2.3.4 → 2.4.0

package/src/App/index.js

@@ -1,23 +1,23 @@
-import Slice from '/Slice/Slice.js';
-
-
-/*
-slice.router.beforeEach(async (to, from, next) => {
-  
-   if(to.metadata.private){
-      const isAuthenticated = await //fetchlogic for validation
-      if(!isAuthenticated){
-         return next({ path: '/login', replace: true });
-      }
-      return next();
-   }
-   
-   return next();
-});
-
-
-If any beforeEach or afterEach is defined, start the router after defining them
-
-await slice.router.start();
-
-*/
+import Slice from '/Slice/Slice.js';
+
+
+/*
+slice.router.beforeEach(async (to, from, next) => {
+  
+   if(to.metadata.private){
+      const isAuthenticated = await //fetchlogic for validation
+      if(!isAuthenticated){
+         return next({ path: '/login', replace: true });
+      }
+      return next();
+   }
+   
+   return next();
+});
+
+
+If any beforeEach or afterEach is defined, start the router after defining them
+
+await slice.router.start();
+
+*/

package/src/App/style.css

@@ -1,40 +1,40 @@
-/* :root {
-  --docs-width: 64%;
-}
-slice-layout {
-  display: flex;
-  justify-content: center;
-}
-
-p {
-  text-align: justify;
-}
-h1 {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid var(--secondary-background-color);
-}
-h2 {
-  padding-top: 10px;
-}
-.grid-container {
-  overflow-x: auto;
-}
-@media only screen and (max-width: 770px) {
-  :root {
-    --docs-width: 100%;
-  }
-}
-* {
-  font-family: var(--font-family);
-}
-.docs_container {
-  color: var(--font-primary-color);
-  margin-top: 100px;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  width: var(--docs-width);
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-bottom: 25px;
-} */
+/* :root {
+  --docs-width: 64%;
+}
+slice-layout {
+  display: flex;
+  justify-content: center;
+}
+
+p {
+  text-align: justify;
+}
+h1 {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--secondary-background-color);
+}
+h2 {
+  padding-top: 10px;
+}
+.grid-container {
+  overflow-x: auto;
+}
+@media only screen and (max-width: 770px) {
+  :root {
+    --docs-width: 100%;
+  }
+}
+* {
+  font-family: var(--font-family);
+}
+.docs_container {
+  color: var(--font-primary-color);
+  margin-top: 100px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  width: var(--docs-width);
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-bottom: 25px;
+} */

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

@@ -1,205 +1,205 @@
-/* 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;
-  /* Convertir el logo a una silueta */
-  filter: brightness(0) drop-shadow(0 0 8px var(--primary-color));
-}
-
-.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;
-  }
+/* 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;
+  /* Convertir el logo a una silueta */
+  filter: brightness(0) drop-shadow(0 0 8px var(--primary-color));
+}
+
+.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

@@ -1,49 +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 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>