Aem assets plugin (#111)

* add css rules to hide header and footer until they are loaded * chore(deps): update dependency stylelint to v16.1.0 (adobe#314) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency stylelint-config-standard to v36 (adobe#315) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency chai to v5 (adobe#316) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency @babel/core to v7.23.7 (adobe#317) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency semantic-release to v23 (adobe#320) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore: update node version (adobe#321) * chore: update node version * chore: use node 20 * chore: get rid of semantic release (adobe#322) * fix(lib): update scripts/aem.js to [email protected] Test URL: https://update-lib-aem-patch-1-5-1--aem-boilerplate--adobe.hlx.live/ Release Notes: https://github.com/adobe/aem-lib/releases/tag/v1.5.1 * chore(doc): link to cli in README (adobe#330) * chore(deps): update dependency stylelint to v16.2.1 (adobe#324) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency chai to v5.1.0 (adobe#328) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update babel monorepo (adobe#329) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency eslint to v8.57.0 (adobe#333) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency stylelint to v16.3.1 (adobe#341) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update babel monorepo (adobe#340) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update cleanup-on-create.yaml * Update cleanup-on-create.yaml * Update cleanup-on-create.yaml * chore(deps): update dependency @babel/core to v7.24.4 (adobe#342) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix: header/footer fragment loading (#13) * chore: unify header/footer decoration * fix(lib): update scripts/aem.js to [email protected] Test URL: https://update-lib-aem-patch-1-5-4--aem-boilerplate--adobe.hlx.live/ Release Notes: https://github.com/adobe/aem-lib/releases/tag/v1.5.4 * fix: cards fail if text contains an icon * fix(404): do not include target, as it is redundant with URL * fix: clarify eslint rules * feat: add quote parity with eslint in stylelint * chore: lint * fix: remove unused rule * fix: remove deprecated root var * feat: added updated fonts * fix: apply s2 font styles * fix: increase body font size * chore: unify color vars against s2 spec * fix: increase color contrast between bg and link * fix: increase contrast between link and text * fix: unify container padding, margins, radius * chore(deps): update dependency stylelint to v16.6.1 (adobe#356) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update babel monorepo to v7.24.6 (adobe#358) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency chai to v5.1.1 (adobe#360) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update babel monorepo to v7.24.7 (adobe#367) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix: link color meets background AND text contrast reqs * chore: remove unused dep (adobe#368) * fix: close the nav when it loses focus, e.g keyboard user tabs out of it * fix: manual patch of sampleRUM (adobe#370) * feat: better error tracking (adobe#375) * feat(lib): update scripts/aem.js to [email protected] (adobe#378) Test URL: https://update-lib-aem-minor-2-3-0--aem-boilerplate--adobe.hlx.live/ Release Notes: https://github.com/adobe/aem-lib/releases/tag/v2.3.0 Co-authored-by: semantic-release-bot <[email protected]> * feat: section loader * chore(deps): update dependency stylelint to v16.7.0 (adobe#381) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency @babel/eslint-parser to v7.24.8 (adobe#380) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency stylelint-config-standard to v36.0.1 (adobe#373) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * feat(lib): update scripts/aem.js to [email protected] (adobe#383) Test URL: https://update-lib-aem-minor-2-5-0--aem-boilerplate--adobe.hlx.live/ Release Notes: https://github.com/adobe/aem-lib/releases/tag/v2.5.0 Co-authored-by: semantic-release-bot <[email protected]> * feat: use rum js v2 (adobe#371) * fix: a11y contrast fix * chore: lint * fix: a styles * chore: lint * chore: a11y colors * fix: border color on cards * fix: a11y header, ul > li role * fix(lib): update scripts/aem.js to [email protected] (adobe#388) Test URL: https://update-lib-aem-patch-2-5-1--aem-boilerplate--adobe.hlx.live/ Release Notes: https://github.com/adobe/aem-lib/releases/tag/v2.5.1 Co-authored-by: semantic-release-bot <[email protected]> * chore(deps): update dependency @babel/eslint-parser to v7.25.1 (adobe#385) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency stylelint to v16.8.1 (adobe#386) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore: add editor config (adobe#353) * updating url to .aem.live from .hlx.live * docs: updating the preview and live urls in readme to .aem.page and .aem.live * fix(lib): update scripts/aem.js to [email protected] (adobe#391) Test URL: https://update-lib-aem-patch-2-5-2--aem-boilerplate--adobe.hlx.live/ Release Notes: https://github.com/adobe/aem-lib/releases/tag/v2.5.2 Co-authored-by: semantic-release-bot <[email protected]> * chore(deps): update dependency stylelint to v16.8.2 (adobe#389) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * docs(readme): use correct AEM Live link * chore(github): update pull request template to use aem.live * Squashed 'plugins/aem-assets-plugin/' content from commit 2bf7be5 git-subtree-dir: plugins/aem-assets-plugin git-subtree-split: 2bf7be5876c039f3d22fcde65401635b7410f1cc * feat: Integrate asem-assets plugin * Add linting exception for videojs * Ignore videojs from linting --------- Co-authored-by: Sean Steimer <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Tobias Bocanegra <[email protected]> Co-authored-by: Alexandre Capt <[email protected]> Co-authored-by: semantic-release-bot <[email protected]> Co-authored-by: dylandepass <[email protected]> Co-authored-by: Katie Sexton <[email protected]> Co-authored-by: gargadobe <[email protected]> Co-authored-by: Dirk Rudolph <[email protected]> Co-authored-by: Lars Trieloff <[email protected]> Co-authored-by: adobe-bot <[email protected]> Co-authored-by: David Nuescheler <[email protected]> Co-authored-by: Simon Sippert <[email protected]> Co-authored-by: Kiran Murugulla <[email protected]> Co-authored-by: Satya Deep Maheshwari <[email protected]>
hlxsites · Oct 10, 2024 · 6089f96 · 6089f96
1 parent d778732
commit 6089f96
Show file tree

Hide file tree

Showing 51 changed files with 8,846 additions and 16,591 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,5 @@
+[*.js]
+indent_size = 2
+
+[*.css]
+indent_size = 4
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,3 @@
 helix-importer-ui
+plugins/aem-assets-plugin/blocks/video/videojs
 blocks/video/videojs
diff --git a/.eslintrc.js b/.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
   },
 };
