mixin getType(type)
	case type
		when "folder"
			span File Folder
		when "symlink"
			span Junction
		when "json"
			span JSON Source File
		when "torrent"
			span BiglyBT File
		default
			span= type
mixin getLastModified(date)
	- const formattedDate = date.toISOString().substring(0, 10);
	time(datetime=formattedDate)= formattedDate
mixin getFileIcon(file)
	if file.type === "folder"
		span(role="image", aria-label="Folder Icon") 📁
	else
		span(role="image", aria=label="File Icon") 🗄
mixin getFileSize(bytes)
	if (bytes < 1000)
		span.bytes #{bytes} bytes
	else if (bytes < 1000000)
		span.kilobytes #{Math.round(bytes / 1000)}
		sub
			abbr(title="Kilobytes") KB
	else if (bytes > 1000000000)
		span.gigabytes #{Math.round(bytes / 1000000000)}
		sub
			abbr(title="Gigabytes") GB
	else
		span.megabytes #{Math.round(bytes / 1000000)}
		sub
			abbr(title="Megabytes") MB
mixin getFilePermissions(permissions)
	case permissions
		when undefined
			span ------
		default
			span ------
mixin fileListing(file)
	tr.file
		td.name
			+getFileIcon(file)
			span= file.name
		td.size
			+getFileSize(file.size)
		td.type
			+getType(file.type)
		td.modified
			+getLastModified(file.lastModified)
		td.permissions
			+getFilePermissions(file.permissions)
mixin directoryListing(folder)
	table.directory-listing
		thead
			tr
				th Name
				th Size
				th Type
				th Modified
				th
					abbr(title="Permissions") Attr
		tbody
			each file in folder.files
				+fileListing(file)
		tfoot
			tr
				td(colspan="5")
					dl.folder-meta(aria-atomic="true", aria-live="polite")
						dt Selected
						dd 0 / #{folder.files.length}
						dt Total Filesize
						dd
							+getFileSize(folder.size)
							meter(min="0", max="953000000000", value=folder.size)
							
main(role="main")
	- const folder = {name: "seang", type: "folder", size: 117486392282, modified: new Date(), files: [{name: ".config", type: "folder", size: 166, lastModified: new Date("2021-03-06")}, {name: ".gnupg", type: "folder", size: 3045, lastModified: new Date()}, {name: ".node-gyp", type: "folder", size: 26092861, lastModified: new Date("2021-03-21")}]}
	+directoryListing(folder)
View Compiled
body
	font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu,Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$table-cell
	padding 0.3em 0.5em
	border 0.1em solid var(--directory-border-colour)
.folder-meta
	dt
		font-weight bold
	display grid
	grid-template-columns 1fr 1fr
.directory-listing
	--directory-border-colour black
	margin calc(2% + 1em) auto
	th
		text-align initial
		font-weight bold
		@extend $table-cell
	td
		@extend $table-cell
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.