Merge branch 'main' of github.com:hlxsites/franklin-assets-selector i…

…nto dev

.editorconfig

@@ -0,0 +1,5 @@
+[*.js]
+indent_size = 2
+
+[*.css]
+indent_size = 4

.eslintignore

@@ -1 +1,3 @@
-helix-importer-ui
+helix-importer-ui
+plugins/aem-assets-plugin/blocks/video/videojs
+blocks/video/videojs

.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--franklin-assets-selector--hlxsites.hlx.page/aem-asset-selector
-- After: https://<branch>--franklin-assets-selector--hlxsites.hlx.page/aem-asset-selector
+- Before: https://main--{repo}--{owner}.aem.live/
+- After: https://<branch>--{repo}--{owner}.aem.live/

.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

.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

.stylelintrc.json

@@ -1,3 +1,3 @@
 {
   "extends": ["stylelint-config-standard"]
-}
+}

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">

CONTRIBUTING.md

@@ -44,4 +44,51 @@ feel free to reach out to existing committers to have a conversation about that.
 
 ## Security Issues
 
-Security issues shouldn't be reported on this issue tracker. Instead, [file an issue to our security experts](https://helpx.adobe.com/security/alertus.html).
+1. Fork the repository
+2. Make some changes on a branch on your fork
+3. Create a pull request from your branch
+
+In your pull request, outline:
+
+* What the changes intend
+* How they change the existing code
+* If (and what) they breaks
+* Start the pull request with the GitHub issue ID, e.g. #123
+
+Lastly, please follow the [pull request template](.github/pull_request_template.md) when submitting a pull request!
+
+Each commit message that is not part of a pull request:
+
+* Should contain the issue ID like `#123`
+* Can contain the tag `[trivial]` for trivial changes that don't relate to an issue
+
+
+
+## Coding Styleguides
+
+We enforce a coding styleguide using `eslint`. As part of your build, run `npm run lint` to check if your code is conforming to the style guide. We do the same for every PR in our CI, so PRs will get rejected if they don't follow the style guide.
+
+You can fix some of the issues automatically by running `npx eslint . --fix`.
+
+## Commit Message Format
+
+This project uses a structured commit changelog format that should be used for every commit. Use `npm run commit` instead of your usual `git commit` to generate commit messages using a wizard.
+
+```bash
+# either add all changed files
+$ git add -A
+# or selectively add files
+$ git add package.json
+# then commit using the wizard
+$ npm run commit
+```
+
+# How Contributions get Reviewed
+
+One of the maintainers will look at the pull request within one week. Feedback on the pull request will be given in writing, in GitHub.
+
+# Release Management
+
+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.
+

EXTERNAL_IMAGES.md

@@ -43,3 +43,24 @@ export function decorateMain(main) {
 During the page rendering process, the frontend code replaces the anchor tags identified as exteernal images on the page with the `picture` tags with `src`/`srcset` attributes set as the external image's url as specified in the external image link placed on the Word / Google Document during the page authoring process.
 
 Authors can optionally specify query paramaters in the hyperlinked external url and they would be retained in the `picture` tag's `src`/`srcset` attributes. These are useful for specifying image delivery parameters such as image width, height, format, etc. as understood by the external image delivery service.
+
+## Preview for an external image along with alt text support
+
+The above approach works well for external images, but it can be challenging for authors to determine which images are being used on the page. This issue can be addressed by using a preview image instead of the URL or external image markup. The external delivery URL can be stored in the image’s alt text attribute. A client script then parses this alt text attribute to replace the URL with the actual delivery URL while also preserving the accessible alt text.
+Check sample page [here](https://main--franklin-assets-selector--hlxsites.hlx.live/delivery-images-example)
+
+
+**Asset selector support :**
+
+The Asset Selector supports copying images with the alt text attribute containing both the delivery URL and the alt text by default. To enable this feature, set the `copyMode` configuration to `use-alt-text` as outlined in [here](https://github.com/hlxsites/franklin-assets-selector/commit/5f5318203746ec192b1b8293003c787851035082)
+
+Here is the sample alt text content which can be seen with copied asset from asset selector
+  ```
+    {
+      "deliveryUrl": "https://delivery-p66302-e574366.adobeaemcloud.com/adobe/dynamicmedia/deliver/urn:aaid:aem:ced69e3f-dda1-487c-921f-f1547476a4b4/seoname.webp?quality=60",
+      "altText": "Mapple trees"
+    }
+  ```
+
+
+

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--aem-assets-boilerplate--hlxsites.hlx.page/aem-asset-selector](https://main--aem-assets-boilerplate--hlxsites.hlx.page/aem-asset-selector)
-- Live: [https://main--aem-assets-boilerplate--hlxsites.hlx.live/aem-asset-selector](https://main--aem-assets-boilerplate--hlxsites.hlx.live/aem-asset-selector)
+- Preview: https://main--{repo}--{owner}.aem.page/
+- Live: https://main--{repo}--{owner}.aem.live/
 
 ## Installation
 
@@ -27,6 +27,21 @@ 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 :)
+
+## Extending the Assets Selector Capabilities
+
+To extend the capabilities of the Assets Selector, you can look at the following sample configurations and GitHub repository as a reference. These configurations are hosted on Adobe IO Runtime through App Builder and can be adapted to fit your project needs and extension requirements.
+
+- [Sample Configuration Hosted on Adobe IO Runtime][0]
+- [Sample Configuration with Web Path][1]
+- [GitHub Reference Implementation][2]
+
+This configuration is particularly useful for extending the Assets Selector capabilities documented [here][3]. Feel free to integrate and customize it as per your project’s use cases.
+
+[0]: https://245265-extensionconfig.adobeioruntime.net/api/v1/web/extension-config/extension-config
+[1]: https://245265-extensionconfig.adobeioruntime.net/api/v1/web/extension-config/extension-config?webPath=snorkling
+[2]: https://github.com/Adobe-Marketing-Cloud/assets-selector-extension
+[3]: https://www.aem.live/developer/configuring-aem-assets-sidekick-plugin#extend-aem-assets-sidekick-plugin

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 {
@@ -28,4 +28,4 @@
     width: 100%;
     aspect-ratio: 4 / 3;
     object-fit: cover;
-  }
+  }