From 39afb417d3cb1bca037bcd34131fcacc4ff67622 Mon Sep 17 00:00:00 2001 From: Nilesh Date: Thu, 29 Dec 2022 01:31:04 +0000 Subject: [PATCH] Roadmaps implementation --- package-lock.json | 19 + package.json | 1 + src/App.svelte | 16 +- src/Home.svelte | 16 +- src/Roadmap.svelte | 730 ++++++++++++++++++++++++++++++++++++ src/RoadmapList.svelte | 16 + src/TopicMasonryGrid.svelte | 6 +- src/stores.js | 3 +- 8 files changed, 799 insertions(+), 8 deletions(-) create mode 100644 src/Roadmap.svelte create mode 100644 src/RoadmapList.svelte diff --git a/package-lock.json b/package-lock.json index 3eb4dd7..6398ecf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@rgossiaux/svelte-headlessui": "^1.0.2", "@rgossiaux/svelte-heroicons": "^0.1.2", "@sveltejs/vite-plugin-svelte": "^2.0.2", + "marked": "^4.2.4", "svelte": "^3.55.0", "vite": "^4.0.3" } @@ -640,6 +641,18 @@ "node": ">=6" } }, + "node_modules/marked": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/marked/-/marked-4.2.5.tgz", + "integrity": "sha512-jPueVhumq7idETHkb203WDD4fMA3yV9emQ5vLwop58lu8bTclMghBWcYAavlDqIEMaisADinV1TooIFCfqOsYQ==", + "dev": true, + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 12" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -1243,6 +1256,12 @@ "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==", "dev": true }, + "marked": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/marked/-/marked-4.2.5.tgz", + "integrity": "sha512-jPueVhumq7idETHkb203WDD4fMA3yV9emQ5vLwop58lu8bTclMghBWcYAavlDqIEMaisADinV1TooIFCfqOsYQ==", + "dev": true + }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", diff --git a/package.json b/package.json index ee26ef7..f6dae67 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@rgossiaux/svelte-headlessui": "^1.0.2", "@rgossiaux/svelte-heroicons": "^0.1.2", "@sveltejs/vite-plugin-svelte": "^2.0.2", + "marked": "^4.2.4", "svelte": "^3.55.0", "vite": "^4.0.3" } diff --git a/src/App.svelte b/src/App.svelte index 4df9565..84410da 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -10,9 +10,11 @@ import FormatDetail from "./FormatDetail.svelte" import ItemDetail from "./ItemDetail.svelte" import Settings from "./Settings.svelte" + import Roadmap from "./Roadmap.svelte" + import RoadmapList from "./RoadmapList.svelte" import NavButtonWithLabel from './NavButtonWithLabel.svelte'; - import { SearchIcon, LibraryIcon, ViewGridIcon, GiftIcon, CogIcon, BookmarkAltIcon, BookmarkIcon, SupportIcon } from "@rgossiaux/svelte-heroicons/outline"; + import { SearchIcon, LibraryIcon, ViewGridIcon, GiftIcon, CogIcon, BookmarkAltIcon, BookmarkIcon, SupportIcon, MapIcon } from "@rgossiaux/svelte-heroicons/outline"; import Bookmarks from './Bookmarks.svelte'; import { io_getRandomTopicName, io_getTopicByName, io_getTopicList, io_getRandomItemId } from "../db/jsonlines.js" @@ -76,12 +78,24 @@ {:else if currentView === "/settings"} + {:else if currentView.startsWith("/roadmap/")} + + {:else if currentView.startsWith("/roadmaps")} + {/if} + + + + +
-
+

LearnAwesome - Humanity's learning map + We're building humanity's universal map for learning!

-

This is a collection of learning resources organized by topics, formats, difficulty level, reviews by experts and quality tags like visual / interactive / challenging etc. For books or research papers, there are direct links thanks to projects like InternetArchive, LibGen, Arxiv, SciHub, IPFS etc.

+ -

This is an open-source project.

+

A Young Lady's Illustrated Primer (from Neal Stephenson's The Diamond Age) is an old dream of tech makers. LearnAwesome is a step towards building this (inspired by this 👆 talk by Danny Hillis at the Open Source Conference 2012) and making it accessible to everyone.

