text: // 'More projects' button on use case pages
  (() => {
    const button = document.querySelector('.js-moreProjectsBtn');
    if (!button) return;
    const hiddenProjects = document.querySelectorAll('.js-featuredUsersRow[hidden]');
    button.addEventListener('click', () => {
      button.setAttribute('hidden', true);
      hiddenProjects.forEach(project => {
        project.removeAttribute('hidden');
      });
    });
  })();
  
  /* Header tags generated with markdown - inner span needed for correct scroll
    position */
  (() => {
    const headingHashes = Array.from(document.querySelectorAll('h2[id]'));
    headingHashes.forEach(h2 => {
      const text = h2.textContent;
      const id = h2.id;
      h2.id = id + '-h2';
      h2.textContent = '';
      const span = document.createElement('span');
      span.textContent = text;
      span.id = id;
      h2.appendChild(span);
    });
  })();
  
  // Use case pages section navigation
  (() => {
    const stickyNav = document.querySelector('.js-useCaseStickyNav');
    if (stickyNav) {
      const linkData = {
        'overview': 'Overview',
        'key-benefits': 'Key Benefits',
        'use-case': 'Use Case',
        'featured-users': 'Featured Users',
        'get-started': 'Get Started',
      };
      const container = document.querySelector('.js-useCaseSubnav');
      const subNavAnchorLinks = document.querySelector('.js-useCaseSubnavLinks');
      const siteHeader = document.querySelector('.js-siteHeader');
      const header = document.querySelector('.js-useCaseSubnavHeader');
      const icon = document.querySelector('.js-useCaseSubnavMenuIcon');
      const menu = document.querySelector('.js-useCaseSubnavMenu');
      const contentBody = document.querySelector('.js-useCaseContentBody');
      const headerHeightPx = 56;
      const sectionHeadings = Array.from(
        document.querySelectorAll('.sectionHeading')
      ).map(h => h.firstChild);
      let distanceFromTop =
        window.pageYOffset +
        contentBody.getBoundingClientRect().top -
        headerHeightPx;
      if (!header || !menu) return;
      container.addEventListener('click', handleClick);
      container.addEventListener('keydown', handleKeydown);
      changeScrollPosition();
  
      function handleClick(event) {
        if (event.target === header) {
          toggleMenu();
        } else {
          closeMenu();
        }
      }
  
      function handleKeydown(event) {
        if (event.key === 'Enter') {
          closeMenu();
        } else {
          openMenu();
        }
      }
  
      function openMenu() {
        menu.classList.add('UseCaseSubNav-menu--open');
        icon.classList.add('UseCaseSubNav-menuIcon--open');
      }
  
      function closeMenu() {
        menu.classList.remove('UseCaseSubNav-menu--open');
        icon.classList.remove('UseCaseSubNav-menuIcon--open');
      }
  
      function toggleMenu() {
        menu.classList.toggle('UseCaseSubNav-menu--open');
        icon.classList.toggle('UseCaseSubNav-menuIcon--open');
      }
  
      sectionHeadings.forEach(heading => {
        let a = document.createElement('a');
        a.classList.add('UseCase-anchorLink', 'anchor-link');
        a.href = `${window.location.pathname}#${heading.id}`;
        a.textContent = linkData[heading.id];
        stickyNav.appendChild(a);
        a = a.cloneNode();
        a.textContent = linkData[heading.id];
        subNavAnchorLinks.appendChild(a);
      });
  
      // Selected section styles
      const anchorLinks = document.querySelectorAll('.anchor-link');
      anchorLinks.forEach(link => {
        link.addEventListener('click', () => {
          document
            .querySelectorAll('.anchor-link')
            .forEach(el => el.classList.remove('selected'));
          link.classList.add('selected');
        });
      });
  
      window.addEventListener('scroll', () => {
        // delay in case the user clicked the anchor link and we are autoscrolling
        setTimeout(setSelectedAnchor, 500);
      });
  
      function setSelectedAnchor() {
        for (heading of sectionHeadings) {
          const {offsetTop} = heading;
          if (offsetTop > window.scrollY) {
            anchorLinks.forEach(link => {
              const anchorId = link.href.slice(link.href.indexOf('#') + 1);
              if (anchorId === heading.id) {
                link.classList.add('selected');
              } else {
                link.classList.remove('selected');
              }
            });
            break;
          }
        }
      }
  
      /* sticky nav logic -- uses content for y position because reloading page
      when not scrolled to the top creates bug if using current y position of
      sticky nav */
      window.addEventListener('scroll', setStickyNav);
  
      window.addEventListener('resize', () => {
        distanceFromTop =
          window.pageYOffset +
          contentBody.getBoundingClientRect().top -
          headerHeightPx;
  
        changeScrollPosition()
      });
  
      /**
       * Changes scroll position according to the size of the header and menu
       * Also changes according to the user's browser
       */
      function changeScrollPosition() {
        const SUPPORTS_SCROLL_BEHAVIOR = document.body.style.scrollBehavior !== undefined;
        const WINDOW_WIDTH_BREAKPOINT_PX = 923;
        let scrollPosition = headerHeightPx;
  
        if (SUPPORTS_SCROLL_BEHAVIOR) {
          if (window.innerWidth < WINDOW_WIDTH_BREAKPOINT_PX) {
            scrollPosition += header.clientHeight;
          }
        } else {
          if (window.innerWidth >= WINDOW_WIDTH_BREAKPOINT_PX) {
            scrollPosition = siteHeader.clientHeight
          } else {
            scrollPosition = siteHeader.clientHeight + header.clientHeight;
          }
        }
  
        sectionHeadings.forEach((sectionHeading) => {
          sectionHeading.setAttribute('style', `
            margin-bottom: -${scrollPosition}px;
            padding-top: ${scrollPosition}px;
          `)
        });
      }
  
      function setStickyNav() {
        if (window.scrollY > distanceFromTop) {
          stickyNav.classList.add('UseCaseSubNav-anchorLinks--sticky');
        } else {
          stickyNav.classList.remove('UseCaseSubNav-anchorLinks--sticky');
        }
      }
    }
  })();
  