feat: Update tags for packages.json (#560)

* Rename time-and-date, merge interactions

* Merge maps

* Rework forms, inputs, validation

* Merge display-components, rename documentation

* Reviewing tags carefully

* More progress

* Rename fonts-and-icons

* Rename components-and-libraries

* Make new data-fetching

* Update submitting page

* Remove currentCategories
This commit is contained in:
Lachlan Collins
2023-12-30 21:20:47 +11:00
committed by GitHub
parent 11d5ed5f1c
commit 2e657d8db2
3 changed files with 353 additions and 445 deletions

View File

@@ -3,54 +3,46 @@ import { packageNameRegex } from 'package-name-regex';
const PACKAGES_TAGS = /** @type {const} */ ([ const PACKAGES_TAGS = /** @type {const} */ ([
'animations', 'animations',
'async-data',
'async-loading',
'audio-and-video', 'audio-and-video',
'auth', 'auth',
'bundler-plugins', 'bundler-plugins',
'charts', 'charts',
'cli-tools', 'cli-tools',
'components-and-libraries',
'css-and-layout', 'css-and-layout',
'data-fetching',
'data-visualisation', 'data-visualisation',
'debugging', 'date-and-time',
'design-pattern', 'design-pattern',
'design-system', 'design-system',
'developer-experience', 'developer-experience',
'development-and-documentation', 'documentation',
'display-components', 'forms-and-input',
'fonts-and-icons', 'headless',
'forms-and-validation', 'icons-and-fonts',
'graphql',
'images', 'images',
'in-page-navigation', 'in-page-navigation',
'inputs-and-widgets',
'integrations', 'integrations',
'interactions',
'internationalization', 'internationalization',
'intersection-observer', 'intersection-observer',
'jsx',
'layout-and-structure', 'layout-and-structure',
'linting-and-formatting', 'linting-and-formatting',
'maps',
'markdown', 'markdown',
'modals', 'modals',
'multimedia', 'multimedia',
'native',
'network-events', 'network-events',
'notifications', 'notifications',
'offline-and-online-detection', 'official',
'preprocessors', 'preprocessors',
'routers', 'routers',
'seo',
'ssr', 'ssr',
'stores-and-state', 'stores-and-state',
'sveltekit-adapters', 'sveltekit-adapters',
'testing', 'testing',
'third-party-services',
'time-and-date',
'typescript', 'typescript',
'ui-components',
'user-interaction', 'user-interaction',
'viewport' 'validation'
]); ]);
export const packagesSchema = z.array( export const packagesSchema = z.array(

View File

@@ -15,12 +15,10 @@
const data = { const data = {
package: { package: {
tags: extractUnique(packages, 'tags'), tags: extractUnique(packages, 'tags')
categories: [...extractUnique(packages, 'category').filter((cat) => cat.label !== '')]
}, },
template: { template: {
tags: extractUnique(templates, 'tags'), tags: extractUnique(templates, 'tags')
categories: extractUnique(templates, 'category')
} }
}; };
@@ -35,7 +33,6 @@
let url = 'https://svelte-lorem-ipsum.dev'; let url = 'https://svelte-lorem-ipsum.dev';
let description = 'A dummy text generator that does not exist'; let description = 'A dummy text generator that does not exist';
let npm = 'svelte-lorem-ipsum'; let npm = 'svelte-lorem-ipsum';
let category;
let tags; let tags;
let repository = 'https://github.com/sveltejs/svelte-lorem-ipsum'; let repository = 'https://github.com/sveltejs/svelte-lorem-ipsum';
@@ -46,21 +43,18 @@
repository: repository ? repository : undefined, repository: repository ? repository : undefined,
description, description,
npm: npm ? npm : undefined, npm: npm ? npm : undefined,
category: category?.value,
tags: tags?.map((tag) => tag.value) tags: tags?.map((tag) => tag.value)
}; };
$: currentTags = data[type.value].tags; $: currentTags = data[type.value].tags;
$: currentCategories = data[type.value].categories;
onMount(() => { onMount(() => {
const typeQuery = new URLSearchParams(location.search).get('type'); const typeQuery = new URLSearchParams(location.search).get('type');
type = types.find((t) => t.value == typeQuery) || types[0]; type = types.find((t) => t.value == typeQuery) || types[0];
}); });
async function clearCategoryAndTags() { async function clearTags() {
await tick(); await tick();
category = null;
tags = null; tags = null;
} }
</script> </script>
@@ -86,7 +80,7 @@
isClearable={false} isClearable={false}
showIndicator showIndicator
bind:value={type} bind:value={type}
on:select={clearCategoryAndTags} on:select={clearTags}
/> />
<span class="input-helper">The type of snippet to generate</span> <span class="input-helper">The type of snippet to generate</span>
</div> </div>
@@ -128,23 +122,10 @@
<span class="input-helper">The npm name of the package</span> <span class="input-helper">The npm name of the package</span>
</div> </div>
</div> </div>
<div class="input-wrapper">
<label for="category">Category:</label>
<div>
<SvelteSelect
id="category"
items={currentCategories}
isClearable={false}
showIndicator
bind:value={category}
/>
<span class="input-helper">The category of the package</span>
</div>
</div>
<div class="input-wrapper"> <div class="input-wrapper">
<label for="tags" class="required">Tags:</label> <label for="tags" class="required">Tags:</label>
<div> <div>
<SvelteSelect id="category" items={currentTags} showIndicator isMulti bind:value={tags} /> <SvelteSelect id="tags" items={currentTags} showIndicator isMulti bind:value={tags} />
<span class="input-helper">A list of tags</span> <span class="input-helper">A list of tags</span>
</div> </div>
</div> </div>

File diff suppressed because it is too large Load Diff