From 9a32a2b73e7f6002fa95737608d428c60f808454 Mon Sep 17 00:00:00 2001 From: Dylan Depass Date: Fri, 2 Feb 2024 09:03:37 -0500 Subject: [PATCH 1/3] feat: sidekick library support --- blocks/fragment/fragment.js | 3 ++- scripts/scripts.js | 10 +++++++++ styles/styles.css | 29 +++++++++++++++++++++++++ tools/sidekick/config.json | 13 ++++++++++++ tools/sidekick/library.html | 42 +++++++++++++++++++++++++++++++++++++ 5 files changed, 96 insertions(+), 1 deletion(-) create mode 100644 tools/sidekick/config.json create mode 100644 tools/sidekick/library.html 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..8c5deb47 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 + + + + + + + From f3bbc3e026cf90e5f8d034d8d87bc460caa1ae90 Mon Sep 17 00:00:00 2001 From: Dylan Depass Date: Fri, 2 Feb 2024 09:09:23 -0500 Subject: [PATCH 2/3] chore: update readme --- README.md | 2 ++ 1 file changed, 2 insertions(+) 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/ From 1c963c015c036efd33848c64a801e69e252047e6 Mon Sep 17 00:00:00 2001 From: Dylan Depass Date: Fri, 2 Feb 2024 10:49:25 -0500 Subject: [PATCH 3/3] fix: linting --- styles/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/styles.css b/styles/styles.css index 8c5deb47..3450006d 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -252,7 +252,7 @@ main .section.highlight { font-weight: 600; } -.library-metadata > div > div:first-of-type:after { +.library-metadata > div > div:first-of-type::after { content: ":"; }