Merge branch 'main' into davidnuescheler-patch-1

Author: fkakatie

.eslintrc.js

@@ -11,11 +11,8 @@ module.exports = {
     requireConfigFile: false,
   },
   rules: {
-    // allow reassigning param
-    'no-param-reassign': [2, { props: false }],
-    'linebreak-style': ['error', 'unix'],
-    'import/extensions': ['error', {
-      js: 'always',
-    }],
+    'import/extensions': ['error', { js: 'always' }], // require js file extensions in imports
+    'linebreak-style': ['error', 'unix'], // enforce unix linebreaks
+    'no-param-reassign': [2, { props: false }], // allow modifying properties of param
   },
 };

.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--helix-block-collection--adobe.hlx.page
-- After: https://<branch>--helix-block-collection--adobe.hlx.page
+- Before: https://main--{repo}--{owner}.aem.live/
+- After: https://<branch>--{repo}--{owner}.aem.live/

.github/workflows/main.yaml

@@ -0,0 +1,14 @@
+name: Build
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js 20
+      uses: actions/setup-node@v4
+      with:
+        node-version: 20
+    - run: npm ci
+    - run: npm run lint

.github/workflows/run-tests.yaml

@@ -1,3 +1,3 @@
 {
-  "extends": ["github>adobe/helix-shared"]
+  "extends": ["config:recommended"]
 }

.renovaterc.json

@@ -11,8 +11,6 @@
   <meta property="og:title" content="Page not found">
   <script src="/scripts/scripts.js" type="module" crossorigin="use-credentials"></script>
   <script type="module">
-    import { sampleRUM } from '/scripts/aem.js';
-
     window.addEventListener('load', () => {
       if (document.referrer) {
         const { origin, pathname } = new URL(document.referrer);
@@ -26,9 +24,12 @@
           btnContainer.append(backBtn);
         }
       }
-      sampleRUM('404', { source: document.referrer, target: window.location.href });
     });
   </script>
+  <script type="module">
+    import { sampleRUM } from '/scripts/aem.js';
+    sampleRUM('404', { source: document.referrer });
+  </script>
   <link rel="stylesheet" href="/styles/styles.css">
   <style>
     main.error {

404.html

@@ -1,21 +1,35 @@
-# 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
 
 ```sh
 npm i
 ```
 
+## Linting
+
+```sh
+npm run lint
+```
+
 ## Local development
 
 1. Create a new repository based on the `aem-block-collection` template and add a mountpoint in the `fstab.yaml`
-1. Add the [aem-code-sync](https://github.com/apps/aem-code-sync) to the repository
+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 Simulator: `aem up` (opens your browser at `http://localhost:3000`)
 1. Open the `{repo}` directory in your favorite IDE and start coding :)

README.md

@@ -1,16 +1,20 @@
 .accordion details {
-  border: 1px solid var(--dark-color);
+  border: 1px solid #dadada;
 }
 
 /* stylelint-disable-next-line no-descending-specificity */
 .accordion details + details {
-  margin-top: 16px;
+  margin-top: 24px;
+}
+
+.accordion details p {
+  margin-bottom: 0.8em;
 }
 
 .accordion details summary {
   position: relative;
   padding: 0 16px;
-  padding-right: 48px;
+  padding-right: 46px;
   cursor: pointer;
   list-style: none;
   overflow: auto;
@@ -23,21 +27,21 @@
 
 .accordion details summary:focus,
 .accordion details summary:hover {
-  background-color: var(--dark-color);
+  background-color: var(--light-color);
 }
 
 .accordion details summary::-webkit-details-marker {
   display: none;
 }
 
 .accordion details summary::after {
-  content: "";
+  content: '';
   position: absolute;
   top: 50%;
   right: 18px;
   transform: translateY(-50%) rotate(135deg);
-  width: 9px;
-  height: 9px;
+  width: 6px;
+  height: 6px;
   border: 2px solid;
   border-width: 2px 2px 0 0;
   transition: transform 0.2s;
@@ -52,6 +56,6 @@
 }
 
 .accordion details[open] .accordion-item-body {
-  border-top: 1px solid var(--dark-color);
+  border-top: 1px solid #dadada;
   background-color: var(--background-color);
 }

blocks/accordion/accordion.css

@@ -4,26 +4,16 @@
  * https://www.hlx.live/developer/block-collection/accordion
  */
 
-function hasWrapper(el) {
-  return !!el.firstElementChild && window.getComputedStyle(el.firstElementChild).display === 'block';
-}
-
 export default function decorate(block) {
   [...block.children].forEach((row) => {
     // decorate accordion item label
     const label = row.children[0];
     const summary = document.createElement('summary');
     summary.className = 'accordion-item-label';
     summary.append(...label.childNodes);
-    if (!hasWrapper(summary)) {
-      summary.innerHTML = `<p>${summary.innerHTML}</p>`;
-    }
     // decorate accordion item body
     const body = row.children[1];
     body.className = 'accordion-item-body';
-    if (!hasWrapper(body)) {
-      body.innerHTML = `<p>${body.innerHTML}</p>`;
-    }
     // decorate accordion item
     const details = document.createElement('details');
     details.className = 'accordion-item';

blocks/accordion/accordion.js

@@ -3,12 +3,12 @@
   margin: 0;
   padding: 0;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
-  grid-gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(257px, 1fr));
+  grid-gap: 24px;
 }
 
 .cards > ul > li {
-  border: 1px solid var(--dark-color);
+  border: 1px solid #dadada;
   background-color: var(--background-color);
 }
 
@@ -20,10 +20,6 @@
   line-height: 0;
 }
 
-.cards .cards-card-body > *:first-child {
-  margin-top: 0;
-}
-
 .cards > ul > li img {
   width: 100%;
   aspect-ratio: 4 / 3;

blocks/cards/cards.css

@@ -12,7 +12,7 @@ export default function decorate(block) {
     });
     ul.append(li);
   });
-  ul.querySelectorAll('img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }])));
+  ul.querySelectorAll('picture > img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }])));
   block.textContent = '';
   block.append(ul);
 }