LukeParke/sveltesociety.dev
1
0
Fork 0
mirror of https://github.com/LukeHagar/sveltesociety.dev.git synced 2025-12-07 20:57:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Improve types and remove unused code (#550)

Browse Source
This commit is contained in:
Lachlan Collins
2023-12-24 14:38:09 +11:00
committed by GitHub
parent 22dceeea88
commit dd7f0c9e93
11 changed files with 50 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/lib/SearchableJson.svelte
View File

@@ -9,12 +9,19 @@
import Select from '$lib/components/Select.svelte';
import { packageManager } from '$stores/packageManager';
export let data;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export let data: any[];
export let displayTitle = '';
export let displayTitleSingular = '';
export let submittingType = '';
let searchValue;
const sortableFields = [
{ identifier: 'stars', title: 'Stars', ascending: false },
{ identifier: 'title', title: 'Name', ascending: true },
{ identifier: 'date', title: 'Date', ascending: false }
];
let searchValue: string;
const dataDefault = { category: '' };
$: dataToDisplay = data.map((line) => ({ ...dataDefault, ...line }));
@@ -30,11 +37,7 @@
<Search
data={dataToDisplay}
bind:query={searchValue}
sortableFields={[
{ identifier: 'stars', title: 'Stars', ascending: false },
{ identifier: 'title', title: 'Name', ascending: true },
{ identifier: 'date', title: 'Date', ascending: false }
]}
{sortableFields}
searchableFields={['title', 'description']}
facetsConfig={[
{
@@ -79,14 +82,20 @@
</section>
<section slot="items">
{#each categories as category}
<CardList
title={category.label || 'Unclassified'}
id={slugify(category.label) || 'unclassified'}
>
<CardList title={category.label} id={slugify(category.label)}>
{#each dataToDisplay.filter((d) => d.category === category.value || (!categories
.map((v) => v.value)
.includes(d.category) && category.value === '')) as cardData}
<ComponentCard {...cardData} />
.includes(d.category) && category.value === '')) as entry (entry.title)}
<ComponentCard
title={entry.title}
description={entry.description}
repository={entry.repository}
stars={entry.stars}
tags={entry.tags}
date={entry.date}
npm={entry.npm}
version={entry.version}
/>
{/each}
</CardList>
{/each}

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