diff --git a/.github/pull_request_template.md b/.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--{repo}--{owner}.hlx.live/
-- After: https://<branch>--{repo}--{owner}.hlx.live/
+- Before: https://main--{repo}--{owner}.aem.live/
+- After: https://<branch>--{repo}--{owner}.aem.live/
diff --git a/.github/workflows/cleanup-on-create.yaml b/.github/workflows/cleanup-on-create.yaml
@@ -6,30 +6,26 @@ 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.ref == 'refs/heads/main' && github.event.head_commit.message == 'Initial commit' }}
+    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@v4
-      - name: Use Node.js 18
+      - name: Use Node.js 20
         uses: actions/setup-node@v4
         with:
-          node-version: 18
-      - name: Uninstall dependencies
-        run: |
-          npm uninstall --save-dev semantic-release @semantic-release/git @semantic-release/changelog @semantic-release/exec
+          node-version: 20
       - name: Remove Helper Files
         run: | 
           rm -rf \
             .github/workflows/cleanup-on-create.yaml \
-            .github/workflows/semantic-release.yaml \
-            .releaserc.cjs \
             CHANGELOG.md
 
       - name: Initialize README
@@ -47,7 +43,7 @@ jobs:
       - name: Commit changes
         run: |
           git config --local user.email "[email protected]"
-          git config --local user.name "Helix Bot"
+          git config --local user.name "AEM Bot"
           git add .
           git commit -m "chore: cleanup repository template"
           git push
diff --git a/.github/workflows/main.yaml b/.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
diff --git a/.github/workflows/run-tests.yaml b/.github/workflows/run-tests.yaml
diff --git a/.github/workflows/semantic-release.yaml b/.github/workflows/semantic-release.yaml
diff --git a/.releaserc.cjs b/.releaserc.cjs
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,3 +1,3 @@
 {
   "extends": ["stylelint-config-standard"]
-}
+}
diff --git a/404.html b/404.html
@@ -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 {
@@ -42,7 +43,7 @@
     }
 
     main.error .error-number text {
-      font-family: var(--fixed-font-family);
+      font-family: monospace;
     }
   </style>
   <link rel="stylesheet" href="/styles/lazy-styles.css">

diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -71,4 +71,3 @@ One of the maintainers will look at the pull request within one week. Feedback o
 The project's committers will release to the [Adobe organization on npmjs.org](https://www.npmjs.com/org/adobe).
 Please contact the [Adobe Open Source Advisory Board](https://git.corp.adobe.com/OpenSourceAdvisoryBoard/discuss/issues) to get access to the npmjs organization.
 
-The release process is fully automated using `semantic-release`, increasing the version numbers, etc. based on the contents of the commit messages found.
diff --git a/README.md b/README.md
@@ -8,8 +8,8 @@ Integration between AEM Asset Selector and AEM Franklin to make AEM assets avail
 ![High Level Flow](/resources/using-asset-selector-with-franklin.jpeg)
 
 ## Environments
-- Preview: https://main--{repo}--{owner}.hlx.page/
-- Live: https://main--{repo}--{owner}.hlx.live/
+- Preview: https://main--{repo}--{owner}.aem.page/
+- Live: https://main--{repo}--{owner}.aem.live/
 
 ## Installation
 
@@ -27,7 +27,7 @@ npm run lint
 
 1. Create a new repository based on the `aem-boilerplate` template and add a mountpoint in the `fstab.yaml`
 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/aem-cli): `npm install -g @adobe/aem-cli`
+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 :)
 

diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
@@ -3,13 +3,13 @@
   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);
-  background-color: var(--background-color)
+  border: 1px solid #dadada;
+  background-color: var(--background-color);
 }
 
 .cards .cards-card-body {
@@ -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;

diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js
@@ -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);
 }
diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css
@@ -23,7 +23,7 @@
   .columns > div {
     align-items: center;
     flex-direction: unset;
-    gap: 32px;
+    gap: 24px;
   }
 
   .columns > div > div {

diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
@@ -1,14 +1,20 @@
 footer {
-  padding: 2rem;
   background-color: var(--light-color);
-  font-size: var(--body-font-size-s);
+  font-size: var(--body-font-size-xs);
 }
 
-footer .footer {
-  max-width: 1200px;
+footer .footer > div {
   margin: auto;
+  max-width: 1200px;
+  padding: 40px 24px 24px;
 }
 
 footer .footer p {
   margin: 0;
 }
+
+@media (width >= 900px) {
+  footer .footer > div {
+    padding: 40px 32px 24px;
+  }
+}
diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js
@@ -6,14 +6,13 @@ import { loadFragment } from '../fragment/fragment.js';
  * @param {Element} block The footer block element
  */
 export default async function decorate(block) {
+  // load footer as fragment
   const footerMeta = getMetadata('footer');
-  block.textContent = '';
-
-  // load footer fragment
-  const footerPath = footerMeta.footer || '/footer';
+  const footerPath = footerMeta ? new URL(footerMeta, window.location).pathname : '/footer';
   const fragment = await loadFragment(footerPath);
 
   // decorate footer DOM
+  block.textContent = '';
   const footer = document.createElement('div');
   while (fragment.firstElementChild) footer.append(fragment.firstElementChild);
 

diff --git a/blocks/fragment/fragment.css b/blocks/fragment/fragment.css
@@ -1,13 +1 @@
-/* suppress nested section padding */
-.fragment-wrapper > .section {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.fragment-wrapper > .section:first-of-type {
-  padding-top: 0;
-}
-
-.fragment-wrapper > .section:last-of-type {
-  padding-bottom: 0;
-}
+/* stylelint-disable no-empty-source */
diff --git a/blocks/fragment/fragment.js b/blocks/fragment/fragment.js
@@ -9,7 +9,7 @@ import {
 } from '../../scripts/scripts.js';
 
 import {
-  loadBlocks,
+  loadSections,
 } from '../../scripts/aem.js';
 
 /**
@@ -34,7 +34,7 @@ export async function loadFragment(path) {
       resetAttributeBase('source', 'srcset');
 
       decorateMain(main);
-      await loadBlocks(main);
+      await loadSections(main);
       return main;
     }
   }