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}
+
+{: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 @@
+
+
+
+
+
+ {name}
+
+
+
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"
+ >
-
+
Home 🌐 Main Website in a new tab
+
+
+ {darkMode ? "Light Mode" : "Dark Mode"}
+
+
diff --git a/src/routes/resources/+page.svelte b/src/routes/resources/+page.svelte
index e4ab806a..5ab6c64f 100644
--- a/src/routes/resources/+page.svelte
+++ b/src/routes/resources/+page.svelte
@@ -7,6 +7,9 @@
import type { Tag } from "$lib/interfaces";
import Collapsible from "$lib/components/Collapsible.svelte";
import ListItem from "./ListItem.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;
// Constants for infinite scroll/lazy loading
@@ -36,10 +39,6 @@
(tag_active) => tag_active === true
);
- let removeWhitespace = (str: string) => {
- return str.replace(/\W+/g, "");
- };
-
function clearAllFilters() {
for (const key in filterObject.tags) {
// set all filters to false
@@ -130,37 +129,25 @@
{resources.length} resources and counting!!
-
+
-
-
-
- Suggest resource
- in a new tab
-
+
+
+ Suggest resource
-
-
+
- Edit
- in a new tab
-
+ Edit
+
-
-
+
- Download resources
-
+ Download resources
+
@@ -210,40 +192,21 @@
{#each tags as tag}
-
-
-
-
- {tag.name}
- ({tags_count[tag.name]})
-
-
-
+
+ ({tags_count[tag.name]})
+
+
{/each}
-
-
-
+
+
-
- Clear All
-
-
- Clear All
+
+
+
+
-
- Filter
-
+ Filter
+
@@ -296,13 +255,10 @@
Those are all the resources!
-
-
+
- Back to Top
-
+ 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 @@
-
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}
-
+
{: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 @@
-
-
- {name}
-
-
+
+
+ {name}
+
+
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!!
-
-
+
+
+
+ Suggest resource
-
-
- Suggest resource
-
-
+
Edit
-
+
-
-
+
Download resources
-
+
@@ -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 @@
-
-
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 @@
+
+
+
+ {darkMode ? "Light" : "Dark"}
+ 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}
+
+
+
+{/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 @@
+
+
+
+
+
+
+
+ Suggest resource
+
+
+
+
+
+ Edit
+
+
+
+
+
+
+
+ Download resources
+
+
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!!
-
-
-
-
-
- Suggest resource
-
-
-
-
-
- Edit
-
-
-
-
-
-
-
- Download resources
-
-
-
-
-
-
-
+
+
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.
-
-
-
-
+
{#key rerender}
- {#each displayedVideos as video}
+ {#each displayedVideos.slice(0, displayedVideoLimit) as video}
{: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}
-
@@ -69,15 +69,15 @@
type="checkbox"
class="hidden peer"
/>
- And
- Or
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 @@
- {darkMode ? "Light" : "Dark"}
+ {#if darkMode}
+
+
+
+
+
+ {:else}
+
+
+
+
+ {/if}
Colour Scheme Mode
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 @@
};
-
+
{#if darkMode}
+
+
+
+
+ Light
+ {:else}
-
+
- {:else}
-
-
-
-
+ Dark
{/if}
- Colour Scheme Mode
+ Colour Scheme Mode
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 @@