@@ -4,12 +4,10 @@
import { packageManager as manager } from '$stores/packageManager';
import { relativeDate } from '$utils/relativeDate';
export let active = false;
export let title = '';
export let description = '';
export let tags = [];
export let stars;
export let url = '';
export let title: string;
export let description: string;
export let tags: string[];
export let stars: string;
export let npm = '';
export let repository = undefined;
export let date = undefined;
@@ -18,9 +16,7 @@
let clipboardCopy = false;
const copy = () => {
copyToClipboard(`${packageManagers[$manager]} ${cleanupNpm(npm)}`).then(
() => (clipboardCopy = false)
);
copyToClipboard(`${packageManagers[$manager]} ${npm}`).then(() => (clipboardCopy = false));
clipboardCopy = true;
};
@@ -29,28 +25,23 @@
pnpm: 'pnpm add',
yarn: 'yarn add'
};
const cleanupNpm = (npm) => {
return npm.replace('https://www.npmjs.com/package/', '');
};
</script>
<div class="card" class:active id="component-{title}">
<div class="card" id="component-{title}">
<div class="card__top">
<div>
<h3>
<a href="#component-{title}">#</a>
{#if url || repository}<a href={url || repository}>{title}</a>{:else}<span>{title}</span
>{/if}
{#if repository}<a href={repository}>{title}</a>{:else}<span>{title}</span>{/if}
</h3>
</div>
<div>
{#if (repository || url || '').includes('github')}
<a class="repo" title="Go to the source code" href={repository || url}
{#if repository.includes('github')}
<a class="repo" title="Go to the source code" href={repository}
><img style="display:inline" src="/images/github_logo.svg" alt="github logo" /></a
>
{:else if (repository || url || '').includes('gitlab')}
<a class="repo" title="Go to the source code" href={repository || url}
{:else if repository.includes('gitlab')}
<a class="repo" title="Go to the source code" href={repository}
><img style="display:inline" src="/images/gitlab_logo.svg" alt="gitlab logo" /></a
>
<!-- {:else} -->
@@ -62,7 +53,7 @@
<Tag
click={() => copy()}
variant="copy"
title={clipboardCopy ? 'copied!' : `${packageManagers[$manager]} ${cleanupNpm(npm)}`}
title={clipboardCopy ? 'copied!' : `${packageManagers[$manager]} ${npm}`}
/>
{/if}
<p class="flex-grow">{description}</p>
@@ -97,7 +88,6 @@
word-break: none;
font-size: var(--font-300);
}
.active,
.card:hover {
background: #e8f3fe;
}

5
src/lib/components/ComponentIndex/CardList.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
export let title;
export let id = `category-${encodeURI(title)}`;
export let title: string;
export let id = `category-${title}`;
</script>
<div class="list">
@@ -17,7 +17,6 @@
font-weight: 600;
line-height: 150%;
margin-bottom: 1rem;
@apply text-4xl;
}
.grid {
display: grid;

7
src/lib/components/EventListElement/index.svelte
View File

@@ -1,8 +1,9 @@
<script lang="ts">
import Icon from '$lib/components/Icon/index.svelte';
export let title,
date,
url = '';
export let title: string;
export let date: string;
export let url = '';
const MILLIS_IN_A_DAY = 24 * 60 * 60 * 1000;
$: isPast = Date.now() - new Date(date).getTime() > MILLIS_IN_A_DAY;

4
src/lib/components/Icon/index.svelte
View File

@@ -1,7 +1,8 @@
<script lang="ts">
export let name;
export let name: string;
export let width = '24px';
export let height = '24px';
let icons = [
{
box: '24 24',
@@ -142,6 +143,7 @@
/>`
}
];
let displayIcon = icons.find((e) => e.name === name);
if (!displayIcon) {
throw Error(`Could not find icon with name ${name}`);

23
src/lib/components/_SocialLinks/Link.svelte
View File

@@ -1,23 +0,0 @@
<script lang="ts">
export let path, image, alt;
</script>
<li class="flex-0 lg:flex-auto flex flex-wrap justify-center font-bold">
<a
href={path}
class="text-basics-900 text-lg no-underline uppercase text-center border-b-4 border-transparent hover:border-b-primary focus:border-b-primary"
><img src={image} {alt} /><slot /></a
>
</li>
<style>
img {
width: 128px;
}
a {
font-size: var(--font-100);
transition: border-bottom 0.2s;
letter-spacing: 0.05rem;
font-weight: lighter;
}
</style>

3
src/lib/components/layout/Header.svelte
View File

@@ -1,11 +1,12 @@
<script lang="ts">
import Link from './Link.svelte';
import { page } from '$app/stores';
const linksLeft = [
['/packages', 'packages'],
['/templates', 'templates']
];
const linksRight = [
['/resources', 'resources'],
['/recipes', 'recipes'],

3
src/lib/components/recipes/CategoryTree.svelte
View File

@@ -1,7 +1,8 @@
<script lang="ts">
import { page } from '$app/stores';
import type { Recipe } from '$lib/stores/recipes';
export let nodes;
export let nodes: Recipe[];
</script>
<ul>

2
src/lib/stores/recipes.ts
View File

@@ -1,7 +1,7 @@
import type { Writable } from 'svelte/store';
import { writable } from 'svelte/store';
type Recipe = {
export type Recipe = {
title: string;
layout: string;
icon?: string;

2
src/routes/packages/packages.json
View File

@@ -2468,7 +2468,7 @@
"title": "Code Entry component for SvelteKit",
"repository": "https://github.com/bonosoft/sveltekit-codeentry",
"description": "Allows user to enter pin or numeric codes for example onetime passwords",
"npm": "@bonosoft/sveltekit-qrcode",
"npm": "@bonosoft/sveltekit-codeentry",
"category": "Forms & User Input",
"tags": ["auth"]
},

3
src/routes/recipes/+page.svelte
View File

@@ -1,7 +1,6 @@
<script lang="ts">
import CategoryTree from '$lib/components/recipes/CategoryTree.svelte';
import Icon from '$lib/components/Icon/index.svelte';
import { page } from '$app/stores';
import { categories } from '$lib/stores/recipes';
import Seo from '$lib/components/Seo.svelte';
</script>
@@ -39,7 +38,7 @@
<a href={category.path} class="list-title">{category.title}</a>
</h3>
<div class="category-list">
<CategoryTree currentPath={$page.url.pathname} nodes={category.children} />
<CategoryTree nodes={category.children} />
</div>
</section>
{/if}