chore: sync with AEM Block Collection

.github/pull_request_template.md

@@ -3,5 +3,5 @@ Please always provide the [GitHub issue(s)](../issues) your PR is for, as well a
 Fix #<gh-issue-id>
 
 Test URLs:
-- Before: https://main--aem-block-collection--adobe.hlx.page
-- After: https://<branch>--aem-block-collection--adobe.hlx.page
+- Before: https://main--{repo}--{owner}.aem.live/
+- After: https://<branch>--{repo}--{owner}.aem.live/

.github/workflows/cleanup-on-create.yaml

@@ -0,0 +1,49 @@
+# This workflow will run upon repository creation and clean up
+# all files that are not strictly required to build an AEM Live project
+# but that we use to develop the project template. This includes this
+# particular workflow file.
+on:
+  create:
+    branches:
+      - main
+  workflow_dispatch:
+jobs:
+  cleanup:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      actions: write
+    # only run if commit message is "Initial commit" on main branch
+    if: ${{ github.event_name == 'workflow_dispatch' || ( github.ref == 'refs/heads/main' && !(contains(github.event, 'head_commit') || github.event.head_commit.message == 'Initial commit' )) }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+      - name: Use Node.js 20
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+      - name: Remove Helper Files
+        run: | 
+          rm -rf \
+            .github/workflows/cleanup-on-create.yaml \
+            CHANGELOG.md
+
+      - name: Initialize README
+        # replace {repo} and {owner} with the actual values
+        run: |
+          sed -i.bak "s/{repo}/$(basename ${{ github.repository }})/g" README.md
+          sed -i.bak "s/{owner}/$(dirname ${{ github.repository }})/g" README.md
+      - name: Initialize Pull Request Template
+        run: |
+          sed -i.bak "s/{repo}/$(basename ${{ github.repository }})/g" .github/pull_request_template.md
+          sed -i.bak "s/{owner}/$(dirname ${{ github.repository }})/g" .github/pull_request_template.md
+
+
+        # commit back to the repository
+      - name: Commit changes
+        run: |
+          git config --local user.email "helix@adobe.com"
+          git config --local user.name "AEM Bot"
+          git add .
+          git commit -m "chore: cleanup repository template"
+          git push

.github/workflows/main.yaml

@@ -5,10 +5,10 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - name: Use Node.js 20
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v6
       with:
-        node-version: 20
+        node-version: 24
     - run: npm ci
     - run: npm run lint

.renovaterc.json

@@ -1,3 +1,8 @@
 {
-  "extends": ["config:recommended"]
+  "extends": ["config:recommended"],
+  "packageRules": [{
+      "matchDepTypes": ["devDependencies"],
+      "labels": ["ignore-psi-check"], 
+      "automerge": true
+  }]
 }

404.html

@@ -9,7 +9,7 @@
   </script>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta property="og:title" content="Page not found">
-  <script src="/scripts/scripts.js" type="module" crossorigin="use-credentials"></script>
+  <script src="/scripts/scripts.js" type="module"></script>
   <script type="module">
     window.addEventListener('load', () => {
       if (document.referrer) {

README.md

@@ -1,10 +1,18 @@
-# Block Collection
-
-This project contains code that is featured in the [AEM Block Collection](https://www.aem.live/developer/block-collection#block-collection-1) documentation.
+# Your Project's Title...
+Your project's description...
 
 ## Environments
-- Preview: https://main--aem-block-collection--adobe.hlx.page/
-- Live: https://main--aem-block-collection--adobe.hlx.live/
+- Preview: https://main--{repo}--{owner}.aem.page/
+- Live: https://main--{repo}--{owner}.aem.live/
+
+## Documentation
+
+Before using the aem-block-collection, we recommand you to go through the documentation on https://www.aem.live/docs/ and more specifically:
+1. [Developer Tutorial](https://www.aem.live/developer/tutorial)
+2. [The Anatomy of a Project](https://www.aem.live/developer/anatomy-of-a-project)
+3. [Web Performance](https://www.aem.live/developer/keeping-it-100)
+4. [Markup, Sections, Blocks, and Auto Blocking](https://www.aem.live/developer/markup-sections-blocks)
+5. [AEM Block Collection](https://www.aem.live/developer/block-collection#block-collection-1)
 
 ## Installation
 
@@ -24,4 +32,4 @@ npm run lint
 1. Add the [AEM Code Sync GitHub App](https://github.com/apps/aem-code-sync) to the repository
 1. Install the [AEM CLI](https://github.com/adobe/helix-cli): `npm install -g @adobe/aem-cli`
 1. Start AEM Proxy: `aem up` (opens your browser at `http://localhost:3000`)
-1. Open the `{repo}` directory in your favorite IDE and start coding :)
+1. Open the `{repo}` directory in your favorite IDE and start coding :)

blocks/cards/cards.css

@@ -4,7 +4,7 @@
   padding: 0;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(257px, 1fr));
-  grid-gap: 24px;
+  gap: 24px;
 }
 
 .cards > ul > li {

blocks/carousel/carousel.css

@@ -56,7 +56,7 @@
   margin: 68px;
   padding: 16px;
   color: white;
-  background-color: rgba(19 19 19 / 75%);
+  background-color: rgb(19 19 19 / 75%);
   position: relative;
   width: var(--slide-content-width, auto);
 }
@@ -77,7 +77,7 @@
   margin: 0;
   padding: 0;
   border-radius: 50%;
-  background-color: #dadada;
+  background-color: #8F8F8F;
   transition: background-color 0.2s;
 }
 
@@ -107,13 +107,13 @@
   margin: 0;
   border-radius: 50%;
   padding: 0;
-  background-color: rgba(19 19 19 / 25%);
+  background-color: rgb(19 19 19 / 25%);
   transition: background-color 0.2s;
 }
 
 .carousel .carousel-navigation-buttons button:hover,
 .carousel .carousel-navigation-buttons button:focus-visible {
-  background-color: rgba(19 19 19 / 75%);
+  background-color: rgb(19 19 19 / 75%);
 }
 
 .carousel .carousel-navigation-buttons button::after {

blocks/carousel/carousel.js

@@ -1,4 +1,4 @@
-import { fetchPlaceholders } from '../../scripts/aem.js';
+import { fetchPlaceholders } from '../../scripts/placeholders.js';
 
 function updateActiveSlide(slide) {
   const block = slide.closest('.carousel');
@@ -20,10 +20,13 @@ function updateActiveSlide(slide) {
 
   const indicators = block.querySelectorAll('.carousel-slide-indicator');
   indicators.forEach((indicator, idx) => {
+    const button = indicator.querySelector('button');
     if (idx !== slideIndex) {
-      indicator.querySelector('button').removeAttribute('disabled');
+      button.removeAttribute('disabled');
+      button.removeAttribute('aria-current');
     } else {
-      indicator.querySelector('button').setAttribute('disabled', 'true');
+      button.setAttribute('disabled', true);
+      button.setAttribute('aria-current', true);
     }
   });
 }