diff --git a/package-lock.json b/package-lock.json index 556e61c..7124297 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,7 +5,6 @@ "requires": true, "packages": { "": { - "name": "sveltesociety.dev", "version": "0.0.1", "dependencies": { "svelte-highlight": "^3.2.0" @@ -30,6 +29,7 @@ "prettier-plugin-svelte": "^2.2.0", "svelte": "^3.38.2", "svelte-preprocess": "^4.7.4", + "svelte-select": "^4.4.0", "tailwindcss": "^2.2.4", "ts-jest": "^27.0.5", "tslib": "^2.0.0", @@ -6499,6 +6499,12 @@ } } }, + "node_modules/svelte-select": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-4.4.0.tgz", + "integrity": "sha512-iLE9dPT/2ITtwC4z4YfuOuKGuHxJKQ1Ezmt7IpsZhYdxGMDJlS2qqRjWzMPHlgpAH4ANp+TxzxIMNJ5TkFdPSA==", + "dev": true + }, "node_modules/svgo": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.4.0.tgz", @@ -12033,6 +12039,12 @@ "strip-indent": "^3.0.0" } }, + "svelte-select": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-4.4.0.tgz", + "integrity": "sha512-iLE9dPT/2ITtwC4z4YfuOuKGuHxJKQ1Ezmt7IpsZhYdxGMDJlS2qqRjWzMPHlgpAH4ANp+TxzxIMNJ5TkFdPSA==", + "dev": true + }, "svgo": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.4.0.tgz", diff --git a/package.json b/package.json index 2fda7c4..faf8330 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "prettier-plugin-svelte": "^2.2.0", "svelte": "^3.38.2", "svelte-preprocess": "^4.7.4", + "svelte-select": "^4.4.0", "tailwindcss": "^2.2.4", "ts-jest": "^27.0.5", "tslib": "^2.0.0", diff --git a/src/lib/components/Select.svelte b/src/lib/components/Select.svelte new file mode 100644 index 0000000..10d1d09 --- /dev/null +++ b/src/lib/components/Select.svelte @@ -0,0 +1,71 @@ + + +
+ {#if label} + {label} + {/if} + +
+ + diff --git a/src/lib/utils/sort.ts b/src/lib/utils/sort.ts index 3cf5dac..4773bf7 100644 --- a/src/lib/utils/sort.ts +++ b/src/lib/utils/sort.ts @@ -1,24 +1,45 @@ type SortableEntity = { - title: string, - addedOn?: string, - stars?: number, -} + title: string; + addedOn?: string; + stars?: number; +}; export const compare = (sorting: string) => { - return (sortableEntityA : SortableEntity, sortableEntityB : SortableEntity) : number => { - switch (sorting) { - case "added_desc": - return new Date(sortableEntityB.addedOn || "").getTime() - new Date(sortableEntityA.addedOn || "").getTime(); - case "added_asc": - return new Date(sortableEntityA.addedOn || "").getTime() - new Date(sortableEntityB.addedOn || "").getTime(); - case "name_asc": - return sortableEntityA.title.toLowerCase().localeCompare(sortableEntityB.title.toLowerCase()); - case "name_desc": - return sortableEntityB.title.toLowerCase().localeCompare(sortableEntityA.title.toLowerCase()); - case "stars_desc": - return (sortableEntityB.stars || 0) - (sortableEntityA.stars || 0); - case "stars_asc": - return (sortableEntityA.stars || 0) - (sortableEntityB.stars || 0); - } - } -} \ No newline at end of file + return (sortableEntityA: SortableEntity, sortableEntityB: SortableEntity): number => { + switch (sorting) { + case 'added_desc': + return ( + new Date(sortableEntityB.addedOn || '').getTime() - + new Date(sortableEntityA.addedOn || '').getTime() + ); + case 'added_asc': + return ( + new Date(sortableEntityA.addedOn || '').getTime() - + new Date(sortableEntityB.addedOn || '').getTime() + ); + case 'name_asc': + return sortableEntityA.title + .toLowerCase() + .localeCompare(sortableEntityB.title.toLowerCase()); + case 'name_desc': + return sortableEntityB.title + .toLowerCase() + .localeCompare(sortableEntityA.title.toLowerCase()); + case 'stars_desc': + return (sortableEntityB.stars || 0) - (sortableEntityA.stars || 0); + case 'stars_asc': + return (sortableEntityA.stars || 0) - (sortableEntityB.stars || 0); + } + }; +}; + +export const sortMap = { + added_desc: 'Added Desc', + added_asc: 'Added Asc', + name_asc: 'Name Asc', + name_desc: 'Name Desc', + stars_desc: 'Stars Desc', + stars_asc: 'Stars Asc' +}; + +export const selectSortItems = Object.entries(sortMap).map(([value, label]) => ({ label, value })); diff --git a/src/routes/components/index.svelte b/src/routes/components/index.svelte index 4f4fad8..f74b50c 100644 --- a/src/routes/components/index.svelte +++ b/src/routes/components/index.svelte @@ -1,224 +1,246 @@ - - Components - Svelte Society + Components - Svelte Society
-

Components

-
-
- - - - - -
+

Components

+
+
+ + - {dataToDisplay.length} result{#if dataToDisplay.length !== 1}s{/if} -
-
- {#each categories as category} - - {#each dataToDisplay.filter(d => d.category === category) as data} - - {/each} - - {/each} + + + +
+ + + {dataToDisplay.length} result{#if dataToDisplay.length !== 1}s{/if} +
+
+ {#each categories as category} + + {#each dataToDisplay.filter((d) => d.category === category) as data} + + {/each} + + {/each}
+ + diff --git a/src/routes/templates/index.svelte b/src/routes/templates/index.svelte index f32e7f7..e2b2f77 100644 --- a/src/routes/templates/index.svelte +++ b/src/routes/templates/index.svelte @@ -3,20 +3,32 @@ import List from '$lib/components/ComponentIndex/CardList.svelte'; import Button from '$lib/components/ComponentIndex/ArrowButton.svelte'; import components from './templates.json'; - import { compare } from '$lib/utils/sort'; + import { compare, selectSortItems } from '$lib/utils/sort'; + import Select from '$lib/components/Select.svelte'; let searchValue; - let searchTag; + const tags = Array.from(new Set(components.map((item) => item.tags).flat())); - const allCategories = Array.from(new Set(components.map((item) => item.category).flat())); + const tagItems = tags.map((t) => ({ label: t, value: t })); let filterTag = []; + let selectedTags = null; + + const allCategories = Array.from(new Set(components.map((item) => item.category).flat())); + const categoryItems = [ + { label: 'all', value: null }, + ...allCategories.map((cat) => ({ label: cat, value: cat })) + ]; + let selectedCategory = null; let filterCategory = null; - let sorting = 'stars_desc'; + + let selectedSorting = { value: 'stars_desc', label: 'Stars Desc' }; + $: sorting = selectedSorting?.value || 'stars_desc'; const intersection = (array1, array2) => { return array1.filter((item) => array2.includes(item)); }; + $: filterCategory = selectedCategory?.value || null; $: dataToDisplay = components .filter((component) => { if (!searchValue && filterTag.length === 0 && filterCategory === null) return true; @@ -34,9 +46,11 @@ } return true; - }).sort(compare(sorting)); - $: tagSearchResult = searchTag ? tags.filter((item) => item.includes(searchTag)) : tags; + }) + .sort(compare(sorting)); + $: categories = Array.from(new Set(dataToDisplay.map((item) => item.category))); + $: filterTag = selectedTags?.map((obj) => obj.value) || []; @@ -47,62 +61,24 @@

Templates

- - + + Last Added first - -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • - -
    diff --git a/src/routes/tooling/index.svelte b/src/routes/tooling/index.svelte index fd19d9f..a79298e 100644 --- a/src/routes/tooling/index.svelte +++ b/src/routes/tooling/index.svelte @@ -3,16 +3,26 @@ import List from '$lib/components/ComponentIndex/CardList.svelte'; import Button from '$lib/components/ComponentIndex/ArrowButton.svelte'; import tools from './tools.json'; - import { compare } from '$lib/utils/sort'; + import Select from '$lib/components/Select.svelte'; + import { compare, selectSortItems } from '$lib/utils/sort'; + + let searchValue; const tags = Array.from(new Set(tools.map((item) => item.tags).flat())); - const allCategories = Array.from(new Set(tools.map((item) => item.category).flat())); + const tagItems = tags.map((t) => ({ label: t, value: t })); + let filterTag = []; + let selectedTags = null; - let searchValue, - searchTag, - filterTag = [], - filterCategory = null, - sorting = 'stars_desc'; + const allCategories = Array.from(new Set(tools.map((item) => item.category).flat())); + const categoryItems = [ + { label: 'all', value: null }, + ...allCategories.map((cat) => ({ label: cat, value: cat })) + ]; + let selectedCategory = null; + let filterCategory = null; + + let selectedSorting = { value: 'stars_desc', label: 'Stars Desc' }; + $: sorting = selectedSorting?.value || 'stars_desc'; const intersection = (array1, array2) => { return array1.filter((item) => array2.includes(item)); @@ -37,8 +47,9 @@ return true; }) .sort(compare(sorting)); - $: tagSearchResult = searchTag ? tags.filter((item) => item.includes(searchTag)) : tags; + $: categories = Array.from(new Set(dataToDisplay.map((item) => item.category))); + $: filterTag = selectedTags?.map((obj) => obj.value) || []; @@ -49,62 +60,23 @@

    Tooling

    - - + + Last Added first - -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • - -
    diff --git a/svelte.config.js b/svelte.config.js index e4fd4e0..0fdcc58 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -8,10 +8,11 @@ const extensions = [`.svelte`, '.md', `.mdx`, '.svx']; const config = { preprocess: [ preprocess({ - "postcss": true + postcss: true }), mdsvex({ - extensions: extensions, + // Breaks svelte-select when .svelte extension is included + extensions: extensions.filter((ext) => ext !== '.svelte'), layout: { eventPage: './src/lib/layouts/EventPage.svelte', recipe: './src/lib/layouts/Recipe.svelte', @@ -28,7 +29,7 @@ const config = { optimizeDeps: { // workaround Vite issue to fix highlighting on cheatsheet // https://github.com/metonym/svelte-highlight/issues/158 - include: ["highlight.js/lib/core"], + include: ['highlight.js/lib/core'] } } }