2022-12-23 16:30:55 +00:00
< script >
2022-12-29 23:52:49 +00:00
import Masonry from 'svelte-bricks'
import MasonryItem from './MasonryItem.svelte';
let [minColWidth, maxColWidth, gap] = [300, 400, 15]
let width, height
// $: items = [...Array(20).keys()]
2022-06-01 19:27:37 +00:00
export let topicname = null; // undefined for top level
2022-12-23 16:30:55 +00:00
let topic;
2022-05-23 17:17:44 +00:00
export let alltopics;
2022-05-19 15:51:06 +00:00
let map = new Map();
function capitalize(str){
return str.charAt(0).toUpperCase() + str.slice(1)
}
2023-01-21 23:39:49 +00:00
function hierarchy(topic_array, parent){
2022-05-19 15:51:06 +00:00
let tempmap = new Map();
// first pass to find all top-level objects
let parentids = [];
2023-01-21 23:39:49 +00:00
// console.log({ topic_array } , { parent } );
2022-05-19 15:51:06 +00:00
for(let i = 0; i < topic_array.length ; i ++) {
2023-01-21 23:39:49 +00:00
if(topic_array[i].parent == parent){
2022-05-19 15:51:06 +00:00
tempmap.set(topic_array[i], []);
2022-05-19 18:02:29 +00:00
parentids.push(topic_array[i].name);
2022-05-19 15:51:06 +00:00
}
}
// console.log(tempmap);
// second pass for their children
for(let i = 0; i < topic_array.length ; i ++) {
2023-01-21 23:39:49 +00:00
if(parentids.includes(topic_array[i].parent)){
tempmap.get(topic_array.find(t => t.name == topic_array[i].parent)).push(topic_array[i])
2022-05-19 15:51:06 +00:00
}
}
// console.log(tempmap);
// Now move child-less top-level objects under Misc
let count = [...tempmap.keys()].filter(k => tempmap.get(k).length == 0).length;
2022-05-19 16:24:26 +00:00
// console.log({ count } , tempmap.size);
2022-05-19 15:51:06 +00:00
if(count > 15){
2022-05-19 16:24:26 +00:00
// console.log("pruning")
2022-05-19 15:51:06 +00:00
let misc = [];
[...tempmap.keys()].forEach(key => {
if(tempmap.get(key).length == 0) {
2022-05-19 16:24:26 +00:00
// console.log({ key } );
2022-05-19 15:51:06 +00:00
misc.push(key);
tempmap.delete(key);
}
});
2022-06-07 12:38:22 +00:00
tempmap.set('Misc', misc.slice(0,25));
2022-05-19 15:51:06 +00:00
}
// console.log(tempmap);
return tempmap;
}
2022-05-23 17:17:44 +00:00
$: topic = alltopics.find(t => t.name == topicname)
2022-05-11 14:08:38 +00:00
2022-07-10 15:01:35 +00:00
$: map = hierarchy(alltopics, topic?.name || null)
2022-05-19 15:51:06 +00:00
2023-01-21 23:39:49 +00:00
$: parents = [...map.entries()].sort((t1,t2) => (t1[0].rank || 100) - (t2[0].rank || 100))
2022-12-29 23:52:49 +00:00
const getId = (item) => {
if (typeof item[0] === `object`) return item[0].name
if (typeof item === `string`) return item
}
2022-05-11 14:08:38 +00:00
< / script >
2022-06-08 12:41:55 +00:00
< style >
.title::part(base) {
font-size: 1rem;
font-weight: bold;
color: #1E3A8A;
}
< / style >
2022-06-09 12:35:29 +00:00
< div class = "my-2 flex flex-row" >
< sl-breadcrumb class = "flex-grow" >
2022-06-08 12:41:55 +00:00
< sl-breadcrumb-item href = "#/topics" class = "title" > All Topics< / sl-breadcrumb-item >
2022-05-24 10:41:07 +00:00
{ #if topic }
2023-01-21 23:39:49 +00:00
{ #if topic . parent }
< sl-breadcrumb-item href = { "#/topic/" + topic . parent } >
{ capitalize ( topic . parent . replace ( '-' , ' ' ))}
2022-05-24 10:41:07 +00:00
< / sl-breadcrumb-item >
{ /if }
2023-01-21 23:39:49 +00:00
{ #if topic . hname || topic . name }
2022-05-24 11:20:13 +00:00
< sl-breadcrumb-item href = { "#/topic/" + topic . name } >
2023-01-21 23:39:49 +00:00
{ capitalize (( topic . hname || topic . name ). split ( '/' ). reverse ()[ 0 ])}
2022-05-24 10:41:07 +00:00
< / sl-breadcrumb-item >
{ /if }
{ /if }
< / sl-breadcrumb >
2022-12-29 01:31:04 +00:00
{ #if topic ? . name == "programming-languages/go" }
< sl-button href = "#/roadmap/programming_in_golang" variant = "success" > Check out our syllabus for Golang< / sl-button >
{ : else }
< a href = "https://github.com/learn-awesome/learndb" target = "_blank" rel = "noreferrer" class = "underline text-primary hover:font-bold px-2" > Help us improve this taxonomy< / a >
{ /if }
2022-05-24 10:41:07 +00:00
< / div >
2022-05-11 14:08:38 +00:00
2022-12-29 23:52:49 +00:00
{ #if parents }
< Masonry
items={ parents }
{ minColWidth }
{ maxColWidth }
{ gap }
let:item
{ getId }
bind:width
bind:height
>
< MasonryItem parent = { item } / >
< / Masonry >
{ /if }
2022-05-20 08:46:06 +00:00