feature: Hide Dotfiles

And Dotdirs if thats a thing. Enabled by default, use envvars to disable this feature.

.gitignore

@@ -0,0 +1 @@
+.development

README

@@ -10,9 +10,10 @@ A Miku flavored file browser inspired by THE FLAVOR FOLEY FILES (https://flavorf
 
 Configure the service using environment variables:
 
-| Name           | Default          | Description
-| HTTP_ADDRESS   | 127.0.0.1:9000   | Address and Port to use for requests
-| HTTP_DIRECTORY | <empty>          | Starting directory to list and serve files from
+| Name               | Default          | Description
+| HTTP_ADDRESS       | 127.0.0.1:9000   | Address and Port to use for requests
+| HTTP_DIRECTORY     | <empty>          | Starting directory to list and serve files from
+| HTTP_SHOW_DOTFILES | <empty>          | Set this variable to list directories and files prefixed with a dot (e.g. .DS_Store)
 
 [ Credits ]
 

main.go

@@ -21,8 +21,9 @@ import (
 var (
 	//go:embed private/*
 	privateDirectory embed.FS
-	serveHash        = fmt.Sprintf("%x", time.Now().Unix())
+	serveHash        = fmt.Sprintf("%X", time.Now().Unix())
 	serveDirectory   = os.Getenv("HTTP_DIRECTORY")
+	serveDotfiles    = os.Getenv("HTTP_SHOW_DOTFILES")
 	serveAddress     = os.Getenv("HTTP_ADDRESS")
 	tmpl             = template.Must(
 		template.
@@ -83,32 +84,33 @@ func getEntrySizeHuman(b int64) string {
 
 func getEntryIcon(name string, isDir bool) string {
 	if isDir {
-		return "icon_folder.png"
+		return "icon-directory"
 	}
 	switch strings.ToLower(path.Ext(name)) {
 	// Custom Filetypes
 	case ".redir":
-		return "icon_redirect.png"
+		return "icon-redirect"
 
 	// Default Filetypes
 	case ".mp3", ".flac", ".ogg", ".wav", ".aac", ".opus", ".m4a":
-		return "icon_audio.png"
+		return "icon-audio"
 	case ".mp4", ".mkv", ".webm", ".avi", ".mov", ".m4v":
-		return "icon_video.png"
+		return "icon-video"
 	case ".jpg", ".jpeg", ".png", ".gif", ".webp", ".avif", ".bmp", ".tiff":
-		return "icon_photo.png"
+		return "icon-photo"
 	case ".zip", ".tar", ".gz", ".7z", ".rar", ".zst", ".xz", ".bz2":
-		return "icon_archive.png"
+		return "icon-archive"
 	case ".exe", ".elf", ".bin", ".out", ".appimage", ".deb", ".rpm":
-		return "icon_program.png"
+		return "icon-program"
 	case ".pdf", ".txt", ".md", ".srt", ".vtt", ".ass", ".log":
-		return "icon_document.png"
+		return "icon-document"
 	case ".html", ".ts", ".js", ".go", ".rs", ".pug":
-		return "icon_script.png"
+		return "icon-script"
 	case ".json", ".xml", ".yaml", ".toml", ".ini", ".cfg":
-		return "icon_config.png"
+		return "icon-config"
+
 	default:
-		return "icon_generic.png"
+		return "icon-generic"
 	}
 }
 
@@ -193,6 +195,11 @@ func main() {
 					continue
 				}
 
+				// Ignore Dotfiles
+				if serveDotfiles != "" && strings.HasPrefix(entry.Name(), ".") {
+					continue
+				}
+
 				// Check Symbolic Link
 				isDir := entry.IsDir()
 				if entry.Type()&os.ModeSymlink != 0 {

private/directory.html

@@ -8,12 +8,16 @@
     <link rel="icon" href="/private/favicon.png?v={{ .Version }}">
     <title>Browser: {{ .Path }}</title>
     <style>
-        a.entry[data-type="directory"] div.icon {
-            background-image: url("/private/icon_folder.png?v={{ .Version }}");
+        div.pattern {
+            background-image: url("/private/bg_pattern.png?v={{ .Version }}");
         }
 
-        a.entry[data-type="directory"]:hover div.icon {
-            background-image: url("/private/icon_folder_open.png?v={{ .Version }}");
+        div.graphic {
+            background-image: url("/private/bg_graphic.png?v={{ .Version }}");
+        }
+
+        a.entry div.icon {
+            background-image: url("/private/icon_grid.png?v={{ .Version }}");
         }
     </style>
 </head>
@@ -45,20 +49,20 @@
 
             {{ if .Parent }}
             <a class="entry" data-type="directory" data-ignore="true" href="{{ .Parent }}">
-                <div class="icon"></div>
+                <div class="icon icon-directory"></div>
                 <span class="filename">../</span>
             </a>
             {{ end }}
 
             {{ range .Item }}
             {{ if .IsDir }}
-            <a class="entry" data-type="directory" href="{{ EncodeURI .Name }}/" title="{{ .Name }}&#10;Modified: {{ .ModTime.Format "2006-01-02 15:04" }}">
-                <div class="icon"></div>
+            <a class="entry" data-type="directory" href="{{ EncodeURI .Name }}/" title="{{ .Name }}&#10;Modified: {{ .ModTime.Format " 2006-01-02 15:04" }}">
+                <div class="icon icon-directory"></div>
                 <span class="filename">{{ .Name }}</span>
             </a>
             {{ else }}
-            <a class="entry" data-type="file" href="{{ EncodeURI .Name }}" title="Name: {{ .Name }}&#10;Size: {{ GetEntrySizeHuman .Size }}&#10;Modified: {{ .ModTime.Format "2006-01-02 15:04" }}">
-                <img class="icon" src="/private/{{ GetEntryIcon .Name .IsDir }}?v={{ $.Version }}">
+            <a class="entry" data-type="file" href="{{ EncodeURI .Name }}" title="Name: {{ .Name }}&#10;Size: {{ GetEntrySizeHuman .Size }}&#10;Modified: {{ .ModTime.Format " 2006-01-02 15:04" }}">
+                <div class="icon {{ GetEntryIcon .Name .IsDir }}"></div>
                 <span class="filename">{{ .Name }}</span>
             </a>
             {{ end }}

private/styles.css

@@ -1,3 +1,5 @@
+/* Layout */
+
 body {
     margin: 0;
 }
@@ -26,13 +28,11 @@ div.foreground {
 }
 
 div.pattern {
-    background: url("/private/bg_pattern.png?v={{ .Version }}");
     background-repeat: repeat-x;
     height: 152px;
 }
 
 div.graphic {
-    background: url("/private/bg_graphic.png?v={{ .Version }}");
     width: 256px;
     height: 259px;
     position: absolute;
@@ -56,12 +56,6 @@ div.directory {
     flex-wrap: wrap;
 }
 
-a.entry[data-type="directory"] div.icon {
-    background-size: 32px 32px;
-    height: 32px;
-    width: 32px;
-}
-
 a.entry {
     display: inline-flex;
     flex-direction: column;
@@ -73,7 +67,7 @@ a.entry {
     color: inherit;
 }
 
-a.entry img.icon {
+a.entry div.icon {
     height: 32px;
     width: 32px;
 }
@@ -87,7 +81,6 @@ a.entry span.filename {
 }
 
 @media (max-width: 600px) {
-
     a.entry {
         padding: 4px;
         width: 100%;
@@ -96,14 +89,57 @@ a.entry span.filename {
         gap: 8px;
     }
 
-    a.entry img.icon,
-    a.entry[data-type="directory"] div.icon {
-        background-size: 1em 1em;
-        height: 1em;
-        width: 1em;
-    }
-
     a.entry span.filename {
         font-size: 1em;
     }
 }
+
+/* Icons */
+
+.icon-archive {
+    background-position: 0 0;
+}
+
+.icon-audio {
+    background-position: -32px 0;
+}
+
+.icon-config {
+    background-position: -64px 0;
+}
+
+.icon-document {
+    background-position: -96px 0;
+}
+
+a.entry[data-type="directory"] .icon-directory {
+    background-position: 0 -32px;
+}
+
+a.entry[data-type="directory"]:hover .icon-directory {
+    background-position: -32px -32px;
+}
+
+.icon-generic {
+    background-position: -64px -32px;
+}
+
+.icon-photo {
+    background-position: -96px -32px;
+}
+
+.icon-program {
+    background-position: 0 -64px;
+}
+
+.icon-redirect {
+    background-position: -32px -64px;
+}
+
+.icon-script {
+    background-position: -64px -64px;
+}
+
+.icon-video {
+    background-position: -96px -64px;
+}

public/.hidden/.gitkeep

@@ -0,0 +1,3 @@
+I'M CALLING OUT YOUR NAME  RECEIVING NO REPLY
+[ REFLECTED  OFF THE  SIDE OF  THE  SKYLINE ]
+CALLING OUT IN VAIN, LIKE YOU  WOULD EVEN TRY

public/link.redir

@@ -0,0 +1 @@
+/