feat: nginx nice autoindex
This commit is contained in:
parent
60ac1df123
commit
feec2fcef2
SSH Key Fingerprint:
SHA256:3G83yKhBUWVABVX/vPWH88xnK4+ptMtHkZGCRXD4Mk8
48
srv/autoindex-script.js
Normal file
48
srv/autoindex-script.js
Normal file
@ -0,0 +1,48 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
function calculateSize(size) {
|
||||
var sufixes = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'EiB'];
|
||||
var q = 0;
|
||||
|
||||
while (size / 1024 > 1) {
|
||||
size = size / 1024;
|
||||
q++;
|
||||
}
|
||||
|
||||
return (Math.round(size * 100) / 100) + ' ' + sufixes[q];
|
||||
}
|
||||
|
||||
if (window.location.pathname == '/') {
|
||||
document.querySelector('.directory.go-up').style.display = 'none';
|
||||
}
|
||||
|
||||
var path = window.location.pathname.split('/');
|
||||
var nav = document.querySelector("nav#breadcrumbs ul");
|
||||
var pathSoFar = '';
|
||||
|
||||
for (var i = 1; i < path.length - 1; i++) {
|
||||
pathSoFar += '/' + decodeURI(path[i]);
|
||||
nav.innerHTML += '<li><a href="' + encodeURI(pathSoFar) + '">' + decodeURI(path[i]) + '</a></li>';
|
||||
}
|
||||
|
||||
var mtimes = document.querySelectorAll("table#contents td.mtime a");
|
||||
|
||||
for (var i = 0; i < mtimes.length; i++) {
|
||||
var mtime = mtimes[i].textContent;
|
||||
if (mtime) {
|
||||
var d = new Date(mtime);
|
||||
mtimes[i].textContent = d.toLocaleString(navigator.language);
|
||||
}
|
||||
}
|
||||
|
||||
var sizes = document.querySelectorAll("table#contents td.size a");
|
||||
|
||||
for (var i = 1; i < sizes.length; i++) {
|
||||
var size = sizes[i].textContent.slice(0, -2);
|
||||
if (size) {
|
||||
sizes[i].textContent = calculateSize(parseInt(size));
|
||||
}
|
||||
}
|
||||
|
||||
}, false);
|
||||
|
||||
191
srv/autoindex-style.css
Normal file
191
srv/autoindex-style.css
Normal file
@ -0,0 +1,191 @@
|
||||
/* soo much SHIT css */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
table#contents td a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 10px 30px 10px 30px;
|
||||
}
|
||||
|
||||
table#contents {
|
||||
width: 50%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-collapse: collapse;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
table#contents td {
|
||||
padding: 0px;
|
||||
word-wrap: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table#contents td.icon,
|
||||
table td.size,
|
||||
table td.mtime {
|
||||
width: 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table#contents td.icon a {
|
||||
padding-left: 0px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
table#contents td.name a {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
table#contents td.size a {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
table#contents td.mtime a {
|
||||
padding-right: 0px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
table#contents tr {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
table#contents tr:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
table#contents tr.separator td {
|
||||
padding: 10px 30px 10px 30px
|
||||
}
|
||||
|
||||
table#contents tr.separator td hr {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav#breadcrumbs {
|
||||
margin-bottom: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav#breadcrumbs ul {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
nav#breadcrumbs ul .icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
nav#breadcrumbs ul li:first-child a,
|
||||
table#contents tbody tr:first-child td:first-child a {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
nav#breadcrumbs ul:hover li:first-child a {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
nav#breadcrumbs ul li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
nav#breadcrumbs ul li a {
|
||||
color: var(--text);
|
||||
display: block;
|
||||
background: var(--background-lighter);
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 10px 0 5px;
|
||||
text-align: center;
|
||||
margin-right: 23px;
|
||||
}
|
||||
|
||||
nav#breadcrumbs ul li:first-child a {
|
||||
padding-left: 15px;
|
||||
-moz-border-radius: 4px 0 0 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
nav#breadcrumbs ul li:first-child a:before {
|
||||
border: none;
|
||||
}
|
||||
|
||||
nav#breadcrumbs ul li:last-child a {
|
||||
padding-right: 15px;
|
||||
-moz-border-radius: 0 4px 4px 0;
|
||||
-webkit-border-radius: 0;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
nav#breadcrumbs ul li:last-child a:after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
nav#breadcrumbs ul li a:before,
|
||||
nav#breadcrumbs ul li a:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border: 0 solid var(--background-lighter);
|
||||
border-width: 20px 10px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
nav#breadcrumbs ul li a:before {
|
||||
left: -20px;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
nav#breadcrumbs ul li a:after {
|
||||
left: 100%;
|
||||
border-color: transparent;
|
||||
border-left-color: var(--background-lighter);
|
||||
}
|
||||
|
||||
nav#breadcrumbs ul li a:hover {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
nav#breadcrumbs ul li a:hover:before {
|
||||
border-color: var(--primary);
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
nav#breadcrumbs ul li a:hover:after {
|
||||
border-left-color: var(--primary);
|
||||
}
|
||||
|
||||
nav#breadcrumbs ul li a:active {
|
||||
background-color: var(--accent);
|
||||
}
|
||||
|
||||
nav#breadcrumbs ul li a:active:before {
|
||||
border-color: var(--accent);
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
nav#breadcrumbs ul li a:active:after {
|
||||
border-left-color: var(--accent);
|
||||
}
|
||||
70
srv/autoindex.xslt
Normal file
70
srv/autoindex.xslt
Normal file
@ -0,0 +1,70 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
|
||||
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:D="DAV:" exclude-result-prefixes="D">
|
||||
<xsl:output method="html" encoding="UTF-8" />
|
||||
|
||||
<xsl:template match="D:multistatus">
|
||||
<xsl:text disable-output-escaping="yes"><?xml version="1.0" encoding="utf-8" ?></xsl:text>
|
||||
<D:multistatus xmlns:D="DAV:">
|
||||
<xsl:copy-of select="*"/>
|
||||
</D:multistatus>
|
||||
</xsl:template>
|
||||
|
||||
<xsl:template match="/list">
|
||||
<xsl:text disable-output-escaping="yes"><!DOCTYPE html></xsl:text>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="/styles/bundles/complete.css" />
|
||||
<link rel="stylesheet" href="/srv/autoindex-style.css" />
|
||||
<script src="https://kit.fontawesome.com/55eb9c16a8.js"></script>
|
||||
<script src="/srv/autoindex-script.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<nav id="breadcrumbs"><ul><li><a href="/">/</a></li></ul></nav>
|
||||
<table id="contents">
|
||||
<tbody>
|
||||
<tr class="directory go-up">
|
||||
<td class="icon"><a href="../"><b>←</b></a></td>
|
||||
<td class="name"><a href="../">..</a></td>
|
||||
<td class="size"><a href="../"></a></td>
|
||||
<td class="mtime"><a href="../"></a></td>
|
||||
</tr>
|
||||
|
||||
<xsl:if test="count(directory) != 0">
|
||||
<tr class="separator directories">
|
||||
<td colspan="4"><hr/></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
|
||||
<xsl:for-each select="directory">
|
||||
<tr class="directory">
|
||||
<td class="icon"><a href="{.}/"><i class="fa fa-folder"></i></a></td>
|
||||
<td class="name"><a href="{.}/"><xsl:value-of select="." /></a></td>
|
||||
<td class="size"><a href="{.}/"></a></td>
|
||||
<td class="mtime"><a href="{.}/"><xsl:value-of select="./@mtime" /></a></td>
|
||||
</tr>
|
||||
</xsl:for-each>
|
||||
|
||||
<xsl:if test="count(file) != 0">
|
||||
<tr class="separator files">
|
||||
<td colspan="4"><hr/></td>
|
||||
</tr>
|
||||
</xsl:if>
|
||||
|
||||
<xsl:for-each select="file">
|
||||
<tr class="file">
|
||||
<td class="icon"><a href="{.}"><i class="fa fa-file"></i></a></td>
|
||||
<td class="name"><a href="{.}"><xsl:value-of select="." /></a></td>
|
||||
<td class="size"><a href="{.}"><xsl:value-of select="./@size" /> B</a></td>
|
||||
<td class="mtime"><a href="{.}"><xsl:value-of select="./@mtime" /></a></td>
|
||||
</tr>
|
||||
</xsl:for-each>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</xsl:template>
|
||||
</xsl:stylesheet>
|
||||
Loading…
x
Reference in New Issue
Block a user