├── blocks ├── hero │ ├── hero.js │ └── hero.css ├── fragment │ ├── fragment.css │ └── fragment.js ├── footer │ ├── footer.css │ └── footer.js ├── cards │ ├── cards.css │ └── cards.js ├── columns │ ├── columns.css │ └── columns.js └── header │ ├── header.css │ └── header.js ├── .eslintignore ├── scripts ├── delayed.js ├── scripts.js └── aem.js ├── .stylelintrc.json ├── .editorconfig ├── favicon.ico ├── styles ├── lazy-styles.css ├── fonts.css └── styles.css ├── fonts ├── roboto-bold.woff2 ├── roboto-medium.woff2 ├── roboto-regular.woff2 └── roboto-condensed-bold.woff2 ├── .hlxignore ├── .gitignore ├── .renovaterc.json ├── .github ├── pull_request_template.md └── workflows │ ├── main.yaml │ └── cleanup-on-create.yaml ├── icons └── search.svg ├── head.html ├── .eslintrc.js ├── package.json ├── README.md ├── 404.html ├── CONTRIBUTING.md ├── CODE_OF_CONDUCT.md └── LICENSE /blocks/hero/hero.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | helix-importer-ui -------------------------------------------------------------------------------- /scripts/delayed.js: -------------------------------------------------------------------------------- 1 | // add delayed functionality here 2 | -------------------------------------------------------------------------------- /blocks/fragment/fragment.css: -------------------------------------------------------------------------------- 1 | /* stylelint-disable no-empty-source */ 2 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"] 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.js] 2 | indent_size = 2 3 | 4 | [*.css] 5 | indent_size = 4 6 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-boilerplate/main/favicon.ico -------------------------------------------------------------------------------- /styles/lazy-styles.css: -------------------------------------------------------------------------------- 1 | /* add global styles that can be loaded post LCP here */ 2 | -------------------------------------------------------------------------------- /fonts/roboto-bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-boilerplate/main/fonts/roboto-bold.woff2 -------------------------------------------------------------------------------- /.hlxignore: -------------------------------------------------------------------------------- 1 | .* 2 | *.md 3 | karma.config.js 4 | LICENSE 5 | package.json 6 | package-lock.json 7 | test/* 8 | -------------------------------------------------------------------------------- /fonts/roboto-medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-boilerplate/main/fonts/roboto-medium.woff2 -------------------------------------------------------------------------------- /fonts/roboto-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-boilerplate/main/fonts/roboto-regular.woff2 -------------------------------------------------------------------------------- /fonts/roboto-condensed-bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-boilerplate/main/fonts/roboto-condensed-bold.woff2 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .hlx/* 2 | coverage/* 3 | logs/* 4 | node_modules/* 5 | 6 | helix-importer-ui 7 | .DS_Store 8 | *.bak 9 | .idea 10 | -------------------------------------------------------------------------------- /.renovaterc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["config:recommended"], 3 | "packageRules": [{ 4 | "matchDepTypes": ["devDependencies"], 5 | "labels": ["ignore-psi-check"], 6 | "automerge": true 7 | }] 8 | } 9 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | Please always provide the [GitHub issue(s)](../issues) your PR is for, as well as test URLs where your change can be observed (before and after): 2 | 3 | Fix # 4 | 5 | Test URLs: 6 | - Before: https://main--{repo}--{owner}.aem.live/ 7 | - After: https://--{repo}--{owner}.aem.live/ 8 | -------------------------------------------------------------------------------- /.github/workflows/main.yaml: -------------------------------------------------------------------------------- 1 | name: Build 2 | on: [push] 3 | 4 | jobs: 5 | build: 6 | runs-on: ubuntu-latest 7 | steps: 8 | - uses: actions/checkout@v6 9 | - name: Use Node.js 20 10 | uses: actions/setup-node@v6 11 | with: 12 | node-version: 24 13 | - run: npm ci 14 | - run: npm run lint 15 | -------------------------------------------------------------------------------- /blocks/footer/footer.css: -------------------------------------------------------------------------------- 1 | footer { 2 | background-color: var(--light-color); 3 | font-size: var(--body-font-size-xs); 4 | } 5 | 6 | footer .footer > div { 7 | margin: auto; 8 | max-width: 1200px; 9 | padding: 40px 24px 24px; 10 | } 11 | 12 | footer .footer p { 13 | margin: 0; 14 | } 15 | 16 | @media (width >= 900px) { 17 | footer .footer > div { 18 | padding: 40px 32px 24px; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /icons/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | -------------------------------------------------------------------------------- /head.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /blocks/cards/cards.css: -------------------------------------------------------------------------------- 1 | .cards > ul { 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | display: grid; 6 | grid-template-columns: repeat(auto-fill, minmax(257px, 1fr)); 7 | gap: 24px; 8 | } 9 | 10 | .cards > ul > li { 11 | border: 1px solid #dadada; 12 | background-color: var(--background-color); 13 | } 14 | 15 | .cards .cards-card-body { 16 | margin: 16px; 17 | } 18 | 19 | .cards .cards-card-image { 20 | line-height: 0; 21 | } 22 | 23 | .cards > ul > li img { 24 | width: 100%; 25 | aspect-ratio: 4 / 3; 26 | object-fit: cover; 27 | } 28 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 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 | }; 19 | -------------------------------------------------------------------------------- /blocks/columns/columns.css: -------------------------------------------------------------------------------- 1 | .columns > div { 2 | display: flex; 3 | flex-direction: column; 4 | } 5 | 6 | .columns img { 7 | width: 100%; 8 | } 9 | 10 | .columns > div > div { 11 | order: 1; 12 | } 13 | 14 | .columns > div > .columns-img-col { 15 | order: 0; 16 | } 17 | 18 | .columns > div > .columns-img-col img { 19 | display: block; 20 | } 21 | 22 | @media (width >= 900px) { 23 | .columns > div { 24 | align-items: center; 25 | flex-direction: unset; 26 | gap: 24px; 27 | } 28 | 29 | .columns > div > div { 30 | flex: 1; 31 | order: unset; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /blocks/columns/columns.js: -------------------------------------------------------------------------------- 1 | export default function decorate(block) { 2 | const cols = [...block.firstElementChild.children]; 3 | block.classList.add(`columns-${cols.length}-cols`); 4 | 5 | // setup image columns 6 | [...block.children].forEach((row) => { 7 | [...row.children].forEach((col) => { 8 | const pic = col.querySelector('picture'); 9 | if (pic) { 10 | const picWrapper = pic.closest('div'); 11 | if (picWrapper && picWrapper.children.length === 1) { 12 | // picture is only content in column 13 | picWrapper.classList.add('columns-img-col'); 14 | } 15 | } 16 | }); 17 | }); 18 | } 19 | -------------------------------------------------------------------------------- /blocks/hero/hero.css: -------------------------------------------------------------------------------- 1 | .hero-container .hero-wrapper { 2 | max-width: unset; 3 | padding: 0; 4 | } 5 | 6 | .hero { 7 | position: relative; 8 | padding: 40px 24px; 9 | min-height: 300px; 10 | } 11 | 12 | .hero h1 { 13 | max-width: 1200px; 14 | margin-left: auto; 15 | margin-right: auto; 16 | color: var(--background-color); 17 | } 18 | 19 | .hero picture { 20 | position: absolute; 21 | z-index: -1; 22 | inset: 0; 23 | object-fit: cover; 24 | box-sizing: border-box; 25 | } 26 | 27 | .hero img { 28 | object-fit: cover; 29 | width: 100%; 30 | height: 100%; 31 | } 32 | 33 | @media (width >= 900px) { 34 | .hero { 35 | padding: 40px 32px; 36 | } 37 | } -------------------------------------------------------------------------------- /blocks/footer/footer.js: -------------------------------------------------------------------------------- 1 | import { getMetadata } from '../../scripts/aem.js'; 2 | import { loadFragment } from '../fragment/fragment.js'; 3 | 4 | /** 5 | * loads and decorates the footer 6 | * @param {Element} block The footer block element 7 | */ 8 | export default async function decorate(block) { 9 | // load footer as fragment 10 | const footerMeta = getMetadata('footer'); 11 | const footerPath = footerMeta ? new URL(footerMeta, window.location).pathname : '/footer'; 12 | const fragment = await loadFragment(footerPath); 13 | 14 | // decorate footer DOM 15 | block.textContent = ''; 16 | const footer = document.createElement('div'); 17 | while (fragment.firstElementChild) footer.append(fragment.firstElementChild); 18 | 19 | block.append(footer); 20 | } 21 | -------------------------------------------------------------------------------- /blocks/cards/cards.js: -------------------------------------------------------------------------------- 1 | import { createOptimizedPicture } from '../../scripts/aem.js'; 2 | 3 | export default function decorate(block) { 4 | /* change to ul, li */ 5 | const ul = document.createElement('ul'); 6 | [...block.children].forEach((row) => { 7 | const li = document.createElement('li'); 8 | while (row.firstElementChild) li.append(row.firstElementChild); 9 | [...li.children].forEach((div) => { 10 | if (div.children.length === 1 && div.querySelector('picture')) div.className = 'cards-card-image'; 11 | else div.className = 'cards-card-body'; 12 | }); 13 | ul.append(li); 14 | }); 15 | ul.querySelectorAll('picture > img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }]))); 16 | block.replaceChildren(ul); 17 | } 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@adobe/aem-boilerplate", 3 | "private": true, 4 | "version": "1.3.0", 5 | "description": "Starter project for Adobe Helix", 6 | "scripts": { 7 | "lint:js": "eslint .", 8 | "lint:css": "stylelint \"blocks/**/*.css\" \"styles/*.css\"", 9 | "lint": "npm run lint:js && npm run lint:css", 10 | "lint:fix": "npm run lint:js -- --fix && npm run lint:css -- --fix" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/adobe/aem-boilerplate.git" 15 | }, 16 | "author": "Adobe", 17 | "license": "Apache License 2.0", 18 | "bugs": { 19 | "url": "https://github.com/adobe/aem-boilerplate/issues" 20 | }, 21 | "homepage": "https://github.com/adobe/aem-boilerplate#readme", 22 | "devDependencies": { 23 | "@babel/eslint-parser": "7.28.5", 24 | "eslint": "8.57.1", 25 | "eslint-config-airbnb-base": "15.0.0", 26 | "eslint-plugin-import": "2.32.0", 27 | "stylelint": "16.26.1", 28 | "stylelint-config-standard": "39.0.1" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Your Project's Title... 2 | Your project's description... 3 | 4 | ## Environments 5 | - Preview: https://main--{repo}--{owner}.aem.page/ 6 | - Live: https://main--{repo}--{owner}.aem.live/ 7 | 8 | ## Documentation 9 | 10 | Before using the aem-boilerplate, we recommand you to go through the documentation on https://www.aem.live/docs/ and more specifically: 11 | 1. [Developer Tutorial](https://www.aem.live/developer/tutorial) 12 | 2. [The Anatomy of a Project](https://www.aem.live/developer/anatomy-of-a-project) 13 | 3. [Web Performance](https://www.aem.live/developer/keeping-it-100) 14 | 4. [Markup, Sections, Blocks, and Auto Blocking](https://www.aem.live/developer/markup-sections-blocks) 15 | 16 | ## Installation 17 | 18 | ```sh 19 | npm i 20 | ``` 21 | 22 | ## Linting 23 | 24 | ```sh 25 | npm run lint 26 | ``` 27 | 28 | ## Local development 29 | 30 | 1. Create a new repository based on the `aem-boilerplate` template 31 | 1. Add the [AEM Code Sync GitHub App](https://github.com/apps/aem-code-sync) to the repository 32 | 1. Install the [AEM CLI](https://github.com/adobe/helix-cli): `npm install -g @adobe/aem-cli` 33 | 1. Start AEM Proxy: `aem up` (opens your browser at `http://localhost:3000`) 34 | 1. Open the `{repo}` directory in your favorite IDE and start coding :) 35 | -------------------------------------------------------------------------------- /styles/fonts.css: -------------------------------------------------------------------------------- 1 | /* stylelint-disable max-line-length */ 2 | @font-face { 3 | font-family: roboto-condensed; 4 | font-style: normal; 5 | font-weight: 700; 6 | font-display: swap; 7 | src: url('../fonts/roboto-condensed-bold.woff2') format('woff2'); 8 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 9 | } 10 | 11 | @font-face { 12 | font-family: roboto; 13 | font-style: normal; 14 | font-weight: 700; 15 | font-display: swap; 16 | src: url('../fonts/roboto-bold.woff2') format('woff2'); 17 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 18 | } 19 | 20 | @font-face { 21 | font-family: roboto; 22 | font-style: normal; 23 | font-weight: 500; 24 | font-display: swap; 25 | src: url('../fonts/roboto-medium.woff2') format('woff2'); 26 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 27 | } 28 | 29 | @font-face { 30 | font-family: roboto; 31 | font-style: normal; 32 | font-weight: 400; 33 | font-display: swap; 34 | src: url('../fonts/roboto-regular.woff2') format('woff2'); 35 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 36 | } 37 | -------------------------------------------------------------------------------- /blocks/fragment/fragment.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Fragment Block 3 | * Include content on a page as a fragment. 4 | * https://www.aem.live/developer/block-collection/fragment 5 | */ 6 | 7 | // eslint-disable-next-line import/no-cycle 8 | import { 9 | decorateMain, 10 | } from '../../scripts/scripts.js'; 11 | 12 | import { 13 | loadSections, 14 | } from '../../scripts/aem.js'; 15 | 16 | /** 17 | * Loads a fragment. 18 | * @param {string} path The path to the fragment 19 | * @returns {HTMLElement} The root element of the fragment 20 | */ 21 | export async function loadFragment(path) { 22 | if (path && path.startsWith('/')) { 23 | const resp = await fetch(`${path}.plain.html`); 24 | if (resp.ok) { 25 | const main = document.createElement('main'); 26 | main.innerHTML = await resp.text(); 27 | 28 | // reset base path for media to fragment base 29 | const resetAttributeBase = (tag, attr) => { 30 | main.querySelectorAll(`${tag}[${attr}^="./media_"]`).forEach((elem) => { 31 | elem[attr] = new URL(elem.getAttribute(attr), new URL(path, window.location)).href; 32 | }); 33 | }; 34 | resetAttributeBase('img', 'src'); 35 | resetAttributeBase('source', 'srcset'); 36 | 37 | decorateMain(main); 38 | await loadSections(main); 39 | return main; 40 | } 41 | } 42 | return null; 43 | } 44 | 45 | export default async function decorate(block) { 46 | const link = block.querySelector('a'); 47 | const path = link ? link.getAttribute('href') : block.textContent.trim(); 48 | const fragment = await loadFragment(path); 49 | if (fragment) { 50 | const fragmentSection = fragment.querySelector(':scope .section'); 51 | if (fragmentSection) { 52 | block.closest('.section').classList.add(...fragmentSection.classList); 53 | block.closest('.fragment').replaceWith(...fragment.childNodes); 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /.github/workflows/cleanup-on-create.yaml: -------------------------------------------------------------------------------- 1 | # This workflow will run upon repository creation and clean up 2 | # all files that are not strictly required to build an AEM Live project 3 | # but that we use to develop the project template. This includes this 4 | # particular workflow file. 5 | on: 6 | create: 7 | branches: 8 | - main 9 | workflow_dispatch: 10 | jobs: 11 | cleanup: 12 | runs-on: ubuntu-latest 13 | permissions: 14 | contents: write 15 | actions: write 16 | # only run if commit message is "Initial commit" on main branch 17 | if: ${{ github.event_name == 'workflow_dispatch' || ( github.ref == 'refs/heads/main' && !(contains(github.event, 'head_commit') || github.event.head_commit.message == 'Initial commit' )) }} 18 | steps: 19 | - name: Checkout 20 | uses: actions/checkout@v6 21 | - name: Use Node.js 20 22 | uses: actions/setup-node@v6 23 | with: 24 | node-version: 24 25 | - name: Remove Helper Files 26 | run: | 27 | rm -rf \ 28 | .github/workflows/cleanup-on-create.yaml \ 29 | .renovaterc.json \ 30 | CHANGELOG.md 31 | 32 | - name: Initialize README 33 | # replace {repo} and {owner} with the actual values 34 | run: | 35 | sed -i.bak "s/{repo}/$(basename ${{ github.repository }})/g" README.md 36 | sed -i.bak "s/{owner}/$(dirname ${{ github.repository }})/g" README.md 37 | - name: Initialize Pull Request Template 38 | run: | 39 | sed -i.bak "s/{repo}/$(basename ${{ github.repository }})/g" .github/pull_request_template.md 40 | sed -i.bak "s/{owner}/$(dirname ${{ github.repository }})/g" .github/pull_request_template.md 41 | 42 | 43 | # commit back to the repository 44 | - name: Commit changes 45 | run: | 46 | git config --local user.email "helix@adobe.com" 47 | git config --local user.name "AEM Bot" 48 | git add . 49 | git commit -m "chore: cleanup repository template" 50 | git push 51 | -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | Page not found 11 | 15 | 16 | 17 | 18 | 34 | 38 | 39 | 54 | 55 | 56 | 57 | 58 |
59 |
60 |
61 | 62 | 404 63 | 64 |

