feat: Implement dynamic theming based on COMPANY_NAME environment variable

- Added support for dynamic theming in the store front application.
- Introduced COMPANY_NAME and PRODUCT_SERVICE_URL environment variables.
- Updated Dockerfile to substitute environment variables in nginx config and HTML.
- Created a new useTheme composable to manage theme application and initialization.
- Defined themes for Contoso and Zava in a new themes configuration file.
- Updated TopNav component to use dynamic logo based on the selected theme.
- Modified styles to utilize CSS custom properties for theming.
- Enhanced ShoppingCartView with theme-aware styles.
- Added runtime configuration endpoint in Vite for fetching company name.
- Updated README with usage instructions for dynamic theming.

Author: usepowershell

azure.yaml

@@ -51,6 +51,9 @@ services:
         dir: ../../kustomize/overlays/azd/product-service
         edits:
           - set image product-service=${SERVICE_PRODUCT_SERVICE_IMAGE_NAME}
+        env:
+          AI_SERVICE_URL: "http://ai-service:5001/"
+          COMPANY_NAME: ${COMPANY_NAME}
     hooks:
       postdeploy:
         posix:
@@ -141,6 +144,8 @@ services:
         dir: ../../kustomize/overlays/azd/store-front
         edits:
           - set image store-front=${SERVICE_STORE_FRONT_IMAGE_NAME}
+        env:
+          COMPANY_NAME: ${COMPANY_NAME}
     hooks:
       postdeploy:
         posix:
@@ -166,6 +171,8 @@ services:
         dir: ../../kustomize/overlays/azd/store-admin
         edits:
           - set image store-admin=${SERVICE_STORE_ADMIN_IMAGE_NAME}
+        env:
+          COMPANY_NAME: ${COMPANY_NAME}
     hooks:
       postdeploy:
         posix:

kustomize/overlays/azd/product-service/deployment.yaml

@@ -19,9 +19,9 @@ spec:
           image: product-service:latest
           ports:
             - containerPort: 3002
-          env:
-            - name: AI_SERVICE_URL
-              value: "http://ai-service:5001/"
+          envFrom:
+            - configMapRef:
+                name: product-service
           resources:
             requests:
               cpu: 1m

kustomize/overlays/azd/product-service/kustomization.yaml

@@ -3,3 +3,7 @@ kind: Kustomization
 resources:
   - deployment.yaml
   - service.yaml
+configMapGenerator:
+  - envs:
+      - .env
+    name: product-service

kustomize/overlays/azd/store-admin/deployment.yaml

@@ -20,6 +20,9 @@ spec:
           ports:
             - containerPort: 8081
               name: store-admin # container images hosted on ghcr.io and will be removed in future releases
+          envFrom:
+            - configMapRef:
+                name: store-admin
           resources:
             requests:
               cpu: 1m

kustomize/overlays/azd/store-admin/kustomization.yaml

@@ -3,3 +3,7 @@ kind: Kustomization
 resources:
   - deployment.yaml
   - service.yaml
+configMapGenerator:
+  - envs:
+      - .env
+    name: store-admin

kustomize/overlays/azd/store-front/deployment.yaml

@@ -20,6 +20,9 @@ spec:
           ports:
             - containerPort: 8080
               name: store-front
+          envFrom:
+            - configMapRef:
+                name: store-front
           resources:
             requests:
               cpu: 1m

kustomize/overlays/azd/store-front/kustomization.yaml

@@ -3,3 +3,7 @@ kind: Kustomization
 resources:
   - deployment.yaml
   - service.yaml
+configMapGenerator:
+  - envs:
+      - .env
+    name: store-front

src/product-service/src/configuration.rs

