misc

README.md

@@ -1,16 +1,26 @@
 # LearnAwesome
 
-An offline-browsable collection of learning resources organized by topics, formats, difficulty level etc.
+An offline-browsable collection of learning resources organized by topics, formats, difficulty level, quality tags etc etc.
 
 ## Users
 
-Run `datasette . -o` in the top-level directory which opens the Datasette default view. Click on "home" in the top-left to open the custom UI which is much nicer.
+Run `datasette . -o` in the top-level directory to start the datasette serve and open the app in your browser.
 
 ## Developers
 
-When you modify the *.csv files in `db/`, generate the sqlite database with `./generatedb.sh`.
-Run `npm run dev` to keep building the JS bundle as you edit the source code.
+When you modify the *.csv files in `db/`, you should re-generate the sqlite database with `./generatedb.sh`.
+Run `npm run dev` to keep live-building the JS bundle as you edit the source code.
 
-## Details
+## Architecture
 
-The dataset here is identical to https://learnawesome.org/. But this runs on your computer so there are no user accounts, no social features like learning feeds or ActivityPub. Your bookmarks will be saved in browser's localStorage.
+The dataset here is identical to https://learnawesome.org/. But this runs on your computer so there are no user accounts, no social features like learning feeds or ActivityPub. Your bookmarks will be saved in browser's localStorage.
+
+The source data is in `db/*.csv` files. This is imported into a sqlite database with `./generatedb.sh`.
+We then rely on datasette to load this file and offer JSON APIs over HTTP.
+Settings and metadata are specified in `settings.json` and `metadata.json` which datasette uses.
+
+For the front-end, we write Svelte components in `src` and generate `bundle.js` and `bundle.css` via `npm run dev` / `npm run build`.
+
+These bundles are then used by `templates/index.html` which datasette loads on the first visit. We keep a second database file `dummy.db` in the same directory so that datasette opens `/` and not `/learn`.
+
+For UI, we make use of TailwindCSS (currently loaded via CDN with some plugins) and Shoelace.Style. Whenever possible, we use Shoelace's existing components.

src/AdvancedSearch.svelte

@@ -57,7 +57,7 @@
           <svg class="mx-auto h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
           </svg>
-          <p class="mt-4 font-semibold text-gray-900">Search for items, topics and creators</p>
+          <p class="mt-4 font-semibold text-gray-900">Search for items and topics.</p>
           <p class="mt-2 text-gray-500">Quickly look for resources by running a global search.</p>
         </div>
         

src/FormatList.svelte

@@ -3,7 +3,6 @@
   
 </script>
 
-<h1 class="my-2">Learn from the following formats</h1>
 <div class=" mx-auto flex flex-wrap gap-5 justify-center items-center">
   {#each formats as format}
   <a href="#/format/{format.id}" class="w-64 flex flex-col rounded-lg shadow-md overflow-hidden transform transition ease-out duration-300 hover:scale-105 bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary">

src/tailwindui/Icon.svelte

@@ -1,6 +1,6 @@
 <script>
     export let kind;
-    export let size;
+    export const size = 0;
 </script>
 
 {#if kind === 'home'}

src/tailwindui/MenuButton.svelte

@@ -19,10 +19,10 @@
                 -->
                 <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
                   <!-- Active: "bg-gray-100", Not Active: "" -->
-                  <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
+                  <a href="/" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
     
-                  <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
+                  <a href="/" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
     
-                  <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
+                  <a href="/" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
                 </div>
               </div>