Page Not Found

65 |

66 | Go home 67 |

68 |
69 |
70 |
71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Project Helix 2 | 3 | This project (like almost all of Project Helix) is an Open Development project and welcomes contributions from everyone who finds it useful or lacking. 4 | 5 | ## Code Of Conduct 6 | 7 | This project adheres to the Adobe [code of conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to cstaub at adobe dot com. 8 | 9 | ## Contributor License Agreement 10 | 11 | All third-party contributions to this project must be accompanied by a signed contributor license. This gives Adobe permission to redistribute your contributions as part of the project. [Sign our CLA](http://opensource.adobe.com/cla.html)! You only need to submit an Adobe CLA one time, so if you have submitted one previously, you are good to go! 12 | 13 | ## Things to Keep in Mind 14 | 15 | This project uses a **commit then review** process, which means that for approved maintainers, changes can be merged immediately, but will be reviewed by others. 16 | 17 | For other contributors, a maintainer of the project has to approve the pull request. 18 | 19 | # Before You Contribute 20 | 21 | * Check that there is an existing issue in GitHub issues 22 | * Check if there are other pull requests that might overlap or conflict with your intended contribution 23 | 24 | # How to Contribute 25 | 26 | 1. Fork the repository 27 | 2. Make some changes on a branch on your fork 28 | 3. Create a pull request from your branch 29 | 30 | In your pull request, outline: 31 | 32 | * What the changes intend 33 | * How they change the existing code 34 | * If (and what) they breaks 35 | * Start the pull request with the GitHub issue ID, e.g. #123 36 | 37 | Lastly, please follow the [pull request template](.github/pull_request_template.md) when submitting a pull request! 38 | 39 | Each commit message that is not part of a pull request: 40 | 41 | * Should contain the issue ID like `#123` 42 | * Can contain the tag `[trivial]` for trivial changes that don't relate to an issue 43 | 44 | 45 | 46 | ## Coding Styleguides 47 | 48 | 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. 49 | 50 | You can fix some of the issues automatically by running `npx eslint . --fix`. 51 | 52 | ## Commit Message Format 53 | 54 | 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. 55 | 56 | ```bash 57 | # either add all changed files 58 | $ git add -A 59 | # or selectively add files 60 | $ git add package.json 61 | # then commit using the wizard 62 | $ npm run commit 63 | ``` 64 | 65 | # How Contributions get Reviewed 66 | 67 | 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. 68 | 69 | # Release Management 70 | 71 | The project's committers will release to the [Adobe organization on npmjs.org](https://www.npmjs.com/org/adobe). 72 | Please contact the [Adobe Open Source Advisory Board](https://git.corp.adobe.com/OpenSourceAdvisoryBoard/discuss/issues) to get access to the npmjs organization. 73 | 74 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Adobe Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender identity and expression, level of experience, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at Grp-opensourceoffice@adobe.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at [http://contributor-covenant.org/version/1/4][version] 72 | 73 | [homepage]: http://contributor-covenant.org 74 | [version]: http://contributor-covenant.org/version/1/4/ -------------------------------------------------------------------------------- /scripts/scripts.js: -------------------------------------------------------------------------------- 1 | import { 2 | buildBlock, 3 | loadHeader, 4 | loadFooter, 5 | decorateButtons, 6 | decorateIcons, 7 | decorateSections, 8 | decorateBlocks, 9 | decorateTemplateAndTheme, 10 | waitForFirstImage, 11 | loadSection, 12 | loadSections, 13 | loadCSS, 14 | } from './aem.js'; 15 | 16 | /** 17 | * Builds hero block and prepends to main in a new section. 18 | * @param {Element} main The container element 19 | */ 20 | function buildHeroBlock(main) { 21 | const h1 = main.querySelector('h1'); 22 | const picture = main.querySelector('picture'); 23 | // eslint-disable-next-line no-bitwise 24 | if (h1 && picture && (h1.compareDocumentPosition(picture) & Node.DOCUMENT_POSITION_PRECEDING)) { 25 | // Check if h1 or picture is already inside a hero block 26 | if (h1.closest('.hero') || picture.closest('.hero')) { 27 | return; // Don't create a duplicate hero block 28 | } 29 | const section = document.createElement('div'); 30 | section.append(buildBlock('hero', { elems: [picture, h1] })); 31 | main.prepend(section); 32 | } 33 | } 34 | 35 | /** 36 | * load fonts.css and set a session storage flag 37 | */ 38 | async function loadFonts() { 39 | await loadCSS(`${window.hlx.codeBasePath}/styles/fonts.css`); 40 | try { 41 | if (!window.location.hostname.includes('localhost')) sessionStorage.setItem('fonts-loaded', 'true'); 42 | } catch (e) { 43 | // do nothing 44 | } 45 | } 46 | 47 | /** 48 | * Builds all synthetic blocks in a container element. 49 | * @param {Element} main The container element 50 | */ 51 | function buildAutoBlocks(main) { 52 | try { 53 | // auto block `*/fragments/*` references 54 | const fragments = main.querySelectorAll('a[href*="/fragments/"]'); 55 | if (fragments.length > 0) { 56 | // eslint-disable-next-line import/no-cycle 57 | import('../blocks/fragment/fragment.js').then(({ loadFragment }) => { 58 | fragments.forEach(async (fragment) => { 59 | try { 60 | const { pathname } = new URL(fragment.href); 61 | const frag = await loadFragment(pathname); 62 | fragment.parentElement.replaceWith(frag.firstElementChild); 63 | } catch (error) { 64 | // eslint-disable-next-line no-console 65 | console.error('Fragment loading failed', error); 66 | } 67 | }); 68 | }); 69 | } 70 | 71 | buildHeroBlock(main); 72 | } catch (error) { 73 | // eslint-disable-next-line no-console 74 | console.error('Auto Blocking failed', error); 75 | } 76 | } 77 | 78 | /** 79 | * Decorates the main element. 80 | * @param {Element} main The main element 81 | */ 82 | // eslint-disable-next-line import/prefer-default-export 83 | export function decorateMain(main) { 84 | // hopefully forward compatible button decoration 85 | decorateButtons(main); 86 | decorateIcons(main); 87 | buildAutoBlocks(main); 88 | decorateSections(main); 89 | decorateBlocks(main); 90 | } 91 | 92 | /** 93 | * Loads everything needed to get to LCP. 94 | * @param {Element} doc The container element 95 | */ 96 | async function loadEager(doc) { 97 | document.documentElement.lang = 'en'; 98 | decorateTemplateAndTheme(); 99 | const main = doc.querySelector('main'); 100 | if (main) { 101 | decorateMain(main); 102 | document.body.classList.add('appear'); 103 | await loadSection(main.querySelector('.section'), waitForFirstImage); 104 | } 105 | 106 | try { 107 | /* if desktop (proxy for fast connection) or fonts already loaded, load fonts.css */ 108 | if (window.innerWidth >= 900 || sessionStorage.getItem('fonts-loaded')) { 109 | loadFonts(); 110 | } 111 | } catch (e) { 112 | // do nothing 113 | } 114 | } 115 | 116 | /** 117 | * Loads everything that doesn't need to be delayed. 118 | * @param {Element} doc The container element 119 | */ 120 | async function loadLazy(doc) { 121 | loadHeader(doc.querySelector('header')); 122 | 123 | const main = doc.querySelector('main'); 124 | await loadSections(main); 125 | 126 | const { hash } = window.location; 127 | const element = hash ? doc.getElementById(hash.substring(1)) : false; 128 | if (hash && element) element.scrollIntoView(); 129 | 130 | loadFooter(doc.querySelector('footer')); 131 | 132 | loadCSS(`${window.hlx.codeBasePath}/styles/lazy-styles.css`); 133 | loadFonts(); 134 | } 135 | 136 | /** 137 | * Loads everything that happens a lot later, 138 | * without impacting the user experience. 139 | */ 140 | function loadDelayed() { 141 | // eslint-disable-next-line import/no-cycle 142 | window.setTimeout(() => import('./delayed.js'), 3000); 143 | // load anything that can be postponed to the latest here 144 | } 145 | 146 | async function loadPage() { 147 | await loadEager(document); 148 | await loadLazy(document); 149 | loadDelayed(); 150 | } 151 | 152 | loadPage(); 153 | -------------------------------------------------------------------------------- /styles/styles.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2020 Adobe. All rights reserved. 3 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. You may obtain a copy 5 | * of the License at http://www.apache.org/licenses/LICENSE-2.0 6 | * 7 | * Unless required by applicable law or agreed to in writing, software distributed under 8 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 9 | * OF ANY KIND, either express or implied. See the License for the specific language 10 | * governing permissions and limitations under the License. 11 | */ 12 | 13 | :root { 14 | /* colors */ 15 | --background-color: white; 16 | --light-color: #f8f8f8; 17 | --dark-color: #505050; 18 | --text-color: #131313; 19 | --link-color: #3b63fb; 20 | --link-hover-color: #1d3ecf; 21 | 22 | /* fonts */ 23 | --body-font-family: roboto, roboto-fallback, sans-serif; 24 | --heading-font-family: roboto-condensed, roboto-condensed-fallback, sans-serif; 25 | 26 | /* body sizes */ 27 | --body-font-size-m: 22px; 28 | --body-font-size-s: 19px; 29 | --body-font-size-xs: 17px; 30 | 31 | /* heading sizes */ 32 | --heading-font-size-xxl: 55px; 33 | --heading-font-size-xl: 44px; 34 | --heading-font-size-l: 34px; 35 | --heading-font-size-m: 27px; 36 | --heading-font-size-s: 24px; 37 | --heading-font-size-xs: 22px; 38 | 39 | /* nav height */ 40 | --nav-height: 64px; 41 | } 42 | 43 | /* fallback fonts */ 44 | @font-face { 45 | font-family: roboto-condensed-fallback; 46 | size-adjust: 88.82%; 47 | src: local('Arial'); 48 | } 49 | 50 | @font-face { 51 | font-family: roboto-fallback; 52 | size-adjust: 99.529%; 53 | src: local('Arial'); 54 | } 55 | 56 | @media (width >= 900px) { 57 | :root { 58 | /* body sizes */ 59 | --body-font-size-m: 18px; 60 | --body-font-size-s: 16px; 61 | --body-font-size-xs: 14px; 62 | 63 | /* heading sizes */ 64 | --heading-font-size-xxl: 45px; 65 | --heading-font-size-xl: 36px; 66 | --heading-font-size-l: 28px; 67 | --heading-font-size-m: 22px; 68 | --heading-font-size-s: 20px; 69 | --heading-font-size-xs: 18px; 70 | } 71 | } 72 | 73 | body { 74 | display: none; 75 | margin: 0; 76 | background-color: var(--background-color); 77 | color: var(--text-color); 78 | font-family: var(--body-font-family); 79 | font-size: var(--body-font-size-m); 80 | line-height: 1.6; 81 | } 82 | 83 | body.appear { 84 | display: block; 85 | } 86 | 87 | header { 88 | height: var(--nav-height); 89 | } 90 | 91 | header .header, 92 | footer .footer { 93 | visibility: hidden; 94 | } 95 | 96 | header .header[data-block-status="loaded"], 97 | footer .footer[data-block-status="loaded"] { 98 | visibility: visible; 99 | } 100 | 101 | h1, 102 | h2, 103 | h3, 104 | h4, 105 | h5, 106 | h6 { 107 | margin-top: 0.8em; 108 | margin-bottom: 0.25em; 109 | font-family: var(--heading-font-family); 110 | font-weight: 600; 111 | line-height: 1.25; 112 | scroll-margin: 40px; 113 | } 114 | 115 | h1 { font-size: var(--heading-font-size-xxl); } 116 | h2 { font-size: var(--heading-font-size-xl); } 117 | h3 { font-size: var(--heading-font-size-l); } 118 | h4 { font-size: var(--heading-font-size-m); } 119 | h5 { font-size: var(--heading-font-size-s); } 120 | h6 { font-size: var(--heading-font-size-xs); } 121 | 122 | p, 123 | dl, 124 | ol, 125 | ul, 126 | pre, 127 | blockquote { 128 | margin-top: 0.8em; 129 | margin-bottom: 0.25em; 130 | } 131 | 132 | code, 133 | pre { 134 | font-size: var(--body-font-size-s); 135 | } 136 | 137 | pre { 138 | padding: 16px; 139 | border-radius: 8px; 140 | background-color: var(--light-color); 141 | overflow-x: auto; 142 | white-space: pre; 143 | } 144 | 145 | main > div { 146 | margin: 40px 16px; 147 | } 148 | 149 | input, 150 | textarea, 151 | select, 152 | button { 153 | font: inherit; 154 | } 155 | 156 | /* links */ 157 | a:any-link { 158 | color: var(--link-color); 159 | text-decoration: none; 160 | overflow-wrap: break-word; 161 | } 162 | 163 | a:hover { 164 | color: var(--link-hover-color); 165 | text-decoration: underline; 166 | } 167 | 168 | /* buttons */ 169 | a.button:any-link, 170 | button { 171 | box-sizing: border-box; 172 | display: inline-block; 173 | max-width: 100%; 174 | margin: 12px 0; 175 | border: 2px solid transparent; 176 | border-radius: 2.4em; 177 | padding: 0.5em 1.2em; 178 | font-family: var(--body-font-family); 179 | font-style: normal; 180 | font-weight: 500; 181 | line-height: 1.25; 182 | text-align: center; 183 | text-decoration: none; 184 | background-color: var(--link-color); 185 | color: var(--background-color); 186 | cursor: pointer; 187 | overflow: hidden; 188 | text-overflow: ellipsis; 189 | white-space: nowrap; 190 | } 191 | 192 | a.button:hover, 193 | a.button:focus, 194 | button:hover, 195 | button:focus { 196 | background-color: var(--link-hover-color); 197 | cursor: pointer; 198 | } 199 | 200 | button:disabled, 201 | button:disabled:hover { 202 | background-color: var(--light-color); 203 | cursor: unset; 204 | } 205 | 206 | a.button.secondary, 207 | button.secondary { 208 | background-color: unset; 209 | border: 2px solid currentcolor; 210 | color: var(--text-color); 211 | } 212 | 213 | main img { 214 | max-width: 100%; 215 | width: auto; 216 | height: auto; 217 | } 218 | 219 | .icon { 220 | display: inline-block; 221 | height: 24px; 222 | width: 24px; 223 | } 224 | 225 | .icon img { 226 | height: 100%; 227 | width: 100%; 228 | } 229 | 230 | /* sections */ 231 | main > .section { 232 | margin: 40px 0; 233 | } 234 | 235 | main > .section > div { 236 | max-width: 1200px; 237 | margin: auto; 238 | padding: 0 24px; 239 | } 240 | 241 | main > .section:first-of-type { 242 | margin-top: 0; 243 | } 244 | 245 | @media (width >= 900px) { 246 | main > .section > div { 247 | padding: 0 32px; 248 | } 249 | } 250 | 251 | /* section metadata */ 252 | main .section.light, 253 | main .section.highlight { 254 | background-color: var(--light-color); 255 | margin: 0; 256 | padding: 40px 0; 257 | } 258 | -------------------------------------------------------------------------------- /blocks/header/header.css: -------------------------------------------------------------------------------- 1 | /* header and nav layout */ 2 | header .nav-wrapper { 3 | background-color: var(--background-color); 4 | width: 100%; 5 | z-index: 2; 6 | position: fixed; 7 | } 8 | 9 | header nav { 10 | box-sizing: border-box; 11 | display: grid; 12 | grid-template: 13 | 'hamburger brand tools' var(--nav-height) 14 | 'sections sections sections' 1fr / auto 1fr auto; 15 | align-items: center; 16 | gap: 0 24px; 17 | margin: auto; 18 | max-width: 1248px; 19 | height: var(--nav-height); 20 | padding: 0 24px; 21 | font-family: var(--body-font-family); 22 | } 23 | 24 | header nav[aria-expanded='true'] { 25 | grid-template: 26 | 'hamburger brand' var(--nav-height) 27 | 'sections sections' 1fr 28 | 'tools tools' var(--nav-height) / auto 1fr; 29 | overflow-y: auto; 30 | min-height: 100dvh; 31 | } 32 | 33 | @media (width >= 900px) { 34 | header .nav-wrapper { 35 | position: relative; 36 | } 37 | 38 | header nav { 39 | display: flex; 40 | justify-content: space-between; 41 | gap: 0 32px; 42 | max-width: 1264px; 43 | padding: 0 32px; 44 | } 45 | 46 | header nav[aria-expanded='true'] { 47 | min-height: 0; 48 | overflow: visible; 49 | } 50 | } 51 | 52 | header nav p { 53 | margin: 0; 54 | line-height: 1; 55 | } 56 | 57 | header nav a:any-link { 58 | color: currentcolor; 59 | } 60 | 61 | /* hamburger */ 62 | header nav .nav-hamburger { 63 | grid-area: hamburger; 64 | height: 22px; 65 | display: flex; 66 | align-items: center; 67 | } 68 | 69 | header nav .nav-hamburger button { 70 | height: 22px; 71 | margin: 0; 72 | border: 0; 73 | border-radius: 0; 74 | padding: 0; 75 | background-color: var(--background-color); 76 | color: inherit; 77 | overflow: initial; 78 | text-overflow: initial; 79 | white-space: initial; 80 | } 81 | 82 | header nav .nav-hamburger-icon, 83 | header nav .nav-hamburger-icon::before, 84 | header nav .nav-hamburger-icon::after { 85 | box-sizing: border-box; 86 | display: block; 87 | position: relative; 88 | width: 20px; 89 | } 90 | 91 | header nav .nav-hamburger-icon::before, 92 | header nav .nav-hamburger-icon::after { 93 | content: ''; 94 | position: absolute; 95 | background: currentcolor; 96 | } 97 | 98 | header nav[aria-expanded='false'] .nav-hamburger-icon, 99 | header nav[aria-expanded='false'] .nav-hamburger-icon::before, 100 | header nav[aria-expanded='false'] .nav-hamburger-icon::after { 101 | height: 2px; 102 | border-radius: 2px; 103 | background: currentcolor; 104 | } 105 | 106 | header nav[aria-expanded='false'] .nav-hamburger-icon::before { 107 | top: -6px; 108 | } 109 | 110 | header nav[aria-expanded='false'] .nav-hamburger-icon::after { 111 | top: 6px; 112 | } 113 | 114 | header nav[aria-expanded='true'] .nav-hamburger-icon { 115 | height: 22px; 116 | } 117 | 118 | header nav[aria-expanded='true'] .nav-hamburger-icon::before, 119 | header nav[aria-expanded='true'] .nav-hamburger-icon::after { 120 | top: 3px; 121 | left: 1px; 122 | transform: rotate(45deg); 123 | transform-origin: 2px 1px; 124 | width: 24px; 125 | height: 2px; 126 | border-radius: 2px; 127 | } 128 | 129 | header nav[aria-expanded='true'] .nav-hamburger-icon::after { 130 | top: unset; 131 | bottom: 3px; 132 | transform: rotate(-45deg); 133 | } 134 | 135 | @media (width >= 900px) { 136 | header nav .nav-hamburger { 137 | display: none; 138 | visibility: hidden; 139 | } 140 | } 141 | 142 | /* brand */ 143 | header .nav-brand { 144 | grid-area: brand; 145 | flex-basis: 128px; 146 | font-size: var(--heading-font-size-s); 147 | font-weight: 700; 148 | line-height: 1; 149 | } 150 | 151 | header nav .nav-brand img { 152 | width: 128px; 153 | height: auto; 154 | } 155 | 156 | /* sections */ 157 | header nav .nav-sections { 158 | grid-area: sections; 159 | flex: 1 1 auto; 160 | display: none; 161 | visibility: hidden; 162 | } 163 | 164 | header nav[aria-expanded='true'] .nav-sections { 165 | display: block; 166 | visibility: visible; 167 | align-self: start; 168 | } 169 | 170 | header nav .nav-sections ul { 171 | list-style: none; 172 | padding-left: 0; 173 | font-size: var(--body-font-size-s); 174 | } 175 | 176 | header nav .nav-sections ul > li { 177 | font-weight: 500; 178 | } 179 | 180 | header nav .nav-sections ul > li > ul { 181 | margin-top: 0; 182 | } 183 | 184 | header nav .nav-sections ul > li > ul > li { 185 | font-weight: 400; 186 | } 187 | 188 | @media (width >= 900px) { 189 | header nav .nav-sections { 190 | display: block; 191 | visibility: visible; 192 | white-space: nowrap; 193 | } 194 | 195 | header nav[aria-expanded='true'] .nav-sections { 196 | align-self: unset; 197 | } 198 | 199 | header nav .nav-sections .nav-drop { 200 | position: relative; 201 | padding-right: 16px; 202 | cursor: pointer; 203 | } 204 | 205 | header nav .nav-sections .nav-drop::after { 206 | content: ''; 207 | display: inline-block; 208 | position: absolute; 209 | top: 0.5em; 210 | right: 2px; 211 | transform: rotate(135deg); 212 | width: 6px; 213 | height: 6px; 214 | border: 2px solid currentcolor; 215 | border-radius: 0 1px 0 0; 216 | border-width: 2px 2px 0 0; 217 | } 218 | 219 | header nav .nav-sections .nav-drop[aria-expanded='true']::after { 220 | top: unset; 221 | bottom: 0.5em; 222 | transform: rotate(315deg); 223 | } 224 | 225 | header nav .nav-sections ul { 226 | display: flex; 227 | gap: 24px; 228 | margin: 0; 229 | } 230 | 231 | header nav .nav-sections .default-content-wrapper > ul > li { 232 | flex: 0 1 auto; 233 | position: relative; 234 | } 235 | 236 | header nav .nav-sections .default-content-wrapper > ul > li > ul { 237 | display: none; 238 | position: relative; 239 | } 240 | 241 | header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true'] > ul { 242 | display: block; 243 | position: absolute; 244 | left: -24px; 245 | width: 200px; 246 | top: 150%; 247 | padding: 16px; 248 | background-color: var(--light-color); 249 | white-space: initial; 250 | } 251 | 252 | header nav .nav-sections .default-content-wrapper > ul > li > ul::before { 253 | content: ''; 254 | position: absolute; 255 | top: -8px; 256 | left: 16px; 257 | width: 0; 258 | height: 0; 259 | border-left: 8px solid transparent; 260 | border-right: 8px solid transparent; 261 | border-bottom: 8px solid var(--light-color); 262 | } 263 | 264 | header nav .nav-sections .default-content-wrapper > ul > li > ul > li { 265 | padding: 8px 0; 266 | } 267 | } 268 | 269 | /* tools */ 270 | header nav .nav-tools { 271 | grid-area: tools; 272 | } 273 | -------------------------------------------------------------------------------- /blocks/header/header.js: -------------------------------------------------------------------------------- 1 | import { getMetadata } from '../../scripts/aem.js'; 2 | import { loadFragment } from '../fragment/fragment.js'; 3 | 4 | // media query match that indicates mobile/tablet width 5 | const isDesktop = window.matchMedia('(min-width: 900px)'); 6 | 7 | function closeOnEscape(e) { 8 | if (e.code === 'Escape') { 9 | const nav = document.getElementById('nav'); 10 | const navSections = nav.querySelector('.nav-sections'); 11 | const navSectionExpanded = navSections.querySelector('[aria-expanded="true"]'); 12 | if (navSectionExpanded && isDesktop.matches) { 13 | // eslint-disable-next-line no-use-before-define 14 | toggleAllNavSections(navSections); 15 | navSectionExpanded.focus(); 16 | } else if (!isDesktop.matches) { 17 | // eslint-disable-next-line no-use-before-define 18 | toggleMenu(nav, navSections); 19 | nav.querySelector('button').focus(); 20 | } 21 | } 22 | } 23 | 24 | function closeOnFocusLost(e) { 25 | const nav = e.currentTarget; 26 | if (!nav.contains(e.relatedTarget)) { 27 | const navSections = nav.querySelector('.nav-sections'); 28 | const navSectionExpanded = navSections.querySelector('[aria-expanded="true"]'); 29 | if (navSectionExpanded && isDesktop.matches) { 30 | // eslint-disable-next-line no-use-before-define 31 | toggleAllNavSections(navSections, false); 32 | } else if (!isDesktop.matches) { 33 | // eslint-disable-next-line no-use-before-define 34 | toggleMenu(nav, navSections, false); 35 | } 36 | } 37 | } 38 | 39 | function openOnKeydown(e) { 40 | const focused = document.activeElement; 41 | const isNavDrop = focused.className === 'nav-drop'; 42 | if (isNavDrop && (e.code === 'Enter' || e.code === 'Space')) { 43 | const dropExpanded = focused.getAttribute('aria-expanded') === 'true'; 44 | // eslint-disable-next-line no-use-before-define 45 | toggleAllNavSections(focused.closest('.nav-sections')); 46 | focused.setAttribute('aria-expanded', dropExpanded ? 'false' : 'true'); 47 | } 48 | } 49 | 50 | function focusNavSection() { 51 | document.activeElement.addEventListener('keydown', openOnKeydown); 52 | } 53 | 54 | /** 55 | * Toggles all nav sections 56 | * @param {Element} sections The container element 57 | * @param {Boolean} expanded Whether the element should be expanded or collapsed 58 | */ 59 | function toggleAllNavSections(sections, expanded = false) { 60 | sections.querySelectorAll('.nav-sections .default-content-wrapper > ul > li').forEach((section) => { 61 | section.setAttribute('aria-expanded', expanded); 62 | }); 63 | } 64 | 65 | /** 66 | * Toggles the entire nav 67 | * @param {Element} nav The container element 68 | * @param {Element} navSections The nav sections within the container element 69 | * @param {*} forceExpanded Optional param to force nav expand behavior when not null 70 | */ 71 | function toggleMenu(nav, navSections, forceExpanded = null) { 72 | const expanded = forceExpanded !== null ? !forceExpanded : nav.getAttribute('aria-expanded') === 'true'; 73 | const button = nav.querySelector('.nav-hamburger button'); 74 | document.body.style.overflowY = (expanded || isDesktop.matches) ? '' : 'hidden'; 75 | nav.setAttribute('aria-expanded', expanded ? 'false' : 'true'); 76 | toggleAllNavSections(navSections, expanded || isDesktop.matches ? 'false' : 'true'); 77 | button.setAttribute('aria-label', expanded ? 'Open navigation' : 'Close navigation'); 78 | // enable nav dropdown keyboard accessibility 79 | const navDrops = navSections.querySelectorAll('.nav-drop'); 80 | if (isDesktop.matches) { 81 | navDrops.forEach((drop) => { 82 | if (!drop.hasAttribute('tabindex')) { 83 | drop.setAttribute('tabindex', 0); 84 | drop.addEventListener('focus', focusNavSection); 85 | } 86 | }); 87 | } else { 88 | navDrops.forEach((drop) => { 89 | drop.removeAttribute('tabindex'); 90 | drop.removeEventListener('focus', focusNavSection); 91 | }); 92 | } 93 | 94 | // enable menu collapse on escape keypress 95 | if (!expanded || isDesktop.matches) { 96 | // collapse menu on escape press 97 | window.addEventListener('keydown', closeOnEscape); 98 | // collapse menu on focus lost 99 | nav.addEventListener('focusout', closeOnFocusLost); 100 | } else { 101 | window.removeEventListener('keydown', closeOnEscape); 102 | nav.removeEventListener('focusout', closeOnFocusLost); 103 | } 104 | } 105 | 106 | /** 107 | * loads and decorates the header, mainly the nav 108 | * @param {Element} block The header block element 109 | */ 110 | export default async function decorate(block) { 111 | // load nav as fragment 112 | const navMeta = getMetadata('nav'); 113 | const navPath = navMeta ? new URL(navMeta, window.location).pathname : '/nav'; 114 | const fragment = await loadFragment(navPath); 115 | 116 | // decorate nav DOM 117 | block.textContent = ''; 118 | const nav = document.createElement('nav'); 119 | nav.id = 'nav'; 120 | while (fragment.firstElementChild) nav.append(fragment.firstElementChild); 121 | 122 | const classes = ['brand', 'sections', 'tools']; 123 | classes.forEach((c, i) => { 124 | const section = nav.children[i]; 125 | if (section) section.classList.add(`nav-${c}`); 126 | }); 127 | 128 | const navBrand = nav.querySelector('.nav-brand'); 129 | const brandLink = navBrand.querySelector('.button'); 130 | if (brandLink) { 131 | brandLink.className = ''; 132 | brandLink.closest('.button-container').className = ''; 133 | } 134 | 135 | const navSections = nav.querySelector('.nav-sections'); 136 | if (navSections) { 137 | navSections.querySelectorAll(':scope .default-content-wrapper > ul > li').forEach((navSection) => { 138 | if (navSection.querySelector('ul')) navSection.classList.add('nav-drop'); 139 | navSection.addEventListener('click', () => { 140 | if (isDesktop.matches) { 141 | const expanded = navSection.getAttribute('aria-expanded') === 'true'; 142 | toggleAllNavSections(navSections); 143 | navSection.setAttribute('aria-expanded', expanded ? 'false' : 'true'); 144 | } 145 | }); 146 | }); 147 | } 148 | 149 | // hamburger for mobile 150 | const hamburger = document.createElement('div'); 151 | hamburger.classList.add('nav-hamburger'); 152 | hamburger.innerHTML = ``; 155 | hamburger.addEventListener('click', () => toggleMenu(nav, navSections)); 156 | nav.prepend(hamburger); 157 | nav.setAttribute('aria-expanded', 'false'); 158 | // prevent mobile nav behavior on window resize 159 | toggleMenu(nav, navSections, isDesktop.matches); 160 | isDesktop.addEventListener('change', () => toggleMenu(nav, navSections, isDesktop.matches)); 161 | 162 | const navWrapper = document.createElement('div'); 163 | navWrapper.className = 'nav-wrapper'; 164 | navWrapper.append(nav); 165 | block.append(navWrapper); 166 | } 167 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /scripts/aem.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2025 Adobe. All rights reserved. 3 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. You may obtain a copy 5 | * of the License at http://www.apache.org/licenses/LICENSE-2.0 6 | * 7 | * Unless required by applicable law or agreed to in writing, software distributed under 8 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 9 | * OF ANY KIND, either express or implied. See the License for the specific language 10 | * governing permissions and limitations under the License. 11 | */ 12 | 13 | /* eslint-env browser */ 14 | function sampleRUM(checkpoint, data) { 15 | // eslint-disable-next-line max-len 16 | const timeShift = () => (window.performance ? window.performance.now() : Date.now() - window.hlx.rum.firstReadTime); 17 | try { 18 | window.hlx = window.hlx || {}; 19 | if (!window.hlx.rum || !window.hlx.rum.collector) { 20 | sampleRUM.enhance = () => {}; 21 | const params = new URLSearchParams(window.location.search); 22 | const { currentScript } = document; 23 | const rate = params.get('rum') 24 | || window.SAMPLE_PAGEVIEWS_AT_RATE 25 | || params.get('optel') 26 | || (currentScript && currentScript.dataset.rate); 27 | const rateValue = { 28 | on: 1, 29 | off: 0, 30 | high: 10, 31 | low: 1000, 32 | }[rate]; 33 | const weight = rateValue !== undefined ? rateValue : 100; 34 | const id = (window.hlx.rum && window.hlx.rum.id) || crypto.randomUUID().slice(-9); 35 | const isSelected = (window.hlx.rum && window.hlx.rum.isSelected) 36 | || (weight > 0 && Math.random() * weight < 1); 37 | // eslint-disable-next-line object-curly-newline, max-len 38 | window.hlx.rum = { 39 | weight, 40 | id, 41 | isSelected, 42 | firstReadTime: window.performance ? window.performance.timeOrigin : Date.now(), 43 | sampleRUM, 44 | queue: [], 45 | collector: (...args) => window.hlx.rum.queue.push(args), 46 | }; 47 | if (isSelected) { 48 | const dataFromErrorObj = (error) => { 49 | const errData = { source: 'undefined error' }; 50 | try { 51 | errData.target = error.toString(); 52 | if (error.stack) { 53 | errData.source = error.stack 54 | .split('\n') 55 | .filter((line) => line.match(/https?:\/\//)) 56 | .shift() 57 | .replace(/at ([^ ]+) \((.+)\)/, '$1@$2') 58 | .replace(/ at /, '@') 59 | .trim(); 60 | } 61 | } catch (err) { 62 | /* error structure was not as expected */ 63 | } 64 | return errData; 65 | }; 66 | 67 | window.addEventListener('error', ({ error }) => { 68 | const errData = dataFromErrorObj(error); 69 | sampleRUM('error', errData); 70 | }); 71 | 72 | window.addEventListener('unhandledrejection', ({ reason }) => { 73 | let errData = { 74 | source: 'Unhandled Rejection', 75 | target: reason || 'Unknown', 76 | }; 77 | if (reason instanceof Error) { 78 | errData = dataFromErrorObj(reason); 79 | } 80 | sampleRUM('error', errData); 81 | }); 82 | 83 | window.addEventListener('securitypolicyviolation', (e) => { 84 | if (e.blockedURI.includes('helix-rum-enhancer') && e.disposition === 'enforce') { 85 | const errData = { 86 | source: 'csp', 87 | target: e.blockedURI, 88 | }; 89 | sampleRUM.sendPing('error', timeShift(), errData); 90 | } 91 | }); 92 | 93 | sampleRUM.baseURL = sampleRUM.baseURL || new URL(window.RUM_BASE || '/', new URL('https://ot.aem.live')); 94 | sampleRUM.collectBaseURL = sampleRUM.collectBaseURL || sampleRUM.baseURL; 95 | sampleRUM.sendPing = (ck, time, pingData = {}) => { 96 | // eslint-disable-next-line max-len, object-curly-newline 97 | const rumData = JSON.stringify({ 98 | weight, 99 | id, 100 | referer: window.location.href, 101 | checkpoint: ck, 102 | t: time, 103 | ...pingData, 104 | }); 105 | const urlParams = window.RUM_PARAMS 106 | ? new URLSearchParams(window.RUM_PARAMS).toString() || '' 107 | : ''; 108 | const { href: url, origin } = new URL( 109 | `.rum/${weight}${urlParams ? `?${urlParams}` : ''}`, 110 | sampleRUM.collectBaseURL, 111 | ); 112 | const body = origin === window.location.origin 113 | ? new Blob([rumData], { type: 'application/json' }) 114 | : rumData; 115 | navigator.sendBeacon(url, body); 116 | // eslint-disable-next-line no-console 117 | console.debug(`ping:${ck}`, pingData); 118 | }; 119 | sampleRUM.sendPing('top', timeShift()); 120 | 121 | sampleRUM.enhance = () => { 122 | // only enhance once 123 | if (document.querySelector('script[src*="rum-enhancer"]')) return; 124 | const { enhancerVersion, enhancerHash } = sampleRUM.enhancerContext || {}; 125 | const script = document.createElement('script'); 126 | if (enhancerHash) { 127 | script.integrity = enhancerHash; 128 | script.setAttribute('crossorigin', 'anonymous'); 129 | } 130 | script.src = new URL( 131 | `.rum/@adobe/helix-rum-enhancer@${enhancerVersion || '^2'}/src/index.js`, 132 | sampleRUM.baseURL, 133 | ).href; 134 | document.head.appendChild(script); 135 | }; 136 | if (!window.hlx.RUM_MANUAL_ENHANCE) { 137 | sampleRUM.enhance(); 138 | } 139 | } 140 | } 141 | if (window.hlx.rum && window.hlx.rum.isSelected && checkpoint) { 142 | window.hlx.rum.collector(checkpoint, data, timeShift()); 143 | } 144 | document.dispatchEvent(new CustomEvent('rum', { detail: { checkpoint, data } })); 145 | } catch (error) { 146 | // something went awry 147 | } 148 | } 149 | 150 | /** 151 | * Setup block utils. 152 | */ 153 | function setup() { 154 | window.hlx = window.hlx || {}; 155 | window.hlx.RUM_MASK_URL = 'full'; 156 | window.hlx.RUM_MANUAL_ENHANCE = true; 157 | window.hlx.codeBasePath = ''; 158 | window.hlx.lighthouse = new URLSearchParams(window.location.search).get('lighthouse') === 'on'; 159 | 160 | const scriptEl = document.querySelector('script[src$="/scripts/scripts.js"]'); 161 | if (scriptEl) { 162 | try { 163 | [window.hlx.codeBasePath] = new URL(scriptEl.src).pathname.split('/scripts/scripts.js'); 164 | } catch (error) { 165 | // eslint-disable-next-line no-console 166 | console.log(error); 167 | } 168 | } 169 | } 170 | 171 | /** 172 | * Auto initialization. 173 | */ 174 | 175 | function init() { 176 | setup(); 177 | sampleRUM.collectBaseURL = window.origin; 178 | sampleRUM(); 179 | } 180 | 181 | /** 182 | * Sanitizes a string for use as class name. 183 | * @param {string} name The unsanitized string 184 | * @returns {string} The class name 185 | */ 186 | function toClassName(name) { 187 | return typeof name === 'string' 188 | ? name 189 | .toLowerCase() 190 | .replace(/[^0-9a-z]/gi, '-') 191 | .replace(/-+/g, '-') 192 | .replace(/^-|-$/g, '') 193 | : ''; 194 | } 195 | 196 | /** 197 | * Sanitizes a string for use as a js property name. 198 | * @param {string} name The unsanitized string 199 | * @returns {string} The camelCased name 200 | */ 201 | function toCamelCase(name) { 202 | return toClassName(name).replace(/-([a-z])/g, (g) => g[1].toUpperCase()); 203 | } 204 | 205 | /** 206 | * Extracts the config from a block. 207 | * @param {Element} block The block element 208 | * @returns {object} The block config 209 | */ 210 | // eslint-disable-next-line import/prefer-default-export 211 | function readBlockConfig(block) { 212 | const config = {}; 213 | block.querySelectorAll(':scope > div').forEach((row) => { 214 | if (row.children) { 215 | const cols = [...row.children]; 216 | if (cols[1]) { 217 | const col = cols[1]; 218 | const name = toClassName(cols[0].textContent); 219 | let value = ''; 220 | if (col.querySelector('a')) { 221 | const as = [...col.querySelectorAll('a')]; 222 | if (as.length === 1) { 223 | value = as[0].href; 224 | } else { 225 | value = as.map((a) => a.href); 226 | } 227 | } else if (col.querySelector('img')) { 228 | const imgs = [...col.querySelectorAll('img')]; 229 | if (imgs.length === 1) { 230 | value = imgs[0].src; 231 | } else { 232 | value = imgs.map((img) => img.src); 233 | } 234 | } else if (col.querySelector('p')) { 235 | const ps = [...col.querySelectorAll('p')]; 236 | if (ps.length === 1) { 237 | value = ps[0].textContent; 238 | } else { 239 | value = ps.map((p) => p.textContent); 240 | } 241 | } else value = row.children[1].textContent; 242 | config[name] = value; 243 | } 244 | } 245 | }); 246 | return config; 247 | } 248 | 249 | /** 250 | * Loads a CSS file. 251 | * @param {string} href URL to the CSS file 252 | */ 253 | async function loadCSS(href) { 254 | return new Promise((resolve, reject) => { 255 | if (!document.querySelector(`head > link[href="${href}"]`)) { 256 | const link = document.createElement('link'); 257 | link.rel = 'stylesheet'; 258 | link.href = href; 259 | link.onload = resolve; 260 | link.onerror = reject; 261 | document.head.append(link); 262 | } else { 263 | resolve(); 264 | } 265 | }); 266 | } 267 | 268 | /** 269 | * Loads a non module JS file. 270 | * @param {string} src URL to the JS file 271 | * @param {Object} attrs additional optional attributes 272 | */ 273 | async function loadScript(src, attrs) { 274 | return new Promise((resolve, reject) => { 275 | if (!document.querySelector(`head > script[src="${src}"]`)) { 276 | const script = document.createElement('script'); 277 | script.src = src; 278 | if (attrs) { 279 | // eslint-disable-next-line no-restricted-syntax, guard-for-in 280 | for (const attr in attrs) { 281 | script.setAttribute(attr, attrs[attr]); 282 | } 283 | } 284 | script.onload = resolve; 285 | script.onerror = reject; 286 | document.head.append(script); 287 | } else { 288 | resolve(); 289 | } 290 | }); 291 | } 292 | 293 | /** 294 | * Retrieves the content of metadata tags. 295 | * @param {string} name The metadata name (or property) 296 | * @param {Document} doc Document object to query for metadata. Defaults to the window's document 297 | * @returns {string} The metadata value(s) 298 | */ 299 | function getMetadata(name, doc = document) { 300 | const attr = name && name.includes(':') ? 'property' : 'name'; 301 | const meta = [...doc.head.querySelectorAll(`meta[${attr}="${name}"]`)] 302 | .map((m) => m.content) 303 | .join(', '); 304 | return meta || ''; 305 | } 306 | 307 | /** 308 | * Returns a picture element with webp and fallbacks 309 | * @param {string} src The image URL 310 | * @param {string} [alt] The image alternative text 311 | * @param {boolean} [eager] Set loading attribute to eager 312 | * @param {Array} [breakpoints] Breakpoints and corresponding params (eg. width) 313 | * @returns {Element} The picture element 314 | */ 315 | function createOptimizedPicture( 316 | src, 317 | alt = '', 318 | eager = false, 319 | breakpoints = [{ media: '(min-width: 600px)', width: '2000' }, { width: '750' }], 320 | ) { 321 | const url = new URL(src, window.location.href); 322 | const picture = document.createElement('picture'); 323 | const { pathname } = url; 324 | const ext = pathname.substring(pathname.lastIndexOf('.') + 1); 325 | 326 | // webp 327 | breakpoints.forEach((br) => { 328 | const source = document.createElement('source'); 329 | if (br.media) source.setAttribute('media', br.media); 330 | source.setAttribute('type', 'image/webp'); 331 | source.setAttribute('srcset', `${pathname}?width=${br.width}&format=webply&optimize=medium`); 332 | picture.appendChild(source); 333 | }); 334 | 335 | // fallback 336 | breakpoints.forEach((br, i) => { 337 | if (i < breakpoints.length - 1) { 338 | const source = document.createElement('source'); 339 | if (br.media) source.setAttribute('media', br.media); 340 | source.setAttribute('srcset', `${pathname}?width=${br.width}&format=${ext}&optimize=medium`); 341 | picture.appendChild(source); 342 | } else { 343 | const img = document.createElement('img'); 344 | img.setAttribute('loading', eager ? 'eager' : 'lazy'); 345 | img.setAttribute('alt', alt); 346 | picture.appendChild(img); 347 | img.setAttribute('src', `${pathname}?width=${br.width}&format=${ext}&optimize=medium`); 348 | } 349 | }); 350 | 351 | return picture; 352 | } 353 | 354 | /** 355 | * Set template (page structure) and theme (page styles). 356 | */ 357 | function decorateTemplateAndTheme() { 358 | const addClasses = (element, classes) => { 359 | classes.split(',').forEach((c) => { 360 | element.classList.add(toClassName(c.trim())); 361 | }); 362 | }; 363 | const template = getMetadata('template'); 364 | if (template) addClasses(document.body, template); 365 | const theme = getMetadata('theme'); 366 | if (theme) addClasses(document.body, theme); 367 | } 368 | 369 | /** 370 | * Wrap inline text content of block cells within a