@@ -9,6 +9,7 @@ pub struct Settings {
     pub wasm_bin_path: PathBuf,
     tcp_listener: Option<TcpListener>,
     pub ai_service_url: String,
+    pub company_name: String,
 }
 
 impl Settings {
@@ -17,6 +18,8 @@ impl Settings {
             var("WASM_RULE_ENGINE_PATH").unwrap_or_else(|_| "./tests/rule_engine.wasm".to_string());
         let ai_service_url =
             std::env::var("AI_SERVICE_URL").unwrap_or_else(|_| "http://127.0.0.1:5001".to_string());
+        let company_name =
+            std::env::var("COMPANY_NAME").unwrap_or_else(|_| "Contoso".to_string());
         Settings {
             max_size: 262_144,
             log_level: "info".to_string(),
@@ -25,6 +28,7 @@ impl Settings {
             wasm_bin_path: PathBuf::from(wasm_bin_path_env),
             tcp_listener: None,
             ai_service_url: ai_service_url.trim_end_matches('/').to_string(),
+            company_name,
         }
     }
 

src/product-service/src/data.rs

@@ -1,13 +1,13 @@
 use crate::configuration::Settings;
 use crate::model::Product;
 
-pub fn fetch_products(_settings: &Settings) -> Vec<Product> {
+pub fn fetch_products(settings: &Settings) -> Vec<Product> {
     vec![
         Product {
             id: 1,
-            name: "Contoso Catnip's Friend".to_string(),
+            name: format!("{} Catnip's Friend", settings.company_name),
             price: 9.99,
-            description: "Watch your feline friend embark on a fishing adventure with Contoso Catnip's Friend toy. Packed with irresistible catnip and dangling fish lure.".to_string(),
+            description: format!("Watch your feline friend embark on a fishing adventure with {} Catnip's Friend toy. Packed with irresistible catnip and dangling fish lure.", settings.company_name),
             image: "/catnip.jpg".to_string()
         },
         Product {
@@ -61,9 +61,9 @@ pub fn fetch_products(_settings: &Settings) -> Vec<Product> {
         },
         Product {
             id: 9,
-            name: "Contoso Claw's Crabby Cat Toy".to_string(),
+            name: format!("{} Claw's Crabby Cat Toy", settings.company_name),
             price: 3.99,
-            description: "Watch your cat go crazy for Contoso Claw's Crabby Cat Toy. This crinkly and catnip-filled toy will awaken their hunting instincts and provide endless entertainment.".to_string(),
+            description: format!("Watch your cat go crazy for {} Claw's Crabby Cat Toy. This crinkly and catnip-filled toy will awaken their hunting instincts and provide endless entertainment.", settings.company_name),
             image: "/crabby.jpg".to_string()
         },
         Product {

src/store-admin/Dockerfile

@@ -27,15 +27,25 @@ EXPOSE 8081
 # Set the build argument for the app version number
 ARG APP_VERSION=0.1.0
 
-# Set the environment variable for the app version number
+# Set the environment variables
 ENV APP_VERSION=$APP_VERSION
+ENV COMPANY_NAME=Contoso
+ENV PRODUCT_SERVICE_URL=http://product-service:3002/
+ENV MAKELINE_SERVICE_URL=http://makeline-service:3001/
 
 # Copy the nginx configuration template to the container
 COPY nginx.conf /etc/nginx/conf.d/nginx.conf.template
 
-# Update the nginx configuration to use the app version number
-# and Copy the nginx configuration template to the container
-RUN envsubst '${APP_VERSION}' < /etc/nginx/conf.d/nginx.conf.template > /etc/nginx/conf.d/default.conf
+# Create a startup script to substitute environment variables in both nginx config and HTML
+RUN echo '#!/bin/sh' > /docker-entrypoint.d/30-substitute-env.sh && \
+    echo 'envsubst '"'"'${APP_VERSION} ${COMPANY_NAME} ${PRODUCT_SERVICE_URL} ${MAKELINE_SERVICE_URL}'"'"' < /etc/nginx/conf.d/nginx.conf.template > /etc/nginx/conf.d/default.conf' >> /docker-entrypoint.d/30-substitute-env.sh && \
+    echo '# Update the page title based on company name' >> /docker-entrypoint.d/30-substitute-env.sh && \
+    echo 'if [ "$COMPANY_NAME" = "Zava" ]; then' >> /docker-entrypoint.d/30-substitute-env.sh && \
+    echo '  sed -i "s/<title>Pet Store Admin Portal<\/title>/<title>Zava Pet Store Admin Portal<\/title>/g" /usr/share/nginx/html/index.html' >> /docker-entrypoint.d/30-substitute-env.sh && \
+    echo 'elif [ "$COMPANY_NAME" = "Contoso" ]; then' >> /docker-entrypoint.d/30-substitute-env.sh && \
+    echo '  sed -i "s/<title>Pet Store Admin Portal<\/title>/<title>Contoso Pet Store Admin Portal<\/title>/g" /usr/share/nginx/html/index.html' >> /docker-entrypoint.d/30-substitute-env.sh && \
+    echo 'fi' >> /docker-entrypoint.d/30-substitute-env.sh && \
+    chmod +x /docker-entrypoint.d/30-substitute-env.sh
 
 # Start the app
 CMD ["nginx", "-g", "daemon off;"]