Skip to content

Instantly share code, notes, and snippets.

@ZvonimirSun

ZvonimirSun/autoindex.html

Created March 31, 2021 03:20
Show Gist options
  • Save ZvonimirSun/b87a355ad8995c020e821c79b479c2f3 to your computer and use it in GitHub Desktop.
Save ZvonimirSun/b87a355ad8995c020e821c79b479c2f3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ZvonimirSun created this gist Mar 31, 2021.
    596 changes: 596 additions & 0 deletions autoindex.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,596 @@
    <script>
    let website_title = "ISZY IMG HOST";
    let datetime_format = "%Y/%m/%d %H:%M";
    let show_readme_md = true;
    let max_name_length = 50;
    let table_max_height = "240px";

    let bodylines = [];
    let pageSize = 10;
    let pageIndex = 1;
    let totalPage = 0;

    let titlehtml, tBody, tFooter;

    !(function () {
    let dom = {
    element: null,
    get: function (o) {
    let obj = Object.create(this);
    obj.element = typeof o == "object" ? o : document.createElement(o);
    return obj;
    },
    add: function (o) {
    let obj = dom.get(o);
    this.element.appendChild(obj.element);
    return obj;
    },
    text: function (t) {
    this.element.appendChild(document.createTextNode(t));
    return this;
    },
    html: function (s) {
    this.element.innerHTML = s;
    return this;
    },
    attr: function (k, v) {
    this.element.setAttribute(k, v);
    return this;
    },
    css: function (k, v) {
    this.element.style[k] = v;
    return this;
    },
    };

    head = dom.get(document.head);
    head.add("meta").attr("charset", "utf-8");
    head
    .add("meta")
    .attr("name", "viewport")
    .attr("content", "width=device-width,initial-scale=1");

    if (!document.title) {
    document.write(
    [
    '<div class="container">',
    "<h3>nginx.conf</h3>",
    "<textarea rows=8 cols=50>",
    "# download autoindex.html to /wwwroot/",
    "location ~ ^(.*)/$ {",
    " charset utf-8;",
    " autoindex on;",
    " autoindex_localtime on;",
    " autoindex_exact_size off;",
    " add_after_body /autoindex.html;",
    "}",
    "</textarea>",
    "</div>",
    ].join("\n")
    );
    return;
    }

    bodylines = document.getElementsByTagName("pre")[0].innerHTML.split("\n");
    bodylines = bodylines.slice(1, bodylines.length - 1);
    document.body.innerHTML = "";

    titlehtml = document.title
    .replace(/\/$/, "")
    .split("/")
    .slice(1)
    .reduce(function (acc, v, i, a) {
    return (
    acc + '<a href="/' + a.slice(0, i + 1).join("/") + '/">' + v + "</a>/"
    );
    }, "Index of /");
    if (website_title) {
    document.title = website_title + " - " + document.title;
    }
    head
    .add("meta")
    .attr("name", "description")
    .attr("content", document.title);

    div = dom.get("div").attr("class", "container");
    div.add("h1").html(titlehtml);

    let container = div.add("div").attr("class", "table-container");
    let tHead = container
    .add("div")
    .attr("class", "table-header")
    .css("overflow", "hidden")
    .add("table")
    .css("tableLayout", "fixed")
    .add("thead")
    .attr("class", "table-thead")
    .add("tr");

    tBody = container
    .add("div")
    .attr("class", "table-body")
    .css("overflowY", "auto")
    // .css("maxHeight", table_max_height)
    .add("table")
    .css("tableLayout", "fixed")
    .add("tbody")
    .attr("class", "table-tbody");

    names = ["Name", "Date", "Size"];

    for (i = 0; i < names.length; i++) {
    tHead
    .add("th")
    .attr("class", "table-cell")
    .add("a")
    .attr("href", "javascript:sortby(" + i + ")")
    .attr("class", "octicon arrow-up")
    .text(names[i]);
    }

    let tPagination, tLastPage, tPage, tNextPage;
    if (bodylines.length > pageSize) {
    totalPage = Math.ceil(bodylines.length / pageSize);
    tPagination = container
    .add("div")
    .attr("class", "table-page")
    .add("ul")
    .attr("class", "pagination");
    tLastPage = tPagination
    .add("li")
    .attr("id", "last-page")
    .attr("class", "disabled")
    .add("span")
    .text("❮");
    tPage = tPagination
    .add("li")
    .attr("class", "active")
    .add("span")
    .text(pageIndex);
    tNextPage = tPagination
    .add("li")
    .attr("id", "next-page")
    .add("span")
    .text("❯");
    }

    let readme = "";
    for (let i in bodylines) {
    if (
    (m = /\s*<a href="(.+?)">(.+?)<\/a>\s+(\S+)\s+(\S+)\s+(\S+)\s*/.exec(
    bodylines[i]
    ))
    ) {
    filename = m[1];
    if (filename.toLowerCase() === "readme.md") {
    readme = filename;
    }
    }
    }

    document.body.appendChild(div.element);

    if (tPagination) {
    document.getElementById("last-page").onclick = function (e) {
    if (e.currentTarget.classList.contains("disabled")) {
    return;
    }
    pageIndex--;
    tPage.html(pageIndex);
    changePage();
    };
    document.getElementById("next-page").onclick = function (e) {
    if (e.currentTarget.classList.contains("disabled")) {
    return;
    }
    pageIndex++;
    tPage.html(pageIndex);
    changePage();
    };
    }

    insertByPage();

    if (show_readme_md && readme !== "") {
    tFooter = container.add("div").attr("class", "table-footer");
    tFooter.add("div").attr("class", "octicon octicon-book").text(readme);
    tFooter.add("div").attr("id", "readme").attr("class", "markdown-body");

    xhr = new XMLHttpRequest();
    xhr.open("GET", location.pathname.replace(/[^/]+$/, "") + readme, true);
    xhr.onload = function () {
    if (xhr.status < 200 && xhr.status >= 400) return;
    wait = function (name, callback) {
    let interval = 10; // ms
    window.setTimeout(function () {
    if (window[name]) {
    callback(window[name]);
    } else {
    window.setTimeout(arguments.callee, interval);
    }
    }, interval);
    };
    wait("marked", function () {
    document.getElementById("readme").innerHTML = marked(
    xhr.responseText
    );
    });
    };
    xhr.send();

    div
    .add("script")
    .attr(
    "src",
    "https://cdn.jsdelivr.net/npm/[email protected]/lib/marked.min.js"
    );
    div
    .add("link")
    .attr("rel", "stylesheet")
    .attr(
    "href",
    "https://cdn.jsdelivr.net/npm/[email protected]/github-markdown.min.css"
    );
    }
    })();

    function insertByPage() {
    tBody.html("");
    if (pageIndex === 1 && titlehtml !== "Index of /") {
    insert("../", "", "-");
    }
    tmp = bodylines.slice((pageIndex - 1) * pageSize, pageIndex * pageSize);
    for (let i in tmp) {
    if (getContent(tmp[i])) {
    filename = getContent(tmp[i], 0);
    datetime = getContent(tmp[i], 1);
    size = getContent(tmp[i], 2);
    insert(filename, datetime, size);
    switch (filename.toLowerCase()) {
    case "readme.md":
    readme = filename;
    break;
    case "footer.js":
    footer = filename;
    break;
    }
    }
    }
    }

    function insert(filename, datetime, size) {
    if (/\/$/.test(filename)) {
    css = "file-directory";
    size = "";
    } else if (/\.(zip|7z|bz2|gz|tar|tgz|tbz2|xz|cab)$/.test(filename)) {
    css = "file-zip";
    } else if (
    /\.(py|js|php|pl|rb|sh|bash|lua|sql|go|rs|java|c|h|cpp|cxx|hpp)$/.test(
    filename
    )
    ) {
    css = "file-code";
    } else if (/\.(jpg|png|bmp|gif|ico|webp)$/.test(filename)) {
    css = "file-media";
    } else if (/\.(flv|mp4|mkv|avi|mkv|vp9)$/.test(filename)) {
    css = "device-camera-video";
    } else {
    css = "file";
    }

    displayname = decodeURIComponent(filename.replace(/\/$/, ""));
    if (displayname.length > max_name_length)
    displayname = displayname.substring(0, max_name_length - 3) + "..>";

    if (!isNaN(Date.parse(datetime))) {
    d = new Date(datetime);
    pad = function (s) {
    return s < 10 ? "0" + s : s;
    };
    mon = function (m) {
    return [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec",
    ][m];
    };
    datetime = datetime_format
    .replace("%Y", d.getFullYear())
    .replace("%m", pad(d.getMonth() + 1))
    .replace("%d", pad(d.getDate()))
    .replace("%H", pad(d.getHours()))
    .replace("%M", pad(d.getMinutes()))
    .replace("%S", pad(d.getSeconds()))
    .replace("%b", mon(d.getMonth()));
    }

    tr = tBody.add("tr").attr("class", "table-row");
    tr.add("td")
    .add("a")
    .attr("class", "octicon " + css)
    .attr("href", filename)
    // .attr("target", "_blank")
    .text(displayname);
    tr.add("td").text(datetime);
    tr.add("td").text(size);
    }

    function sortby(index) {
    rows = document.getElementsByClassName("table-thead")[0].rows;
    link = rows[0].getElementsByTagName("a")[index];
    arrow = link.className == "octicon arrow-down" ? 1 : -1;
    link.className = "octicon arrow-" + (arrow == 1 ? "up" : "down");
    bodylines = [].slice
    .call(bodylines)
    .map(function (e, i) {
    type = /\/$/.test(getContent(e, 0)) ? 0 : 1;
    text = getContent(e, index);
    if (index === 0) {
    text = decodeURIComponent(text.replace(/\/$/, ""));
    if (text.length > max_name_length)
    text = text.substring(0, max_name_length - 3) + "..>";
    value = text;
    } else if (index === 1) {
    value = new Date(text).getTime();
    } else if (index === 2) {
    m = { G: 1024 * 1024 * 1024, M: 1024 * 1024, K: 1024 };
    value = parseInt(text || 0) * (m[text[text.search(/[KMG]B?$/)]] || 1);
    }
    return { type: type, value: value, index: i, e: e };
    })
    .sort(function (a, b) {
    if (a.type != b.type) return a.type - b.type;
    if (a.value != b.value) return a.value < b.value ? -arrow : arrow;
    return a.index < b.index ? -arrow : arrow;
    })
    .map(function (e) {
    return e.e;
    });
    insertByPage();
    }

    function getContent(content, index) {
    m = /\s*<a href="(.+?)">(.+?)<\/a>\s+(\S+)\s+(\S+)\s+(\S+)\s*/.exec(
    content
    );
    if (index === undefined || index === null) {
    return m;
    }
    if (m) {
    if (index === 0) {
    return m[1];
    }
    if (index === 1) {
    return m[3] + " " + m[4];
    }
    if (index === 2) {
    return m[5];
    }
    }
    return null;
    }

    function changePage() {
    if (pageIndex === 1) {
    document.getElementById("last-page").classList.add("disabled");
    } else {
    document.getElementById("last-page").classList.remove("disabled");
    }
    if (pageIndex >= totalPage) {
    document.getElementById("next-page").classList.add("disabled");
    } else {
    document.getElementById("next-page").classList.remove("disabled");
    }
    insertByPage();
    }
    </script>
    <style>
    body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }
    .container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    }
    @media (min-width: 768px) {
    .container {
    max-width: 750px;
    }
    }
    @media (min-width: 992px) {
    .container {
    max-width: 970px;
    }
    }
    @media (min-width: 1200px) {
    .container {
    max-width: 1170px;
    }
    }

    h1 {
    margin-top: 8px;
    margin-bottom: 20px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 30px;
    font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    line-height: 38px;
    }

    .table-container {
    margin-bottom: 16px;
    color: rgba(0, 0, 0, 0.85);
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum";
    position: relative;
    font-size: 14px;
    background: #fff;
    border-radius: 2px;
    border: 1px solid #f0f0f0;
    border-right: 0;
    border-bottom: 0;
    }

    thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    }

    tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
    }

    .table-container table {
    width: 100%;
    text-align: left;
    border-radius: 2px 2px 0 0;
    border-collapse: separate;
    border-spacing: 0;
    }

    .table-container,
    .table-container table > thead > tr:first-child th:first-child {
    border-top-left-radius: 2px;
    }

    .table-thead > tr > th {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    text-align: left;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.3s ease;
    }

    .table-tbody > tr > td,
    .table-thead > tr > th {
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.3s;
    border-right: 1px solid #f0f0f0;
    }

    .table-thead > tr > th,
    .table-tbody > tr > td {
    position: relative;
    padding: 16px;
    overflow-wrap: break-word;
    }

    .table-footer {
    border: 1px solid #f0f0f0;
    border-top: 0;
    border-radius: 0 0 2px 2px;
    padding: 16px;
    color: rgba(0, 0, 0, 0.85);
    background: #fafafa;
    }

    ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
    }

    ul.pagination li {
    display: inline;
    }

    ul.pagination li span {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color 0.3s;
    font-size: 18px;
    border-radius: 5px;
    }

    ul.pagination li.disabled span {
    color: #999999;
    }

    ul.pagination li:not(.active):not(.disabled) span {
    cursor: pointer;
    }

    ul.pagination li:not(.active):not(.disabled) span:hover {
    background-color: #ddd;
    color: #16b0f6;
    }

    a {
    color: #337ab7;
    text-decoration: none;
    }
    a:hover,
    a:focus {
    color: #2a6496;
    text-decoration: underline;
    }

    .markdown-body {
    margin-top: 8px;
    /* float: left; */
    /* font-family: "ubuntu", "Tahoma", "Microsoft YaHei", Arial, Serif; */
    }
    /* octicons */
    .octicon {
    background-position: center left;
    background-repeat: no-repeat;
    padding-left: 16px;
    }
    .file {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16'%3E%3Cpath d='M6 5L2 5 2 4 6 4 6 5 6 5ZM2 8L9 8 9 7 2 7 2 8 2 8ZM2 10L9 10 9 9 2 9 2 10 2 10ZM2 12L9 12 9 11 2 11 2 12 2 12ZM12 4.5L12 14C12 14.6 11.6 15 11 15L1 15C0.5 15 0 14.6 0 14L0 2C0 1.5 0.5 1 1 1L8.5 1 12 4.5 12 4.5ZM11 5L8 2 1 2 1 14 11 14 11 5 11 5Z' fill='%237D94AE'/%3E%3C/svg%3E");
    }
    .file-directory {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 14 16'%3E%3Cpath d='M13 4L7 4 7 3C7 2.3 6.7 2 6 2L1 2C0.5 2 0 2.5 0 3L0 13C0 13.6 0.5 14 1 14L13 14C13.6 14 14 13.6 14 13L14 5C14 4.5 13.6 4 13 4L13 4ZM6 4L1 4 1 3 6 3 6 4 6 4Z' fill='%237D94AE'/%3E%3C/svg%3E");
    }
    .file-zip {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16'%3E%3Cpath d='M8.5 1L1 1C0.4 1 0 1.4 0 2L0 14C0 14.6 0.4 15 1 15L11 15C11.6 15 12 14.6 12 14L12 4.5 8.5 1ZM11 14L1 14 1 2 4 2 4 3 5 3 5 2 8 2 11 5 11 14 11 14ZM5 4L5 3 6 3 6 4 5 4 5 4ZM4 4L5 4 5 5 4 5 4 4 4 4ZM5 6L5 5 6 5 6 6 5 6 5 6ZM4 6L5 6 5 7 4 7 4 6 4 6ZM5 8L5 7 6 7 6 8 5 8 5 8ZM4 9.3C3.4 9.6 3 10.3 3 11L3 12 7 12 7 11C7 9.9 6.1 9 5 9L5 8 4 8 4 9.3 4 9.3ZM6 10L6 11 4 11 4 10 6 10 6 10Z' fill='%237D94AE'/%3E%3C/svg%3E");
    }
    .file-code {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16'%3E%3Cpath d='M8.5,1 L1,1 C0.45,1 0,1.45 0,2 L0,14 C0,14.55 0.45,15 1,15 L11,15 C11.55,15 12,14.55 12,14 L12,4.5 L8.5,1 L8.5,1 Z M11,14 L1,14 L1,2 L8,2 L11,5 L11,14 L11,14 Z M5,6.98 L3.5,8.5 L5,10 L4.5,11 L2,8.5 L4.5,6 L5,6.98 L5,6.98 Z M7.5,6 L10,8.5 L7.5,11 L7,10.02 L8.5,8.5 L7,7 L7.5,6 L7.5,6 Z' fill='%237D94AE' /%3E%3C/svg%3E");
    }
    .file-media {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16'%3E%3Cpath d='M6 5L8 5 8 7 6 7 6 5 6 5ZM12 4.5L12 14C12 14.6 11.6 15 11 15L1 15C0.5 15 0 14.6 0 14L0 2C0 1.5 0.5 1 1 1L8.5 1 12 4.5 12 4.5ZM11 5L8 2 1 2 1 13 4 8 6 12 8 10 11 13 11 5 11 5Z' fill='%237D94AE'/%3E%3C/svg%3E");
    }
    .device-camera-video {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M15.2,2.09 L10,5.72 L10,3 C10,2.45 9.55,2 9,2 L1,2 C0.45,2 0,2.45 0,3 L0,12 C0,12.55 0.45,13 1,13 L9,13 C9.55,13 10,12.55 10,12 L10,9.28 L15.2,12.91 C15.53,13.14 16,12.91 16,12.5 L16,2.5 C16,2.09 15.53,1.86 15.2,2.09 L15.2,2.09 Z' fill='%237D94AE' /%3E%3C/svg%3E");
    }
    .octicon-book {
    padding-left: 20px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3,5 L7,5 L7,6 L3,6 L3,5 L3,5 Z M3,8 L7,8 L7,7 L3,7 L3,8 L3,8 Z M3,10 L7,10 L7,9 L3,9 L3,10 L3,10 Z M14,5 L10,5 L10,6 L14,6 L14,5 L14,5 Z M14,7 L10,7 L10,8 L14,8 L14,7 L14,7 Z M14,9 L10,9 L10,10 L14,10 L14,9 L14,9 Z M16,3 L16,12 C16,12.55 15.55,13 15,13 L9.5,13 L8.5,14 L7.5,13 L2,13 C1.45,13 1,12.55 1,12 L1,3 C1,2.45 1.45,2 2,2 L7.5,2 L8.5,3 L9.5,2 L15,2 C15.55,2 16,2.45 16,3 L16,3 Z M8,3.5 L7.5,3 L2,3 L2,12 L8,12 L8,3.5 L8,3.5 Z M15,3 L9.5,3 L9,3.5 L9,12 L15,12 L15,3 L15,3 Z' /%3E%3C/svg%3E");
    }
    .arrow-down {
    font-weight: bold;
    text-decoration: none !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpolygon id='Shape' points='7 7 7 3 3 3 3 7 0 7 5 13 10 7'%3E%3C/polygon%3E%3C/svg%3E");
    }
    .arrow-up {
    font-weight: bold;
    text-decoration: none !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpolygon id='Shape' points='5 3 0 9 3 9 3 13 7 13 7 9 10 9'%3E%3C/polygon%3E%3C/svg%3E");
    }
    </style>