tag. 371 | * @param {Element} block the block element 372 | */ 373 | function wrapTextNodes(block) { 374 | const validWrappers = [ 375 | 'P', 376 | 'PRE', 377 | 'UL', 378 | 'OL', 379 | 'PICTURE', 380 | 'TABLE', 381 | 'H1', 382 | 'H2', 383 | 'H3', 384 | 'H4', 385 | 'H5', 386 | 'H6', 387 | ]; 388 | 389 | const wrap = (el) => { 390 | const wrapper = document.createElement('p'); 391 | wrapper.append(...el.childNodes); 392 | el.append(wrapper); 393 | }; 394 | 395 | block.querySelectorAll(':scope > div > div').forEach((blockColumn) => { 396 | if (blockColumn.hasChildNodes()) { 397 | const hasWrapper = !!blockColumn.firstElementChild 398 | && validWrappers.some((tagName) => blockColumn.firstElementChild.tagName === tagName); 399 | if (!hasWrapper) { 400 | wrap(blockColumn); 401 | } else if ( 402 | blockColumn.firstElementChild.tagName === 'PICTURE' 403 | && (blockColumn.children.length > 1 || !!blockColumn.textContent.trim()) 404 | ) { 405 | wrap(blockColumn); 406 | } 407 | } 408 | }); 409 | } 410 | 411 | /** 412 | * Decorates paragraphs containing a single link as buttons. 413 | * @param {Element} element container element 414 | */ 415 | function decorateButtons(element) { 416 | element.querySelectorAll('a').forEach((a) => { 417 | a.title = a.title || a.textContent; 418 | if (a.href !== a.textContent) { 419 | const up = a.parentElement; 420 | const twoup = a.parentElement.parentElement; 421 | if (!a.querySelector('img')) { 422 | if (up.childNodes.length === 1 && (up.tagName === 'P' || up.tagName === 'DIV')) { 423 | a.className = 'button'; // default 424 | up.classList.add('button-container'); 425 | } 426 | if ( 427 | up.childNodes.length === 1 428 | && up.tagName === 'STRONG' 429 | && twoup.childNodes.length === 1 430 | && twoup.tagName === 'P' 431 | ) { 432 | a.className = 'button primary'; 433 | twoup.classList.add('button-container'); 434 | } 435 | if ( 436 | up.childNodes.length === 1 437 | && up.tagName === 'EM' 438 | && twoup.childNodes.length === 1 439 | && twoup.tagName === 'P' 440 | ) { 441 | a.className = 'button secondary'; 442 | twoup.classList.add('button-container'); 443 | } 444 | } 445 | } 446 | }); 447 | } 448 | 449 | /** 450 | * Add for icon, prefixed with codeBasePath and optional prefix. 451 | * @param {Element} [span] span element with icon classes 452 | * @param {string} [prefix] prefix to be added to icon src 453 | * @param {string} [alt] alt text to be added to icon 454 | */ 455 | function decorateIcon(span, prefix = '', alt = '') { 456 | const iconName = Array.from(span.classList) 457 | .find((c) => c.startsWith('icon-')) 458 | .substring(5); 459 | const img = document.createElement('img'); 460 | img.dataset.iconName = iconName; 461 | img.src = `${window.hlx.codeBasePath}${prefix}/icons/${iconName}.svg`; 462 | img.alt = alt; 463 | img.loading = 'lazy'; 464 | img.width = 16; 465 | img.height = 16; 466 | span.append(img); 467 | } 468 | 469 | /** 470 | * Add for icons, prefixed with codeBasePath and optional prefix. 471 | * @param {Element} [element] Element containing icons 472 | * @param {string} [prefix] prefix to be added to icon the src 473 | */ 474 | function decorateIcons(element, prefix = '') { 475 | const icons = element.querySelectorAll('span.icon'); 476 | icons.forEach((span) => { 477 | decorateIcon(span, prefix); 478 | }); 479 | } 480 | 481 | /** 482 | * Decorates all sections in a container element. 483 | * @param {Element} main The container element 484 | */ 485 | function decorateSections(main) { 486 | main.querySelectorAll(':scope > div').forEach((section) => { 487 | const wrappers = []; 488 | let defaultContent = false; 489 | [...section.children].forEach((e) => { 490 | if (e.tagName === 'DIV' || !defaultContent) { 491 | const wrapper = document.createElement('div'); 492 | wrappers.push(wrapper); 493 | defaultContent = e.tagName !== 'DIV'; 494 | if (defaultContent) wrapper.classList.add('default-content-wrapper'); 495 | } 496 | wrappers[wrappers.length - 1].append(e); 497 | }); 498 | wrappers.forEach((wrapper) => section.append(wrapper)); 499 | section.classList.add('section'); 500 | section.dataset.sectionStatus = 'initialized'; 501 | section.style.display = 'none'; 502 | 503 | // Process section metadata 504 | const sectionMeta = section.querySelector('div.section-metadata'); 505 | if (sectionMeta) { 506 | const meta = readBlockConfig(sectionMeta); 507 | Object.keys(meta).forEach((key) => { 508 | if (key === 'style') { 509 | const styles = meta.style 510 | .split(',') 511 | .filter((style) => style) 512 | .map((style) => toClassName(style.trim())); 513 | styles.forEach((style) => section.classList.add(style)); 514 | } else { 515 | section.dataset[toCamelCase(key)] = meta[key]; 516 | } 517 | }); 518 | sectionMeta.parentNode.remove(); 519 | } 520 | }); 521 | } 522 | 523 | /** 524 | * Builds a block DOM Element from a two dimensional array, string, or object 525 | * @param {string} blockName name of the block 526 | * @param {*} content two dimensional array or string or object of content 527 | */ 528 | function buildBlock(blockName, content) { 529 | const table = Array.isArray(content) ? content : [[content]]; 530 | const blockEl = document.createElement('div'); 531 | // build image block nested div structure 532 | blockEl.classList.add(blockName); 533 | table.forEach((row) => { 534 | const rowEl = document.createElement('div'); 535 | row.forEach((col) => { 536 | const colEl = document.createElement('div'); 537 | const vals = col.elems ? col.elems : [col]; 538 | vals.forEach((val) => { 539 | if (val) { 540 | if (typeof val === 'string') { 541 | colEl.innerHTML += val; 542 | } else { 543 | colEl.appendChild(val); 544 | } 545 | } 546 | }); 547 | rowEl.appendChild(colEl); 548 | }); 549 | blockEl.appendChild(rowEl); 550 | }); 551 | return blockEl; 552 | } 553 | 554 | /** 555 | * Loads JS and CSS for a block. 556 | * @param {Element} block The block element 557 | */ 558 | async function loadBlock(block) { 559 | const status = block.dataset.blockStatus; 560 | if (status !== 'loading' && status !== 'loaded') { 561 | block.dataset.blockStatus = 'loading'; 562 | const { blockName } = block.dataset; 563 | try { 564 | const cssLoaded = loadCSS(`${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.css`); 565 | const decorationComplete = new Promise((resolve) => { 566 | (async () => { 567 | try { 568 | const mod = await import( 569 | `${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.js` 570 | ); 571 | if (mod.default) { 572 | await mod.default(block); 573 | } 574 | } catch (error) { 575 | // eslint-disable-next-line no-console 576 | console.error(`failed to load module for ${blockName}`, error); 577 | } 578 | resolve(); 579 | })(); 580 | }); 581 | await Promise.all([cssLoaded, decorationComplete]); 582 | } catch (error) { 583 | // eslint-disable-next-line no-console 584 | console.error(`failed to load block ${blockName}`, error); 585 | } 586 | block.dataset.blockStatus = 'loaded'; 587 | } 588 | return block; 589 | } 590 | 591 | /** 592 | * Decorates a block. 593 | * @param {Element} block The block element 594 | */ 595 | function decorateBlock(block) { 596 | const shortBlockName = block.classList[0]; 597 | if (shortBlockName) { 598 | block.classList.add('block'); 599 | block.dataset.blockName = shortBlockName; 600 | block.dataset.blockStatus = 'initialized'; 601 | wrapTextNodes(block); 602 | const blockWrapper = block.parentElement; 603 | blockWrapper.classList.add(`${shortBlockName}-wrapper`); 604 | const section = block.closest('.section'); 605 | if (section) section.classList.add(`${shortBlockName}-container`); 606 | } 607 | } 608 | 609 | /** 610 | * Decorates all blocks in a container element. 611 | * @param {Element} main The container element 612 | */ 613 | function decorateBlocks(main) { 614 | main.querySelectorAll('div.section > div > div').forEach(decorateBlock); 615 | } 616 | 617 | /** 618 | * Loads a block named 'header' into header 619 | * @param {Element} header header element 620 | * @returns {Promise} 621 | */ 622 | async function loadHeader(header) { 623 | const headerBlock = buildBlock('header', ''); 624 | header.append(headerBlock); 625 | decorateBlock(headerBlock); 626 | return loadBlock(headerBlock); 627 | } 628 | 629 | /** 630 | * Loads a block named 'footer' into footer 631 | * @param footer footer element 632 | * @returns {Promise} 633 | */ 634 | async function loadFooter(footer) { 635 | const footerBlock = buildBlock('footer', ''); 636 | footer.append(footerBlock); 637 | decorateBlock(footerBlock); 638 | return loadBlock(footerBlock); 639 | } 640 | 641 | /** 642 | * Wait for Image. 643 | * @param {Element} section section element 644 | */ 645 | async function waitForFirstImage(section) { 646 | const lcpCandidate = section.querySelector('img'); 647 | await new Promise((resolve) => { 648 | if (lcpCandidate && !lcpCandidate.complete) { 649 | lcpCandidate.setAttribute('loading', 'eager'); 650 | lcpCandidate.addEventListener('load', resolve); 651 | lcpCandidate.addEventListener('error', resolve); 652 | } else { 653 | resolve(); 654 | } 655 | }); 656 | } 657 | 658 | /** 659 | * Loads all blocks in a section. 660 | * @param {Element} section The section element 661 | */ 662 | 663 | async function loadSection(section, loadCallback) { 664 | const status = section.dataset.sectionStatus; 665 | if (!status || status === 'initialized') { 666 | section.dataset.sectionStatus = 'loading'; 667 | const blocks = [...section.querySelectorAll('div.block')]; 668 | for (let i = 0; i < blocks.length; i += 1) { 669 | // eslint-disable-next-line no-await-in-loop 670 | await loadBlock(blocks[i]); 671 | } 672 | if (loadCallback) await loadCallback(section); 673 | section.dataset.sectionStatus = 'loaded'; 674 | section.style.display = null; 675 | } 676 | } 677 | 678 | /** 679 | * Loads all sections. 680 | * @param {Element} element The parent element of sections to load 681 | */ 682 | 683 | async function loadSections(element) { 684 | const sections = [...element.querySelectorAll('div.section')]; 685 | for (let i = 0; i < sections.length; i += 1) { 686 | // eslint-disable-next-line no-await-in-loop 687 | await loadSection(sections[i]); 688 | if (i === 0 && sampleRUM.enhance) { 689 | sampleRUM.enhance(); 690 | } 691 | } 692 | } 693 | 694 | init(); 695 | 696 | export { 697 | buildBlock, 698 | createOptimizedPicture, 699 | decorateBlock, 700 | decorateBlocks, 701 | decorateButtons, 702 | decorateIcons, 703 | decorateSections, 704 | decorateTemplateAndTheme, 705 | getMetadata, 706 | loadBlock, 707 | loadCSS, 708 | loadFooter, 709 | loadHeader, 710 | loadScript, 711 | loadSection, 712 | loadSections, 713 | readBlockConfig, 714 | sampleRUM, 715 | setup, 716 | toCamelCase, 717 | toClassName, 718 | waitForFirstImage, 719 | wrapTextNodes, 720 | }; 721 | --------------------------------------------------------------------------------