Deploy Astro app to github pages

.github/dependabot.yml

@@ -36,6 +36,24 @@ updates:
     labels:
       - "Dependencies"
 
+    - package-ecosystem: "npm"
+    directory: "/examples/kendo-react-e-commerce-astro-app"
+    schedule:
+      interval: "daily"
+    groups:
+      kendo-dependencies:
+        patterns:
+          - '@progress/kendo-*'
+    allow:
+      - dependency-name: '@progress/kendo-*'
+    commit-message:
+      prefix: "chore:"
+    reviewers:
+      - "telerik/kendo-react-devs"
+      - "telerik/kendo-react-support"
+    labels:
+      - "Dependencies"
+
   - package-ecosystem: "npm"
     directory: "/examples/kendo-react-build-a-sales-dashboard"
     schedule:

.github/workflows/ci.yml

@@ -32,7 +32,9 @@ jobs:
             ecommerce-jewellery-store:
               - 'examples/ecommerce-jewellery-store/**'
             kendo-react-build-a-sales-dashboard:
-              - 'examples/kendo-react-build-a-sales-dashboard/**'    
+              - 'examples/kendo-react-build-a-sales-dashboard/**'
+            kendo-react-e-commerce-astro-app:
+              - 'examples/kendo-react-e-commerce-astro-app/**'    
             kendo-react-file-manager:
               - 'examples/kendo-react-file-manager/**'
             kendo-react-finance-portfolio:
@@ -72,6 +74,13 @@ jobs:
           npm ci
           npm run build
 
+      - name: Build Ecommerce Astro app
+        working-directory: ./examples/kendo-react-e-commerce-astro-app
+        if: steps.changes.outputs.kendo-react-e-commerce-astro-app == 'true'
+        run: |
+          npm ci
+          npm run build
+
       - name: Build A Sales Dashboard app
         working-directory: ./examples/kendo-react-build-a-sales-dashboard
         if: steps.changes.outputs.kendo-react-build-a-sales-dashboard == 'true'

examples/kendo-react-e-commerce-astro-app/astro.config.mjs

@@ -3,4 +3,8 @@ import react from '@astrojs/react';
 
 export default defineConfig({
   integrations: [react()],
+  base: `/kendo-react/kendo-react-e-commerce-astro-app/`,
+  build: {
+    outDir: 'build'
+  },
 });

examples/kendo-react-e-commerce-astro-app/package.json

@@ -2,12 +2,15 @@
   "name": "kendo-react-e-commerce-astro-app",
   "type": "module",
   "version": "0.0.1",
+  "homepage": "https://telerik.github.io/kendo-react/kendo-react-e-commerce-astro-app/",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
     "build": "astro check && astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
@@ -37,7 +40,11 @@
     "@progress/kendo-theme-default": "^10.0.1",
     "@progress/kendo-theme-utils": "^10.0.1",
     "astro": "^4.16.6",
+    "gh-pages": "^6.1.1",
     "nanostores": "^0.11.3",
     "typescript": "^5.6.3"
+  },
+  "overrides": {
+    "prettier": "^3.0.0"
   }
 }

examples/kendo-react-e-commerce-astro-app/src/components/AllProductsListView.tsx

