From 83c81f7a08f820ba398e9bceedf86243bea4467d Mon Sep 17 00:00:00 2001 From: MacFJA Date: Sun, 7 Jul 2024 17:45:20 +0200 Subject: [PATCH] Move component to sites/www + use existing card as base --- packages/service/package.json | 5 +- .../service/src/components/content.svelte | 204 ------------------ packages/service/src/components/guild.svelte | 39 ---- .../service/src/components/package.svelte | 38 ---- packages/service/src/components/recipe.svelte | 23 -- packages/service/src/components/video.svelte | 27 --- packages/service/src/services/abstract.ts | 1 + .../service/src/services/article-service.ts | 1 + .../service/src/services/guild-service.ts | 1 + .../service/src/services/package-service.ts | 8 +- .../src/services/repository-service.ts | 1 + .../service/src/services/video-service.ts | 2 + pnpm-lock.yaml | 40 +--- sites/www/package.json | 8 +- sites/www/src/lib/ui/ContentCard.svelte | 12 +- sites/www/src/lib/ui/cards/GuildCard.svelte | 27 +++ sites/www/src/lib/ui/cards/PackageCard.svelte | 24 +++ sites/www/src/lib/ui/cards/RecipeCard.svelte | 11 + sites/www/src/lib/ui/cards/VideoCard.svelte | 16 ++ sites/www/src/routes/(app)/+layout.svelte | 4 +- sites/www/src/routes/(app)/+page.svelte | 35 ++- 21 files changed, 136 insertions(+), 391 deletions(-) delete mode 100644 packages/service/src/components/content.svelte delete mode 100644 packages/service/src/components/guild.svelte delete mode 100644 packages/service/src/components/package.svelte delete mode 100644 packages/service/src/components/recipe.svelte delete mode 100644 packages/service/src/components/video.svelte create mode 100644 sites/www/src/lib/ui/cards/GuildCard.svelte create mode 100644 sites/www/src/lib/ui/cards/PackageCard.svelte create mode 100644 sites/www/src/lib/ui/cards/RecipeCard.svelte create mode 100644 sites/www/src/lib/ui/cards/VideoCard.svelte diff --git a/packages/service/package.json b/packages/service/package.json index 224c668ff..0064d9046 100644 --- a/packages/service/package.json +++ b/packages/service/package.json @@ -24,9 +24,6 @@ "typescript": "^5.5.2" }, "dependencies": { - "date-fns": "^3.6.0", - "lru-cache": "^10.3.0", - "svelte": "^4.2.18", - "svelte-markdown": "^0.4.1" + "lru-cache": "^10.3.0" } } diff --git a/packages/service/src/components/content.svelte b/packages/service/src/components/content.svelte deleted file mode 100644 index 0ef27bb87..000000000 --- a/packages/service/src/components/content.svelte +++ /dev/null @@ -1,204 +0,0 @@ - - -
-
-
- {type} - posted by {author} - {#if lastUpdate}• - {formatDistanceToNow(lastUpdate ?? (new Date().toISOString()))}{/if} - • - {views} - - - - -
- {#if connected} - - {/if} -
-

{name}

- -
-
- {#if tags.length} -
    - {#each tags as tag} -
  • #️ {tag}
    • - {/each} -
- {/if} - {#if lastUpdate} - - {/if} -
-
- - diff --git a/packages/service/src/components/guild.svelte b/packages/service/src/components/guild.svelte deleted file mode 100644 index 8ede97dcc..000000000 --- a/packages/service/src/components/guild.svelte +++ /dev/null @@ -1,39 +0,0 @@ - - - - {#if cover} -
- -
- {/if} - {members} Members - - - diff --git a/packages/service/src/components/package.svelte b/packages/service/src/components/package.svelte deleted file mode 100644 index 1cd372f38..000000000 --- a/packages/service/src/components/package.svelte +++ /dev/null @@ -1,38 +0,0 @@ - - - - {#if cover} -
- -
- {/if} - - - diff --git a/packages/service/src/components/recipe.svelte b/packages/service/src/components/recipe.svelte deleted file mode 100644 index 678286239..000000000 --- a/packages/service/src/components/recipe.svelte +++ /dev/null @@ -1,23 +0,0 @@ - - - - -
- Read more... - diff --git a/packages/service/src/components/video.svelte b/packages/service/src/components/video.svelte deleted file mode 100644 index 0f6388224..000000000 --- a/packages/service/src/components/video.svelte +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - diff --git a/packages/service/src/services/abstract.ts b/packages/service/src/services/abstract.ts index 1fe104319..5a3f5a76b 100644 --- a/packages/service/src/services/abstract.ts +++ b/packages/service/src/services/abstract.ts @@ -10,6 +10,7 @@ export type ContentData = { lastUpdate?: string; keywords: Array; description: string; + url: string }; export interface ServiceInterface { diff --git a/packages/service/src/services/article-service.ts b/packages/service/src/services/article-service.ts index e2a0f8632..4858ac7e2 100644 --- a/packages/service/src/services/article-service.ts +++ b/packages/service/src/services/article-service.ts @@ -20,6 +20,7 @@ export class RecipeService implements ServiceInterface<{ preview: string }> { type: RECIPE_TYPE, name: "Reactivity", author: "John Doe", + url: '/post/reactivity', description: "The reactivity system introduced in Svelte 3 has made it easier than ever to trigger updates to the DOM. Despite this, there are a few simple rules that you must always follow. This guide explains how Svelte’s reactivity system works, what you can and cannot do, as well a few pitfalls to avoid.", keywords: ["reactivity", "dom"], diff --git a/packages/service/src/services/guild-service.ts b/packages/service/src/services/guild-service.ts index 23eeddf30..e27806e4b 100644 --- a/packages/service/src/services/guild-service.ts +++ b/packages/service/src/services/guild-service.ts @@ -28,6 +28,7 @@ export class GuildService implements ServiceInterface<{ cover: string; members: author: "guild.host", keywords: [], members: guild.networkMembers.totalCount, + url: `https://guild.host/${guild.slugId}`, cover: guild.backgroundPhoto ? `https://ik.imagekit.io/guild/prod/tr:w-600,dpr-1/${guild.backgroundPhoto?.rowId}.${guild.backgroundPhoto?.contentType.toLowerCase()}` : "", diff --git a/packages/service/src/services/package-service.ts b/packages/service/src/services/package-service.ts index 3e0e03d9d..054150cd5 100644 --- a/packages/service/src/services/package-service.ts +++ b/packages/service/src/services/package-service.ts @@ -4,23 +4,23 @@ import { RepositoryService, TYPE as repoType } from "./repository-service.js"; export const TYPE = "package" as const; -export class PackageService implements ServiceInterface<{ cover: string; npmUrl: string }> { +export class PackageService implements ServiceInterface<{ cover: string}> { canHandle(metadata: Partial): Promise { return Promise.resolve(metadata.type === TYPE); } @Memorize(longTermCache) - async getInformation(metadata: ServiceMetadata): Promise<{ cover: string; npmUrl: string } & ContentData> { + async getInformation(metadata: ServiceMetadata): Promise<{ cover: string } & ContentData> { return fetch(`https://registry.npmjs.org/${metadata.identifier}`) .then((response) => response.json() as Promise) .then((response) => { - const base: ContentData & { npmUrl: string } = { + const base: ContentData = { name: response.name, description: response.description, lastUpdate: response.time.modified, keywords: response.keywords, author: response.author?.name ?? response.maintainers?.map((item) => item.name).join(", "), - npmUrl: `https://www.npmjs.com/package/${metadata.identifier}`, + url: `https://www.npmjs.com/package/${metadata.identifier}`, type: TYPE, }; if (response.repository?.url !== undefined) { diff --git a/packages/service/src/services/repository-service.ts b/packages/service/src/services/repository-service.ts index a1ffd56af..d73ada73e 100644 --- a/packages/service/src/services/repository-service.ts +++ b/packages/service/src/services/repository-service.ts @@ -46,6 +46,7 @@ class GithubRepositoryService implements ServiceInterface<{ cover: string }> { keywords: response.topics, author: response.owner.login, cover: `https://opengraph.githubassets.com/HEAD/${matches[1]}/${matches[2]}`, + url: `https://github.com/${matches[1]}/${matches[2]}` })); } private async getStats(user: string, repo: string): Promise { diff --git a/packages/service/src/services/video-service.ts b/packages/service/src/services/video-service.ts index ec90dae21..0086c6e6c 100644 --- a/packages/service/src/services/video-service.ts +++ b/packages/service/src/services/video-service.ts @@ -49,6 +49,7 @@ class YoutubeStrategy implements ServiceInterface<{ embed: string }> { keywords: response.videoDetails.keywords, lastUpdate: response.microformat.playerMicroformatRenderer.publishDate, name: response.videoDetails.title, + url: `https://www.youtube.com/watch?v=${response.videoDetails.videoId}` })); } } @@ -86,6 +87,7 @@ class VimeoStrategy implements ServiceInterface<{ embed: string }> { keywords: [], lastUpdate: response.upload_date, name: response.title, + url: `https://vimeo.com/${metadata.identifier}` })); } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9019f1cd3..8a43c75e0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,18 +10,9 @@ importers: packages/service: dependencies: - date-fns: - specifier: ^3.6.0 - version: 3.6.0 lru-cache: specifier: ^10.3.0 version: 10.3.1 - svelte: - specifier: ^4.2.18 - version: 4.2.18 - svelte-markdown: - specifier: ^0.4.1 - version: 0.4.1(svelte@4.2.18) devDependencies: '@biomejs/biome': specifier: ^1.8.2 @@ -188,6 +179,9 @@ importers: bits-ui: specifier: ^0.21.11 version: 0.21.12(svelte@5.0.0-next.175) + date-fns: + specifier: ^3.6.0 + version: 3.6.0 dotenv: specifier: ^16.4.5 version: 16.4.5 @@ -230,6 +224,9 @@ importers: svelte-check: specifier: ^3.8.4 version: 3.8.4(postcss-load-config@5.1.0(jiti@1.21.6)(postcss@8.4.39)(tsx@4.16.2))(postcss@8.4.39)(pug@3.0.3)(svelte@5.0.0-next.175) + svelte-markdown: + specifier: ^0.4.1 + version: 0.4.1(svelte@5.0.0-next.175) svelte-sonner: specifier: ^0.3.25 version: 0.3.25(svelte@5.0.0-next.175) @@ -4035,10 +4032,6 @@ packages: resolution: {integrity: sha512-LpLqY2Jr7cRxkrTc796/AaaoMLF/1ax7cto8Ot76wrvKQhrPmZ0JgajiWPmg9mTSDqO16SSLiD17r9MsvAPTmw==} engines: {node: '>=16'} - svelte@4.2.18: - resolution: {integrity: sha512-d0FdzYIiAePqRJEb90WlJDkjUEx42xhivxN8muUBmfZnP+tzUgz12DJ2hRJi8sIHCME7jeK1PTMgKPSfTd8JrA==} - engines: {node: '>=16'} - svelte@5.0.0-next.175: resolution: {integrity: sha512-fWMI0O3PiKFWvTohAEJRkd6RymR3uo7PO8GrNfyx57KDvmmK1KYRzAdHjx+RsKl8oZhfWeJHiot6iebgY8lJng==} engines: {node: '>=18'} @@ -8033,11 +8026,11 @@ snapshots: dependencies: svelte: 5.0.0-next.175 - svelte-markdown@0.4.1(svelte@4.2.18): + svelte-markdown@0.4.1(svelte@5.0.0-next.175): dependencies: '@types/marked': 5.0.2 marked: 5.1.2 - svelte: 4.2.18 + svelte: 5.0.0-next.175 svelte-parse-markup@0.1.5(svelte@5.0.0-next.175): dependencies: @@ -8084,23 +8077,6 @@ snapshots: magic-string: 0.30.10 periscopic: 3.1.0 - svelte@4.2.18: - dependencies: - '@ampproject/remapping': 2.3.0 - '@jridgewell/sourcemap-codec': 1.4.15 - '@jridgewell/trace-mapping': 0.3.25 - '@types/estree': 1.0.5 - acorn: 8.12.1 - aria-query: 5.3.0 - axobject-query: 4.0.0 - code-red: 1.0.4 - css-tree: 2.3.1 - estree-walker: 3.0.3 - is-reference: 3.0.2 - locate-character: 3.0.0 - magic-string: 0.30.10 - periscopic: 3.1.0 - svelte@5.0.0-next.175: dependencies: '@ampproject/remapping': 2.3.0 diff --git a/sites/www/package.json b/sites/www/package.json index 18c5aeb94..7dca4ad50 100644 --- a/sites/www/package.json +++ b/sites/www/package.json @@ -33,8 +33,11 @@ "@typescript-eslint/eslint-plugin": "^6.21.0", "@typescript-eslint/parser": "^6.21.0", "autoprefixer": "^10.4.19", + "bits-ui": "^0.21.11", + "date-fns": "^3.6.0", "dotenv": "^16.4.5", "drizzle-kit": "^0.22.8", + "drizzle-orm": "^0.31.2", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-svelte": "^2.41.0", @@ -46,6 +49,8 @@ "svead": "^0.0.4", "svelte": "5.0.0-next.175", "svelte-check": "^3.8.4", + "svelte-markdown": "^0.4.1", + "svelte-sonner": "^0.3.25", "sveltekit-superforms": "^2.15.2", "sveltesociety.dev-service": "workspace:*", "tailwindcss": "^3.4.4", @@ -55,10 +60,7 @@ "uuid": "^9.0.1", "vite": "^5.3.3", "vite-plugin-kit-routes": "^0.2.12", - "drizzle-orm": "^0.31.2", "vitest": "^1.6.0", - "bits-ui": "^0.21.11", - "svelte-sonner": "^0.3.25", "zod": "^3.23.8" }, "type": "module" diff --git a/sites/www/src/lib/ui/ContentCard.svelte b/sites/www/src/lib/ui/ContentCard.svelte index 08fb0204d..54bd4da74 100644 --- a/sites/www/src/lib/ui/ContentCard.svelte +++ b/sites/www/src/lib/ui/ContentCard.svelte @@ -1,6 +1,8 @@
@@ -8,7 +10,7 @@
{type}  by {author} • {time} •  + >by {author} •{#if time} {formatDistanceToNow(time)} •{/if}  {views} @@ -58,8 +60,8 @@
-

{title}

-

{description}

+

{title}

+

{@render children()} @@ -68,6 +70,6 @@
-
{time}
+ {#if time}
 {formatDistanceToNow(time)}
{/if} diff --git a/sites/www/src/lib/ui/cards/GuildCard.svelte b/sites/www/src/lib/ui/cards/GuildCard.svelte new file mode 100644 index 000000000..f1e956bec --- /dev/null +++ b/sites/www/src/lib/ui/cards/GuildCard.svelte @@ -0,0 +1,27 @@ + + + + {#if cover} +
+ +
+ {/if} +
+ {members} Members +
+ + + diff --git a/sites/www/src/lib/ui/cards/PackageCard.svelte b/sites/www/src/lib/ui/cards/PackageCard.svelte new file mode 100644 index 000000000..eec2b595b --- /dev/null +++ b/sites/www/src/lib/ui/cards/PackageCard.svelte @@ -0,0 +1,24 @@ + + + + {#if cover} +
+ +
+ {/if} + + + diff --git a/sites/www/src/lib/ui/cards/RecipeCard.svelte b/sites/www/src/lib/ui/cards/RecipeCard.svelte new file mode 100644 index 000000000..3b3305129 --- /dev/null +++ b/sites/www/src/lib/ui/cards/RecipeCard.svelte @@ -0,0 +1,11 @@ + + + + +
+ Read more... + diff --git a/sites/www/src/lib/ui/cards/VideoCard.svelte b/sites/www/src/lib/ui/cards/VideoCard.svelte new file mode 100644 index 000000000..cf2071fee --- /dev/null +++ b/sites/www/src/lib/ui/cards/VideoCard.svelte @@ -0,0 +1,16 @@ + + + + + + + diff --git a/sites/www/src/routes/(app)/+layout.svelte b/sites/www/src/routes/(app)/+layout.svelte index 2ee955d3a..09526671f 100644 --- a/sites/www/src/routes/(app)/+layout.svelte +++ b/sites/www/src/routes/(app)/+layout.svelte @@ -7,7 +7,7 @@
-
+
-
+
{@render children()}
diff --git a/sites/www/src/routes/(app)/+page.svelte b/sites/www/src/routes/(app)/+page.svelte index 8216b4fdf..c5479fa25 100644 --- a/sites/www/src/routes/(app)/+page.svelte +++ b/sites/www/src/routes/(app)/+page.svelte @@ -1,11 +1,11 @@