function generateMarkup(category, examplesDir, demoList, currDirLength) {
  let categoryDemos = demoList.filter((demo) => {
    return demo.startsWith(category);
  });
  categoryDemos = categoryDemos.map((demo) => {
    return `${examplesDir}/${demo}`;
  });

  let numDemos = 0;

  categoryDemos.forEach((demo) => {
    let dirs = demo.split('/');
    for (let i = currDirLength; i < dirs.length; i++) {
      let path = dirs.slice(0, i + 1).join('/');
      let id = 'sidebar--' + path.replace(examplesDir + '/', '');
      id = id.replaceAll('/', '_');
      let level = i - currDirLength;
      if (level > 4) level = 4;
      let name;

      // It's a directory
      if (FS.existsSync(path + '/dir-config.json')) {
        let dirConfig = FS.readJsonSync(path + '/dir-config.json');
        name = dirConfig.name;
        // It's a top level H2
        if (level == 0 && !DOCUMENT.querySelector(`#${id}`)) {
          let orderedList = DOCUMENT.createElement('ol');
          let title = DOCUMENT.createElement('header');

          title.innerHTML = `<h2 id="hamburger-category">${name}</h2>`;

          CONTENT.setAttribute('id', id);
          CONTENT.append(title, orderedList);
          // It's a lower H level
        } else if (level > 0 && !DOCUMENT.querySelector(`#${id}`)) {
          let idToFind = id.split('_');
          idToFind.pop();
          idToFind = idToFind.join('_');
          let newList = DOCUMENT.querySelector(`#${idToFind} ol`);

          let listItem = DOCUMENT.createElement('li');
          let orderedList = DOCUMENT.createElement('ol');
          let title = DOCUMENT.createElement(`h${2 + level}`);

          listItem.setAttribute('id', id);
          title.innerHTML = name;

          listItem.append(title, orderedList);
          newList.append(listItem);
        }

        // It's a demo
      } else if (
        FS.existsSync(path + '/demo-config.json')
      ) {
        numDemos += 1;

        let demoConfig = FS.readJsonSync(path + '/demo-config.json');
        name = demoConfig.metadata.title;

        let idToFind = id.split('_');
        idToFind.pop();
        idToFind = idToFind.join('_');
        let newList = DOCUMENT.querySelector(`#${idToFind} ol`);
        if (!newList.classList.contains('demo-links')) {
          newList.setAttribute('start', numDemos);
        }
        newList.classList.add('demo-links');

        let listItem = DOCUMENT.createElement('li');
        let anchor = DOCUMENT.createElement('a');
        let demoPath = path.replace(examplesDir + '/', '');
        anchor.setAttribute('target', '_top');
        anchor.setAttribute(
          'href',
          `https://introweb.tech/examples/${demoPath}`
        );
        anchor.innerHTML = name;

        listItem.append(anchor);
        newList.append(listItem);
      }
    }
  });

  FS.writeFileSync(
    `${examplesDir}/${category}/sidebar.html`,
    PRETTIER.format(CONTENT.innerHTML, {
      filepath: `${examplesDir}/${category}/sidebar.html`,
    })
  );

  CONTENT.innerHTML = '';
}
/**
 * Generates the sidebar markup for each category.
 * Outputs to /{category}/sidebar.hmtml
 * @param {String} category The current category to generate
 * @param {String} examplesDir The absolute path of the examples directory
 * @param {Array<String>} demoList A list of all demos
 * @param {Number} currDirLength Depth of the examples directory
 */
