add hierarchy/list/grid modes

web/src/lib/settings.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export let mode = writable("hierarchy");

web/src/routes/+layout.svelte

@@ -1,7 +1,18 @@
+<script lang="ts">
+import { mode } from '$lib/settings';
+
+</script>
+
+<div class="header">
+    <label>Hierarchy<input type="radio" name="mode" value="hierarchy" bind:group={$mode}/></label>
+    <label>List<input type="radio" name="mode" value="list" bind:group={$mode}/></label>
+    <label>Grid<input type="radio" name="mode" value="grid" bind:group={$mode}/></label>
+</div>
+
 
 <slot></slot>
 
-<div>
+<div class="footer">
     <p>Data from <a href="https://github.com/usd-wg/assets" target="_blank">usd-wg/assets</a></p>
     <p>
         Made by <a href="https://twitter.com/hybridherbst" target="_blank">@hybridherbst</a> 
@@ -11,7 +22,7 @@
 
 <style>
 
-div {
+div.footer {
     margin-top: 2em;
 }
 
@@ -21,4 +32,40 @@ p {
     color: rgba(0, 0, 0, 0.3);
 }
 
+div.header {
+    margin-bottom: 1.0em;
+}
+
+div.header input {
+    appearance: none;
+    margin: 0;
+}
+
+div.header label {
+    padding: 0.5em;
+    margin-right: -0.4em;
+    background-color: #fff;
+    text-transform: uppercase;
+    font-size: 0.7em;
+    letter-spacing: 1px;
+    cursor: pointer;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    color: #aaa;
+}
+
+div.header label:has(input:checked) {
+    background-color: #eee;
+    color: #333;
+}
+
+div.header label:first-child {
+    border-top-left-radius: 3em;
+    border-bottom-left-radius: 3em;
+}
+
+div.header label:last-child {
+    border-top-right-radius: 3em;
+    border-bottom-right-radius: 3em;
+}
+
 </style>

web/src/routes/+page.svelte

@@ -1,14 +1,24 @@
 <script lang="ts">
-  import path from 'path';
+  import { mode } from '$lib/settings';
 import GridItem from './GridItem.svelte';
 export let data;
 
 </script>
 
-<div>
+<div class:grid={$mode == "grid"}>
 {#each data.posts.children as child}
     <article>
         <GridItem child={child} depth={1}/>
     </article>
 {/each}
-</div>
+</div>
+
+<style>
+
+.grid article {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--image-size), 1fr));
+    gap: 0.5em;
+}
+
+</style>

web/src/routes/GridItem.svelte

@@ -1,24 +1,47 @@
 <script lang="ts">
 import { base } from '$app/paths';
 import type { HierarchyEntry } from '$lib/files';
+import { mode } from '$lib/settings';
 
 export let child: HierarchyEntry;
 export let depth = 1;
 
 let expanded = depth < 2;
 
+$: expand = expanded || $mode === "list";
+
 </script>
 
+{#if $mode == "grid"}
+
+{#if child.items}
+    {#each child.items as item}
+    <a href={base}/{item.path}>
+        <div class="content">
+            <img src={base}/{item.src} alt="Thumbnail"/>
+            <span>{item.filename}</span>
+        </div>
+    </a>
+    {/each}
+
+    {#each child.children as grandchild}
+    <svelte:self child={grandchild} depth={depth+1}/>
+    {/each}
+{/if}
+
+{:else}
 <div class="container">
 {#if child.name}
 <div class="row">
+    {#if $mode == "hierarchy"}
     <input type="checkbox" bind:checked={expanded} />
+    {/if}
     <svelte:element this={"h" + depth}><a href={base}/{child.path}>{child.name}</a><span class="item-count">{child.totalChildren}</span></svelte:element>
 </div>
 {/if}
 
-{#if child.items && expanded}
-<div class="grid">
+{#if child.items && expand}
+<div class="grid content">
     {#each child.items as item}
     <a href={base}/{item.path}>
         <div>
@@ -29,12 +52,14 @@ let expanded = depth < 2;
     {/each}
 </div>
 {/if}
-{#if child.children && expanded}
+
+{#if child.children && expand}
     {#each child.children as grandchild}
     <svelte:self child={grandchild} depth={depth+1}/>
     {/each}
 {/if}
 </div>
+{/if}
 
 <style>
 
@@ -62,7 +87,7 @@ img {
     width: var(--image-size);
 }
 
-.grid span {
+.content span {
     display: block;
     text-align: center;
     font-size: 0.85em;

web/src/routes/[...path]/+page.svelte

@@ -2,6 +2,7 @@
 import { base } from '$app/paths';
 import GridItem from '../GridItem.svelte';
 import Breadcrumbs from '../Breadcrumbs.svelte';
+  import { mode } from '$lib/settings';
 export let data;
 
 $: currentPath = data.currentItem ? data.currentItem.path : data.currentDir ? data.currentDir.path : "";
@@ -15,7 +16,7 @@ function getViewerUrl(abs: string) {
 $: absoluteGithubUrl = data.currentItem ? "https://github.com/usd-wg/assets/blob/main/" + data.currentItem.path + data.currentItem.ext : "";
 </script>
 
-<div>
+<div class:grid={$mode == "grid"}>
 <a href={base}>See all assets</a><br/>
 
 {#if data.currentDir}
@@ -71,4 +72,11 @@ a.viewer-link {
     flex-direction: column;
     align-items: start;
 }
+
+.grid article {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--image-size), 1fr));
+    gap: 0.5em;
+}
+
 </style>