[MG_A1_00]: Initial-base-setup

.coderabbit.yaml

@@ -1,75 +1,75 @@
-# CodeRabbit Configuration File
-language: "en"
-
-reviews:
-  profile: "assertive"
-  
-  # Disables the "Prompt for all review comments with AI agents" feature
-  enable_prompt_for_ai_agents: false
-  
-  # Disables the "🪄 Autofix (Beta)" feature and committable suggestions
-  finishing_touches:
-    autofix:
-      enabled: false
-  
-  auto_review:
-    enabled: true
-    drafts: false
-
-  path_instructions:
-    - path: "**/*.html"
-      instructions: |
-        CRITICAL: Absolutely forbid the use of <table>, <tr>, <td>, or any table elements for structural layouts. If found, flag it as a major violation and instruct the user to use CSS Grid or Flexbox instead.
-        Ensure semantic HTML5 elements (nav, section, footer, main) are used correctly.
-        Ensure every <img> tag contains a meaningful, non-empty 'alt' attribute for accessibility.
-        Check that interactive elements use proper tags (like <button> or <a>) to maintain keyboard accessibility.
-        DO NOT provide any code diffs, code snippets, or committable suggestions. Provide plain text feedback only.
-
-    - path: "**/*.scss"
-      instructions: |
-        Ensure a strict Mobile-First styling approach is used (rely on min-width media queries, never max-width).
-        Enforce the BEM (Block-Element-Modifier) naming convention strictly for all classes.
-        Ensure the design layout relies strictly on display: grid or display: flex.
-        Flag and reject any imports or usage of external UI frameworks like Bootstrap or Material UI.
-        Check for proper SCSS mixins usage and standard SASS documentation/comments.
-        DO NOT provide any code diffs, code snippets, or committable suggestions. Provide plain text feedback only.
-
-    - path: "**/*.js"
-      instructions: |
-        Ensure the API data from the Gist endpoint is fetched only once and properly handled using async/await.
-        Verify that the "Spin & Win" wheel selection logic correctly picks 4 unique deals while excluding already won deals.
-        Ensure won deals are correctly accumulated, stored in state, and sorted by their relative validity date.
-        Check that Event Delegation is utilized effectively for interacting with dynamic UI lists (e.g., the Copy Code buttons).
-        Enforce standard JSDoc formatting and comments on all major functions.
-        DO NOT provide any code diffs, code snippets, or committable suggestions. Provide plain text feedback only.
-
-  tools:
-    eslint:
-      enabled: true
-    stylelint:
-      enabled: true
-    htmlhint:
-      enabled: true
-    gitleaks:
-      enabled: true
-    trufflehog:
-      enabled: true
-    osvScanner:
-      enabled: true
-    semgrep:
-      enabled: true
-
-  path_filters:
-    - "!node_modules/**"
-    - "!dist/**"
-    - "!build/**"
-    - "!.next/**"
-    - "!package-lock.json"
-    - "!yarn.lock"
-    - "!pnpm-lock.yaml"
-    - "!**/vendor/**"
-    - "!**/*.md"
-
-# Disabling chat limits the AI's conversational auto-replies
-chat:
-  auto_reply: false
+# CodeRabbit Configuration File
+language: 'en'
+
+reviews:
+    profile: 'assertive'
+
+    # Disables the "Prompt for all review comments with AI agents" feature
+    enable_prompt_for_ai_agents: false
+
+    # Disables the "🪄 Autofix (Beta)" feature and committable suggestions
+    finishing_touches:
+        autofix:
+            enabled: false
+
+    auto_review:
+        enabled: true
+        drafts: false
+
+    path_instructions:
+        - path: '**/*.html'
+          instructions: |
+              CRITICAL: Absolutely forbid the use of <table>, <tr>, <td>, or any table elements for structural layouts. If found, flag it as a major violation and instruct the user to use CSS Grid or Flexbox instead.
+              Ensure semantic HTML5 elements (nav, section, footer, main) are used correctly.
+              Ensure every <img> tag contains a meaningful, non-empty 'alt' attribute for accessibility.
+              Check that interactive elements use proper tags (like <button> or <a>) to maintain keyboard accessibility.
+              DO NOT provide any code diffs, code snippets, or committable suggestions. Provide plain text feedback only.
+
+        - path: '**/*.scss'
+          instructions: |
+              Ensure a strict Mobile-First styling approach is used (rely on min-width media queries, never max-width).
+              Enforce the BEM (Block-Element-Modifier) naming convention strictly for all classes.
+              Ensure the design layout relies strictly on display: grid or display: flex.
+              Flag and reject any imports or usage of external UI frameworks like Bootstrap or Material UI.
+              Check for proper SCSS mixins usage and standard SASS documentation/comments.
+              DO NOT provide any code diffs, code snippets, or committable suggestions. Provide plain text feedback only.
+
+        - path: '**/*.js'
+          instructions: |
+              Ensure the API data from the Gist endpoint is fetched only once and properly handled using async/await.
+              Verify that the "Spin & Win" wheel selection logic correctly picks 4 unique deals while excluding already won deals.
+              Ensure won deals are correctly accumulated, stored in state, and sorted by their relative validity date.
+              Check that Event Delegation is utilized effectively for interacting with dynamic UI lists (e.g., the Copy Code buttons).
+              Enforce standard JSDoc formatting and comments on all major functions.
+              DO NOT provide any code diffs, code snippets, or committable suggestions. Provide plain text feedback only.
+
+    tools:
+        eslint:
+            enabled: true
+        stylelint:
+            enabled: true
+        htmlhint:
+            enabled: true
+        gitleaks:
+            enabled: true
+        trufflehog:
+            enabled: true
+        osvScanner:
+            enabled: true
+        semgrep:
+            enabled: true
+
+    path_filters:
+        - '!node_modules/**'
+        - '!dist/**'
+        - '!build/**'
+        - '!.next/**'
+        - '!package-lock.json'
+        - '!yarn.lock'
+        - '!pnpm-lock.yaml'
+        - '!**/vendor/**'
+        - '!**/*.md'
+
+# Disabling chat limits the AI's conversational auto-replies
+chat:
+    auto_reply: false