Generates the sidebar markup for each category.
Outputs to /{category}/sidebar.hmtml
@param {String} category The current category to generate
@param {String} examplesDir The absolute path of the examples directory
@param {Array} demoList A list of all demos
@param {Number} currDirLength Depth of the examples directory
Generates the sidebar markup for each category . Outputs to / { category } / sidebar . hmtml @param { String } category The current category to generate @param { String } examplesDir The absolute path of the examples directory @param { Array } demoList A list of all demos @param { Number } currDirLength Depth of the examples directory
function generateMarkup(category, examplesDir, demoList, currDirLength) {
  let categoryDemos = demoList.filter((demo) => {
    return demo.startsWith(category);
  });
  categoryDemos = categoryDemos.map((demo) => {
    return `${examplesDir}/${demo}`;
  });
  let numDemos = 0;
  categoryDemos.forEach((demo) => {
    let dirs = demo.split('/');
    for (let i = currDirLength; i < dirs.length; i++) {
      let path = dirs.slice(0, i + 1).join('/');
      let id = 'sidebar--' + path.replace(examplesDir + '/', '');
      id = id.replaceAll('/', '_');
      let level = i - currDirLength;
      if (level > 4) level = 4;
      let name;
      if (FS.existsSync(path + '/dir-config.json')) {
        let dirConfig = FS.readJsonSync(path + '/dir-config.json');
        name = dirConfig.name;
        if (level == 0 && !DOCUMENT.querySelector(`#${id}`)) {
          let orderedList = DOCUMENT.createElement('ol');
          let title = DOCUMENT.createElement('header');
          title.innerHTML = `<h2 id="hamburger-category">${name}</h2>`;
          CONTENT.setAttribute('id', id);
          CONTENT.append(title, orderedList);
        } else if (level > 0 && !DOCUMENT.querySelector(`#${id}`)) {
          let idToFind = id.split('_');
          idToFind.pop();
          idToFind = idToFind.join('_');
          let newList = DOCUMENT.querySelector(`#${idToFind} ol`);
          let listItem = DOCUMENT.createElement('li');
          let orderedList = DOCUMENT.createElement('ol');
          let title = DOCUMENT.createElement(`h${2 + level}`);
          listItem.setAttribute('id', id);
          title.innerHTML = name;
          listItem.append(title, orderedList);
          newList.append(listItem);
        }
      } else if (
        FS.existsSync(path + '/demo-config.json')
      ) {
        numDemos += 1;
        let demoConfig = FS.readJsonSync(path + '/demo-config.json');
        name = demoConfig.metadata.title;
        let idToFind = id.split('_');
        idToFind.pop();
        idToFind = idToFind.join('_');
        let newList = DOCUMENT.querySelector(`#${idToFind} ol`);
        if (!newList.classList.contains('demo-links')) {
          newList.setAttribute('start', numDemos);
        }
        newList.classList.add('demo-links');
        let listItem = DOCUMENT.createElement('li');
        let anchor = DOCUMENT.createElement('a');
        let demoPath = path.replace(examplesDir + '/', '');
        anchor.setAttribute('target', '_top');
        anchor.setAttribute(
          'href',
          `https://introweb.tech/examples/${demoPath}`
        );
        anchor.innerHTML = name;
        listItem.append(anchor);
        newList.append(listItem);
      }
    }
  });
  FS.writeFileSync(
    `${examplesDir}/${category}/sidebar.html`,
    PRETTIER.format(CONTENT.innerHTML, {
      filepath: `${examplesDir}/${category}/sidebar.html`,
    })
  );
  CONTENT.innerHTML = '';
}
function generateMarkup ( category , examplesDir , demoList , currDirLength ) { let categoryDemos = demoList . filter ( ( demo ) => { return demo . startsWith ( category ) ; } ) ; categoryDemos = categoryDemos . map ( ( demo ) => { return ` ${ examplesDir } ${ demo } ` ; } ) ; let numDemos = 0 ; categoryDemos . forEach ( ( demo ) => { let dirs = demo . split ( '/' ) ; for ( let i = currDirLength ; i < dirs . length ; i ++ ) { let path = dirs . slice ( 0 , i + 1 ) . join ( '/' ) ; let id = 'sidebar--' + path . replace ( examplesDir + '/' , '' ) ; id = id . replaceAll ( '/' , '_' ) ; let level = i - currDirLength ; if ( level > 4 ) level = 4 ; let name ; if ( FS . existsSync ( path + '/dir-config.json' ) ) { let dirConfig = FS . readJsonSync ( path + '/dir-config.json' ) ; name = dirConfig . name ; if ( level == 0 && ! DOCUMENT . querySelector ( ` ${ id } ` ) ) { let orderedList = DOCUMENT . createElement ( 'ol' ) ; let title = DOCUMENT . createElement ( 'header' ) ; title . innerHTML = ` ${ name } ` ; CONTENT . setAttribute ( 'id' , id ) ; CONTENT . append ( title , orderedList ) ; } else if ( level > 0 && ! DOCUMENT . querySelector ( ` ${ id } ` ) ) { let idToFind = id . split ( '_' ) ; idToFind . pop ( ) ; idToFind = idToFind . join ( '_' ) ; let newList = DOCUMENT . querySelector ( ` ${ idToFind } ` ) ; let listItem = DOCUMENT . createElement ( 'li' ) ; let orderedList = DOCUMENT . createElement ( 'ol' ) ; let title = DOCUMENT . createElement ( ` ${ 2 + level } ` ) ; listItem . setAttribute ( 'id' , id ) ; title . innerHTML = name ; listItem . append ( title , orderedList ) ; newList . append ( listItem ) ; } } else if ( FS . existsSync ( path + '/demo-config.json' ) ) { numDemos += 1 ; let demoConfig = FS . readJsonSync ( path + '/demo-config.json' ) ; name = demoConfig . metadata . title ; let idToFind = id . split ( '_' ) ; idToFind . pop ( ) ; idToFind = idToFind . join ( '_' ) ; let newList = DOCUMENT . querySelector ( ` ${ idToFind } ` ) ; if ( ! newList . classList . contains ( 'demo-links' ) ) { newList . setAttribute ( 'start' , numDemos ) ; } newList . classList . add ( 'demo-links' ) ; let listItem = DOCUMENT . createElement ( 'li' ) ; let anchor = DOCUMENT . createElement ( 'a' ) ; let demoPath = path . replace ( examplesDir + '/' , '' ) ; anchor . setAttribute ( 'target' , '_top' ) ; anchor . setAttribute ( 'href' , ` ${ demoPath } ` ) ; anchor . innerHTML = name ; listItem . append ( anchor ) ; newList . append ( listItem ) ; } } } ) ; FS . writeFileSync ( ` ${ examplesDir } ${ category } ` , PRETTIER . format ( CONTENT . innerHTML , { filepath : ` ${ examplesDir } ${ category } ` , } ) ) ; CONTENT . innerHTML = '' ; }
Generates the sidebar markup for each category.
Generates the sidebar markup for each category .
// It's a directory // It's a top level H2 // It's a lower H level // It's a demo