Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A good looking replacement for Apache DirectoryIndex
<!doctype html>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Folder Listing -->
<!-- ============== -->
<!-- A good looking replacement for "DirectoryIndex": -->
<!-- Rename this file to "index.php" and copy it -->
<!-- into a web server directory to enable -->
<!-- browsing on that directory. -->
<!-- Requirement: -->
<!-- Apache HTTP Server Project with php7_module -->
<!-- enabled (see /private/etc/apache2/httpd.conf) -->
<!-- Example page: -->
<!-- https://centerkey.com/files -->
<!-- WTFPL -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - -->
<html lang=en>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name=apple-mobile-web-app-title content="<?=basename(__DIR__)?>">
<title>Folder: <?=basename(__DIR__)?></title>
<link rel=icon href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13/svgs/solid/folder.svg>
<link rel=apple-touch-icon href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13/svgs/solid/folder.svg>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13/css/all.min.css>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/dna.js@1.6/dist/dna.css>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/web-ignition@1.2/dist/reset.min.css>
<style>
body { margin: 0px 20px; }
body >main { min-height: auto; }
body >main h1 { color: cadetblue; }
body >main a { border-color: cadetblue; }
body >main a { outline-color: white; } /* workaround for ghost line on hover in safari */
body >main a:hover { background-color: cadetblue; outline-color: cadetblue; }
body >main ul.simple-text { margin: 0px 0px 30px 15px; }
body >main ul.simple-text li { display: flex; align-items: center; margin-bottom: 10px; }
body >main ul.simple-text li i.font-icon { width: 1.8em; text-align: center; }
body >main p a { margin-right: 8px; }
body >main ul.simple-text li i.font-icon[data-icon=folder] { color: darkgoldenrod; }
body >main ul.simple-text li i.font-icon[data-icon=file] { color: darkslateblue; }
@media (max-width: 667px) { /* selects iPhone 6/6s/7/8/SE(2020) landscape and anything narrower */
body { margin: 0px; }
body >main h1 { font-size: 1.7em; }
body >main ul.simple-text { margin-left: 0px; }
}
</style>
<?php
function showFile($file) {
$extension = pathinfo($file, PATHINFO_EXTENSION);
return !is_dir($file) && $file[0] !== "." && $extension !== 'php' && $file !== 'error_log';
}
function toHtml($file) {
$icon = is_dir($file) ? "folder" : "file";
return "<li><a href=$file><i data-icon=$icon></i></a> <a href=$file>$file</a></li>";
}
?>
</head>
<body>
<main>
<h1>Folder Listing</h1>
<h2></h2>
<ul class=simple-text>
<li><a href=..><i data-icon=arrow-alt-circle-up></i></a> <a href=..>Parent folder</a></li>
<?=implode(PHP_EOL, array_map("toHtml", glob("*", GLOB_ONLYDIR)))?>
<?=implode(PHP_EOL, array_map("toHtml", array_filter(glob("*"), "showFile")))?>
</ul>
<p>
<a href=# class=home-link><i data-icon=home></i></a>
<a href=https://gist.github.com/dpilafian/930e1677d0c08eed3c39f04d32d7bf19><i data-brand=github-alt></i></a>
</p>
</main>
<script src=https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/dna.js@1.6/dist/dna.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/web-ignition@1.2/dist/library.min.js></script>
<script>
$('.home-link').attr({ href: window.location.origin });
$('main >h2').text(window.location.origin + window.location.pathname);
</script>
</body>
</html>
#!/bin/bash
##################
# Folder Listing #
# WTFPL #
##################
# To make this file runnable:
# $ chmod +x *.sh.command
banner="Folder Listing"
projectHome=$(cd $(dirname $0); pwd)
displayIntro() {
cd $projectHome
echo
echo $banner
echo $(echo $banner | sed s/./=/g)
pwd
echo
}
publishWebFiles() {
cd $projectHome
publishWebRoot=$(grep ^DocumentRoot /private/etc/apache2/httpd.conf | awk -F'"' '{ print $2 }')
publishSite=$publishWebRoot/centerkey.com
publishFolder=$publishSite/files
publish() {
echo "Publishing:"
mkdir -p $publishFolder
cp -v *.php $publishFolder/index.php
echo
}
test -w $publishSite && publish
}
launchBrowser() {
cd $projectHome
url=https://centerkey.com/files
test -w $publishSite && url=http://localhost/centerkey.com/files
echo "Opening:"
echo $url
sleep 2
open $url
echo
}
displayIntro
publishWebFiles
launchBrowser
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.