Search code examples
javascripthtmlcssapifile-manager

Default HTML File manager

So I noticed when you put the path of your folder in a browser you get a default file manager.

enter image description here

I wanted to ask how could I manipulate the default changes in the path? Not just only the file manager but also the paths of other files, so I could parse them through a .md parser.

I tried fetching the data of the API that looked like a lot of work and I think there is a easier way to do this, because if there is a default way it generates the file manager I can just modify that.

Solution

  • In the end I couldn't really change the design of the main file system so I just extracted the elements and appended it to the the main HTML file.

      fetch(`./Posts/`)
  .then((response) => response.text())
  .then((data) => {

    //Parse the data to html
    var parser = new DOMParser();
    var posts = parser.parseFromString(data, "text/html");

    // Get the files
    var files = posts.querySelector("ul");
    var li = files.querySelectorAll("li");
    var content = document.querySelector("main");

    //Seperate titles and push them in a array
    var list = [];
    for (var i = 0; i < li.length; i++) {
      var text = li[i].innerText;

      //split the innerText from ".md"
      var titles = text.split(".md");
      var title = titles[0];
      list.push(title);
      var name = li[i].getElementsByClassName("name");

      //change the innerHTML of the "name" span's
      name.item(0).innerHTML = title;
      content.append(li[i]);
      }
   });