partial.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="assets/styles.css" />

    <title>Meme explorer</title>
  </head>

  <body>
    <div class="main">
      <div class="sidebar outline" id="categories"></div>
      <div class="content">
        <div class="search-container">
          <input
            id="searchInput"
            type="text"
            placeholder="Search in this category"
          />
          <div id="searchSuggestions"></div>
        </div>
        <div class="memes" id="content"></div>
      </div>
    </div>
  </body>
</html>
<script>
  const categories = memesjson;

  const contentContainer = document.getElementById("content");
  const categoriesContainer = document.getElementById("categories");

  // Iterates over the keys
  for (const cat in categories) {
    // <div class="category">
    //   <img src="assets/icons/folder.svg" class="icon" />
    //   eng
    // </div>

    const content = categories[cat];

    // Display the category in the sidebar
    const categoryIcon = document.createElement("img");

    categoryIcon.src = "assets/icons/folder.svg";
    categoryIcon.classList.add("icon");

    const categoryElement = document.createElement("div");
    categoryElement.classList.add("category");

    categoryElement.appendChild(categoryIcon);
    categoryElement.append(cat);

    categoriesContainer.appendChild(categoryElement);

    // Display the memes when the category is clicked
    categoryElement.addEventListener("click", (ts, ev) => {
      console.log("Displaying", cat);
      contentContainer.innerHTML = "";

      for (const category of categoriesContainer.children) {
        category.classList.remove("selected");
      }

      categoryElement.classList.add("selected");

      for (const meme of content) {
        const split = meme.name.split(".");
        const extension = split.pop();
        const extensionless = split.join(".");

        const dimExtension = document.createElement("span");
        dimExtension.classList.add("dim-text");
        dimExtension.append("." + extension);

        const memeIcon = document.createElement("img");

        memeIcon.src = meme.icon;
        memeIcon.classList.add("icon");

        const memeElement = document.createElement("a");
        memeElement.href = meme.path;
        memeElement.target = "_blank";

        memeElement.appendChild(memeIcon);
        memeElement.append(extensionless);
        memeElement.appendChild(dimExtension);

        contentContainer.appendChild(memeElement);
      }
    });
  }
</script>
<script>
  let memes = [];

  for (const cmems of Object.values(categories)) {
    memes = memes.concat(cmems);
  }

  const searchInput = document.getElementById("searchInput");
  const suggestions = document.getElementById("searchSuggestions");

  function hideSuggestions() {
    suggestions.innerHTML = "";
    suggestions.style.display = "none";
  }

  searchInput.addEventListener("input", function () {
    const input = this.value.toLowerCase();

    suggestions.innerHTML = "";

    if (input.length > 0) {
      const scoredMemes = memes
        .map((m) => {
          let score = 0;

          if (m.name.startsWith(input)) score += 2;
          if (m.name.includes(input)) score += 1;
          if (m.path.startsWith(input)) score += 1;

          return { ...m, score };
        })
        .filter((m) => m.score > 0)
        .sort((a, b) => b - a);

      if (scoredMemes.length > 0) {
        scoredMemes.forEach((match) => {
          const suggestionElement = document.createElement("a");
          suggestionElement.href = match.path;
          suggestionElement.target = "_blank";
          suggestionElement.innerHTML = `${match.path}<span class="open">↗</span>`;

          suggestions.appendChild(suggestionElement);
        });

        suggestions.style.display = "block";
      }
    } else {
      hideSuggestions();
      searchInput.blur();
    }
  });

  document.addEventListener("click", function (e) {
    if (e.target !== searchInput && e.target !== suggestions) {
      hideSuggestions();
    }
  });

  document.addEventListener("keydown", function (e) {
    if (document.activeElement != searchInput) searchInput.focus();
  });
</script>
<script
  defer
  src="https://cloud.umami.is/script.js"
  data-website-id="5f22289a-d955-46ef-86e2-67ce2d393f14"
></script>