kopia lustrzana https://github.com/learn-awesome/learndb
Nilesh
GitHub
commit
43162d6bfa
3062
db/items.csv
3062
db/items.csv
Plik diff jest za duży
Load Diff
BIN
learn.db
BIN
learn.db
Plik binarny nie jest wyświetlany.
|
|
@ -50,6 +50,7 @@
|
|||
|
||||
</script>
|
||||
|
||||
|
||||
<svelte:window on:hashchange={hashchange}/>
|
||||
|
||||
<TailwindUI.AppShell {alltopics}>
|
||||
|
|
@ -82,11 +83,11 @@
|
|||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="nav">
|
||||
<a href="#/topics" class={(currentView === "/topics" ? 'bg-indigo-800' : '') + " text-white w-full hover:bg-indigo-600 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}>
|
||||
<a href="#/topics" class={(currentView === "/topics" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}>
|
||||
<SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
|
||||
Topics
|
||||
</a>
|
||||
<a href="#/formats" class={(currentView === "/formats" ? 'bg-indigo-800' : '') + " text-white w-full hover:bg-indigo-600 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}>
|
||||
<a href="#/formats" class={(currentView === "/formats" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}>
|
||||
<SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
|
||||
Formats
|
||||
</a>
|
||||
|
|
@ -94,7 +95,7 @@
|
|||
<SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
|
||||
Random Item
|
||||
</a>
|
||||
<a href="#/search" class={(currentView === "/search" ? 'bg-indigo-800' : '') + " text-white w-full hover:bg-indigo-600 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}>
|
||||
<a href="#/search" class={(currentView === "/search" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}>
|
||||
<SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
|
||||
Search
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<script>
|
||||
export let item;
|
||||
</script>
|
||||
|
||||
<a class="relative flex flex-col w-44 items-center mb-4 rounded-md shadow-lg overflow-hidden transform transition ease-out duration-300 hover:scale-105 hover:shadow-xl" href="#/item/{item.rowid}">
|
||||
<img class="object-cover h-64 w-44" src={item.image || '/static/book-cover.png'} alt="{item.name}"/>
|
||||
<h1 class="text-lg font-semibold p-2 text-white tracking-wider">
|
||||
<sl-rating readonly precision="0.1" value={item.rating}></sl-rating>
|
||||
</h1>
|
||||
{#if !item.image}
|
||||
<div class="absolute inset-y-0 px-2 py-4">
|
||||
<p class="font-extrabold text-white text-xl">{item.name}</p>
|
||||
<p class="text-sm text-white mt-3">{item.creators}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
|
|
@ -22,8 +22,8 @@
|
|||
relative inline-flex flex-nowrap items-center px-4 py-2
|
||||
{i == 0 && 'rounded-l-md'}
|
||||
{i == tabs.length-1 && 'rounded-r-md'}
|
||||
border border-indigo-500 text-sm font-medium focus:z-10 focus:outline-none
|
||||
{currentlySelected === i? 'bg-indigo-700 text-white' : 'bg-gray-100 text-gray-800'}
|
||||
border border-gray-800 text-sm font-medium focus:z-10 focus:outline-none
|
||||
{currentlySelected === i? 'bg-green-800 text-white' : 'bg-gray-100 text-gray-800'}
|
||||
"
|
||||
>
|
||||
{tab}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<script>
|
||||
import ItemCard from "./ItemCard.svelte"
|
||||
|
||||
import VideoCard from "./VideoCard.svelte"
|
||||
export let format;
|
||||
let items = [];
|
||||
|
||||
|
|
@ -12,10 +14,21 @@
|
|||
|
||||
<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">{format}</h2>
|
||||
<h2 class="text-2xl font-bold leading-7 text-gray-100 sm:text-3xl sm:truncate"> {format}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#each items as item}
|
||||
<ItemCard {item}/>
|
||||
{/each}
|
||||
{#if format == 'book'}
|
||||
<div class="mt-12 grid gap-5 grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 justify-items-center">
|
||||
{#each items as item}
|
||||
<ItemCard {item} displayType={format}/>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
|
||||
{#each items as item}
|
||||
<ItemCard {item} displayType={format}/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,48 +1,48 @@
|
|||
<script>
|
||||
import { formats } from "./formats.js"
|
||||
// let formats = [
|
||||
// {id: "book", name: "Books", image: "https://images.unsplash.com/photo-1524578271613-d550eacf6090?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGJvb2tzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=300"},
|
||||
// {id: "podcast", name: "Podcasts / Audio", image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
// {id: "video", name: "Videos / Films", image: "https://images.unsplash.com/photo-1611162616475-46b635cb6868?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
// {id: "article", name: "Articles", image: "https://images.unsplash.com/photo-1623039405147-547794f92e9e?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
// {id: "app", name: "Apps / Software", image: "https://images.unsplash.com/photo-1601034913836-a1f43e143611?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fGFwcHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=400"},
|
||||
// {id: "blog", name: "Blogs / Microblogs", image: "https://images.unsplash.com/photo-1649180554466-0c15f6c70d51?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTM2fHx0d2l0dGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
// {id: "chat", name: "Chat groups / Forums", image: "https://images.unsplash.com/photo-1611746869696-d09bce200020?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
// {id: "cheatsheet", name: "Cheatsheets", image: "https://images.unsplash.com/photo-1432888498266-38ffec3eaf0a?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
// {id: "code", name: "Code", image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzF8fGNvZGV8ZW58MHx8MHx8&auto=format&fit=crop&w=400"},
|
||||
// {id: "conference", name: "Conferences", image: "https://images.unsplash.com/photo-1477281765962-ef34e8bb0967?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
// {id: "course", name: "Courses", image: "https://images.unsplash.com/photo-1604134967494-8a9ed3adea0d?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
// {id: "flashcard", name: "Flashcards", image: "https://images.unsplash.com/photo-1616628188859-7a11abb6fcc9?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
// {id: "game", name: "Games", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
// {id: "image", name: "Pictures & Infographics", image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
// {id: "interactive", name: "Interactives & Explorables", image: "https://images.unsplash.com/photo-1516321497487-e288fb19713f?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
// {id: "journal", name: "Journals & Magazines", image: "https://images.unsplash.com/photo-1516179257071-71a54dbb4853?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8bWFnYXppbmV8ZW58MHx8MHx8&auto=format&fit=crop&w=400"},
|
||||
// {id: "learning_plan", name: "Syllabuses", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
// {id: "livestream", name: "Livestreams", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
// {id: "meetup", name: "Meetups", image: "https://images.unsplash.com/photo-1591115765373-5207764f72e7?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
// {id: "newsletter", name: "Newsletters", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
// {id: "people", name: "People", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
// {id: "qna", name: "Q&A forums", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
// {id: "research_paper", name: "Research Papers", image: "https://images.unsplash.com/photo-1532153955177-f59af40d6472?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
// {id: "website", name: "Websites", image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
// {id: "wiki", name: "Wikis", image: "https://images.unsplash.com/photo-1566396223585-c8fbf7fa6b6d?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
// {id: "thread", name: "Discussion threads", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
// {id: "project", name: "Projects", image: "https://images.unsplash.com/photo-1620325867502-221cfb5faa5f?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cHJvamVjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=400"},
|
||||
// {id: "webmeet", name: "Online meetups", image: "https://images.unsplash.com/photo-1586543354240-2187898bb2e8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
// {id: "webconf", name: "Online conferences", image: "https://images.unsplash.com/photo-1586985564150-11ee04838034?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
// {id: "thing", name: "Things & Toys", image: "https://images.unsplash.com/photo-1416339134316-0e91dc9ded92?ixlib=rb-1.2.1&raw_url=true&q=60&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8c3R1ZmZ8ZW58MHx8MHx8&auto=format&fit=crop&w=400"},
|
||||
|
||||
let formats = [
|
||||
{id: "book", name: "Books", image: "https://images.unsplash.com/photo-1524578271613-d550eacf6090?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGJvb2tzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=300"},
|
||||
{id: "podcast", name: "Podcasts / Audio", image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "video", name: "Videos / Films", image: "https://images.unsplash.com/photo-1611162616475-46b635cb6868?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "article", name: "Articles", image: "https://images.unsplash.com/photo-1623039405147-547794f92e9e?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "app", name: "Apps / Software", image: "https://images.unsplash.com/photo-1601034913836-a1f43e143611?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fGFwcHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=400"},
|
||||
{id: "blog", name: "Blogs / Microblogs", image: "https://images.unsplash.com/photo-1649180554466-0c15f6c70d51?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTM2fHx0d2l0dGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
{id: "chat", name: "Chat groups / Forums", image: "https://images.unsplash.com/photo-1611746869696-d09bce200020?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "cheatsheet", name: "Cheatsheets", image: "https://images.unsplash.com/photo-1432888498266-38ffec3eaf0a?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "code", name: "Code", image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzF8fGNvZGV8ZW58MHx8MHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "conference", name: "Conferences", image: "https://images.unsplash.com/photo-1477281765962-ef34e8bb0967?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "course", name: "Courses", image: "https://images.unsplash.com/photo-1604134967494-8a9ed3adea0d?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "flashcard", name: "Flashcards", image: "https://images.unsplash.com/photo-1616628188859-7a11abb6fcc9?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "game", name: "Games", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
{id: "image", name: "Pictures & Infographics", image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "interactive", name: "Interactives & Explorables", image: "https://images.unsplash.com/photo-1516321497487-e288fb19713f?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "journal", name: "Journals & Magazines", image: "https://images.unsplash.com/photo-1516179257071-71a54dbb4853?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8bWFnYXppbmV8ZW58MHx8MHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "learning_plan", name: "Syllabuses", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
{id: "livestream", name: "Livestreams", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
{id: "meetup", name: "Meetups", image: "https://images.unsplash.com/photo-1591115765373-5207764f72e7?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "newsletter", name: "Newsletters", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
{id: "people", name: "People", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
{id: "qna", name: "Q&A forums", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
{id: "research_paper", name: "Research Papers", image: "https://images.unsplash.com/photo-1532153955177-f59af40d6472?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "website", name: "Websites", image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "wiki", name: "Wikis", image: "https://images.unsplash.com/photo-1566396223585-c8fbf7fa6b6d?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "thread", name: "Discussion threads", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
{id: "project", name: "Projects", image: "https://images.unsplash.com/photo-1620325867502-221cfb5faa5f?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cHJvamVjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=400"},
|
||||
{id: "webmeet", name: "Online meetups", image: "https://images.unsplash.com/photo-1586543354240-2187898bb2e8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "webconf", name: "Online conferences", image: "https://images.unsplash.com/photo-1586985564150-11ee04838034?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "thing", name: "Things & Toys", image: "https://images.unsplash.com/photo-1416339134316-0e91dc9ded92?ixlib=rb-1.2.1&raw_url=true&q=60&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8c3R1ZmZ8ZW58MHx8MHx8&auto=format&fit=crop&w=400"},
|
||||
|
||||
]
|
||||
// ]
|
||||
</script>
|
||||
|
||||
<div class="max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
|
||||
<div class="max-w-lg mx-auto grid grid-cols-2 gap-5 lg:grid-cols-3 lg:max-w-none">
|
||||
|
||||
{#each formats as format}
|
||||
<a href="#/format/{format.id}" class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition ease-out duration-300 hover:scale-105 hover:shadow-xl">
|
||||
<div class="flex-shrink-0">
|
||||
<img class="h-48 w-full object-cover" src={format.image} alt="">
|
||||
<img class="h-48 w-full object-cover" src={format.image} alt="">
|
||||
</div>
|
||||
<h1 class="text-2xl font-bold p-2 bg-indigo-500 text-white">{format.name}</h1>
|
||||
<h1 class="text-lg font-semibold p-2 bg-gray-800 text-white tracking-wider">{format.name}</h1>
|
||||
</a>
|
||||
{/each}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
<script>
|
||||
export let item;
|
||||
</script>
|
||||
|
||||
<a class="flex flex-wrap w-80 bg-white p-2 rounded-lg mb-8 justify-between overflow-hidden text-gray-50 rounded-lg" href="#/item/{item.rowid}">
|
||||
<div class="flex flex-col">
|
||||
<strong class="text-gray-900 text-lg font-extrabold">{item.name}</strong>
|
||||
<span class="text-gray-900 text-sm font-medium">{item.creators}</span>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -1,13 +1,73 @@
|
|||
<script>
|
||||
import Icon from "./tailwindui/Icon.svelte"
|
||||
import BookCard from "./BookCard.svelte"
|
||||
import VideoCard from "./VideoCard.svelte"
|
||||
import GenericCard from "./GenericCard.svelte"
|
||||
export let item;
|
||||
export let displayType = null;
|
||||
</script>
|
||||
|
||||
<a class="flex flex-col mb-8 bg-indigo-700 justify-center overflow-hidden" href="#/item/{item.rowid}">
|
||||
<div class="flex justify-center">
|
||||
<img class="h-64 max-w-sm object-contain py-2 mb-6 float-left rounded-md transform transition ease-out duration-300 hover:scale-105"
|
||||
src={item.image} alt="{item.name}">
|
||||
<!-- <a class="flex flex-col mb-8 bg-gray-700 justify-between overflow-hidden text-gray-50 p-2 rounded-lg max-w-sm w-96" href="#/item/{item.rowid}">
|
||||
<div class="flex flex-col justify-center">
|
||||
|
||||
{#if item.image}
|
||||
|
||||
<img class="h-64 w-44 object-contain py-2 mb-6 float-left rounded-md transform transition ease-out duration-300 hover:scale-105"
|
||||
src={item.image} alt="{item.name}">
|
||||
|
||||
|
||||
{:else if item.links.includes('book|')}
|
||||
|
||||
<div class="h-64 w-44 text-center pt-5 px-3 book text-gray-50">
|
||||
<h1 class="font-extrabold text-lg flex-wrap">{item.name}</h1>
|
||||
</div>
|
||||
|
||||
{:else if item.links.includes('course|')}
|
||||
|
||||
<div class="h-64 w-44 text-center pt-5 px-3 course text-gray-50">
|
||||
<h1 class="font-extrabold text-lg flex-wrap">{item.name}</h1>
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="font-bold flex-wrap">{item.name}</h1>
|
||||
<sl-rating style="--symbol-size: 1rem" readonly precision="0.1" value={item.rating}></sl-rating>
|
||||
|
||||
<div class="flex items-center justify-start gap-3 text-gray-500 mt-5">
|
||||
{#each item.links.split(";") as type}
|
||||
<a href={type.split("|")[1]} class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-cyan-800 text-gray-50" target="_blank"> {type.split("|")[0]}
|
||||
<span class="ml-0.5"><Icon kind="link"/></span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<sl-rating readonly precision="0.1" value={item.rating}></sl-rating>
|
||||
</a>
|
||||
|
||||
|
||||
<style>
|
||||
.book{
|
||||
background-image: url(../static/book-cover.png);
|
||||
}
|
||||
.course{
|
||||
background-image: url(../static/course.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style> -->
|
||||
|
||||
|
||||
{#if item.links.includes('book|') && item.links.includes('video|')}
|
||||
{#if displayType == 'video'}
|
||||
<VideoCard {item}/>
|
||||
{:else}
|
||||
<BookCard {item}/>
|
||||
{/if}
|
||||
{:else if item.links.includes('book|')}
|
||||
<BookCard {item}/>
|
||||
{:else if item.links.includes('video|')}
|
||||
<VideoCard {item}/>
|
||||
{:else}
|
||||
<GenericCard {item}/>
|
||||
{/if}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<script>
|
||||
import ButtonGroup from "./ButtonGroup.svelte";
|
||||
import { bookmarks } from "./stores.js"
|
||||
import Icon from "./tailwindui/Icon.svelte"
|
||||
|
||||
export let itemid;
|
||||
let item;
|
||||
|
|
@ -27,21 +28,51 @@
|
|||
bookmarks.set(newobj)
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.line-clamp{
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
}
|
||||
.scroll{
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgb(31 41 55);
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
.scroll::-webkit-scrollbar{
|
||||
width:10px
|
||||
}
|
||||
.scroll::-webkit-scrollbar-track{
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
.scroll::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(31 41 55);
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if item}
|
||||
<main class="px-12 py-10">
|
||||
<h3 class="py-2 mb-5">
|
||||
{#each item.topics.split(";") as topicname}
|
||||
<a href={"#/topic/" + topicname} class="mr-2 font-bold text-cyan-400">{topicname}</a>
|
||||
{/each}
|
||||
</h3>
|
||||
<div class="mb-10 flex flex-col sm:flex-row md:flex-col lg:flex-row">
|
||||
<!-- book image -->
|
||||
<div class="flex-nowrap">
|
||||
<img class=" mr-6 mb-6 transform rounded-md shadow-md transition duration-300 ease-out hover:scale-105 md:shadow-xl" src="{item.image}" alt="" />
|
||||
<img class="mr-6 mb-6 w-44 h-64 transform rounded-md shadow-md transition duration-300 ease-out hover:scale-105 md:shadow-xl" src="{item.image || '/static/book-cover.png'}" alt="" />
|
||||
</div>
|
||||
<!-- book details -->
|
||||
<div class="sm:ml-6 md:ml-0 lg:ml-6 flex w-full flex-col justify-between">
|
||||
<div class="flex w-full flex-col justify-between ml-5">
|
||||
<!-- title, sub title, author -->
|
||||
<section>
|
||||
<h1 class="text-2xl">{item.name}</h1>
|
||||
<p class="font text-gray-500">Into Several Rmote Regions of the World</p>
|
||||
<h1 class="text-2xl text-white">{item.name}</h1>
|
||||
<p class="font text-gray-400">{item.description}</p>
|
||||
<span class="text-sm">{item.creators}</span>
|
||||
</section>
|
||||
<!-- ratings and upload buttons -->
|
||||
|
|
@ -57,9 +88,11 @@
|
|||
|
||||
|
||||
<div class="flex items-center justify-start gap-3 text-gray-500 mt-5">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-400 text-gray-800"> Book </span>
|
||||
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-400 text-gray-800"> Video </span>
|
||||
{#each item.links.split(";") as type}
|
||||
<a href={type.split("|")[1]} class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-violet-800 text-gray-50 border" target="_blank"> {type.split("|")[0]}
|
||||
<span class="ml-0.5"><Icon kind="link"/></span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -68,15 +101,15 @@
|
|||
|
||||
<!-- Description -->
|
||||
<section class="my-8">
|
||||
<h2 class="text-base font-bold">Description</h2>
|
||||
<p class="mt-4 text-sm">{item.description}</p>
|
||||
<h2 class="text-base font-bold text-gray-100 ">Description</h2>
|
||||
<p class="mt-4 text-sm text-gray-200">{item.description}</p>
|
||||
</section>
|
||||
<hr />
|
||||
<!-- details -->
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 text-gray-400">
|
||||
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
|
||||
<div class="flex flex-col items-center">
|
||||
<h3 class="uppercase text-xs text-gray-400">genre</h3>
|
||||
<h3 class="uppercase text-xs">genre</h3>
|
||||
<!-- book svg -->
|
||||
<span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
|
|
@ -84,7 +117,7 @@
|
|||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-xs">Fiction</span>
|
||||
<span class="text-xs ">Fiction</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
|
||||
|
|
@ -130,7 +163,7 @@
|
|||
<!-- review -->
|
||||
<section class="my-8">
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="text-base font-bold">Reviews</h2>
|
||||
<h2 class="text-base font-bold text-gray-100">Reviews</h2>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:overflow-x-auto md:pb-5 mt-3 gap-2">
|
||||
|
|
@ -147,7 +180,6 @@
|
|||
|
||||
</div>
|
||||
</section>
|
||||
<hr />
|
||||
<!-- more books by same author -->
|
||||
|
||||
<!-- <section class="my-8 overflow-hidden">
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
<h1>{kind == 0 ? 'Want to learn' : 'Finished learning'}</h1>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
|
||||
|
||||
{#each items as item}
|
||||
<ItemCard {item}/>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<script>
|
||||
import ItemCard from "./ItemCard.svelte"
|
||||
import TopicMasonryGrid from "./TopicMasonryGrid.svelte"
|
||||
import { formats } from "./formats.js"
|
||||
import BookCard from "./BookCard.svelte"
|
||||
import VideoCard from "./VideoCard.svelte"
|
||||
import GenericCard from "./GenericCard.svelte"
|
||||
|
||||
export let topicname;
|
||||
let items = [];
|
||||
|
|
@ -15,9 +19,73 @@
|
|||
|
||||
<TopicMasonryGrid {topicname}/>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
|
||||
<!-- <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
|
||||
{#each items as item}
|
||||
<ItemCard {item}/>
|
||||
{/each}
|
||||
</div> -->
|
||||
|
||||
<div>
|
||||
<div class="">
|
||||
<sl-tab-group>
|
||||
{#each formats as format}
|
||||
<sl-tab slot="nav" panel="general" class="px-2 py-1 bg-gray-900 rounded-md mr-3 mb-3 text-gray-200 shadow hover:text-gray-100 hover:bg-gray-800">{format.name}</sl-tab>
|
||||
|
||||
{#if format.id == 'book'}
|
||||
<sl-tab-panel name="general">
|
||||
<div class="mt-12 grid gap-5 grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 justify-items-center">
|
||||
{#each items.filter(x => x.links.includes(format.id + '|')) as item}
|
||||
<BookCard {item}/>
|
||||
{/each}
|
||||
</div>
|
||||
</sl-tab-panel>
|
||||
|
||||
|
||||
{:else if format.id == 'video'}
|
||||
<sl-tab-panel name="general">
|
||||
<div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
|
||||
{#each items.filter(x => x.links.includes(format.id + '|')) as item}
|
||||
<VideoCard {item}/>
|
||||
{/each}
|
||||
</div>
|
||||
</sl-tab-panel>
|
||||
|
||||
{:else}
|
||||
<sl-tab-panel name="general">
|
||||
<div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
|
||||
{#each items.filter(x => x.links.includes(format.id + '|')) as item}
|
||||
<GenericCard {item}/>
|
||||
{/each}
|
||||
</div>
|
||||
</sl-tab-panel>
|
||||
{/if}
|
||||
{/each}
|
||||
</sl-tab-group>
|
||||
</div>
|
||||
|
||||
<!-- {#each formats as format}
|
||||
<h1>{format.name}</h1>
|
||||
{#if format.id == 'book'}
|
||||
<div class="mt-12 grid gap-5 grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 justify-items-center">
|
||||
{#each items.filter(x => x.links.includes(format.id + '|')) as item}
|
||||
<BookCard {item}/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{:else if format.id == 'video'}
|
||||
<div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
|
||||
{#each items.filter(x => x.links.includes(format.id + '|')) as item}
|
||||
<VideoCard {item}/>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
|
||||
{#each items.filter(x => x.links.includes(format.id + '|')) as item}
|
||||
<GenericCard {item}/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/each} -->
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,5 +3,4 @@
|
|||
export let alltopics;
|
||||
</script>
|
||||
|
||||
|
||||
<TopicMasonryGrid {alltopics}/>
|
||||
<TopicMasonryGrid {alltopics}/>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
</script>
|
||||
|
||||
|
||||
<h1 class="text-2xl font-bold mb-4">
|
||||
<h1 class="text-2xl font-bold mb-4 text-gray-100">
|
||||
{#if topic}
|
||||
{capitalize(topic.display_name)}
|
||||
{:else}
|
||||
|
|
@ -78,15 +78,16 @@
|
|||
|
||||
<div class="gap-8 columns-1 sm:columns-2 lg:columns-3 mb-8">
|
||||
{#each [...map.entries()] as parent}
|
||||
<div class="bg-white rounded-lg shadow-lg p-4 break-inside-avoid mb-4">
|
||||
<a href={"#/topic/" + parent[0]?.name || parent}><span class="mt-1 p-1 text-gray-900 font-semibold text-lg">{ format_topic_name(parent[0]) }</span></a>
|
||||
<div class="rounded-lg shadow-lg p-4 break-inside-avoid mb-4 bg-cyan-900">
|
||||
<a href={"#/topic/" + parent[0]?.name || parent}><span class="mt-1 p-1 text-gray-100 font-semibold text-lg">{ format_topic_name(parent[0]) }</span></a>
|
||||
|
||||
<div class="mt-2 flex flex-wrap text-sm text-gray-900">
|
||||
{#each parent[1] as child}
|
||||
<a href={"#/topic/" + child.name} class="text-purple-600 no-underline hover:underline hover:text-purple-900 px-2">{format_topic_name(child)}</a>
|
||||
<a href={"#/topic/" + child.name} class="text-gray-200 no-underline hover:underline hover:text-white hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
<script>
|
||||
export let item;
|
||||
let youtubeformat = item.links.split(";").find(s => s.startsWith('video|') && (s.includes('youtube.com') || s.includes('youtu.be')));
|
||||
let youtubeurl = youtubeformat && youtubeformat.split('|')[1];
|
||||
|
||||
function youtube_parser(url){
|
||||
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
|
||||
var match = url.match(regExp);
|
||||
return (match&&match[7].length==11)? match[7] : false;
|
||||
}
|
||||
|
||||
let ytid = youtubeurl && youtube_parser(youtubeurl);
|
||||
let thumbnail_image_url = ytid && `https://img.youtube.com/vi/${ytid}/mqdefault.jpg`
|
||||
</script>
|
||||
|
||||
|
||||
<a class="flex flex-wrap w-full mb-8 justify-between overflow-hidden text-gray-50 rounded-lg border border-gray-500 hover:scale-105 duration-300" href="#/item/{item.rowid}">
|
||||
<div class="relative w-full h-28 max-w-sm shadow-lg ring-1 ring-black/5 rounded-xl flex items-start">
|
||||
<div class="h-28 w-44 flex justify-center items-center border-r border-gray-500 relative">
|
||||
|
||||
{#if item.image || thumbnail_image_url}
|
||||
|
||||
<div>
|
||||
<img src={item.image || thumbnail_image_url} class="h-28 object-cover" alt="{item.name}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="absolute top-1/3 left-1/3 z-20 h-10 w-10 fill-gray-500"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z"/></svg>
|
||||
</div>
|
||||
|
||||
{:else}
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="h-10 w-10 fill-gray-500"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z"/></svg>
|
||||
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col ml-5 w-2/3 mt-2">
|
||||
<strong class="text-white font-extrabold">{item.name}</strong>
|
||||
<span class="text-white text-sm font-medium">{item.creators}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
export const formats = [
|
||||
{id: "book", name: "Books", image: "https://images.unsplash.com/photo-1524578271613-d550eacf6090?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGJvb2tzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=300"},
|
||||
{id: "podcast", name: "Podcasts / Audio", image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "video", name: "Videos / Films", image: "https://images.unsplash.com/photo-1611162616475-46b635cb6868?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "article", name: "Articles", image: "https://images.unsplash.com/photo-1623039405147-547794f92e9e?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "app", name: "Apps / Software", image: "https://images.unsplash.com/photo-1601034913836-a1f43e143611?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fGFwcHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=400"},
|
||||
{id: "blog", name: "Blogs / Microblogs", image: "https://images.unsplash.com/photo-1649180554466-0c15f6c70d51?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTM2fHx0d2l0dGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
{id: "chat", name: "Chat groups / Forums", image: "https://images.unsplash.com/photo-1611746869696-d09bce200020?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "cheatsheet", name: "Cheatsheets", image: "https://images.unsplash.com/photo-1432888498266-38ffec3eaf0a?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "code", name: "Code", image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzF8fGNvZGV8ZW58MHx8MHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "conference", name: "Conferences", image: "https://images.unsplash.com/photo-1477281765962-ef34e8bb0967?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "course", name: "Courses", image: "https://images.unsplash.com/photo-1604134967494-8a9ed3adea0d?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "flashcard", name: "Flashcards", image: "https://images.unsplash.com/photo-1616628188859-7a11abb6fcc9?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "game", name: "Games", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
{id: "image", name: "Pictures & Infographics", image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "interactive", name: "Interactives & Explorables", image: "https://images.unsplash.com/photo-1516321497487-e288fb19713f?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "journal", name: "Journals & Magazines", image: "https://images.unsplash.com/photo-1516179257071-71a54dbb4853?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8bWFnYXppbmV8ZW58MHx8MHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "learning_plan", name: "Syllabuses", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
{id: "livestream", name: "Livestreams", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
{id: "meetup", name: "Meetups", image: "https://images.unsplash.com/photo-1591115765373-5207764f72e7?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "newsletter", name: "Newsletters", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
{id: "people", name: "People", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
{id: "qna", name: "Q&A forums", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
{id: "research_paper", name: "Research Papers", image: "https://images.unsplash.com/photo-1532153955177-f59af40d6472?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "website", name: "Websites", image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "wiki", name: "Wikis", image: "https://images.unsplash.com/photo-1566396223585-c8fbf7fa6b6d?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "thread", name: "Discussion threads", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
|
||||
{id: "project", name: "Projects", image: "https://images.unsplash.com/photo-1620325867502-221cfb5faa5f?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cHJvamVjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=400"},
|
||||
{id: "webmeet", name: "Online meetups", image: "https://images.unsplash.com/photo-1586543354240-2187898bb2e8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "webconf", name: "Online conferences", image: "https://images.unsplash.com/photo-1586985564150-11ee04838034?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
|
||||
{id: "thing", name: "Things & Toys", image: "https://images.unsplash.com/photo-1416339134316-0e91dc9ded92?ixlib=rb-1.2.1&raw_url=true&q=60&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8c3R1ZmZ8ZW58MHx8MHx8&auto=format&fit=crop&w=400"},
|
||||
|
||||
]
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div style="font-family: 'Quicksand', sans-serif;">
|
||||
<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
|
||||
{#if isNavDrawerOpen}
|
||||
<div class="relative z-40 md:hidden" role="dialog" aria-modal="true">
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
From: "translate-x-0"
|
||||
To: "-translate-x-full"
|
||||
-->
|
||||
<div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-indigo-700">
|
||||
<div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-cyan-900 text-white">
|
||||
<!--
|
||||
Close button, show/hide based on off-canvas menu state.
|
||||
|
||||
|
|
@ -77,8 +77,8 @@
|
|||
<!-- Static sidebar for desktop -->
|
||||
<div class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
|
||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||
<div class="flex flex-col flex-grow pt-5 bg-indigo-700 overflow-y-auto">
|
||||
<div class="flex items-center flex-shrink-0 px-4 bg-white">
|
||||
<div class="flex flex-col flex-grow pt-5 bg-cyan-900 text-white overflow-y-auto">
|
||||
<div class="flex items-center flex-shrink-0 px-4 text-white tracking-wider text-2xl">
|
||||
<a href="/" class="">LearnAwesome</a>
|
||||
</div>
|
||||
<div class="mt-5 flex-1 flex flex-col">
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="md:pl-64 flex flex-col flex-1">
|
||||
<div class="sticky top-0 z-10 flex-shrink-0 flex">
|
||||
<div class="sticky top-0 z-10 flex-shrink-0 flex bg-cyan-900 text-white shadow">
|
||||
<button on:click={e => isNavDrawerOpen = true} type="button" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden">
|
||||
<span class="sr-only">Open sidebar</span>
|
||||
<Icon kind="menu"/>
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<main class="bg-gray-100">
|
||||
<main class="">
|
||||
<div class="py-6">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
|
||||
<slot name="content"></slot>
|
||||
|
|
|
|||
|
|
@ -28,4 +28,8 @@
|
|||
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
|
||||
</svg>
|
||||
{:else if kind === "link"}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
{/if}
|
||||
Plik binarny nie jest wyświetlany.
Plik binarny nie jest wyświetlany.
Plik binarny nie jest wyświetlany.
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 921 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 584 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="h-10 w-10 fill-gray-500"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z"/></svg>
|
||||
|
Po Szerokość: | Wysokość: | Rozmiar: 502 B |
|
|
@ -9,8 +9,12 @@
|
|||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.73/dist/themes/light.css" />
|
||||
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.73/dist/shoelace.js"></script>
|
||||
<title>LearnAwesome</title>
|
||||
<!-- fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="h-full">
|
||||
<body class="h-full bg-gray-900">
|
||||
<div class="h-full" id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue