From e05673635e5154dbd0d2a19710d15a0f8f3710fe Mon Sep 17 00:00:00 2001 From: Satya Deep Maheshwari Date: Wed, 23 Aug 2023 20:20:37 +0530 Subject: [PATCH] Changes to comply with Adobe Open Source guidelines (#49) * Changes to comply with Adobe Open Source guidelines * Update PR template * Fix linting errors --------- Co-authored-by: Satya Deep Maheshwari --- .github/pull_request_template.md | 4 +- CODE_OF_CONDUCT.md | 101 ++++++------ CONTRIBUTING.md | 91 ++++------ blocks/cards/cards.css | 31 ---- blocks/cards/cards.js | 18 -- blocks/columns/columns.css | 33 ---- blocks/columns/columns.js | 18 -- blocks/footer/footer.css | 14 -- blocks/footer/footer.js | 25 --- blocks/header/header.css | 275 ------------------------------- blocks/header/header.js | 145 ---------------- blocks/hero/hero.css | 39 ----- blocks/hero/hero.js | 0 scripts/delayed.js | 11 ++ scripts/lib-franklin.js | 20 +-- scripts/scripts.js | 12 ++ styles/fonts.css | 13 +- styles/lazy-styles.css | 12 ++ styles/styles.css | 20 +-- 19 files changed, 154 insertions(+), 728 deletions(-) delete mode 100644 blocks/cards/cards.css delete mode 100644 blocks/cards/cards.js delete mode 100644 blocks/columns/columns.css delete mode 100644 blocks/columns/columns.js delete mode 100644 blocks/footer/footer.css delete mode 100644 blocks/footer/footer.js delete mode 100644 blocks/header/header.css delete mode 100644 blocks/header/header.js delete mode 100644 blocks/hero/hero.css delete mode 100644 blocks/hero/hero.js diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index af8667211..32dd30d5f 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -3,5 +3,5 @@ Please always provide the [GitHub issue(s)](../issues) your PR is for, as well a Fix # Test URLs: -- Before: https://main--aem-assets-boilerplate--hlxsites.hlx.page/aem-asset-selector -- After: https://--aem-assets-boilerplate--hlxsites.hlx.page/aem-asset-selector +- Before: https://main--franklin-assets-selector--hlxsites.hlx.page/aem-asset-selector +- After: https://--franklin-assets-selector--hlxsites.hlx.page/aem-asset-selector diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 75f927072..3b067acd5 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -2,73 +2,78 @@ ## Our Pledge -In the interest of fostering an open and welcoming environment, we as -contributors and maintainers pledge to making participation in our project and -our community a harassment-free experience for everyone, regardless of age, body -size, disability, ethnicity, gender identity and expression, level of experience, -nationality, personal appearance, race, religion, or sexual identity and -orientation. +We as members, contributors, and leaders pledge to make participation in our project and community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, caste, color, religion, or sexual identity and orientation. + +We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. ## Our Standards -Examples of behavior that contributes to creating a positive environment -include: +Examples of behavior that contribute to a positive environment for our project and community include: -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members +* Demonstrating empathy and kindness toward other people +* Being respectful of differing opinions, viewpoints, and experiences +* Giving and gracefully accepting constructive feedback +* Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience +* Focusing on what is best, not just for us as individuals but for the overall community -Examples of unacceptable behavior by participants include: +Examples of unacceptable behavior include: -* The use of sexualized language or imagery and unwelcome sexual attention or -advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic - address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a - professional setting +* The use of sexualized language or imagery, and sexual attention or advances of any kind +* Trolling, insulting or derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others’ private information, such as a physical or email address, without their explicit permission +* Other conduct which could reasonably be considered inappropriate in a professional setting ## Our Responsibilities -Project maintainers are responsible for clarifying the standards of acceptable -behavior and are expected to take appropriate and fair corrective action in -response to any instances of unacceptable behavior. +Project maintainers are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any instances of unacceptable behavior. -Project maintainers have the right and responsibility to remove, edit, or -reject comments, commits, code, wiki edits, issues, and other contributions -that are not aligned to this Code of Conduct, or to ban temporarily or -permanently any contributor for other behaviors that they deem inappropriate, -threatening, offensive, or harmful. +Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for behaviors that they deem inappropriate, threatening, offensive, or harmful. ## Scope -This Code of Conduct applies both within project spaces and in public spaces -when an individual is representing the project or its community. Examples of -representing a project or community include using an official project e-mail -address, posting via an official social media account, or acting as an appointed -representative at an online or offline event. Representation of a project may be -further defined and clarified by project maintainers. +This Code of Conduct applies when an individual is representing the project or its community both within project spaces and in public spaces. Examples of representing a project or community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. ## Enforcement -Instances of abusive, harassing, or otherwise unacceptable behavior may be -reported by contacting the project team at Grp-opensourceoffice@adobe.com. All -complaints will be reviewed and investigated and will result in a response that -is deemed necessary and appropriate to the circumstances. The project team is -obligated to maintain confidentiality with regard to the reporter of an incident. -Further details of specific enforcement policies may be posted separately. +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by first contacting the project team. Oversight of Adobe projects is handled by the Adobe Open Source Office, which has final say in any violations and enforcement of this Code of Conduct and can be reached at Grp-opensourceoffice@adobe.com. All complaints will be reviewed and investigated promptly and fairly. + +The project team must respect the privacy and security of the reporter of any incident. + +Project maintainers who do not follow or enforce the Code of Conduct may face temporary or permanent repercussions as determined by other members of the project's leadership or the Adobe Open Source Office. + +## Enforcement Guidelines + +Project maintainers will follow these Community Impact Guidelines in determining the consequences for any action they deem to be in violation of this Code of Conduct: + +**1. Correction** + +Community Impact: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community. + +Consequence: A private, written warning from project maintainers describing the violation and why the behavior was unacceptable. A public apology may be requested from the violator before any further involvement in the project by violator. + +**2. Warning** + +Community Impact: A relatively minor violation through a single incident or series of actions. + +Consequence: A written warning from project maintainers that includes stated consequences for continued unacceptable behavior. Violator must refrain from interacting with the people involved for a specified period of time as determined by the project maintainers, including, but not limited to, unsolicited interaction with those enforcing the Code of Conduct through channels such as community spaces and social media. Continued violations may lead to a temporary or permanent ban. + +**3. Temporary Ban** + +Community Impact: A more serious violation of community standards, including sustained unacceptable behavior. + +Consequence: A temporary ban from any interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Failure to comply with the temporary ban may lead to a permanent ban. + +**4. Permanent Ban** + +Community Impact: Demonstrating a consistent pattern of violation of community standards or an egregious violation of community standards, including, but not limited to, sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. -Project maintainers who do not follow or enforce the Code of Conduct in good -faith may face temporary or permanent repercussions as determined by other -members of the project's leadership. +Consequence: A permanent ban from any interaction with the community. ## Attribution -This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, -available at [http://contributor-covenant.org/version/1/4][version] +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.1, +available at [http://contributor-covenant.org/version/2/1][version] [homepage]: http://contributor-covenant.org -[version]: http://contributor-covenant.org/version/1/4/ \ No newline at end of file +[version]: http://contributor-covenant.org/version/2/1 \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 3bcf42258..3ac4131da 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,74 +1,47 @@ -# Contributing to Project Helix +# Contributing -This project (like almost all of Project Helix) is an Open Development project and welcomes contributions from everyone who finds it useful or lacking. +Thanks for choosing to contribute! -## Code Of Conduct - -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. - -## Contributor License Agreement - -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! - -## Things to Keep in Mind - -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. - -For other contributors, a maintainer of the project has to approve the pull request. - -# Before You Contribute - -* Check that there is an existing issue in GitHub issues -* Check if there are other pull requests that might overlap or conflict with your intended contribution - -# How to Contribute - -1. Fork the repository -2. Make some changes on a branch on your fork -3. Create a pull request from your branch - -In your pull request, outline: - -* What the changes intend -* How they change the existing code -* If (and what) they breaks -* Start the pull request with the GitHub issue ID, e.g. #123 - -Lastly, please follow the [pull request template](.github/pull_request_template.md) when submitting a pull request! - -Each commit message that is not part of a pull request: - -* Should contain the issue ID like `#123` -* Can contain the tag `[trivial]` for trivial changes that don't relate to an issue +The following are a set of guidelines to follow when contributing to this project. +## Code Of Conduct +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 +[Grp-opensourceoffice@adobe.com](mailto:Grp-opensourceoffice@adobe.com). -## Coding Styleguides +## Have A Question? -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. +Start by filing an issue. The existing committers on this project work to reach +consensus around project direction and issue solutions within issue threads +(when appropriate). -You can fix some of the issues automatically by running `npx eslint . --fix`. +## Contributor License Agreement -## Commit Message Format +All third-party contributions to this project must be accompanied by a signed contributor +license agreement. This gives Adobe permission to redistribute your contributions +as part of the project. [Sign our CLA](https://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! -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. +## Code Reviews -```bash -# either add all changed files -$ git add -A -# or selectively add files -$ git add package.json -# then commit using the wizard -$ npm run commit -``` +All submissions should come in the form of pull requests and need to be reviewed +by project committers. Read [GitHub's pull request documentation](https://help.github.com/articles/about-pull-requests/) +for more information on sending pull requests. -# How Contributions get Reviewed +Lastly, please follow the [pull request template](PULL_REQUEST_TEMPLATE.md) when +submitting a pull request! -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. +## From Contributor To Committer -# Release Management +We love contributions from our community! If you'd like to go a step beyond contributor +and become a committer with full write access and a say in the project, you must +be invited to the project. The existing committers employ an internal nomination +process that must reach lazy consensus (silence is approval) before invitations +are issued. If you feel you are qualified and want to get more deeply involved, +feel free to reach out to existing committers to have a conversation about that. -The project's committers will release to the [Adobe organization on npmjs.org](https://www.npmjs.com/org/adobe). -Please contact the [Adobe Open Source Advisory Board](https://git.corp.adobe.com/OpenSourceAdvisoryBoard/discuss/issues) to get access to the npmjs organization. +## Security Issues -The release process is fully automated using `semantic-release`, increasing the version numbers, etc. based on the contents of the commit messages found. +Security issues shouldn't be reported on this issue tracker. Instead, [file an issue to our security experts](https://helpx.adobe.com/security/alertus.html). \ No newline at end of file diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css deleted file mode 100644 index a0315edee..000000000 --- a/blocks/cards/cards.css +++ /dev/null @@ -1,31 +0,0 @@ -.cards > ul { - list-style: none; - margin: 0; - padding: 0; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - grid-gap: 16px; -} - -.cards > ul > li { - border: 1px solid var(--highlight-background-color); - background-color: var(--background-color) -} - -.cards .cards-card-body { - margin: 16px; -} - -.cards .cards-card-image { - line-height: 0; -} - -.cards .cards-card-body > *:first-child { - margin-top: 0; -} - -.cards > ul > li img { - width: 100%; - aspect-ratio: 4 / 3; - object-fit: cover; -} diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js deleted file mode 100644 index 717ec302d..000000000 --- a/blocks/cards/cards.js +++ /dev/null @@ -1,18 +0,0 @@ -import { createOptimizedPicture } from '../../scripts/lib-franklin.js'; - -export default function decorate(block) { - /* change to ul, li */ - const ul = document.createElement('ul'); - [...block.children].forEach((row) => { - const li = document.createElement('li'); - while (row.firstElementChild) li.append(row.firstElementChild); - [...li.children].forEach((div) => { - if (div.children.length === 1 && div.querySelector('picture')) div.className = 'cards-card-image'; - else div.className = 'cards-card-body'; - }); - ul.append(li); - }); - ul.querySelectorAll('img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }]))); - block.textContent = ''; - block.append(ul); -} diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css deleted file mode 100644 index b6cdee4ea..000000000 --- a/blocks/columns/columns.css +++ /dev/null @@ -1,33 +0,0 @@ -.columns > div { - display: flex; - flex-direction: column; -} - -.columns img { - width: 100%; -} - -.columns > div > div { - order: 1; -} - -.columns > div > .columns-img-col { - order: 0; -} - -.columns > div > .columns-img-col img { - display: block; -} - -@media (min-width: 900px) { - .columns > div { - align-items: center; - flex-direction: unset; - gap: 32px; - } - - .columns > div > div { - flex: 1; - order: unset; - } -} diff --git a/blocks/columns/columns.js b/blocks/columns/columns.js deleted file mode 100644 index 9b78c812e..000000000 --- a/blocks/columns/columns.js +++ /dev/null @@ -1,18 +0,0 @@ -export default function decorate(block) { - const cols = [...block.firstElementChild.children]; - block.classList.add(`columns-${cols.length}-cols`); - - // setup image columns - [...block.children].forEach((row) => { - [...row.children].forEach((col) => { - const pic = col.querySelector('picture'); - if (pic) { - const picWrapper = pic.closest('div'); - if (picWrapper && picWrapper.children.length === 1) { - // picture is only content in column - picWrapper.classList.add('columns-img-col'); - } - } - }); - }); -} diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css deleted file mode 100644 index 19fc5607b..000000000 --- a/blocks/footer/footer.css +++ /dev/null @@ -1,14 +0,0 @@ -footer { - padding: 2rem; - background-color: var(--overlay-background-color); - font-size: var(--body-font-size-s); -} - -footer .footer { - max-width: 1200px; - margin: auto; -} - -footer .footer p { - margin: 0; -} \ No newline at end of file diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js deleted file mode 100644 index ca8c7a68e..000000000 --- a/blocks/footer/footer.js +++ /dev/null @@ -1,25 +0,0 @@ -import { readBlockConfig, decorateIcons } from '../../scripts/lib-franklin.js'; - -/** - * loads and decorates the footer - * @param {Element} block The footer block element - */ -export default async function decorate(block) { - const cfg = readBlockConfig(block); - block.textContent = ''; - - // fetch footer content - const footerPath = cfg.footer || '/footer'; - const resp = await fetch(`${footerPath}.plain.html`, window.location.pathname.endsWith('/footer') ? { cache: 'reload' } : {}); - - if (resp.ok) { - const html = await resp.text(); - - // decorate footer DOM - const footer = document.createElement('div'); - footer.innerHTML = html; - - decorateIcons(footer); - block.append(footer); - } -} diff --git a/blocks/header/header.css b/blocks/header/header.css deleted file mode 100644 index 4c2b46d51..000000000 --- a/blocks/header/header.css +++ /dev/null @@ -1,275 +0,0 @@ -/* header and nav layout */ -header .nav-wrapper { - background-color: var(--background-color); - width: 100%; - z-index: 2; - position: fixed; -} - -header nav { - box-sizing: border-box; - display: grid; - grid-template: - 'hamburger brand tools' var(--nav-height) - 'sections sections sections' 1fr / auto 1fr auto; - align-items: center; - gap: 0 2em; - margin: auto; - max-width: 1264px; - height: var(--nav-height); - padding: 0 1rem; - font-family: var(--body-font-family); -} - -header nav[aria-expanded="true"] { - grid-template: - 'hamburger brand' var(--nav-height) - 'sections sections' 1fr - 'tools tools' var(--nav-height) / auto 1fr; - overflow-y: auto; - min-height: 100vh; -} - -@media (min-width: 600px) { - header nav { - padding: 0 2rem; - } -} - -@media (min-width: 900px) { - header nav { - display: flex; - justify-content: space-between; - } - - header nav[aria-expanded="true"] { - min-height: 0; - overflow: visible; - } -} - -header nav p { - margin: 0; - line-height: 1; -} - -header nav a:any-link { - color: currentcolor; -} - -/* hamburger */ -header nav .nav-hamburger { - grid-area: hamburger; - height: 22px; - display: flex; - align-items: center; -} - -header nav .nav-hamburger button { - height: 22px; - margin: 0; - border: 0; - border-radius: 0; - padding: 0; - background-color: var(--background-color); - color: inherit; - overflow: initial; - text-overflow: initial; - white-space: initial; -} - -header nav .nav-hamburger-icon, -header nav .nav-hamburger-icon::before, -header nav .nav-hamburger-icon::after { - box-sizing: border-box; - display: block; - position: relative; - width: 20px; -} - -header nav .nav-hamburger-icon::before, -header nav .nav-hamburger-icon::after { - content: ''; - position: absolute; - background: currentcolor; -} - -header nav[aria-expanded="false"] .nav-hamburger-icon, -header nav[aria-expanded="false"] .nav-hamburger-icon::before, -header nav[aria-expanded="false"] .nav-hamburger-icon::after { - height: 2px; - border-radius: 2px; - background: currentcolor; -} - -header nav[aria-expanded="false"] .nav-hamburger-icon::before { - top: -6px; -} - -header nav[aria-expanded="false"] .nav-hamburger-icon::after { - top: 6px; -} - -header nav[aria-expanded="true"] .nav-hamburger-icon { - height: 22px; -} - -header nav[aria-expanded="true"] .nav-hamburger-icon::before, -header nav[aria-expanded="true"] .nav-hamburger-icon::after { - top: 3px; - left: 1px; - transform: rotate(45deg); - transform-origin: 2px 1px; - width: 24px; - height: 2px; - border-radius: 2px; -} - -header nav[aria-expanded="true"] .nav-hamburger-icon::after { - top: unset; - bottom: 3px; - transform: rotate(-45deg); -} - -@media (min-width: 900px) { - header nav .nav-hamburger { - display: none; - visibility: hidden; - } -} - -/* brand */ -header .nav-brand { - grid-area: brand; - flex-basis: 128px; - font-size: var(--heading-font-size-s); - font-weight: 700; - line-height: 1; -} - -header nav .nav-brand img { - width: 128px; - height: auto; -} - -/* sections */ -header nav .nav-sections { - grid-area: sections; - flex: 1 1 auto; - display: none; - visibility: hidden; - background-color: var(--overlay-color); -} - -header nav[aria-expanded="true"] .nav-sections { - display: block; - visibility: visible; - align-self: start; -} - -header nav .nav-sections ul { - list-style: none; - padding-left: 0; - font-size: var(--body-font-size-s); - font-weight: 500; -} - -header nav .nav-sections ul > li { - font-weight: 700; -} - -header nav .nav-sections ul > li > ul { - margin-top: 0; -} - -header nav .nav-sections ul > li > ul > li { - font-weight: 500; -} - -@media (min-width: 900px) { - header nav .nav-sections { - display: block; - visibility: visible; - white-space: nowrap; - } - - header nav[aria-expanded="true"] .nav-sections { - align-self: unset; - } - - header nav .nav-sections .nav-drop { - position: relative; - padding-right: 16px; - cursor: pointer; - } - - header nav .nav-sections .nav-drop::after { - content: ''; - display: inline-block; - position: absolute; - top: .5em; - right: 2px; - transform: rotate(135deg); - width: 6px; - height: 6px; - border: 2px solid currentcolor; - border-radius: 0 1px 0 0; - border-width: 2px 2px 0 0; - } - - header nav .nav-sections .nav-drop[aria-expanded="true"]::after { - top: unset; - bottom: .5em; - transform: rotate(315deg); - } - - header nav .nav-sections ul { - display: flex; - gap: 2em; - margin: 0; - font-size: var(--body-font-size-xs); - } - - header nav .nav-sections > ul > li { - flex: 0 1 auto; - position: relative; - font-weight: 500; - } - - header nav .nav-sections > ul > li > ul { - display: none; - position: relative; - } - - header nav .nav-sections > ul > li[aria-expanded="true"] > ul { - display: block; - position: absolute; - left: -1em; - width: 200px; - margin-top: 12px; - padding: 1em; - background-color: var(--highlight-background-color); - white-space: initial; - } - - header nav .nav-sections > ul > li > ul::before { - content: ''; - position: absolute; - top: -8px; - left: 8px; - width: 0; - height: 0; - border-left: 8px solid transparent; - border-right: 8px solid transparent; - border-bottom: 8px solid var(--highlight-background-color); - } - - header nav .nav-sections > ul > li > ul > li { - padding: 8px 0; - } -} - -/* tools */ -header nav .nav-tools { - grid-area: tools; -} diff --git a/blocks/header/header.js b/blocks/header/header.js deleted file mode 100644 index 9159e0d7c..000000000 --- a/blocks/header/header.js +++ /dev/null @@ -1,145 +0,0 @@ -import { getMetadata, decorateIcons } from '../../scripts/lib-franklin.js'; - -// media query match that indicates mobile/tablet width -const isDesktop = window.matchMedia('(min-width: 900px)'); - -function closeOnEscape(e) { - if (e.code === 'Escape') { - const nav = document.getElementById('nav'); - const navSections = nav.querySelector('.nav-sections'); - const navSectionExpanded = navSections.querySelector('[aria-expanded="true"]'); - if (navSectionExpanded && isDesktop.matches) { - // eslint-disable-next-line no-use-before-define - toggleAllNavSections(navSections); - navSectionExpanded.focus(); - } else if (!isDesktop.matches) { - // eslint-disable-next-line no-use-before-define - toggleMenu(nav, navSections); - nav.querySelector('button').focus(); - } - } -} - -function openOnKeydown(e) { - const focused = document.activeElement; - const isNavDrop = focused.className === 'nav-drop'; - if (isNavDrop && (e.code === 'Enter' || e.code === 'Space')) { - const dropExpanded = focused.getAttribute('aria-expanded') === 'true'; - // eslint-disable-next-line no-use-before-define - toggleAllNavSections(focused.closest('.nav-sections')); - focused.setAttribute('aria-expanded', dropExpanded ? 'false' : 'true'); - } -} - -function focusNavSection() { - document.activeElement.addEventListener('keydown', openOnKeydown); -} - -/** - * Toggles all nav sections - * @param {Element} sections The container element - * @param {Boolean} expanded Whether the element should be expanded or collapsed - */ -function toggleAllNavSections(sections, expanded = false) { - sections.querySelectorAll('.nav-sections > ul > li').forEach((section) => { - section.setAttribute('aria-expanded', expanded); - }); -} - -/** - * Toggles the entire nav - * @param {Element} nav The container element - * @param {Element} navSections The nav sections within the container element - * @param {*} forceExpanded Optional param to force nav expand behavior when not null - */ -function toggleMenu(nav, navSections, forceExpanded = null) { - const expanded = forceExpanded !== null ? !forceExpanded : nav.getAttribute('aria-expanded') === 'true'; - const button = nav.querySelector('.nav-hamburger button'); - document.body.style.overflowY = (expanded || isDesktop.matches) ? '' : 'hidden'; - nav.setAttribute('aria-expanded', expanded ? 'false' : 'true'); - toggleAllNavSections(navSections, expanded || isDesktop.matches ? 'false' : 'true'); - button.setAttribute('aria-label', expanded ? 'Open navigation' : 'Close navigation'); - // enable nav dropdown keyboard accessibility - const navDrops = navSections.querySelectorAll('.nav-drop'); - if (isDesktop.matches) { - navDrops.forEach((drop) => { - if (!drop.hasAttribute('tabindex')) { - drop.setAttribute('role', 'button'); - drop.setAttribute('tabindex', 0); - drop.addEventListener('focus', focusNavSection); - } - }); - } else { - navDrops.forEach((drop) => { - drop.removeAttribute('role'); - drop.removeAttribute('tabindex'); - drop.removeEventListener('focus', focusNavSection); - }); - } - // enable menu collapse on escape keypress - if (!expanded || isDesktop.matches) { - // collapse menu on escape press - window.addEventListener('keydown', closeOnEscape); - } else { - window.removeEventListener('keydown', closeOnEscape); - } -} - -/** - * decorates the header, mainly the nav - * @param {Element} block The header block element - */ -export default async function decorate(block) { - // fetch nav content - const navMeta = getMetadata('nav'); - const navPath = navMeta ? new URL(navMeta).pathname : '/nav'; - const resp = await fetch(`${navPath}.plain.html`); - - if (resp.ok) { - const html = await resp.text(); - - // decorate nav DOM - const nav = document.createElement('nav'); - nav.id = 'nav'; - nav.innerHTML = html; - - const classes = ['brand', 'sections', 'tools']; - classes.forEach((c, i) => { - const section = nav.children[i]; - if (section) section.classList.add(`nav-${c}`); - }); - - const navSections = nav.querySelector('.nav-sections'); - if (navSections) { - navSections.querySelectorAll(':scope > ul > li').forEach((navSection) => { - if (navSection.querySelector('ul')) navSection.classList.add('nav-drop'); - navSection.addEventListener('click', () => { - if (isDesktop.matches) { - const expanded = navSection.getAttribute('aria-expanded') === 'true'; - toggleAllNavSections(navSections); - navSection.setAttribute('aria-expanded', expanded ? 'false' : 'true'); - } - }); - }); - } - - // hamburger for mobile - const hamburger = document.createElement('div'); - hamburger.classList.add('nav-hamburger'); - hamburger.innerHTML = ``; - hamburger.addEventListener('click', () => toggleMenu(nav, navSections)); - nav.prepend(hamburger); - nav.setAttribute('aria-expanded', 'false'); - // prevent mobile nav behavior on window resize - toggleMenu(nav, navSections, isDesktop.matches); - isDesktop.addEventListener('change', () => toggleMenu(nav, navSections, isDesktop.matches)); - - decorateIcons(nav); - const navWrapper = document.createElement('div'); - navWrapper.className = 'nav-wrapper'; - navWrapper.append(nav); - block.append(navWrapper); - } -} diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css deleted file mode 100644 index cc5f4fa56..000000000 --- a/blocks/hero/hero.css +++ /dev/null @@ -1,39 +0,0 @@ -/* block specific CSS goes here */ - -main .hero-container > div { - max-width: unset; -} - -main .hero-container { - padding: 0; -} - -main .hero { - position: relative; - padding: 32px; - min-height: 300px; -} - -main .hero h1 { - max-width: 1200px; - margin-left: auto; - margin-right: auto; - color: white; -} - -main .hero picture { - position: absolute; - z-index: -1; - top: 0; - left: 0; - bottom: 0; - right: 0; - object-fit: cover; - box-sizing: border-box; -} - -main .hero img { - object-fit: cover; - width: 100%; - height: 100%; -} diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/scripts/delayed.js b/scripts/delayed.js index 920b4ad83..e0168c777 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -1,3 +1,14 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ // eslint-disable-next-line import/no-cycle import { sampleRUM } from './lib-franklin.js'; diff --git a/scripts/lib-franklin.js b/scripts/lib-franklin.js index a00124b62..905d797ac 100644 --- a/scripts/lib-franklin.js +++ b/scripts/lib-franklin.js @@ -1,14 +1,14 @@ /* - * Copyright 2022 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ /** * log RUM if part of the sample. diff --git a/scripts/scripts.js b/scripts/scripts.js index f6d84985d..3e8975ef5 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -1,3 +1,15 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + import { sampleRUM, buildBlock, diff --git a/styles/fonts.css b/styles/fonts.css index bce7eb141..c9d46bdb0 100644 --- a/styles/fonts.css +++ b/styles/fonts.css @@ -1,3 +1,14 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ @font-face { font-family: roboto; font-style: normal; @@ -6,7 +17,7 @@ src: url('../fonts/roboto-bold.woff2') format('woff2'); 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; } - + @font-face { font-family: roboto; font-style: normal; diff --git a/styles/lazy-styles.css b/styles/lazy-styles.css index 3cb30e9cb..4dd919984 100644 --- a/styles/lazy-styles.css +++ b/styles/lazy-styles.css @@ -1 +1,13 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + /* add global styles that can be loaded post LCP here */ \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index 5ce098b22..b2df6aae5 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1,14 +1,14 @@ /* - * Copyright 2020 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ :root { /* colors */