vorg/gist:16c8c1a59a9144a98954aad9ea05e4fa

## gistfile1.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"
    />
    <title>All The Slides</title>
  </head>
  <body>
    <script>
      async function init() {
        const response = await fetch("files.txt");
        const filesStr = await response.text();
        const files = filesStr
          .trim()
          .split("\n")
          .map((file) => file.replace("./", ""));
        console.log(files);

        const groupByPresentation = {};

        for (let file of files) {
          const tokens = file.split("/");
          const folder = tokens[1];
          const image = tokens[2];
          if (!groupByPresentation[folder]) {
            groupByPresentation[folder] = [];
          }
          groupByPresentation[folder].push({
            file,
          });
        }
        console.log(groupByPresentation);

        const margin = 50;
        const columnWidth = 500;

        const numPresentations = Object.keys(groupByPresentation).length;

        document.body.className = "avenir";
        Object.assign(document.body.style, {
          width: `${numPresentations * columnWidth}px`,
        });

        function makeTitle(presentationName, presentationIndex) {
          const title = document.createElement("h3");
          title.innerText = presentationName;
          title.className = "absolute";
          Object.assign(title.style, {
            width: `${columnWidth}px`,
            left: `${margin + presentationIndex * columnWidth}px`,
            top: `${margin}px`,
          });
          return title;
        }

        function makeContainer(presentationIndex) {
          const container = document.createElement("div");
          container.className = "absolute xbg-red";
          Object.assign(container.style, {
            width: `${columnWidth}px`,
            left: `${margin + presentationIndex * columnWidth}px`,
            top: `${margin + 100}px`,
          });
          return container;
        }

        function makeSlide(file, presentationIndex, index) {
          const img = new Image();
          img.src = file;
          img.style.width = `${Math.floor((columnWidth - 9 - 40) / 3)}px`;
          img.className = "dib";

          const div = document.createElement("div");
          div.className = "fl f6";
          div.style.width = `${Math.floor((columnWidth - 9 - 40) / 3)}px`;
          Object.assign(div.style, {
            margin: "0 3px 3px 0",
          });
          div.appendChild(img);

          const span = document.createElement("span");
          span.innerText = "" + ("00" + (index + 1)).substr(-3);
          span.className = "dib relative bg-white pa1";
          Object.assign(span.style, {
            top: "-24px",
            fontSize: "70%",
          });
          // div.appendChild(span);
          return div;
        }

        Object.keys(groupByPresentation).forEach(
          (presentationName, presentationIndex) => {
            const title = makeTitle(presentationName, presentationIndex);
            document.body.appendChild(title);

            const container = makeContainer(presentationIndex);
            document.body.appendChild(container);

            groupByPresentation[presentationName]
              .sort((a, b) => {
                if (a.file > b.file) return 1;
                if (a.file < b.file) return -1;
                return 0;
              })
              .forEach(({ file }, index) => {
                const img = makeSlide(file, presentationIndex, index);
                container.appendChild(img);
              });
          }
        );
      }

      init();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link
	rel="stylesheet"
	href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"
	/>
	<title>All The Slides</title>
	</head>
	<body>
	<script>
	async function init() {
	const response = await fetch("files.txt");
	const filesStr = await response.text();
	const files = filesStr
	.trim()
	.split("\n")
	.map((file) => file.replace("./", ""));
	console.log(files);

	const groupByPresentation = {};

	for (let file of files) {
	const tokens = file.split("/");
	const folder = tokens[1];
	const image = tokens[2];
	if (!groupByPresentation[folder]) {
	groupByPresentation[folder] = [];
	}
	groupByPresentation[folder].push({
	file,
	});
	}
	console.log(groupByPresentation);

	const margin = 50;
	const columnWidth = 500;

	const numPresentations = Object.keys(groupByPresentation).length;

	document.body.className = "avenir";
	Object.assign(document.body.style, {
	width: `${numPresentations * columnWidth}px`,
	});

	function makeTitle(presentationName, presentationIndex) {
	const title = document.createElement("h3");
	title.innerText = presentationName;
	title.className = "absolute";
	Object.assign(title.style, {
	width: `${columnWidth}px`,
	left: `${margin + presentationIndex * columnWidth}px`,
	top: `${margin}px`,
	});
	return title;
	}

	function makeContainer(presentationIndex) {
	const container = document.createElement("div");
	container.className = "absolute xbg-red";
	Object.assign(container.style, {
	width: `${columnWidth}px`,
	left: `${margin + presentationIndex * columnWidth}px`,
	top: `${margin + 100}px`,
	});
	return container;
	}

	function makeSlide(file, presentationIndex, index) {
	const img = new Image();
	img.src = file;
	img.style.width = `${Math.floor((columnWidth - 9 - 40) / 3)}px`;
	img.className = "dib";

	const div = document.createElement("div");
	div.className = "fl f6";
	div.style.width = `${Math.floor((columnWidth - 9 - 40) / 3)}px`;
	Object.assign(div.style, {
	margin: "0 3px 3px 0",
	});
	div.appendChild(img);

	const span = document.createElement("span");
	span.innerText = "" + ("00" + (index + 1)).substr(-3);
	span.className = "dib relative bg-white pa1";
	Object.assign(span.style, {
	top: "-24px",
	fontSize: "70%",
	});
	// div.appendChild(span);
	return div;
	}

	Object.keys(groupByPresentation).forEach(
	(presentationName, presentationIndex) => {
	const title = makeTitle(presentationName, presentationIndex);
	document.body.appendChild(title);

	const container = makeContainer(presentationIndex);
	document.body.appendChild(container);

	groupByPresentation[presentationName]
	.sort((a, b) => {
	if (a.file > b.file) return 1;
	if (a.file < b.file) return -1;
	return 0;
	})
	.forEach(({ file }, index) => {
	const img = makeSlide(file, presentationIndex, index);
	container.appendChild(img);
	});
	}
	);
	}

	init();
	</script>
	</body>
	</html>