diff --git a/README.md b/README.md
index 1aa55556..000c5c6e 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@
This project contains code that is featured in the [AEM Block Collection](https://www.aem.live/developer/block-collection#block-collection-1) documentation.
+You can see a demo of all the blocks and copy their content structure using [this library](https://main--aem-block-collection--adobe.hlx.live/tools/sidekick/library.html).
+
## Environments
- Preview: https://main--aem-block-collection--adobe.hlx.page/
- Live: https://main--aem-block-collection--adobe.hlx.live/
diff --git a/blocks/fragment/fragment.js b/blocks/fragment/fragment.js
index 648a70e1..2974287e 100644
--- a/blocks/fragment/fragment.js
+++ b/blocks/fragment/fragment.js
@@ -6,6 +6,7 @@
import {
decorateMain,
+ getOrigin,
} from '../../scripts/scripts.js';
import {
@@ -27,7 +28,7 @@ export async function loadFragment(path) {
// reset base path for media to fragment base
const resetAttributeBase = (tag, attr) => {
main.querySelectorAll(`${tag}[${attr}^="./media_"]`).forEach((elem) => {
- elem[attr] = new URL(elem.getAttribute(attr), new URL(path, window.location)).href;
+ elem[attr] = new URL(elem.getAttribute(attr), new URL(path, getOrigin())).href;
});
};
resetAttributeBase('img', 'src');
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 84f08c80..06f382fe 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -145,6 +145,16 @@ function loadDelayed() {
// load anything that can be postponed to the latest here
}
+/**
+ * Returns the true origin of the current page in the browser.
+ * If the page is running in a iframe with srcdoc, the ancestor origin is returned.
+ * @returns {String} The true origin
+ */
+export function getOrigin() {
+ const { location } = window;
+ return location.href === 'about:srcdoc' ? window.parent.location.origin : location.origin;
+}
+
async function loadPage() {
await loadEager(document);
await loadLazy(document);
diff --git a/styles/styles.css b/styles/styles.css
index d256d9f1..3450006d 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -233,3 +233,32 @@ main .section.light,
main .section.highlight {
background-color: var(--light-color);
}
+
+.library-metadata {
+ margin-bottom: 75px;
+ padding: 20px;
+ background-color: var(--light-color);
+ border-radius: 8px;
+}
+
+.library-metadata > div {
+ display: flex;
+ flex-direction: column;
+}
+
+.library-metadata > div > div:first-of-type {
+ text-transform: capitalize;
+ font-size: var(--heading-font-size-sm);
+ font-weight: 600;
+}
+
+.library-metadata > div > div:first-of-type::after {
+ content: ":";
+}
+
+@media (width >= 600px) {
+ .library-metadata > div {
+ flex-direction: row;
+ gap: 10px;
+ }
+}
diff --git a/tools/sidekick/config.json b/tools/sidekick/config.json
new file mode 100644
index 00000000..bd5154da
--- /dev/null
+++ b/tools/sidekick/config.json
@@ -0,0 +1,13 @@
+{
+ "project": "Block Collection",
+ "plugins": [
+ {
+ "id": "library",
+ "title": "Library",
+ "environments": ["edit"],
+ "url": "https://main--aem-block-collection--adobe.hlx.live/tools/sidekick/library.html",
+ "includePaths": ["**.docx**"]
+ }
+ ]
+ }
+
\ No newline at end of file
diff --git a/tools/sidekick/library.html b/tools/sidekick/library.html
new file mode 100644
index 00000000..b3657a53
--- /dev/null
+++ b/tools/sidekick/library.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+ Sidekick Library
+
+
+
+
+
+
+