Skip to content

Commit e98649d

Browse files
author
Satya Deep Maheshwari
committed
Merge commit '94fe4b3c3b58ddf047c19f424b6a43d89a53d1a4' as 'plugins/aem-assets-plugin'
2 parents c1b1d18 + 94fe4b3 commit e98649d

22 files changed

+10855
-0
lines changed

‎plugins/aem-assets-plugin/.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
blocks/video/videojs

‎plugins/aem-assets-plugin/.eslintrc.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
root: true,
3+
extends: 'airbnb-base',
4+
env: {
5+
browser: true,
6+
},
7+
parser: '@babel/eslint-parser',
8+
parserOptions: {
9+
allowImportExportEverywhere: true,
10+
sourceType: 'module',
11+
requireConfigFile: false,
12+
},
13+
rules: {
14+
'import/extensions': ['error', { js: 'always' }], // require js file extensions in imports
15+
'linebreak-style': ['error', 'unix'], // enforce unix linebreaks
16+
'no-param-reassign': [2, { props: false }], // allow modifying properties of param
17+
},
18+
};

‎plugins/aem-assets-plugin/.gitignore

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
.pnpm-debug.log*
9+
10+
# Diagnostic reports (https://nodejs.org/api/report.html)
11+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
12+
13+
# Runtime data
14+
pids
15+
*.pid
16+
*.seed
17+
*.pid.lock
18+
19+
# Directory for instrumented libs generated by jscoverage/JSCover
20+
lib-cov
21+
22+
# Coverage directory used by tools like istanbul
23+
coverage
24+
*.lcov
25+
26+
# nyc test coverage
27+
.nyc_output
28+
29+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
30+
.grunt
31+
32+
# Bower dependency directory (https://bower.io/)
33+
bower_components
34+
35+
# node-waf configuration
36+
.lock-wscript
37+
38+
# Compiled binary addons (https://nodejs.org/api/addons.html)
39+
build/Release
40+
41+
# Dependency directories
42+
node_modules/
43+
jspm_packages/
44+
45+
# Snowpack dependency directory (https://snowpack.dev/)
46+
web_modules/
47+
48+
# TypeScript cache
49+
*.tsbuildinfo
50+
51+
# Optional npm cache directory
52+
.npm
53+
54+
# Optional eslint cache
55+
.eslintcache
56+
57+
# Optional stylelint cache
58+
.stylelintcache
59+
60+
# Microbundle cache
61+
.rpt2_cache/
62+
.rts2_cache_cjs/
63+
.rts2_cache_es/
64+
.rts2_cache_umd/
65+
66+
# Optional REPL history
67+
.node_repl_history
68+
69+
# Output of 'npm pack'
70+
*.tgz
71+
72+
# Yarn Integrity file
73+
.yarn-integrity
74+
75+
# dotenv environment variable files
76+
.env
77+
.env.development.local
78+
.env.test.local
79+
.env.production.local
80+
.env.local
81+
82+
# parcel-bundler cache (https://parceljs.org/)
83+
.cache
84+
.parcel-cache
85+
86+
# Next.js build output
87+
.next
88+
out
89+
90+
# Nuxt.js build / generate output
91+
.nuxt
92+
dist
93+
94+
# Gatsby files
95+
.cache/
96+
# Comment in the public line in if your project uses Gatsby and not Next.js
97+
# https://nextjs.org/blog/next-9-1#public-directory-support
98+
# public
99+
100+
# vuepress build output
101+
.vuepress/dist
102+
103+
# vuepress v2.x temp and cache directory
104+
.temp
105+
.cache
106+
107+
# Docusaurus cache and generated files
108+
.docusaurus
109+
110+
# Serverless directories
111+
.serverless/
112+
113+
# FuseBox cache
114+
.fusebox/
115+
116+
# DynamoDB Local files
117+
.dynamodb/
118+
119+
# TernJS port file
120+
.tern-port
121+
122+
# Stores VSCode versions used for testing VSCode extensions
123+
.vscode-test
124+
125+
# yarn v2
126+
.yarn/cache
127+
.yarn/unplugged
128+
.yarn/build-state.yml
129+
.yarn/install-state.gz
130+
.pnp.*

‎plugins/aem-assets-plugin/.stylelintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": ["stylelint-config-standard"]
3+
}

