masonry navigation works

db/topics.csv

@@ -1,10 +1,10 @@
 id,display_name,image,first_parent_topic_id,second_parent_topic_id
-physics,Physics
+physics,Physics,,,,
 mathematics,Maths,,physics,
-language.english,English
+language.english,English,,,,
 programming.java,Java,,,,
 history,History,,language.english,
-programming.java,Ruby,,,,
-programming.java,Rust,,,,
-programming.java,JS,,,,
-programming.java,Golang,,,,
+programming.ruby,Ruby,,,,
+programming.rust,Rust,,,,
+programming.javascript,JS,,history,,
+programming.golang,Golang,,,,

src/App.svelte

@@ -49,7 +49,7 @@
     {:else if currentView === "/topics"}
         <TopicList/>
     {:else if currentView.startsWith("/topic/")}
-        <TopicDetail topic={currentView.split("/")[2]}/>
+        <TopicDetail topicid={currentView.split("/")[2]}/>
     {:else if currentView === "/formats"}
         <FormatList/>
     {:else if currentView.startsWith("/format/")}

src/TopicCard.svelte

@@ -1,22 +0,0 @@
-<script>
-    export let topic;
-    import Icon from "./tailwindui/Icon.svelte"
-
-    $: abbr = topic.display_name.slice(0,2).toUpperCase()
-</script>
-
-<li class="col-span-1 flex shadow-sm rounded-md">
-    <div class="flex-shrink-0 flex items-center justify-center w-16 bg-pink-600 text-white text-sm font-medium rounded-l-md">{abbr}</div>
-    <div class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md truncate">
-      <div class="flex-1 px-4 py-2 text-sm truncate">
-        <a href={"/topic/" + topic.id} class="text-gray-900 font-medium hover:text-gray-600">{topic.display_name}</a>
-        <p class="text-gray-500">{topic.rowid} items</p>
-      </div>
-      <div class="flex-shrink-0 pr-2">
-        <button type="button" class="w-8 h-8 bg-white inline-flex items-center justify-center text-gray-400 rounded-full bg-transparent hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-          <span class="sr-only">Open options</span>
-          <Icon kind="dots"/>
-        </button>
-      </div>
-    </div>
-  </li>

src/TopicDetail.svelte

@@ -1,21 +1,19 @@
 <script>
     import ItemCard from "./ItemCard.svelte"
+    import TopicMasonryGrid from "./TopicMasonryGrid.svelte"
 
-    export let topic;
+    export let topicid;
     let items = [];
 
-    $: fetch(`/learn/items.json?_shape=array&topics__contains=${topic}`)
+    $: fetch(`/learn/items.json?_shape=array&topics__contains=${topicid}`)
         .then(r => r.json())
         .then(data => {
             items = data;
         });
 </script>
 
-<div class="md:flex md:items-center md:justify-between mb-8">
-    <div class="flex-1 min-w-0">
-      <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">{topic}</h2>
-    </div>
-</div>
+
+<TopicMasonryGrid {topicid}/>
 
 
 {#each items as item}

src/TopicList.svelte

@@ -1,49 +1,6 @@
 <script>
-    import TopicCard from "./TopicCard.svelte"
-    import Masonry from './Masonry.svelte'
-
-    let dataPromise = getData();
-    async function getData() {
-        const res = await fetch(`/learn/topics.json?_shape=array`)
-        if(res.ok){
-            return await res.json();
-        } else {
-            throw new Error()
-        }
-    }
-
-    function hierarchy(topics){
-        return topics.reduce((map, topic) => {
-            if(!topic.first_parent_topic_id) {
-                map.set(topic, []);
-            } else {
-                let parent = topics.find(t => t.id == topic.first_parent_topic_id)
-                map.set(parent, [...map.get(parent), topic])
-            }
-            return map;
-        }, new Map())
-    }
+    import TopicMasonryGrid from "./TopicMasonryGrid.svelte"
 </script>
 
 
-{#await dataPromise}
-<p>Fetching data...</p>
-{:then topics}
-
-<Masonry gridGap={'0.75rem'}>
-    {#each [...hierarchy(topics).keys()] as parent}
-    <div class="bg-white rounded-lg px-4 py-4 shadow-lg focus:outline-none">
-        <h4 class="mt-1 p-1 text-gray-900 font-semibold text-lg">{ parent.display_name }</h4>
-    
-        <div class="mt-2 flex flex-wrap text-sm text-gray-900">
-        {#each hierarchy(topics).get(parent) as child}
-            <a href={"#/topic/" + child.id} class="text-purple-600 no-underline hover:underline hover:text-purple-900 px-2">{child.display_name}</a>
-        {/each}
-        </div>    
-    </div>
-    {/each}
-</Masonry>
-
-{:catch error}
-<p>{error.message}</p>
-{/await}
+<TopicMasonryGrid />

src/TopicMasonryGrid.svelte

@@ -0,0 +1,52 @@
+<script>
+    import Masonry from './Masonry.svelte'
+    export let topicid; // undefined for top level
+    let topic;
+    let alltopics = [];
+    let tree = new Map();
+
+    function hierarchy(topics, rootid){
+        // rootid can be null
+        let hier = topics.reduce((map, topic) => {
+            if(topic.first_parent_topic_id == rootid) {
+                map.set(topic, []);
+            } else {
+                let parent = [...map.keys()].find(t => t.id == topic.first_parent_topic_id)
+                if(parent) map.set(parent, [...map.get(parent), topic])
+            }
+            return map;
+        }, new Map())
+        
+        return hier
+    }
+
+    $: fetch(`/learn/topics.json?_shape=array`)
+        .then(r => r.json())
+        .then(data => {
+            topic = data.find(t => t.id == topicid)
+            alltopics = data;
+        });
+
+    $: tree = hierarchy(alltopics, topic ? topic.id : "")
+
+</script>
+
+{#if topic}
+<h1 class="text-2xl font-bold">{topic.display_name}</h1>
+{/if}
+
+{#if [...tree.keys()].length > 0}
+<Masonry gridGap={'0.75rem'}>
+  {#each [...tree.keys()] as parent}
+  <div class="bg-white rounded-lg px-4 py-4 shadow-lg focus:outline-none">
+    <a href={"#/topic/" + parent.id}><span class="mt-1 p-1 text-gray-900 font-semibold text-lg">{ parent.display_name }</span></a>
+  
+      <div class="mt-2 flex flex-wrap text-sm text-gray-900">
+      {#each tree.get(parent) as child}
+          <a href={"#/topic/" + child.id} class="text-purple-600 no-underline hover:underline hover:text-purple-900 px-2">{child.display_name}</a>
+      {/each}
+      </div>    
+  </div>
+  {/each}
+</Masonry>
+{/if}