fix: upgrade to v1.2.0

Author: fkakatie

Diff for: .eslintignore

@@ -1 +1,2 @@
-helix-importer-ui
+helix-importer-ui
+tools/sidekick

Diff for: .stylelintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": ["stylelint-config-standard"]
+  "extends": [
+    "stylelint-config-standard"
+  ],
+  "ignoreFiles": "tools/sidekick/**/*.css"
 }

Diff for: package-lock.json

@@ -5,7 +5,7 @@
   "description": "Starter project for Adobe Helix",
   "scripts": {
     "lint:js": "eslint .",
-    "lint:css": "stylelint blocks/**/*.css styles/*.css",
+    "lint:css": "stylelint \"blocks/**/*.css\" \"styles/*.css\" \"tools/**/*.css\"",
     "lint": "npm run lint:js && npm run lint:css"
   },
   "repository": {
@@ -19,6 +19,7 @@
   },
   "homepage": "https://github.com/adobe/aem-boilerplate#readme",
   "devDependencies": {
+    "@adobe/rum-distiller": "1.16.2",
     "@babel/eslint-parser": "7.24.8",
     "eslint": "8.57.0",
     "eslint-config-airbnb-base": "15.0.0",

Diff for: package.json

@@ -11,8 +11,35 @@ import {
   loadSections,
   loadCSS,
   sampleRUM,
+  getMetadata,
+  loadBlock,
+  buildBlock,
+  decorateBlock,
+  loadScript,
 } from './aem.js';
 
+/**
+ * Helper function to create DOM elements
+ * @param {string} tag DOM element to be created
+ * @param {array} attributes attributes to be added
+ */
+export function createTag(tag, attributes, html) {
+  const el = document.createElement(tag);
+  if (html) {
+    if (html instanceof HTMLElement || html instanceof SVGElement) {
+      el.append(html);
+    } else {
+      el.insertAdjacentHTML('beforeend', html);
+    }
+  }
+  if (attributes) {
+    Object.entries(attributes).forEach(([key, val]) => {
+      el.setAttribute(key, val);
+    });
+  }
+  return el;
+}
+
 /**
  * load fonts.css and set a session storage flag
  */
@@ -100,6 +127,66 @@ function decorateImages(main) {
   });
 }
 
+function updateGuideTemplateStyleBasedOnHero() {
+  const isHeroContentExist = document.querySelector(
+    '.guides-template .section.heading',
+  );
+
+  if (isHeroContentExist) {
+    document.querySelector('main').classList.add('has-full-width-hero');
+    const cardListBlocks = document.querySelectorAll('.block.card-list');
+    // make card list in main category page has '.image-card-listing' class
+    cardListBlocks.forEach((block) => block.classList.add('image-card-listing'));
+  } else {
+    document.querySelector('main').classList.add('without-full-width-hero');
+  }
+}
+
+export function setUpSideNav(main, aside) {
+  const sideNav = buildBlock('side-navigation', '');
+  aside.append(sideNav);
+  main.insertBefore(aside, main.querySelector('.section.content'));
+  updateGuideTemplateStyleBasedOnHero();
+  decorateBlock(sideNav);
+  return loadBlock(sideNav);
+}
+
+async function loadHighlightLibrary() {
+  const highlightCSS = createTag('link', {
+    rel: 'stylesheet',
+    href: '/libs/highlight/atom-one-dark.min.css',
+  });
+  document.head.append(highlightCSS);
+
+  await loadScript('/libs/highlight/highlight.min.js');
+  const initScript = createTag('script', {}, 'hljs.highlightAll();');
+  document.body.append(initScript);
+}
+
+export async function decorateGuideTemplateCodeBlock() {
+  const firstCodeBlock = document.querySelector('pre code');
+  if (!firstCodeBlock) return;
+
+  const intersectionObserver = new IntersectionObserver(
+    (entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          observer.unobserve(entry.target);
+          loadHighlightLibrary();
+        }
+      });
+    },
+    {
+      root: null,
+      rootMargin: '200px', // Adjust rootMargin as needed to trigger intersection at the desired position before the codeblock becomes visible
+      threshold: 0,
+    },
+  );
+
+  // when first codeblock is coming into view, load highlight.js for page
+  intersectionObserver.observe(firstCodeBlock);
+}
+
 /**
  * Decorates the main element.
  * @param {Element} main The main element
@@ -158,6 +245,18 @@ async function loadLazy(doc) {
   loadCSS(`${window.hlx.codeBasePath}/styles/lazy-styles.css`);
   loadFonts();
   swapIcons(main);
+
+  if (getMetadata('supressframe')) {
+    doc.querySelector('header').remove();
+    doc.querySelector('footer').remove();
+  } else {
+    // breadcrumb setup
+    // loadBreadcrumb(main);
+    // sidebar + related style setup
+    const aside = main.querySelector('main > aside');
+    if (aside) setUpSideNav(main, aside);
+    decorateGuideTemplateCodeBlock();
+  }
 }
 
 /**

Diff for: scripts/scripts.js

@@ -59,9 +59,19 @@
         },
         "paletteRect": {
           "type": "string",
-          "description": "he dimensions and position of a palette box",
+          "description": "The dimensions and position of a palette box",
           "dependentRequired": ["isPalette"]
         },
+        "isPopover": {
+          "type": "boolean",
+          "description": "Opens the URL in a popover instead of a new tab",
+          "dependentRequired": ["url"]
+        },
+        "popoverRect": {
+          "type": "string",
+          "description": "The dimensions of a popover, delimited by a semicolon (width, height)",
+          "dependentRequired": ["isPopover"]
+        },        
         "title": {
           "type": "string",
           "description": "The button text"
@@ -204,6 +214,14 @@
     "specialViews": {
       "type": "array",
       "items": { "$ref": "#/$defs/specialView" }
+    },
+    "editUrlLabel": {
+      "type": "string",
+      "description": "The label of the custom editing environment."
+    },
+    "editUrlPattern": {
+      "type": "string",
+      "description": "The URL pattern for the custom editing environment. Supports placeholders like {{contentSourceUrl}} or {{pathname}}."
     }
    },
    "additionalProperties": false

Diff for: sidekick/config.schema.json

@@ -90,7 +90,13 @@ body[data-scroll='disabled'] {
 }
 
 header {
+  position: fixed;
+  top: 0;
+  width: 100%;
   min-height: var(--header-height);
+  height: var(--nav-height);
+  background-color: #fff;
+  z-index: 9999;
   transition: height 0.2s, min-height 0.2s;
 }
 
@@ -117,7 +123,6 @@ main {
 
 /* sections */
 main > .section {
-  max-width: 1200px;
   margin: var(--spacing-500) 0;
 }
 