.github/workflows/pr-check.yml

@@ -1,73 +1,73 @@
 name: pr-check
 
 on:
-  pull_request:
-    types: [opened, edited, reopened, synchronize]
+    pull_request:
+        types: [opened, edited, reopened, synchronize]
 
 env:
-  STORY_ID: '[A-Z]{2,3}_A[0-9]+_[0-9]{2}'
+    STORY_ID: '[A-Z]{2,3}_A[0-9]+_[0-9]{2}'
 
 jobs:
-  validate:
-    name: Validate branch, PR title and commits
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout (full history for commit range)
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
+    validate:
+        name: Validate branch, PR title and commits
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout (full history for commit range)
+              uses: actions/checkout@v4
+              with:
+                  fetch-depth: 0
 
-      - name: Validate branch name
-        env:
-          BRANCH_NAME: ${{ github.head_ref }}
-        run: |
-          REGEX="^(${STORY_ID})(/.*)?$"
-          if ! echo "$BRANCH_NAME" | grep -Eq "$REGEX"; then
-            echo "::error::Invalid branch name '$BRANCH_NAME'"
-            echo "Branch must start with a Story ID, e.g. AJ_A1_00 or AJ_A1_00/base-setup"
-            exit 1
-          fi
-          echo "Branch name OK: $BRANCH_NAME"
+            - name: Validate branch name
+              env:
+                  BRANCH_NAME: ${{ github.head_ref }}
+              run: |
+                  REGEX="^(${STORY_ID})(/.*)?$"
+                  if ! echo "$BRANCH_NAME" | grep -Eq "$REGEX"; then
+                    echo "::error::Invalid branch name '$BRANCH_NAME'"
+                    echo "Branch must start with a Story ID, e.g. AJ_A1_00 or AJ_A1_00/base-setup"
+                    exit 1
+                  fi
+                  echo "Branch name OK: $BRANCH_NAME"
 
-      - name: Validate PR title
-        env:
-          PR_TITLE: ${{ github.event.pull_request.title }}
-        run: |
-          REGEX="^\[(${STORY_ID})\]: .+"
-          if ! echo "$PR_TITLE" | grep -Eq "$REGEX"; then
-            echo "::error::Invalid PR title '$PR_TITLE'"
-            echo "PR title must follow: [Story_ID]: <Task Title>  e.g. [AJ_A1_01]: Complete header section"
-            exit 1
-          fi
-          echo "PR title OK: $PR_TITLE"
+            - name: Validate PR title
+              env:
+                  PR_TITLE: ${{ github.event.pull_request.title }}
+              run: |
+                  REGEX="^\[(${STORY_ID})\]: .+"
+                  if ! echo "$PR_TITLE" | grep -Eq "$REGEX"; then
+                    echo "::error::Invalid PR title '$PR_TITLE'"
+                    echo "PR title must follow: [Story_ID]: <Task Title>  e.g. [AJ_A1_01]: Complete header section"
+                    exit 1
+                  fi
+                  echo "PR title OK: $PR_TITLE"
 
