Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Sidekick library #43

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: Sidekick library #43

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9a32a2b
feat: sidekick library support
dylandepass Feb 2, 2024
f3bbc3e
chore: update readme
dylandepass Feb 2, 2024
1c963c0
fix: linting
dylandepass Feb 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/
Expand Down
3 changes: 2 additions & 1 deletion blocks/fragment/fragment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

import {
decorateMain,
getOrigin,
} from '../../scripts/scripts.js';

import {
Expand All @@ -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;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixes fragments when running in the library

});
};
resetAttributeBase('img', 'src');
Expand Down
10 changes: 10 additions & 0 deletions scripts/scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
29 changes: 29 additions & 0 deletions styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
13 changes: 13 additions & 0 deletions tools/sidekick/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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**"]
}
]
}

42 changes: 42 additions & 0 deletions tools/sidekick/library.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
/>
<meta name="Description" content="Franklin Sidekick Library" />
<meta name="robots" content="noindex" />

<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}

helix-sidekick,
aem-sidekick {
display: none
}
</style>
<title>Sidekick Library</title>
</head>

<body>
<script
type="module"
src="https://www.hlx.live/tools/sidekick/library/index.js"
></script>
<script>
const library = document.createElement('sidekick-library')
library.config = {
base: '/tools/sidekick/library.json',
}

document.body.prepend(library)
</script>
</body>
</html>
Loading