+ +

The Internet has amazing learning resources for anything you can imagine. However, search engines, edtech platforms, and even Wikipedia/Wikiversity don't do a good job of making them discoverable. Projects like Music Genome Project or Book Genome Project have demonstrated how rich metadata can significantly improve users' lives.

+ +

This is a collection of high-quality learning resources organized by topics & formats and enriched by metadata like difficulty level, assumed prerequisites, reviews by experts and quality tags like visual, interactive, challenging etc. For many books or research papers, there are direct links thanks to projects like InternetArchive, LibGen, Arxiv, SciHub, IPFS etc.

+ +

This is an open-source project. We collaborate with OpenLibrary, OpenSyllabus and leverage projects like Wikipedia, Arxiv, InternetArchive, IPFS, SciHub for topic taxonomy, standardization of metadata formats etc. There are no user accounts and all bookmarks etc are kept in users' browsers.

diff --git a/src/Roadmap.svelte b/src/Roadmap.svelte new file mode 100644 index 0000000..010b74c --- /dev/null +++ b/src/Roadmap.svelte @@ -0,0 +1,730 @@ + + +

{topic.split('_').map(capitalize).join(' ')}

+
+ {#if roadmap} + + + + + + + + + + + {roadmap.start.label} + + {#each roadmap.blocks as node,i (node.label)} + + + + {node.label} + + + {#each node.left as sec, j} + + selectedNode = sec} + width={250} + height={45}> + + selectedNode = sec} + x={20+10} + y={30+blockHeight*i+50*j+30} + >{sec.label} + + {/each} + + {#each node.middle as sec,j} + + selectedNode = sec} + x={350} y={140+blockHeight*i+50*j} rx={5} + width={250} + height={45}> + + selectedNode = sec} + x={350+10} + y={140+blockHeight*i+50*j+30} + >{sec.label} + + {/each} + + {#each node.right as sec, j} + + selectedNode = sec} + x={720} y={30+blockHeight*i+50*j} rx={5} + width={250} + height={45}> + + selectedNode = sec} + x={720+10} + y={30+blockHeight*i+50*j+30} + >{sec.label} + + {/each} + + + + + {#if i > 0} + + + {/if} + {/each} + + + + + {roadmap.end.label} + + + {:else} +

Coming soon.

+ {/if} +
+ + + {#if selectedNode} + {#if $roadmap_progress[topic][selectedNode.label] === 'done'} + saveProgress(topic, selectedNode.label, 'pending')}>Mark as Pending + {:else} + saveProgress(topic, selectedNode.label, 'done')}>Mark as Done + {/if} +
+ {@html marked(selectedNode?.desc || "", { renderer })} +
+ {/if} + selectedNode = null}>Close + + + \ No newline at end of file diff --git a/src/RoadmapList.svelte b/src/RoadmapList.svelte new file mode 100644 index 0000000..91cd811 --- /dev/null +++ b/src/RoadmapList.svelte @@ -0,0 +1,16 @@ +

Roadmaps

+
+ +
+ +

Programming in Golang

+
+ + + +
+ +

Abstract Algebra for High-schoolers

+
+ +
\ No newline at end of file diff --git a/src/TopicMasonryGrid.svelte b/src/TopicMasonryGrid.svelte index 6df38d2..587bb43 100644 --- a/src/TopicMasonryGrid.svelte +++ b/src/TopicMasonryGrid.svelte @@ -92,7 +92,11 @@ {/if} {/if} - Help us improve this taxonomy + {#if topic?.name == "programming-languages/go"} + Check out our syllabus for Golang + {:else} + Help us improve this taxonomy + {/if}
diff --git a/src/stores.js b/src/stores.js index 8be7df5..b97274d 100644 --- a/src/stores.js +++ b/src/stores.js @@ -1,4 +1,5 @@ import { persistStore } from "./persistStore"; // {item_id: integer} 0 = want to learn, 1 = finished -export const bookmarks = persistStore('bookmarks', {}) \ No newline at end of file +export const bookmarks = persistStore('bookmarks', {}) +export const roadmap_progress = persistStore('roadmap_progress', {}) \ No newline at end of file