@@ -820,3 +825,152 @@ table+.form-field,
 .field-help-text p {
   margin: 0;
 }
+
+/* Redesign styles */
+
+
+/* Redesign button animation */
+
+/* primary button: blue bg */
+.redesign a.button:any-link,
+main .form .button,
+.feed.blog .read-more {
+  cursor: pointer;
+  text-decoration: none;
+  padding: 5.5px 15px;
+  text-align: center;
+  font-size: var(--type-body-xs-size);
+  line-height: var(--body-line-height);
+  font-style: normal;
+  font-weight: 600;
+  color: var(--color-white);
+  background: transparent;
+  border: 2px solid var(--spectrum-blue);
+  border-radius: 100px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: inline-block;
+  position: relative;
+  height: fit-content;
+  transition: all 0.3s ease-in-out;
+  overflow: hidden;
+  transform: translateZ(0);
+
+  /* fix for ios overflow with border-radius not working */
+  isolation: isolate;
+}
+
+main .form .button {
+  font-weight: 500;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.redesign a.button:any-link span {
+  color: var(--color-white);
+  transition: all 0.3s ease-in-out;
+}
+
+.redesign a.button:any-link:hover,
+main .form .button:hover,
+.feed.blog .read-more:hover {
+  color: var(--spectrum-blue);
+  border-color: var(--spectrum-blue);
+  transform: translateZ(0);
+}
+
+.redesign a.button:any-link:hover span {
+  color: var(--spectrum-blue);
+}
+
+.redesign a.button:any-link::before,
+main .form .button::before {
+  content: "";
+  position: absolute;
+  left: -102%;
+  top: 0;
+  transition: all 0.3s ease-in-out;
+  width: 202%;
+  height: 104%;
+  z-index: -1;
+
+  /* 1st value: hovered color, 2nd value: original color */
+  background:
+    radial-gradient(
+      circle at left,
+      var(--color-white) 50%,
+      var(--spectrum-blue) 50%
+    );
+}
+
+.redesign a.button:any-link:hover::before,
+main .form .button:hover::before {
+  left: 0%;
+}
+
+/* secondary button: grey border transparent bg -> border button */
+.redesign a.button.secondary:any-link {
+  color: var(--color-font-grey);
+  border-color: var(--color-font-grey);
+}
+
+.redesign a.button.secondary:any-link:hover {
+  color: var(--color-white);
+}
+
+.redesign a.button.secondary:any-link::before {
+  /* 1st value: hovered color, 2nd value: original color */
+  background:
+    radial-gradient(
+      circle at left,
+      var(--color-font-grey) 50%,
+      transparent 50%
+    );
+}
+
+/* .black-border button: black border transparent bg -> border button */
+.redesign a.button.black-border:any-link {
+  color: var(--color-black);
+  border-color: var(--color-black);
+}
+
+.redesign a.button.black-border:any-link:hover {
+  color: var(--color-white);
+}
+
+.redesign a.button.black-border:any-link::before {
+  /* 1st value: hovered color, 2nd value: original color */
+  background:
+    radial-gradient(
+      circle at left,
+      rgb(0 0 0 / 50%) 50%,
+      transparent 50%
+    );
+}
+
+/* larger size */
+.redesign a.button.large:any-link {
+  font-size: var(--type-body-s-size);
+  line-height: var(--type-body-s-lh);
+}
+
+@media screen and (width >= 900px) {
+  .redesign a.button.large:any-link {
+    font-size: var(--type-body-m-size);
+    line-height: 1.35;
+    padding: 8px 20px;
+    margin-bottom: 0;
+  }
+}
+
+@media screen and (width >= 1200px) {
+  .redesign a.button.large:any-link {
+    font-size: 18px;
+    line-height: 24px;
+    padding: 10px 26px;
+  }
+}
+
+aside {
+  min-height: 75px;
+  padding: 8px 0 0;
+}