From f6ef1b113373f861a794f3a56025af65feed8296 Mon Sep 17 00:00:00 2001 From: dmlbs Date: Mon, 10 Jul 2023 21:14:07 -0600 Subject: [PATCH 01/11] add dark mode toggle - update tailwind darkmode config to be class based - check os settings when initilizing and save user selection in local storage - toggle classes for dark mode - update tag dark mode css to use classes - componentize button/button links for consistent styles dark/hover/disable - componentize tag wrapper - componentize checkbox --- src/app.css | 14 +-- src/app.html | 13 +++ src/lib/components/ButtonLinks.svelte | 77 ++++++++++++++ src/lib/components/Checkbox.svelte | 29 +++++ src/lib/components/TagWrapper.svelte | 22 ++++ src/routes/+layout.svelte | 37 ++++++- src/routes/resources/+page.svelte | 146 +++++++++----------------- src/routes/resources/ListItem.svelte | 11 +- src/routes/youtube/+page.svelte | 71 ++++++++----- tailwind.config.cjs | 1 + 10 files changed, 278 insertions(+), 143 deletions(-) create mode 100644 src/lib/components/ButtonLinks.svelte create mode 100644 src/lib/components/Checkbox.svelte create mode 100644 src/lib/components/TagWrapper.svelte diff --git a/src/app.css b/src/app.css index 49a7e718..e325832d 100644 --- a/src/app.css +++ b/src/app.css @@ -32,15 +32,11 @@ details:not([open]) > summary svg { outline: auto; } -/* user prefered / OS colour scheme for tag colors */ -@media (prefers-color-scheme: light) { - .tag-color { - background-color: var(--tag-color) !important; - } + +.tag-color { + background-color: var(--tag-color) !important; } -@media (prefers-color-scheme: dark) { - .tag-color { - background-color: var(--tag-color-dark) !important; - } +.dark .tag-color { + background-color: var(--tag-color-dark) !important; } diff --git a/src/app.html b/src/app.html index b009ee26..c67d6f4f 100644 --- a/src/app.html +++ b/src/app.html @@ -5,6 +5,19 @@ %sveltekit.head% + +
%sveltekit.body%
diff --git a/src/lib/components/ButtonLinks.svelte b/src/lib/components/ButtonLinks.svelte new file mode 100644 index 00000000..9cfc8b22 --- /dev/null +++ b/src/lib/components/ButtonLinks.svelte @@ -0,0 +1,77 @@ + + +{#if link} + + + {#if newTab}in a new tab{/if} + +{:else} + +{/if} + + + \ No newline at end of file diff --git a/src/lib/components/Checkbox.svelte b/src/lib/components/Checkbox.svelte new file mode 100644 index 00000000..4c89fe27 --- /dev/null +++ b/src/lib/components/Checkbox.svelte @@ -0,0 +1,29 @@ + + + diff --git a/src/lib/components/TagWrapper.svelte b/src/lib/components/TagWrapper.svelte new file mode 100644 index 00000000..1b166a84 --- /dev/null +++ b/src/lib/components/TagWrapper.svelte @@ -0,0 +1,22 @@ + + +
+ +
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 2c3d4a5f..21106304 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,10 +1,33 @@ @@ -42,7 +65,8 @@ /> + crossorigin="anonymous" + >
-
@@ -210,40 +192,21 @@
{#each tags as tag} -
- -
+ + ({tags_count[tag.name]}) + + {/each}
-
- - + Filter +
@@ -296,13 +255,10 @@
Those are all the resources!
- + Back to Top + \ No newline at end of file diff --git a/src/routes/resources/ListItem.svelte b/src/routes/resources/ListItem.svelte index 22d5af9b..2dccecca 100644 --- a/src/routes/resources/ListItem.svelte +++ b/src/routes/resources/ListItem.svelte @@ -1,7 +1,7 @@ @@ -73,14 +73,9 @@

{#each resource.tags as tag} -
+ {tag.name} -
+ {/each}
diff --git a/src/routes/youtube/+page.svelte b/src/routes/youtube/+page.svelte index 870d1198..6c921431 100644 --- a/src/routes/youtube/+page.svelte +++ b/src/routes/youtube/+page.svelte @@ -7,7 +7,9 @@ } from "$lib/interfaces"; import YoutubeThumbnail from "./YoutubeThumbnail.svelte"; import Collapsible from "lib//components/Collapsible.svelte"; - + import TagWrapper from "$lib/components/TagWrapper.svelte"; + import Checkbox from "$lib/components/Checkbox.svelte"; + import ButtonLinks from "$lib/components/ButtonLinks.svelte"; export let data: PageData; const videoData = data.payload.videoData; @@ -15,6 +17,7 @@ let displayedVideos = videoData; let rerender: boolean = false; + let form: HTMLFormElement; function sortChannelBySubCount(a: YoutubeChannel, b: YoutubeChannel) { const ClimateTownChannelId = "UCuVLG9pThvBABcYCm7pkNkA"; @@ -42,6 +45,10 @@ channelArr.push({ channelId: channelInfo.channelId, active: true }); } + $: isFilterDirty = Object.values(channelArr).some( + (channel) => channel.active === true + ); + function filterResources( videoData: YoutubeVideo[], channelArr: YoutubeChannelFilterItem[] @@ -86,7 +93,7 @@ -
{ displayedVideos = filterResources(videoData, channelArr); }} @@ -96,34 +103,41 @@
{#each channelData as channelInfo, index} -
- -
+ ({semanticNumber(channelInfo.channelSubCount)}) + + {/each}
-
- + Filter +
diff --git a/tailwind.config.cjs b/tailwind.config.cjs index be283486..7fbf0b99 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -4,5 +4,6 @@ module.exports = { theme: { extend: {}, }, + darkMode: 'class', plugins: [], }; From 1190711d3af4d3fc8b937c6ead5925c31c5ad4a3 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Tue, 11 Jul 2023 03:15:50 +0000 Subject: [PATCH 02/11] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- src/app.css | 1 - src/lib/components/ButtonLinks.svelte | 123 +++++++++++++------------- src/lib/components/Checkbox.svelte | 41 +++++---- src/lib/components/TagWrapper.svelte | 28 +++--- src/routes/+layout.svelte | 3 +- src/routes/resources/+page.svelte | 98 +++++++++++++------- src/routes/resources/ListItem.svelte | 2 +- src/routes/youtube/+page.svelte | 19 ++-- tailwind.config.cjs | 2 +- 9 files changed, 180 insertions(+), 137 deletions(-) diff --git a/src/app.css b/src/app.css index e325832d..14d44909 100644 --- a/src/app.css +++ b/src/app.css @@ -32,7 +32,6 @@ details:not([open]) > summary svg { outline: auto; } - .tag-color { background-color: var(--tag-color) !important; } diff --git a/src/lib/components/ButtonLinks.svelte b/src/lib/components/ButtonLinks.svelte index 9cfc8b22..095bdc47 100644 --- a/src/lib/components/ButtonLinks.svelte +++ b/src/lib/components/ButtonLinks.svelte @@ -1,77 +1,76 @@ {#if link} - - - {#if newTab}in a new tab{/if} - + + + {#if newTab}in a new tab{/if} + {:else} - + {/if} - \ No newline at end of file + .btn-base { + @apply inline-flex items-center gap-1; + @apply border-2 p-2; + @apply transition-colors; + } + diff --git a/src/lib/components/Checkbox.svelte b/src/lib/components/Checkbox.svelte index 4c89fe27..bba56a75 100644 --- a/src/lib/components/Checkbox.svelte +++ b/src/lib/components/Checkbox.svelte @@ -1,29 +1,28 @@ diff --git a/src/lib/components/TagWrapper.svelte b/src/lib/components/TagWrapper.svelte index 1b166a84..c8b7240e 100644 --- a/src/lib/components/TagWrapper.svelte +++ b/src/lib/components/TagWrapper.svelte @@ -1,22 +1,22 @@
- +
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 21106304..3557d445 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -65,8 +65,7 @@ /> + crossorigin="anonymous">
{resources.length} resources and counting!!

@@ -205,8 +227,15 @@ {/each}
- - + Clear All - + -
Those are all the resources!
- - + Back to Top - \ No newline at end of file + diff --git a/src/routes/resources/ListItem.svelte b/src/routes/resources/ListItem.svelte index 2dccecca..551c420d 100644 --- a/src/routes/resources/ListItem.svelte +++ b/src/routes/resources/ListItem.svelte @@ -73,7 +73,7 @@

{#each resource.tags as tag} - + {tag.name} {/each} diff --git a/src/routes/youtube/+page.svelte b/src/routes/youtube/+page.svelte index 6c921431..83d98f50 100644 --- a/src/routes/youtube/+page.svelte +++ b/src/routes/youtube/+page.svelte @@ -93,7 +93,8 @@
-
{ displayedVideos = filterResources(videoData, channelArr); }} @@ -118,8 +119,15 @@ {/each}
- form.requestSubmit()} disabled={!isFilterDirty} version="filled" color="green"> - form.requestSubmit()} + disabled={!isFilterDirty} + version="filled" + color="green" + > + Clear All - + - Date: Thu, 13 Jul 2023 19:36:54 -0600 Subject: [PATCH 03/11] Componentize Filter Form - create component for dark mode toggle logic - create component for back to top scroll button (and add to youtube page) - create component for resource nav - create component for Filter Form - move functions into lib/utils - move scrolling constants to lib/constants - update tag wrapper component - replace forms in resource and youtube page with component --- src/lib/components/DarkModeControl.svelte | 32 +++ src/lib/components/FilterForm.svelte | 131 ++++++++++ src/lib/components/ResourceNav.svelte | 84 +++++++ src/lib/components/ScrollTopButton.svelte | 74 ++++++ src/lib/components/TagWrapper.svelte | 9 +- src/lib/constants/index.ts | 4 + src/lib/interfaces.ts | 15 +- src/lib/utils.ts | 69 +++++ src/routes/+layout.svelte | 43 +--- src/routes/resources/+page.svelte | 293 +++------------------- src/routes/resources/ListItem.svelte | 2 +- src/routes/youtube/+page.svelte | 184 ++++---------- 12 files changed, 499 insertions(+), 441 deletions(-) create mode 100644 src/lib/components/DarkModeControl.svelte create mode 100644 src/lib/components/FilterForm.svelte create mode 100644 src/lib/components/ResourceNav.svelte create mode 100644 src/lib/components/ScrollTopButton.svelte create mode 100644 src/lib/utils.ts diff --git a/src/lib/components/DarkModeControl.svelte b/src/lib/components/DarkModeControl.svelte new file mode 100644 index 00000000..4b3047b1 --- /dev/null +++ b/src/lib/components/DarkModeControl.svelte @@ -0,0 +1,32 @@ + + +Colour Scheme Mode + diff --git a/src/lib/components/FilterForm.svelte b/src/lib/components/FilterForm.svelte new file mode 100644 index 00000000..ad54b3ec --- /dev/null +++ b/src/lib/components/FilterForm.svelte @@ -0,0 +1,131 @@ + + +{#if filterOptions} + + +
+ {#each filterOptions as option} + + + + ({option.count}) + + + {/each} +
+
+ {#if showFilterLogic} + + {/if} + + + + + Clear All + + + + + + + Filter + +
+ + +{/if} diff --git a/src/lib/components/ResourceNav.svelte b/src/lib/components/ResourceNav.svelte new file mode 100644 index 00000000..ee7cee1f --- /dev/null +++ b/src/lib/components/ResourceNav.svelte @@ -0,0 +1,84 @@ + + + diff --git a/src/lib/components/ScrollTopButton.svelte b/src/lib/components/ScrollTopButton.svelte new file mode 100644 index 00000000..16f36be7 --- /dev/null +++ b/src/lib/components/ScrollTopButton.svelte @@ -0,0 +1,74 @@ + + + + + + + Back to Top + diff --git a/src/lib/components/TagWrapper.svelte b/src/lib/components/TagWrapper.svelte index c8b7240e..23ecb9ff 100644 --- a/src/lib/components/TagWrapper.svelte +++ b/src/lib/components/TagWrapper.svelte @@ -1,14 +1,13 @@ diff --git a/src/lib/constants/index.ts b/src/lib/constants/index.ts index 430ad068..45a3bf88 100644 --- a/src/lib/constants/index.ts +++ b/src/lib/constants/index.ts @@ -2,3 +2,7 @@ export const github_url: string = "https://github.com/ClimateTown/knowledge-hub"; export const climate_town_url: string = "https://www.climatetownproductions.com"; + +// Constants for infinite scroll/lazy loading +export const DEFAULT_DISPLAY_LIMIT = 18; +export const SCROLL_THRESHOLD = 200; diff --git a/src/lib/interfaces.ts b/src/lib/interfaces.ts index 60a6bd6d..0cf3bc27 100644 --- a/src/lib/interfaces.ts +++ b/src/lib/interfaces.ts @@ -21,14 +21,19 @@ export interface YoutubeChannel { channelSubCount: number; } -export interface YoutubeChannelFilterItem { - channelId: string; - active: boolean; -} - export interface YoutubeVideo { channelId: string; publishedAt: string; videoId: string; title: string; } + +export interface FilterOption extends Tag { + count: number | string; + active: boolean; + id?: string; +} + +export type FilterLogic = "and" | "or" + +export type CustomFilterEvent = {filter:{filterOptions: FilterOption[], filterLogic: FilterLogic }} \ No newline at end of file diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 00000000..ba5f266d --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,69 @@ +import type { YoutubeChannel } from "./interfaces"; + +/** + * format subcount for user display + * @param number + * @returns + */ +export const semanticNumber = (number: number): string => { + // number less than 1000 + if (number < 1000) { + return number.toString(); + } + // number between 1k and 1M + else if (number >= 1000 && number < 1000000) { + return `${(number / 1000).toFixed(0)}k`; + } + // number between 1M and 1B + else if (number >= 1000000 && number < 1_000000000) { + return `${(number / 1000000).toFixed(1)}M`; + } else { + return ">1B"; + } +} + +/** + * channels sorted by subcount, climate town always first + * @param a YoutubeChannel + * @param b YoutubeChannel + * @returns sort number + */ +export const sortChannelBySubCount = (a: YoutubeChannel, b: YoutubeChannel): number => { + const ClimateTownChannelId = "UCuVLG9pThvBABcYCm7pkNkA"; + + if (a.channelId === ClimateTownChannelId) { + return -1; + } + if (b.channelId === ClimateTownChannelId) { + return 1; + } + + // Normal sort + return b.channelSubCount - a.channelSubCount; +} + +/** + * Given a channel ID, return the channel data from the array + * @param channelData YoutubeChannel[] + * @param channelId string + * @returns found channel data + */ +export const getChannelData = (channelData: YoutubeChannel[], channelId: string): YoutubeChannel | undefined => { + return channelData.find((channel) => channel.channelId === channelId); +} + +/** + * compare sets and return a new set with any found matches + * @param set1 Set + * @param set2 Set + * @returns new Set() + */ +export const setIntersection = (set1: Set, set2: Set) => { + let intersection = new Set(); + for (let element of set2) { + if (set1.has(element)) { + intersection.add(element); + } + } + return intersection; + } \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 3557d445..fdfb1efb 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,34 +1,13 @@ @@ -72,10 +51,10 @@ class="body flex flex-col lg:flex-row w-full bg-zinc-50 dark:bg-zinc-800 dark:text-zinc-50" >
- + -
diff --git a/src/routes/resources/+page.svelte b/src/routes/resources/+page.svelte index 8815a457..557f0503 100644 --- a/src/routes/resources/+page.svelte +++ b/src/routes/resources/+page.svelte @@ -1,67 +1,50 @@ @@ -128,151 +69,8 @@

{resources.length} resources and counting!!

- - - - -
- - -
- {#each tags as tag} - - - - ({tags_count[tag.name]}) - - - {/each} -
-
- - - - - Clear All - - - - - - - Filter - -
-
- + +
    No resources here! {/each}
-
Those are all the resources!
+

Those are all the resources!

- - - - - Back to Top - + \ No newline at end of file diff --git a/src/routes/resources/ListItem.svelte b/src/routes/resources/ListItem.svelte index 551c420d..a08fab65 100644 --- a/src/routes/resources/ListItem.svelte +++ b/src/routes/resources/ListItem.svelte @@ -73,7 +73,7 @@

{#each resource.tags as tag} - + {tag.name} {/each} diff --git a/src/routes/youtube/+page.svelte b/src/routes/youtube/+page.svelte index 83d98f50..ddd7e7a1 100644 --- a/src/routes/youtube/+page.svelte +++ b/src/routes/youtube/+page.svelte @@ -1,88 +1,69 @@

Climate YouTube

@@ -91,90 +72,21 @@ YouTubers. The feed is updated daily at midnight and noon UTC, and showcases the latest long-form videos from each YouTuber.
- - -
{ - displayedVideos = filterResources(videoData, channelArr); - }} - class="p-4 space-y-4" - > - - -
- {#each channelData as channelInfo, index} - - - ({semanticNumber(channelInfo.channelSubCount)}) - - - {/each} -
-
- form.requestSubmit()} - disabled={!isFilterDirty} - version="filled" - color="green" - > - - - - Clear All - - - - - - - Filter - -
-
- + {#key rerender}
    - {#each displayedVideos as video} + {#each displayedVideos.slice(0, displayedVideoLimit) as video}
    2. {:else} @@ -182,3 +94,5 @@ {/each}
{/key} + + From a105109e269ffc8a3aac7795976ad8e3a063e2b3 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Fri, 14 Jul 2023 02:12:00 +0000 Subject: [PATCH 04/11] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- src/lib/components/FilterForm.svelte | 4 +- src/lib/components/TagWrapper.svelte | 2 +- src/lib/interfaces.ts | 12 ++-- src/lib/utils.ts | 82 +++++++++++++++------------- src/routes/+layout.svelte | 2 +- src/routes/resources/+page.svelte | 8 +-- 6 files changed, 59 insertions(+), 51 deletions(-) diff --git a/src/lib/components/FilterForm.svelte b/src/lib/components/FilterForm.svelte index ad54b3ec..e8b43c62 100644 --- a/src/lib/components/FilterForm.svelte +++ b/src/lib/components/FilterForm.svelte @@ -70,12 +70,12 @@ class="hidden peer" /> And Or import { lightColors, darkColors } from "$lib/resources"; - export let tagColor: string | undefined = undefined; + export let tagColor: string | undefined = undefined; export let extraClasses: string = ""; let lightTagColor: string | undefined, darkTagColor: string | undefined; diff --git a/src/lib/interfaces.ts b/src/lib/interfaces.ts index 0cf3bc27..a46edd7b 100644 --- a/src/lib/interfaces.ts +++ b/src/lib/interfaces.ts @@ -29,11 +29,13 @@ export interface YoutubeVideo { } export interface FilterOption extends Tag { - count: number | string; - active: boolean; - id?: string; + count: number | string; + active: boolean; + id?: string; } -export type FilterLogic = "and" | "or" +export type FilterLogic = "and" | "or"; -export type CustomFilterEvent = {filter:{filterOptions: FilterOption[], filterLogic: FilterLogic }} \ No newline at end of file +export type CustomFilterEvent = { + filter: { filterOptions: FilterOption[]; filterLogic: FilterLogic }; +}; diff --git a/src/lib/utils.ts b/src/lib/utils.ts index ba5f266d..0dc36b05 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -2,25 +2,25 @@ import type { YoutubeChannel } from "./interfaces"; /** * format subcount for user display - * @param number - * @returns + * @param number + * @returns */ export const semanticNumber = (number: number): string => { - // number less than 1000 - if (number < 1000) { - return number.toString(); - } - // number between 1k and 1M - else if (number >= 1000 && number < 1000000) { - return `${(number / 1000).toFixed(0)}k`; - } - // number between 1M and 1B - else if (number >= 1000000 && number < 1_000000000) { - return `${(number / 1000000).toFixed(1)}M`; - } else { - return ">1B"; - } -} + // number less than 1000 + if (number < 1000) { + return number.toString(); + } + // number between 1k and 1M + else if (number >= 1000 && number < 1000000) { + return `${(number / 1000).toFixed(0)}k`; + } + // number between 1M and 1B + else if (number >= 1000000 && number < 1_000000000) { + return `${(number / 1000000).toFixed(1)}M`; + } else { + return ">1B"; + } +}; /** * channels sorted by subcount, climate town always first @@ -28,19 +28,22 @@ export const semanticNumber = (number: number): string => { * @param b YoutubeChannel * @returns sort number */ -export const sortChannelBySubCount = (a: YoutubeChannel, b: YoutubeChannel): number => { - const ClimateTownChannelId = "UCuVLG9pThvBABcYCm7pkNkA"; +export const sortChannelBySubCount = ( + a: YoutubeChannel, + b: YoutubeChannel, +): number => { + const ClimateTownChannelId = "UCuVLG9pThvBABcYCm7pkNkA"; - if (a.channelId === ClimateTownChannelId) { - return -1; - } - if (b.channelId === ClimateTownChannelId) { - return 1; - } + if (a.channelId === ClimateTownChannelId) { + return -1; + } + if (b.channelId === ClimateTownChannelId) { + return 1; + } - // Normal sort - return b.channelSubCount - a.channelSubCount; -} + // Normal sort + return b.channelSubCount - a.channelSubCount; +}; /** * Given a channel ID, return the channel data from the array @@ -48,9 +51,12 @@ export const sortChannelBySubCount = (a: YoutubeChannel, b: YoutubeChannel): num * @param channelId string * @returns found channel data */ -export const getChannelData = (channelData: YoutubeChannel[], channelId: string): YoutubeChannel | undefined => { - return channelData.find((channel) => channel.channelId === channelId); -} +export const getChannelData = ( + channelData: YoutubeChannel[], + channelId: string, +): YoutubeChannel | undefined => { + return channelData.find((channel) => channel.channelId === channelId); +}; /** * compare sets and return a new set with any found matches @@ -59,11 +65,11 @@ export const getChannelData = (channelData: YoutubeChannel[], channelId: string) * @returns new Set() */ export const setIntersection = (set1: Set, set2: Set) => { - let intersection = new Set(); - for (let element of set2) { - if (set1.has(element)) { - intersection.add(element); - } + let intersection = new Set(); + for (let element of set2) { + if (set1.has(element)) { + intersection.add(element); } - return intersection; - } \ No newline at end of file + } + return intersection; +}; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index fdfb1efb..d6517636 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -7,7 +7,7 @@ onMount(() => twemoji.parse(document.body)); import "../app.css"; - + diff --git a/src/routes/resources/+page.svelte b/src/routes/resources/+page.svelte index 557f0503..d47b19d2 100644 --- a/src/routes/resources/+page.svelte +++ b/src/routes/resources/+page.svelte @@ -26,7 +26,7 @@ count: tags_count[tag.name], active: false } - if (tag.color) tagOption['color'] = tag.color + if (tag.color) tagOption['color'] = tag.color filterObject.push(tagOption) } @@ -44,7 +44,7 @@ // ! Need to refactor later to make more readable // For Intersection filterTags.size // For union, minCommonTags = 1 - let minCommonTags = filterLogic === "and" ? filterTags.size : 1; + let minCommonTags = filterLogic === "and" ? filterTags.size : 1; for (let resource of resources) { // Resource tags @@ -54,7 +54,7 @@ displayedResources.push(resource); } } - + // Force svelte re-render displayedResources = displayedResources; } @@ -83,4 +83,4 @@

Those are all the resources!

- \ No newline at end of file + From 7e173cd0023d442eff5b3fbab067392c7a407064 Mon Sep 17 00:00:00 2001 From: dmlbs Date: Thu, 13 Jul 2023 20:31:01 -0600 Subject: [PATCH 05/11] and or switch adjustments - lower the contrast on the un-selected item - add label updates for selected item on screen reader --- src/lib/components/FilterForm.svelte | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/lib/components/FilterForm.svelte b/src/lib/components/FilterForm.svelte index e8b43c62..4ec92163 100644 --- a/src/lib/components/FilterForm.svelte +++ b/src/lib/components/FilterForm.svelte @@ -59,7 +59,7 @@
{#if showFilterLogic} - From 888e2cb6b12ffdd046b0cf0d5804521fca5fcc18 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Fri, 14 Jul 2023 02:31:17 +0000 Subject: [PATCH 06/11] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- src/lib/components/FilterForm.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/FilterForm.svelte b/src/lib/components/FilterForm.svelte index 4ec92163..c76e7908 100644 --- a/src/lib/components/FilterForm.svelte +++ b/src/lib/components/FilterForm.svelte @@ -70,12 +70,12 @@ class="hidden peer" /> And Or Date: Sat, 22 Jul 2023 07:08:18 +0800 Subject: [PATCH 07/11] Add icons (color schemes and filtering modes) --- src/lib/components/DarkModeControl.svelte | 13 ++++++++++++- src/lib/components/FilterForm.svelte | 17 +++++++++++++---- 2 files changed, 25 insertions(+), 5 deletions(-) diff --git a/src/lib/components/DarkModeControl.svelte b/src/lib/components/DarkModeControl.svelte index 4b3047b1..1a325dcd 100644 --- a/src/lib/components/DarkModeControl.svelte +++ b/src/lib/components/DarkModeControl.svelte @@ -27,6 +27,17 @@ diff --git a/src/lib/components/FilterForm.svelte b/src/lib/components/FilterForm.svelte index c76e7908..0acef58e 100644 --- a/src/lib/components/FilterForm.svelte +++ b/src/lib/components/FilterForm.svelte @@ -70,15 +70,24 @@ class="hidden peer" /> And + + + + Or + + + + + {/if} From 3b7628f5cefcbc2653f939c01fa3f05c93afb0c3 Mon Sep 17 00:00:00 2001 From: Vecko Date: Sat, 22 Jul 2023 07:08:32 +0800 Subject: [PATCH 08/11] Add "no more videos" message to youtube page --- src/routes/youtube/+page.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/src/routes/youtube/+page.svelte b/src/routes/youtube/+page.svelte index ddd7e7a1..1dcd6f39 100644 --- a/src/routes/youtube/+page.svelte +++ b/src/routes/youtube/+page.svelte @@ -94,5 +94,6 @@ {/each} {/key} +

Those are all the videos!

From 769de31c9434f97133eda2d20ec2eb9c7389d584 Mon Sep 17 00:00:00 2001 From: Vecko Date: Sat, 22 Jul 2023 08:35:02 +0800 Subject: [PATCH 09/11] Convert if statement to mapping --- src/lib/components/ButtonLinks.svelte | 28 +++++++++++---------------- src/lib/components/TagWrapper.svelte | 3 ++- 2 files changed, 13 insertions(+), 18 deletions(-) diff --git a/src/lib/components/ButtonLinks.svelte b/src/lib/components/ButtonLinks.svelte index 095bdc47..0627c192 100644 --- a/src/lib/components/ButtonLinks.svelte +++ b/src/lib/components/ButtonLinks.svelte @@ -25,23 +25,17 @@ let designClasses: string = isCircle ? "rounded-full" : "rounded-lg"; - if (version === "hollow") { - if (color === "green") { - designClasses += - " border-green-500 dark:border-green-700 text-green-700 dark:text-green-500 hover:text-black hover:bg-green-500 dark:hover:text-white dark:hover:bg-green-900"; - } else if (color === "red") { - designClasses += - " border-red-500 dark:border-red-700 text-red-500 dark:text-red-400 hover:bg-red-500 hover:text-black dark:hover:text-white dark:hover:bg-red-900"; - } - } else { - if (color === "green") { - designClasses += - " bg-green-700 text-white dark:bg-green-900/75 border-green-700 hover:border-green-500 dark:hover:border-green-700 dark:border-green-900/75"; - } else if (color === "red") { - designClasses += - " bg-red-700 text-white dark:bg-red-900/75 border-red-700 hover:border-red-500 dark:hover:border-red-700 dark:border-red-900/75"; - } - } + const designClassesMap = { + hollow: { + green: "border-green-500 dark:border-green-700 text-green-700 dark:text-green-500 hover:text-black hover:bg-green-500 dark:hover:text-white dark:hover:bg-green-900", + red: "border-red-500 dark:border-red-700 text-red-500 dark:text-red-400 hover:bg-red-500 hover:text-black dark:hover:text-white dark:hover:bg-red-900", + }, + filled: { + green: "bg-green-700 text-white dark:bg-green-900/75 border-green-700 hover:border-green-500 dark:hover:border-green-700 dark:border-green-900/75", + red: "bg-red-700 text-white dark:bg-red-900/75 border-red-700 hover:border-red-500 dark:hover:border-red-700 dark:border-red-900/75", + }, + }; + designClasses = `${designClasses} ${designClassesMap[version][color]}`; {#if link} diff --git a/src/lib/components/TagWrapper.svelte b/src/lib/components/TagWrapper.svelte index f107fe18..33d8534b 100644 --- a/src/lib/components/TagWrapper.svelte +++ b/src/lib/components/TagWrapper.svelte @@ -3,7 +3,8 @@ export let tagColor: string | undefined = undefined; export let extraClasses: string = ""; - let lightTagColor: string | undefined, darkTagColor: string | undefined; + let lightTagColor: string | undefined; + let darkTagColor: string | undefined; if (tagColor !== undefined) { lightTagColor = lightColors[tagColor]; From a2bf55e37d1caeee5ba68588af78bdabfac58277 Mon Sep 17 00:00:00 2001 From: Vecko Date: Sat, 22 Jul 2023 09:29:13 +0800 Subject: [PATCH 10/11] Minor renaming and comments --- src/lib/components/FilterForm.svelte | 10 +++++----- src/lib/utils.ts | 2 +- src/routes/resources/+page.svelte | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/lib/components/FilterForm.svelte b/src/lib/components/FilterForm.svelte index 0acef58e..fca32e45 100644 --- a/src/lib/components/FilterForm.svelte +++ b/src/lib/components/FilterForm.svelte @@ -39,19 +39,19 @@ class="p-4 space-y-4" >
- {#each filterOptions as option} + {#each filterOptions as filterOption} ({option.count})({filterOption.count}) diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 0dc36b05..f4191832 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -3,7 +3,7 @@ import type { YoutubeChannel } from "./interfaces"; /** * format subcount for user display * @param number - * @returns + * @returns number as string */ export const semanticNumber = (number: number): string => { // number less than 1000 diff --git a/src/routes/resources/+page.svelte b/src/routes/resources/+page.svelte index d47b19d2..aba3f0e0 100644 --- a/src/routes/resources/+page.svelte +++ b/src/routes/resources/+page.svelte @@ -42,7 +42,7 @@ ); // ! Need to refactor later to make more readable - // For Intersection filterTags.size + // For intersection, minCommonTags = filterTags.size // For union, minCommonTags = 1 let minCommonTags = filterLogic === "and" ? filterTags.size : 1; From ce1b73139969fdde45034b130f9ebeef1613193a Mon Sep 17 00:00:00 2001 From: dmlbs Date: Mon, 24 Jul 2023 09:20:53 -0600 Subject: [PATCH 11/11] switch role, keyboard, screen reader change for icons --- src/lib/components/DarkModeControl.svelte | 18 ++++++++++-------- src/lib/components/FilterForm.svelte | 20 +++++++++++--------- 2 files changed, 21 insertions(+), 17 deletions(-) diff --git a/src/lib/components/DarkModeControl.svelte b/src/lib/components/DarkModeControl.svelte index 1a325dcd..55486a82 100644 --- a/src/lib/components/DarkModeControl.svelte +++ b/src/lib/components/DarkModeControl.svelte @@ -26,18 +26,20 @@ }; - diff --git a/src/lib/components/FilterForm.svelte b/src/lib/components/FilterForm.svelte index fca32e45..ff2c5d13 100644 --- a/src/lib/components/FilterForm.svelte +++ b/src/lib/components/FilterForm.svelte @@ -59,35 +59,37 @@
{#if showFilterLogic} - {/if}