‎plugins/aem-assets-plugin/README.md

+190
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
:construction: This is an early access technology and is still heavily in development. Reach out to us over Slack / Discord before using it.
2+
3+
# AEM Edge Delivery Services Assets Plugin
4+
The AEM Assets Plugin helps you quickly integrate with AEM Assets for your AEM project. It is currently available to customers in collaboration with AEM Engineering via co-innovation VIP Projects. To implement your use cases, please reach out to the AEM Engineering team in the Slack channel dedicated to your project.
5+
6+
## Features
7+
- A collection of blocks to use AEM Assets in Edge Delivery Services based websites
8+
- Utility functions to generate markup for delivering assets from AEM Assets
9+
10+
## Prerequisites
11+
- You need to have an AEM Assets as a Cloud Service subscription
12+
- You need to have access to [Dynamic Media Open API](https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/assets/dynamicmedia/dynamic-media-open-apis/dynamic-media-open-apis-overview)
13+
14+
And you need to have pre-configured:
15+
- [AEM Assets Sidekick plugin](https://www.aem.live/docs/aem-assets-sidekick-plugin) if using Doc based authoring OR
16+
- [Universal Editor Custom Asset Picker](https://developer.adobe.com/uix/docs/extension-manager/extension-developed-by-adobe/configurable-asset-picker/) if using Universal Editor based authoring
17+
18+
## Installation
19+
20+
Add the plugin to your AEM project by running:
21+
```sh
22+
git subtree add --squash --prefix plugins/aem-assets-plugin [email protected]:adobe-rnd/aem-assets-plugin.git main
23+
```
24+
25+
If you later want to pull the latest changes and update your local copy of the plugin
26+
```sh
27+
git subtree pull --squash --prefix plugins/aem-assets-plugin [email protected]:adobe-rnd/aem-assets-plugin.git main
28+
```
29+
30+
If you prefer using `https` links you'd replace `[email protected]:adobe-rnd/aem-assets-plugin.git` in the above commands by `https://github.com:adobe-rnd/aem-assets-plugin.git`.
31+
32+
If the `subtree pull` command is failing with an error like:
33+
```
34+
fatal: can't squash-merge: 'plugins/aem-assets-plugin' was never added
35+
```
36+
you can just delete the folder and re-add the plugin via the `git subtree add` command above.
37+
38+
## Project instrumentation
39+
40+
To properly connect and configure the plugin for your project, you'll need to edit both the `aem.js` and `scripts.js` in your AEM project and add a new file `aem-assets-plugin-support.js` in the `scripts` folder.
41+
42+
> **Note:** All the changes described below can also be seen consolidated in this [git commit](https://github.com/hlxsites/franklin-assets-selector/commit/f512e9b10d752971136fef476402826b61d07f45).
43+
44+
45+
Here's typically how `scripts/aem-assets-plugin-support.js` would look:
46+
47+
```
48+
// The based path of the aem-assets-plugin code.
49+
const codeBasePath = `${window.hlx?.codeBasePath}/plugins/aem-assets-plugin`;
50+
51+
// The blocks that are to be used from the aem-assets-plugin.
52+
const blocks = ['video'];
53+
54+
// Initialize the aem-assets-plugin.
55+
export default async function assetsInit() {
56+
const { loadBlock, createOptimizedPicture } = await import(`${codeBasePath}/scripts/aem-assets.js`);
57+
window.hlx = window.hlx || {};
58+
window.hlx.aemassets = {
59+
codeBasePath,
60+
blocks,
61+
loadBlock,
62+
createOptimizedPicture,
63+
};
64+
}
65+
```
66+
67+
You'd need to add the following code in `createOptimizedPicture` in `aem.js` to call the overidden version of this function
68+
```
69+
if (window.hlx?.aemassets?.createOptimizedPicture) {
70+
return window.hlx.aemassets.createOptimizedPicture(src, alt, eager, breakpoints);
71+
}
72+
```
73+
74+
Here's the complete code for `createOptimizedPicture` in `aem.js` with the above lines of code added
75+
```
76+
function createOptimizedPicture(
77+
src,
78+
alt = '',
79+
eager = false,
80+
breakpoints = [{ media: '(min-width: 600px)', width: '2000' }, { width: '750' }],
81+
) {
82+
83+
// Add below lines of code //
84+
if (window.hlx?.aemassets?.createOptimizedPicture) {
85+
return window.hlx.aemassets.createOptimizedPicture(src, alt, eager, breakpoints);
86+
}
87+
// Add above lines of code //
88+
89+
const url = new URL(src, window.location.href);
90+
const picture = document.createElement('picture');
91+
const { pathname } = url;
92+
const ext = pathname.substring(pathname.lastIndexOf('.') + 1);
93+
94+
// webp
95+
breakpoints.forEach((br) => {
96+
const source = document.createElement('source');
97+
if (br.media) source.setAttribute('media', br.media);
98+
source.setAttribute('type', 'image/webp');
99+
source.setAttribute('srcset', `${pathname}?width=${br.width}&format=webply&optimize=medium`);
100+
picture.appendChild(source);
101+
});
102+
103+
// fallback
104+
breakpoints.forEach((br, i) => {
105+
if (i < breakpoints.length - 1) {
106+
const source = document.createElement('source');
107+
if (br.media) source.setAttribute('media', br.media);
108+
source.setAttribute('srcset', `${pathname}?width=${br.width}&format=${ext}&optimize=medium`);
109+
picture.appendChild(source);
110+
} else {
111+
const img = document.createElement('img');
112+
img.setAttribute('loading', eager ? 'eager' : 'lazy');
113+
img.setAttribute('alt', alt);
114+
picture.appendChild(img);
115+
img.setAttribute('src', `${pathname}?width=${br.width}&format=${ext}&optimize=medium`);
116+
}
117+
});
118+
119+
return picture;
120+
}
121+
```
122+
123+
You'd need to add the following code in `loadBlock` in `aem.js` to call the overidden version of this function
124+
```
125+
if (window.hlx?.aemassets?.loadBlock) {
126+
return window.hlx.aemassets.loadBlock(block);
127+
}
128+
```
129+
130+
Here's the complete code for `loadBlock` in `aem.js` with the above lines of code added
131+
```
132+
async function loadBlock(block) {
133+
134+
// Add below lines of code //
135+
if (window.hlx?.aemassets?.loadBlock) {
136+
return window.hlx.aemassets.loadBlock(block);
137+
}
138+
// Add above lines of code //
139+
140+
const status = block.dataset.blockStatus;
141+
if (status !== 'loading' && status !== 'loaded') {
142+
block.dataset.blockStatus = 'loading';
143+
const { blockName } = block.dataset;
144+
try {
145+
const cssLoaded = loadCSS(`${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.css`);
146+
const decorationComplete = new Promise((resolve) => {
147+
(async () => {
148+
try {
149+
const mod = await import(
150+
`${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.js`
151+
);
152+
if (mod.default) {
153+
await mod.default(block);
154+
}
155+
} catch (error) {
156+
// eslint-disable-next-line no-console
157+
console.log(`failed to load module for ${blockName}`, error);
158+
}
159+
resolve();
160+
})();
161+
});
162+
await Promise.all([cssLoaded, decorationComplete]);
163+
} catch (error) {
164+
// eslint-disable-next-line no-console
165+
console.log(`failed to load block ${blockName}`, error);
166+
}
167+
block.dataset.blockStatus = 'loaded';
168+
}
169+
return block;
170+
}
171+
```
172+
173+
In `scripts/scripts.js` you'd need to add the following lines of code:
174+
175+
Import `aem-assets-plugin-support.js`
176+
```
177+
import assetsInit from './aem-assets-plugin-support.js';
178+
```
179+
180+
Initialize `aem-assets-plugin-support.js`
181+
```
182+
await assetsInit(); // This to be done before loadPage() function invocation
183+
loadPage();
184+
```
185+
186+
## FAQ
187+
188+
Q. Why should I use this plugin?
189+
190+
A. The plugin provides a quick way to start using AEM Assets in your website. It abstracts and implements the groundwork to be able to consume AEM Assets delivery URLs in your wbsite, thus helps avoiding additional work to implement everything from scratch. This plugin also has a collection of standard blocks to consume AEM Assets which can be reused as they are, or copied over in your website for adaptations.

‎plugins/aem-assets-plugin/babel.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
presets: ['@babel/preset-env'],
3+
};

0 commit comments

Comments
 (0)