add input , show box layout and rename docker file

.github/workflows/build.yml

@@ -13,8 +13,6 @@ jobs:
       matrix:
         node-version: [ 18.x, 20.x ] # Removed outdated Node.js versions and kept stable ones for Angular 19 compatibility.
 
-    timeout-minutes: 03 # Set a timeout of 30 minutes for the build job
-
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3
@@ -40,10 +38,8 @@ jobs:
     needs: build
     runs-on: ubuntu-latest
 
-    timeout-minutes: 03 # Set a timeout of 30 minutes for the deploy job
-
     steps:
-      - name: Checkout repository
+      - name: Checkout code
         uses: actions/checkout@v3
 
       - name: Log in to Docker Hub
@@ -52,9 +48,20 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v4
-        with:
-          context: .
-          push: true
-          tags: ${{ secrets.DOCKER_USERNAME }}/wordpresenter:latest # Updated Docker image name
+      - name: Extract Git metadata
+        id: vars
+        run: |
+          echo "BRANCH_NAME=${GITHUB_REF#refs/heads/}" >> $GITHUB_ENV
+          echo "COMMIT_SHA=${GITHUB_SHA::7}" >> $GITHUB_ENV
+
+      - name: Build Docker image
+        run: docker build -t teclit/wordpresenter:${{ env.BRANCH_NAME }}-${{ env.COMMIT_SHA }} .
+
+      - name: Tag Docker image as latest
+        run: docker tag teclit/wordpresenter:${{ env.BRANCH_NAME }}-${{ env.COMMIT_SHA }} teclit/wordpresenter:latest
+
+      - name: Push Docker image to Docker Hub with dynamic tag
+        run: docker push teclit/wordpresenter:${{ env.BRANCH_NAME }}-${{ env.COMMIT_SHA }}
+
+      - name: Push Docker image to Docker Hub with latest tag
+        run: docker push teclit/wordpresenter:latest

Dockerfile

@@ -0,0 +1,29 @@
+# Use Node.js for building the Angular project
+FROM node:20-alpine AS build
+
+# Set working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json for dependency installation
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy the rest of the application source code
+COPY . .
+
+# Build the Angular application
+RUN npm run build -- --output-path=dist/wordpresenter --configuration=production
+
+# Use Nginx for serving the Angular application
+FROM nginx:stable-alpine
+
+# Copy the Angular build output to the Nginx directory
+COPY --from=build /app/dist/wordpresenter /usr/share/nginx/html
+
+# Expose port 80
+EXPOSE 80
+
+# Start Nginx server
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -13,7 +13,7 @@ src/
 │   ├── layout/              # Application-wide layout components
 │   │   ├── header/
 │   │   ├── footer/
-│   │   ├── sidebar/
+│   │   ├── maincontainer/
 │   │   └── layout.module.ts
 │   ├── app-routing.module.ts # Root routing configuration
 │   ├── app.module.ts         # Root module
@@ -73,8 +73,8 @@ src/
         │   ├── footer.component.ts
         │   ├── footer.component.html
         ├── sidebar/
-        │   ├── sidebar.component.ts
-        │   ├── sidebar.component.html
+        │   ├── maincontainer.component.ts
+        │   ├── maincontainer.component.html
         └── layout.module.ts