-      - name: Validate commit messages
-        env:
-          BASE_SHA: ${{ github.event.pull_request.base.sha }}
-          BEFORE_SHA: ${{ github.event.before }}
-          HEAD_SHA: ${{ github.event.pull_request.head.sha }}
-        run: |
-          REGEX="^\[(${STORY_ID})\]: .+"
-          STATUS=0
-          FROM_SHA="$BEFORE_SHA"
-          if [ -z "$FROM_SHA" ] \
-            || [ "$FROM_SHA" = "0000000000000000000000000000000000000000" ] \
-            || ! git cat-file -e "$FROM_SHA^{commit}" 2>/dev/null; then
-            FROM_SHA="$BASE_SHA"
-          fi
-          while IFS= read -r SUBJECT; do
-            [ -z "$SUBJECT" ] && continue
-            case "$SUBJECT" in
-              "Merge branch "*|"Merge pull request "*|"Merge remote-tracking "*) continue ;;
-            esac
-            if ! echo "$SUBJECT" | grep -Eq "$REGEX"; then
-              echo "::error::Invalid commit message: \"$SUBJECT\""
-              STATUS=1
-            fi
-          done < <(git log --format='%s' "$FROM_SHA".."$HEAD_SHA")
+            - name: Validate commit messages
+              env:
+                  BASE_SHA: ${{ github.event.pull_request.base.sha }}
+                  BEFORE_SHA: ${{ github.event.before }}
+                  HEAD_SHA: ${{ github.event.pull_request.head.sha }}
+              run: |
+                  REGEX="^\[(${STORY_ID})\]: .+"
+                  STATUS=0
+                  FROM_SHA="$BEFORE_SHA"
+                  if [ -z "$FROM_SHA" ] \
+                    || [ "$FROM_SHA" = "0000000000000000000000000000000000000000" ] \
+                    || ! git cat-file -e "$FROM_SHA^{commit}" 2>/dev/null; then
+                    FROM_SHA="$BASE_SHA"
+                  fi
+                  while IFS= read -r SUBJECT; do
+                    [ -z "$SUBJECT" ] && continue
+                    case "$SUBJECT" in
+                      "Merge branch "*|"Merge pull request "*|"Merge remote-tracking "*) continue ;;
+                    esac
+                    if ! echo "$SUBJECT" | grep -Eq "$REGEX"; then
+                      echo "::error::Invalid commit message: \"$SUBJECT\""
+                      STATUS=1
+                    fi
+                  done < <(git log --format='%s' "$FROM_SHA".."$HEAD_SHA")
 
-          if [ "$STATUS" -ne 0 ]; then
-            echo "Each commit must follow: [Story_ID]: <message>  e.g. [AJ_A1_01]: Add header"
-            exit 1
-          fi
-          echo "All commit messages OK"
+                  if [ "$STATUS" -ne 0 ]; then
+                    echo "Each commit must follow: [Story_ID]: <message>  e.g. [AJ_A1_01]: Add header"
+                    exit 1
+                  fi
+                  echo "All commit messages OK"

index.html

@@ -4,10 +4,9 @@
         <title>Title</title>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="stylesheet" href="src/styles/main.scss" />
+        <link rel="stylesheet" href="./public/styles/main.css" />
     </head>
     <body>
-        <div>Hello World</div>
         <script type="module" src="./src/script/index.js"></script>
     </body>
 </html>

public/content.json

@@ -0,0 +1,35 @@
+{
+    "header": {
+        "nav": ["home", "discover", "special deals", "contact"],
+        "buttons": ["log in", "sign up"]
+    },
+    "section-1": {
+        "float": "Explore the world!",
+        "heading": "Travel top destination of the world",
+        "sub-text": "We always make our customer happy by providing as many choices as possible "
+    },
+    "btn": ["get started", "watch demo"],
+    "section-2": {
+        "float": "travel point",
+        "heading": "We helping you find your dream location",
+        "sub-text": "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC."
+    },
+    "card": {
+        "card_1": {
+            "number": "500+",
+            "heading": "holiday package"
+        },
+        "card_2": {
+            "number": "100",
+            "heading": "Luxury Hotel"
+        },
+        "card_3": {
+            "number": "7",
+            "heading": "Premium Airlines"
+        },
+        "card_4": {
+            "number": "2k+",
+            "heading": "Happy Customer"
+        }
+    }
+}