Merge pull request #316 from adobe/redesign/doc-migration

Redesign/doc migration

blocks/card-list/card-list.js

@@ -3,6 +3,7 @@
 import {
  createOptimizedPicture, createTag, buildBlock, decorateBlock, loadBlock,
 } from '../../scripts/scripts.js';
+import { returnLinkTarget } from '../../utils/helpers.js';
 
 // Redesign's version: render image card list
 const decorateCardListByListElement = (block) => {
@@ -19,7 +20,11 @@ const decorateCardListByListElement = (block) => {
 
  const link = li.querySelector('a');
  if (link) {
- const tag = createTag('a', { href: link.getAttribute('href'), class: 'card-wrapper' });
+ const tag = createTag('a', {
+ href: link.getAttribute('href'),
+ class: 'card-wrapper',
+ });
+ tag.setAttribute('target', returnLinkTarget(tag.href));
  link.parentElement.innerHTML = link.innerHTML;
  [...li.childNodes].forEach((child) => {
  tag.append(child);
@@ -31,6 +36,12 @@ const decorateCardListByListElement = (block) => {
  cardTitle.replaceChildren(span);
  tag.classList.add('link-highlight-colorful-effect-hover-wrapper');
 
+ // TODO: temp fix for status.live
+ if (cardTitle.textContent.toLowerCase() === 'status.live') {
+ tag.setAttribute('href', 'https://status.hlx.live/');
+ tag.setAttribute('target', '_blank');
+ }
+
  li.append(tag);
  }
  ul.append(li);

blocks/columns/columns.css

@@ -2,6 +2,10 @@
  text-align: left;
 }
 
+.columns .columns-image img {
+ max-width: 100%;
+}
+
 .columns.bleed > div {
  display: flex;
  flex-direction: column;
@@ -332,3 +336,31 @@
  padding: var(--spacing-xxl) var(--spacing-xl);
  }
 }
+
+/* adjust image size on sidekick extension page */
+.columns.center-image-small > div {
+ padding: 0;
+}
+
+.columns.center-image-small > div > div:last-of-type {
+ display: grid;
+ justify-content: center;
+ align-items: center;
+}
+
+.columns.center-image-small > div > div:last-of-type picture {
+ width: fit-content;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.columns.center-image-small > div > div:last-of-type img {
+ width: 70%;
+ max-width: 360px;
+ filter: none;
+}
+
+main.without-full-width-hero .section.content .columns-wrapper {
+ margin-top: var(--spacing-m);
+}

blocks/faq/faq.css

@@ -1,9 +1,24 @@
 main .faq dt {
- margin-top: 64px;
- scroll-margin-top: 64px;
+ margin-top: var(--spacing-m);
+ scroll-margin-top: var(--spacing-m);
  font-weight: 700;
+ margin-bottom: var(--spacing-xxs);
 }
 
 main .faq a {
  scroll-margin: calc(var(--nav-height) + 1em);
+}
+
+main .faq dt > a {
+ font-size: var(--type-heading-s-size);
+ line-height: var(--type-heading-s-lh);
+}
+
+main .faq dd {
+ font-size: var(--type-body-s-size);
+ line-height: var(--type-body-s-lh);
+}
+
+body.guides-template main .faq dt a.anchor-link:any-link::before {
+ top: 0;
 }

blocks/faq/faq.js

@@ -13,12 +13,14 @@ export default async function decorateFaq($block) {
  const $dl = document.createElement('dl');
  json.data.forEach((row, i) => {
  const $dt = document.createElement('dt');
+ $dt.classList.add('link-highlight-colorful-effect-hover-wrapper');
  $dt.id = row.Id || `q${(i + 1)}`;
  $dt.innerText = row.Question;
  addAnchorLink($dt);
  const $dd = document.createElement('dd');
  const answer = autoLink(row.Answer);
-
+ const titleLink = $dt.querySelector('.anchor-link');
+ if (titleLink) titleLink.classList.add('link-highlight-colorful-effect-2');
  $dd.innerHTML = answer;
  $dl.append($dt, $dd);
  });

blocks/side-navigation/side-navigation.css

@@ -209,7 +209,7 @@
 }
 
 /* with arrow toggle list layer */
-.side-navigation .list-section:last-of-type .list-section-inner > li {
+.side-navigation .list-section:last-of-type .list-section-inner > li.side-navigation-nested-target {
  padding: 2px var(--nav-sidebar-indent-spacing);
  width: 100%;
  cursor: pointer;

blocks/side-navigation/side-navigation.js

@@ -1,4 +1,5 @@
 import createTag from '../../utils/tag.js';
+import { returnLinkTarget } from '../../utils/helpers.js';
 
 let searchFunc;
 let searchTerm;
@@ -174,6 +175,13 @@ export default async function decorate(block) {
  // close overlay when clicked on link, ensure close overlay if link is on same page
  const allSideNavLinks = block.querySelectorAll('a');
  allSideNavLinks.forEach((link) => {
+ // open external link in new tab
+ link.setAttribute('target', returnLinkTarget(link.href));
+ // TODO: temp fix for status.live
+ if (link.textContent.toLowerCase() === 'status.live') {
+ link.setAttribute('href', 'https://status.hlx.live/');
+ link.setAttribute('target', '_blank');
+ }
  link.addEventListener('click', () => {
  backdropCurtain.classList.remove('is-open');
  block.classList.remove('overlay');

styles/styles.css

@@ -469,6 +469,7 @@ code {
 
 code:not(pre > code) {
  font-size: 14px;
+ overflow-wrap: break-word;
  border: 1px solid #e5e5e5;
  background-color: var(--code-bg-color);
  color: var(--brand-color-dark-purple);
@@ -1097,11 +1098,18 @@ body.guides-template main a {
  line-height: var(--type-body-s-lh);
 }
 
-body.guides-template main .default-content-wrapper a {
+body.guides-template main .section.content a {
+ overflow-wrap: break-word;
+}
+
+body.guides-template main .default-content-wrapper a,
+body main .faq dd a {
  transition: all 0.2s ease-in-out;
+ cursor: pointer;
 }
 
-body.guides-template main .default-content-wrapper a:hover {
+body.guides-template main .default-content-wrapper a:hover,
+main .faq dd a:hover {
  color: var(--spectrum-blue);
 }