Skip to content

Instantly share code, notes, and snippets.

@jeffguorg

jeffguorg/fancy-index.xslt

Last active June 14, 2022 02:04
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jeffguorg/dd2af2cb9782f44ac46bbc135b8371e6 to your computer and use it in GitHub Desktop.
Save jeffguorg/dd2af2cb9782f44ac46bbc135b8371e6 to your computer and use it in GitHub Desktop.
Download ZIP
nginx fancy index
Raw
fancy-index.xslt
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8" />
<xsl:template match="/">
<xsl:text disable-output-escaping="yes">&lt;!DOCTYPE html&gt;</xsl:text>
<html>
<head>
<title>superbindex</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />
<meta name="version" content="1.1.1" />
<style>
a {
text-decoration: none;
}
.v-image div:nth-child(2) {
filter: blur(5px);
}
.filename {
mix-blend-mode: difference;
color:white;
font-size: x-small;
line-height: 18px;
}
.col:nth-child(5n+1) {
margin-left: 8.3333333333%;
}
.col:nth-child(5n) {
margin-right: 8.3333333333%;
}
</style>
</head>
<body>
<div id="app">
<v-app>
<v-content>
<v-container>
<xsl:attribute name="fluid" />
<v-row align="center" justify="center">
<v-col class="col-2" v-for="item in items">
<a>
<xsl:attribute namespace="v-bind" name="v-bind:href">item.name</xsl:attribute>
<v-card class="elevation-8 md2">
<v-img v-if="isPhoto(item.name)" class="white--text" height="150px">
<xsl:attribute namespace="v-bind" name="v-bind:src">item.name</xsl:attribute>
<v-card-title class="filename align-end fill-height">{{ item.name }}</v-card-title>
</v-img>
<v-toolbar color="black" height="150px">
<xsl:attribute name="v-else" />
<xsl:attribute name="dark" />
<xsl:attribute name="flat" />
<v-card-title class="filename align-end fill-height">
{{ item.name }}
</v-card-title>
</v-toolbar>
<v-card-text>
{{ item.mtime }}
</v-card-text>
</v-card>
</a>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</div>
<script id="data" type="application/json">
<xsl:text>[</xsl:text>
<xsl:for-each select="list/*">
<xsl:if test="position() != 1">
<xsl:text>, </xsl:text>
</xsl:if>
<xsl:text>{</xsl:text>
<xsl:text>"name": "</xsl:text>
<xsl:value-of select="." />
<xsl:text>", "type": "</xsl:text>
<xsl:value-of select="name(.)" />
<xsl:text>", "mtime": "</xsl:text>
<xsl:value-of select="./@mtime"/>
<xsl:text>"</xsl:text>
<xsl:if test='name(.) = "file"'>
<xsl:text>, "size": </xsl:text>
<xsl:value-of select="./@size"/>
</xsl:if>
<xsl:text>}</xsl:text>
</xsl:for-each>
<xsl:text>]</xsl:text>
</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
var app = new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
items: [
],
},
created() {
this.items.push(...JSON.parse(document.getElementById('data').innerHTML).map((item)=>{
return item;
}));
},
methods: {
isPhoto(filename) {
return /(jpg|png|bmp|jpeg|gif)$/.test(filename);
}
}
})
</script>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Raw
site.conf
location / {
root /data/;
autoindex on;
autoindex_format xml;
xslt_stylesheet /etc/nginx/fancy-index.xslt;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment