LukeParke/sveltesociety.dev
1
0
Fork 0
mirror of https://github.com/LukeHagar/sveltesociety.dev.git synced 2025-12-06 04:21:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor clipboard copy + extration of data

Browse Source
This commit is contained in:
MacFJA
2021-09-11 16:55:12 +02:00
parent 4fe8bb03d9
commit 52100f2774
7 changed files with 55 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/lib/components/ComponentIndex/Card.svelte
View File

@@ -1,5 +1,7 @@
<script>
import Tag from '../Tag.svelte';
import { copyToClipboard } from '$lib/utils/clipboard';
export let active = false;
export let title = '';
export let description = '';
@@ -11,14 +13,12 @@
export let manager = 'npm';
let clipboardCopy = false;
const copyToClipboard = (text) => {
navigator.clipboard
.writeText(text)
.then(() => {
clipboardCopy = true;
setTimeout(() => (clipboardCopy = false), 1000);
})
.catch(() => alert('Clipboard copy Permission denied'));
const copy = () => {
copyToClipboard(`${packageManagers[manager]}l ${cleanupNpm(npm)}`).then(
() => (clipboardCopy = false)
);
clipboardCopy = true;
};
const packageManagers = {
@@ -36,7 +36,7 @@
<h3>
<a href="#component-{encodeURI(title)}">#</a> <a href={url}>{title}</a>
{#if npm}<Tag
click={() => copyToClipboard(`${packageManagers[manager]}l ${cleanupNpm(npm)}`)}
click={() => copy()}
variant="copy"
title={clipboardCopy ? 'copied!' : `${packageManagers[manager]} ${cleanupNpm(npm)}`}
/>{/if}

7
src/lib/utils/clipboard.ts Normal file
View File

@@ -0,0 +1,7 @@
export const copyToClipboard = (text: string): Promise<boolean> =>
new Promise<boolean>((resolve) =>
navigator.clipboard
.writeText(text)
.then(() => setTimeout(() => resolve(true), 1000))
.catch(() => alert('Clipboard copy Permission denied'))
);

17
src/lib/utils/extractUnique.ts Normal file
View File

@@ -0,0 +1,17 @@
export const extractUnique = (
source: Array<Record<string, unknown>>,
field: string
): Array<Record<'label' | 'value', unknown>> => {
const extracted = Array.from(new Set(source.map((item) => item[field]).flat()));
return extracted
.map((value) => ({ label: value, value }))
.sort((a, b) => {
if (typeof a.value === 'string' && typeof b.value === 'string') {
return a.value.toLowerCase().localeCompare(b.value.toLowerCase());
}
if (typeof a.value === 'number' && typeof b.value === 'number') {
return a.value - b.value;
}
return 0;
});
};

9
src/routes/cheatsheet/_CheatSheetCard.svelte
View File

@@ -2,6 +2,7 @@
import '$styles/highlight.css';
import { HighlightSvelte } from 'svelte-highlight';
import { fly } from 'svelte/transition';
import { copyToClipboard } from '$lib/utils/clipboard';
export let title = '';
export let content = '';
@@ -9,12 +10,8 @@
export let repl = '';
let isCopied = false;
function copy() {
const element = document.getElementById(title).firstChild;
if (navigator.clipboard) {
navigator.clipboard.writeText(element.innerText);
isCopied = true;
setTimeout(() => (isCopied = false), 1500);
}
copyToClipboard(content).then(() => (isCopied = false));
isCopied = true;
}
</script>

13
src/routes/components/index.svelte
View File

@@ -7,16 +7,15 @@
import Button from '$components/ComponentIndex/ArrowButton.svelte';
import components from './components.json';
import { compare, selectSortItems } from '$lib/utils/sort';
import { extractUnique } from '$lib/utils/extractUnique';
import Select from '$components/Select.svelte';
let searchValue;
const tags = Array.from(new Set(components.map((item) => item.tags).flat()));
const tagItems = tags.map((t) => ({ label: t, value: t }));
const tagItems = extractUnique(components, 'tags');
let filterTag = [];
let selectedTags = null;
const allCategories = Array.from(new Set(components.map((item) => item.category).flat()));
const categoryItems = [
{ label: 'All', value: null },
...allCategories.filter((cat) => cat !== '').map((cat) => ({ label: cat, value: cat }))
...extractUnique(components, 'category').filter((cat) => cat.value !== '')
];
let selectedCategory = null;
let filterCategory = null;
@@ -45,7 +44,7 @@
return true;
})
.sort(compare(sorting));
$: categories = Array.from(new Set(dataToDisplay.map((item) => item.category)));
$: categories = extractUnique(dataToDisplay, 'category');
$: filterTag = selectedTags?.map((obj) => obj.value) || [];
</script>
@@ -101,8 +100,8 @@
</section>
<section slot="items">
{#each categories as category}
<List title={category || 'Unclassified'}>
{#each dataToDisplay.filter((d) => d.category === category) as data}
<List title={category.label || 'Unclassified'}>
{#each dataToDisplay.filter((d) => d.category === category.value) as data}
<ComponentCard {...data} manager={$packageManager} />
{/each}
</List>

16
src/routes/templates/index.svelte
View File

@@ -3,21 +3,17 @@
import List from '$lib/components/ComponentIndex/CardList.svelte';
import components from './templates.json';
import { compare, selectSortItems } from '$lib/utils/sort';
import { extractUnique } from '$lib/utils/extractUnique';
import Select from '$lib/components/Select.svelte';
import SearchLayout from '$lib/layouts/SearchLayout.svelte';
let searchValue;
const tags = Array.from(new Set(components.map((item) => item.tags).flat()));
const tagItems = tags.map((t) => ({ label: t, value: t }));
const tagItems = extractUnique(components, 'tags');
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 }))
];
const categoryItems = [{ label: 'all', value: null }, ...extractUnique(components, 'category')];
let selectedCategory = null;
let filterCategory = null;
@@ -49,7 +45,7 @@
})
.sort(compare(sorting));
$: categories = Array.from(new Set(dataToDisplay.map((item) => item.category)));
$: categories = extractUnique(dataToDisplay, 'category');
$: filterTag = selectedTags?.map((obj) => obj.value) || [];
</script>
@@ -92,8 +88,8 @@
</section>
<section slot="items">
{#each categories as category}
<List title={category || 'Unclassified'}>
{#each dataToDisplay.filter((d) => d.category === category) as data}
<List title={category.label || 'Unclassified'}>
{#each dataToDisplay.filter((d) => d.category === category.value) as data}
<ComponentCard {...data} />
{/each}
</List>

17
src/routes/tooling/index.svelte
View File

@@ -4,20 +4,17 @@
import SearchLayout from '$layouts/SearchLayout.svelte';
import tools from './tools.json';
import Select from '$lib/components/Select.svelte';
import { extractUnique } from '$lib/utils/extractUnique';
import { compare, selectSortItems } from '$lib/utils/sort';
import components from '../templates/templates.json';
let searchValue;
const tags = Array.from(new Set(tools.map((item) => item.tags).flat()));
const tagItems = tags.map((t) => ({ label: t, value: t }));
const tagItems = extractUnique(tools, 'tags');
let filterTag = [];
let selectedTags = null;
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 }))
];
const categoryItems = [{ label: 'all', value: null }, ...extractUnique(components, 'category')];
let selectedCategory = null;
let filterCategory = null;
@@ -48,7 +45,7 @@
})
.sort(compare(sorting));
$: categories = Array.from(new Set(dataToDisplay.map((item) => item.category)));
$: categories = extractUnique(dataToDisplay, 'category');
$: filterTag = selectedTags?.map((obj) => obj.value) || [];
</script>
@@ -90,8 +87,8 @@
</section>
<section slot="items">
{#each categories as category}
<List title={category || 'Unclassified'}>
{#each dataToDisplay.filter((d) => d.category === category) as data}
<List title={category.label || 'Unclassified'}>
{#each dataToDisplay.filter((d) => d.category === category.value) as data}
<ComponentCard {...data} />
{/each}
</List>