@@ -30,15 +30,15 @@ export const AllProductsListView = () => {
 
   const cards: CardDescriptor[] = [
     {
-      img: "/necklace_1.jfif",
+      img: "/kendo-react/kendo-react-e-commerce-astro-app/necklace_1.jfif",
       collectionText: 'Collection "SERENE"',
     },
     {
-      img: "/ring_1.jfif",
+      img: "/kendo-react/kendo-react-e-commerce-astro-app/ring_1.jfif",
       collectionText: 'Collection "AURELIA"',
     },
     {
-      img: "/1111.jfif",
+      img: "/kendo-react/kendo-react-e-commerce-astro-app/1111.jfif",
       collectionText: 'Collection "RAVINA"',
     },
   ];
@@ -61,7 +61,7 @@ export const AllProductsListView = () => {
             title={title}
             subtitle={subtitle}
             contentText={contentText}
-            img="/bracelets.png"
+            img="/kendo-react/kendo-react-e-commerce-astro-app/bracelets.png"
             order={order}
             link={null}
           />

examples/kendo-react-e-commerce-astro-app/src/components/BackgroundImage.tsx

@@ -5,7 +5,7 @@ export const BackgroundImage = (props: BackgroundImageProps) => {
   const { img, title, subtitle, buttonText } = props;
 
   const onButtonClick = () => {
-    window.location.href="/products"
+    window.location.href="/kendo-react/kendo-react-e-commerce-astro-app/products"
   }
 
   return (

examples/kendo-react-e-commerce-astro-app/src/components/CardsList.tsx

@@ -6,7 +6,7 @@ import { CardListProps } from "../data/types";
 export const CardsList = (props: CardListProps) => {
 
   const onButtonClick = (index: number) => {
-    window.location.href=`/product/${index + 1}`;
+    window.location.href=`/kendo-react/kendo-react-e-commerce-astro-app/product/${index + 1}`;
   };
 
   return (

examples/kendo-react-e-commerce-astro-app/src/components/Contacts.tsx

@@ -19,7 +19,7 @@ import { Label } from '@progress/kendo-react-labels';
 
 const Contacts: React.FC = () => {
   const onSubmitClick = () => {
-    window.location.href = "/thankyou";
+    window.location.href = "/kendo-react/kendo-react-e-commerce-astro-app/thankyou";
   };
 
   return (
@@ -73,7 +73,7 @@ const Contacts: React.FC = () => {
           </div>
           <div className="k-col-span-5 k-col-start-8 k-d-flex k-flex-col k-align-items-start">
             <img
-              src="/contactsImage.png"
+              src="/kendo-react/kendo-react-e-commerce-astro-app/contactsImage.png"
               alt="Contacts"
               style={{
                 maxWidth: '630px',

examples/kendo-react-e-commerce-astro-app/src/components/DetailedCategory.tsx

@@ -19,7 +19,7 @@ const cart = [
   {
     product: {
       id: 1,
-      img: "/sample-item1.png",
+      img: "/kendo-react/kendo-react-e-commerce-astro-app/sample-item1.png",
       title: "Silver Bracelet with Onyx",
       newPrice: 49.99,
     },
@@ -28,7 +28,7 @@ const cart = [
   {
     product: {
       id: 2,
-      img: "/sample-item2.png",
+      img: "/kendo-react/kendo-react-e-commerce-astro-app/sample-item2.png",
       title: "Diamond Wedding Ring",
       newPrice: 120.0,
     },
@@ -37,7 +37,7 @@ const cart = [
   {
     product: {
       id: 3,
-      img: "/sample-item3.png",
+      img: "/kendo-react/kendo-react-e-commerce-astro-app/sample-item3.png",
       title: "Casual Silver Watch",
       newPrice: 85.0,
     },

examples/kendo-react-e-commerce-astro-app/src/components/Footer.tsx

@@ -15,7 +15,7 @@ const Footer: React.FC = () => {
       <div className="k-d-flex k-flex-wrap k-justify-content-between k-gap-8 k-text-align-left">
         <div className="k-flex-basis-250 k-flex-grow-1 k-mb-4 k-mt-6" style={{marginLeft: '50px'}}> 
           <a href="#" className="k-d-block k-mb-4 k-text-align-center">
-          <img src="/vilora-logo.png" alt="Logo" />
+          <img src="/kendo-react/kendo-react-e-commerce-astro-app/vilora-logo.png" alt="Logo" />
           </a>
           <p className="k-m-0">We use cookies to improve your experience.</p> 
           <p className="k-m-0">All rights reserved.</p>

examples/kendo-react-e-commerce-astro-app/src/components/Header.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Menu, MenuSelectEvent } from "@progress/kendo-react-layout";
+import { Menu, MenuItemModel, MenuSelectEvent } from "@progress/kendo-react-layout";
 import { Button } from "@progress/kendo-react-buttons";
 import { SvgIcon } from "@progress/kendo-react-common";
 import { InputPrefix, InputSeparator, TextBox, Switch } from "@progress/kendo-react-inputs";
@@ -10,38 +10,42 @@ import { AppBar, AppBarSection } from "@progress/kendo-react-layout";
 import { isAdmin } from "../helpers/adminStore";
 import { useStore } from "@nanostores/react";
 
+interface CustomMenuItemModel extends MenuItemModel {
+    page?: string;
+  }
+
 const Header: React.FC = () => {
   const isAdminValue = useStore(isAdmin);
 
   const handleCartClick = () => {
-    window.location.href = "/shoppingcart";
+    window.location.href = "/kendo-react/kendo-react-e-commerce-astro-app/shoppingcart";
   };
 
   const handleSwitchChange = () => {
     isAdmin.set(!isAdminValue);
   };
 
   const handleMenuSelect = (event: MenuSelectEvent) => {
-    const selectedItem = event.item;
+    const selectedItem: CustomMenuItemModel = event.item;
 
-    if (selectedItem.url) {
-      window.location.href = selectedItem.url;
+    if (selectedItem.page) {
+      window.location.href = selectedItem.page;
       return;
     }
 
     const selectedCategory = selectedItem.text;
     if (selectedCategory === "All") {
-      window.location.href = `/products`; // No category filter applied
+      window.location.href = `/kendo-react/kendo-react-e-commerce-astro-app/products`; // No category filter applied
     } else {
-      window.location.href = `/products?category=${encodeURIComponent(selectedCategory)}`;
+      window.location.href = `/kendo-react/kendo-react-e-commerce-astro-app/products?category=${encodeURIComponent(selectedCategory)}`;
     }
   };
 
   return (
     <AppBar themeColor="inherit">
       <AppBarSection className="k-flex-basis-0 k-flex-grow k-gap-2 k-align-items-center" style={{ paddingLeft: "50px" }}>
         <a href="/" className="k-d-sm-flex" style={{ marginRight: "50px" }}>
-          <img src="/vilora-logo.png" alt="Logo" />
+          <img src="/kendo-react/kendo-react-e-commerce-astro-app/vilora-logo.png" alt="Logo" />
         </a>
         <Menu items={items} onSelect={handleMenuSelect} />
       </AppBarSection>

examples/kendo-react-e-commerce-astro-app/src/components/Home.tsx

@@ -11,20 +11,20 @@ import { useStore } from '@nanostores/react';
 import AdminView from '../components/AdminView'; 
 
 const data: CardDescriptor[] = [
-  { img: '/listViewImages/silverBraceletOnyx.png', collectionText: "Silver Bracelet with Onyx" },
-  { img: '/listViewImages/weddingBandsPearl.png', collectionText: "Wedding Bands with Pearls" },
-  { img: '/listViewImages/roseGoldEarringsOpal.png', collectionText: "Rose Gold Earrings with Opal" }
+  { img: '/kendo-react/kendo-react-e-commerce-astro-app/listViewImages/silverBraceletOnyx.png', collectionText: "Silver Bracelet with Onyx" },
+  { img: '/kendo-react/kendo-react-e-commerce-astro-app/listViewImages/weddingBandsPearl.png', collectionText: "Wedding Bands with Pearls" },
+  { img: '/kendo-react/kendo-react-e-commerce-astro-app/listViewImages/roseGoldEarringsOpal.png', collectionText: "Rose Gold Earrings with Opal" }
 ];
 
 const ringsData: CardDescriptor[] = [
-  { img: '/listViewImages/diamondWeddingRing.png', collectionText: "Diamond Wedding Ring" },
-  { img: '/listViewImages/diamondWeddingBands.png', collectionText: "Diamond Wedding Bands" }
+  { img: '/kendo-react/kendo-react-e-commerce-astro-app/listViewImages/diamondWeddingRing.png', collectionText: "Diamond Wedding Ring" },
+  { img: '/kendo-react/kendo-react-e-commerce-astro-app/listViewImages/diamondWeddingBands.png', collectionText: "Diamond Wedding Bands" }
 ];
 
 const watchData: CardDescriptor[] = [
-  { img: '/brownWatch.jpg', collectionText: "Brown Leather Watch" },
-  { img: '/listViewImages/casualSilverWatch.png', collectionText: "Casual Silver Watch" },
-  { img: '/vintageWatch.jpg', collectionText: "Vintage Silver Watch" }
+  { img: '/kendo-react/kendo-react-e-commerce-astro-app/brownWatch.jpg', collectionText: "Brown Leather Watch" },
+  { img: '/kendo-react/kendo-react-e-commerce-astro-app/listViewImages/casualSilverWatch.png', collectionText: "Casual Silver Watch" },
+  { img: '/kendo-react/kendo-react-e-commerce-astro-app/vintageWatch.jpg', collectionText: "Vintage Silver Watch" }
 ];
 
 const Home: React.FC = () => {
@@ -39,7 +39,7 @@ const Home: React.FC = () => {
         title={title}
         subtitle={subtitle}
         buttonText={buttonText}
-        img="/model_1.png"
+        img="/kendo-react/kendo-react-e-commerce-astro-app/model_1.png"
       />
 
       {isAdminValue ? (
@@ -64,7 +64,7 @@ const Home: React.FC = () => {
                 title='Timeless Classics'
                 subtitle='Get our unique handmade collections'
                 contentText='Jewelry enhances style and adds elegance, with each piece telling a unique story.'
-                img="/homeModel2.png"
+                img="/kendo-react/kendo-react-e-commerce-astro-app/homeModel2.png"
                 order='first'
                 link="Shop Now"
               />
@@ -76,7 +76,7 @@ const Home: React.FC = () => {
                 title='Fine Jewelry'
                 subtitle='Get our unique handmade collections'
                 contentText="Jewelry elevates one's style and brings sophistication, with every piece narrating a distinct tale."
-                img="/homeModel3.png"
+                img="/kendo-react/kendo-react-e-commerce-astro-app/homeModel3.png"
                 order='last'
                 link="Shop Now"
               />
@@ -93,7 +93,7 @@ const Home: React.FC = () => {
                 title='Always On Time'
                 subtitle='Get our unique watches'
                 contentText='High-end gold watches for men are the epitome of luxury, combining precision with sophisticated craftsmanship.'
-                img="/homeWatch1.png"
+                img="/kendo-react/kendo-react-e-commerce-astro-app/homeWatch1.png"
                 order='first'
                 link="Shop Now"
               />
@@ -110,7 +110,7 @@ const Home: React.FC = () => {
                 title='Services'
                 subtitle='Explore expert repairs to elevate your experience'
                 contentText='Vilora provides services like custom designs, repairs, and appraisals to enhance the customer experience.'
-                img="/homeServicesImage.png"
+                img="/kendo-react/kendo-react-e-commerce-astro-app/homeServicesImage.png"
                 order='last'
                 link="Learn More"
               />

examples/kendo-react-e-commerce-astro-app/src/components/PaymentDetails.tsx

@@ -21,7 +21,7 @@ import {
 
 const PaymentDetails: React.FC = () => {
   const onSubmitClick = () => {
-    window.location.href = "/thankyou";
+    window.location.href = "/kendo-react/kendo-react-e-commerce-astro-app/thankyou";
   };
 
   return (
@@ -36,7 +36,7 @@ const PaymentDetails: React.FC = () => {
                 <RadioButton value="creditCard" label="Credit Card" />
               </div>
               <img
-                src="/creditCards.png"
+                src="/kendo-react/kendo-react-e-commerce-astro-app/creditCards.png"
                 alt="Credit card options"
                 className="k-mb-4"
                 style={{ width: 'auto', height: 'auto', maxWidth: '100%' }}

examples/kendo-react-e-commerce-astro-app/src/components/ProductDetails.tsx

@@ -15,20 +15,20 @@ export const ProductDetails: React.FC<ProductDetailsProps> = ({ product }) => {
     const existingCart = JSON.parse(localStorage.getItem('cart') || '[]');
     const updatedCart = [...existingCart, product];
     localStorage.setItem('cart', JSON.stringify(updatedCart));
-    window.location.href = '/shoppingcart';
+    window.location.href = '/kendo-react/kendo-react-e-commerce-astro-app/shoppingcart';
   };
 
   const data: CardDescriptor[] = [
     {
-      img: '/homemadePinkDiamondRing.jpg',
+      img: '/kendo-react/kendo-react-e-commerce-astro-app/homemadePinkDiamondRing.jpg',
       collectionText: 'Handmade Pink Diamond Ring',
     },
     {
-      img: '/diamondRingPinkRuby.jpg',
+      img: '/kendo-react/kendo-react-e-commerce-astro-app/diamondRingPinkRuby.jpg',
       collectionText: 'Diamond Ring with Pink Ruby',
     },
     {
-      img: '/whiteSandDiamondRing.jpg',
+      img: '/kendo-react/kendo-react-e-commerce-astro-app/whiteSandDiamondRing.jpg',
       collectionText: 'White Sand Diamond Ring',
     },
   ];

examples/kendo-react-e-commerce-astro-app/src/components/ShoppingCartList.tsx

@@ -17,11 +17,11 @@ export const ShoppingCartList: React.FC = () => {
   }, []);
 
   const onBackClick = () => {
-    window.location.href = "/products";
+    window.location.href = "/kendo-react/kendo-react-e-commerce-astro-app/products";
   };
 
   const onProceedClick = () => {
-    window.location.href = "/paymentdetails";
+    window.location.href = "/kendo-react/kendo-react-e-commerce-astro-app/paymentdetails";
   };
 
   const updateQuantity = (index: number, value: number) => {

examples/kendo-react-e-commerce-astro-app/src/components/Testemonials.tsx

@@ -4,19 +4,19 @@ import { TestemonialsDataDescriptor } from '../data/types';
 
 const testemonialsData: TestemonialsDataDescriptor[] = [
     {
-        image: '/testemonials1.jpg',
+        image: '/kendo-react/kendo-react-e-commerce-astro-app/testemonials1.jpg',
         name: "Erica Moore",
         rating: 5,
         description: "Vilora exceeded all my expectations! The craftsmanship of my diamond necklace is absolutely stunning, and the attention to detail is unparalleled. From the moment I placed my order to the day it arrived, the entire experience was flawless."
     },
     {
-        image: '/testemonials2.jpg',
+        image: '/kendo-react/kendo-react-e-commerce-astro-app/testemonials2.jpg',
         name: "Kelvin Hettinger",
         rating: 4.5,
         description: "I couldn't be happier with my custom engagement ring from Vilora. The team helped me design the perfect piece, and the final result was even more beautiful than I imagined. Their service, quality, and dedication to excellence make Vilora my go-to for all fine jewelry."
     },
     {
-        image: '/testemonials3.jpg',
+        image: '/kendo-react/kendo-react-e-commerce-astro-app/testemonials3.jpg',
         name: "Karen Brooks",
         rating: 5,
         description: "Vilora’s collection is nothing short of breathtaking. I recently purchased a white sapphire ring, and it’s become my favorite piece. The elegance and brilliance of the jewelry reflect their impeccable taste and high standards. Highly recommend!"