From 201da2daf47a6fa921fa3f0fc39d737c713325e4 Mon Sep 17 00:00:00 2001 From: WarningImHack3r <43064022+WarningImHack3r@users.noreply.github.com> Date: Fri, 23 Feb 2024 15:56:57 +0100 Subject: [PATCH] New badges, updated components and code - Add Latest and Maintenance badges - Add a tooltip for explaining what badges mean - Update shadcn components for faster dev mode - Code improvements --- package.json | 2 + pnpm-lock.yaml | 28 +-- .../ui/accordion/accordion-content.svelte | 2 +- .../ui/accordion/accordion-trigger.svelte | 2 +- src/lib/components/ui/accordion/index.ts | 2 +- src/lib/components/ui/badge/index.ts | 8 +- src/lib/components/ui/button/index.ts | 12 +- .../components/ui/checkbox/checkbox.svelte | 7 +- src/lib/components/ui/checkbox/index.ts | 2 +- .../dropdown-menu-checkbox-item.svelte | 4 +- .../dropdown-menu/dropdown-menu-item.svelte | 2 +- .../dropdown-menu-radio-item.svelte | 4 +- .../dropdown-menu-sub-content.svelte | 2 +- .../dropdown-menu-sub-trigger.svelte | 2 +- src/lib/components/ui/dropdown-menu/index.ts | 2 +- src/lib/components/ui/label/index.ts | 2 +- src/lib/components/ui/tabs/index.ts | 2 +- src/lib/components/ui/toggle-group/index.ts | 2 +- .../ui/toggle-group/toggle-group-item.svelte | 2 +- .../ui/toggle-group/toggle-group.svelte | 2 +- src/lib/components/ui/toggle/index.ts | 12 +- src/lib/components/ui/tooltip/index.ts | 15 ++ .../ui/tooltip/tooltip-content.svelte | 28 +++ src/routes/+page.svelte | 160 ++++++++++++++++-- 24 files changed, 243 insertions(+), 63 deletions(-) create mode 100644 src/lib/components/ui/tooltip/index.ts create mode 100644 src/lib/components/ui/tooltip/tooltip-content.svelte diff --git a/package.json b/package.json index afd8838..83010be 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@tailwindcss/typography": "^0.5.10", "@total-typescript/ts-reset": "^0.5.1", "@types/eslint": "^8.56.2", + "@types/semver": "^7.5.7", "@typescript-eslint/eslint-plugin": "^6.21.0", "@typescript-eslint/parser": "^6.21.0", "@vercel/speed-insights": "^1.0.9", @@ -35,6 +36,7 @@ "prettier": "^3.2.5", "prettier-plugin-svelte": "^3.1.2", "prettier-plugin-tailwindcss": "^0.5.11", + "semver": "^7.6.0", "svelte": "^4.2.10", "svelte-check": "^3.6.4", "svelte-exmarkdown": "^3.0.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 912806d..6554d88 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,6 +23,9 @@ devDependencies: '@types/eslint': specifier: ^8.56.2 version: 8.56.2 + '@types/semver': + specifier: ^7.5.7 + version: 7.5.7 '@typescript-eslint/eslint-plugin': specifier: ^6.21.0 version: 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.56.0)(typescript@5.3.3) @@ -74,6 +77,9 @@ devDependencies: prettier-plugin-tailwindcss: specifier: ^0.5.11 version: 0.5.11(prettier-plugin-svelte@3.1.2)(prettier@3.2.5) + semver: + specifier: ^7.6.0 + version: 7.6.0 svelte: specifier: ^4.2.10 version: 4.2.10 @@ -472,7 +478,7 @@ packages: nopt: 5.0.0 npmlog: 5.0.1 rimraf: 3.0.2 - semver: 7.5.4 + semver: 7.6.0 tar: 6.2.0 transitivePeerDependencies: - encoding @@ -1038,8 +1044,8 @@ packages: resolution: {integrity: sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==} dev: true - /@types/semver@7.5.6: - resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==} + /@types/semver@7.5.7: + resolution: {integrity: sha512-/wdoPq1QqkSj9/QOeKkFquEuPzQbHTWAMPH/PaUMB+JuR31lXhlWXRZ52IpfDYVlDOUBvX09uBrPwxGT1hjNBg==} dev: true /@types/unist@3.0.2: @@ -1068,7 +1074,7 @@ packages: graphemer: 1.4.0 ignore: 5.3.0 natural-compare: 1.4.0 - semver: 7.5.4 + semver: 7.6.0 ts-api-utils: 1.0.3(typescript@5.3.3) typescript: 5.3.3 transitivePeerDependencies: @@ -1144,7 +1150,7 @@ packages: globby: 11.1.0 is-glob: 4.0.3 minimatch: 9.0.3 - semver: 7.5.4 + semver: 7.6.0 ts-api-utils: 1.0.3(typescript@5.3.3) typescript: 5.3.3 transitivePeerDependencies: @@ -1159,12 +1165,12 @@ packages: dependencies: '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0) '@types/json-schema': 7.0.15 - '@types/semver': 7.5.6 + '@types/semver': 7.5.7 '@typescript-eslint/scope-manager': 6.21.0 '@typescript-eslint/types': 6.21.0 '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.3.3) eslint: 8.56.0 - semver: 7.5.4 + semver: 7.6.0 transitivePeerDependencies: - supports-color - typescript @@ -1776,7 +1782,7 @@ packages: postcss-load-config: 3.1.4(postcss@8.4.35) postcss-safe-parser: 6.0.0(postcss@8.4.35) postcss-selector-parser: 6.0.15 - semver: 7.5.4 + semver: 7.6.0 svelte: 4.2.10 svelte-eslint-parser: 0.33.1(svelte@4.2.10) transitivePeerDependencies: @@ -2256,7 +2262,7 @@ packages: lodash.isstring: 4.0.1 lodash.once: 4.1.1 ms: 2.1.2 - semver: 7.5.4 + semver: 7.6.0 dev: true /jwa@1.4.1: @@ -3460,8 +3466,8 @@ packages: hasBin: true dev: true - /semver@7.5.4: - resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==} + /semver@7.6.0: + resolution: {integrity: sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==} engines: {node: '>=10'} hasBin: true dependencies: diff --git a/src/lib/components/ui/accordion/accordion-content.svelte b/src/lib/components/ui/accordion/accordion-content.svelte index 381cd43..c5fc2bb 100644 --- a/src/lib/components/ui/accordion/accordion-content.svelte +++ b/src/lib/components/ui/accordion/accordion-content.svelte @@ -8,7 +8,7 @@ let className: $$Props["class"] = undefined; export let transition: $$Props["transition"] = slide; export let transitionConfig: $$Props["transitionConfig"] = { - duration: 200 + duration: 200, }; export { className as class }; diff --git a/src/lib/components/ui/accordion/accordion-trigger.svelte b/src/lib/components/ui/accordion/accordion-trigger.svelte index c8c23d5..f0e99dd 100644 --- a/src/lib/components/ui/accordion/accordion-trigger.svelte +++ b/src/lib/components/ui/accordion/accordion-trigger.svelte @@ -1,6 +1,6 @@ diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte index 2dc139b..2990eb4 100644 --- a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte +++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte @@ -1,7 +1,7 @@ diff --git a/src/lib/components/ui/toggle/index.ts b/src/lib/components/ui/toggle/index.ts index 5567d08..9b717d4 100644 --- a/src/lib/components/ui/toggle/index.ts +++ b/src/lib/components/ui/toggle/index.ts @@ -7,18 +7,18 @@ export const toggleVariants = tv({ variant: { default: "bg-transparent", outline: - "bg-transparent border border-input hover:bg-accent hover:text-accent-foreground" + "bg-transparent border border-input hover:bg-accent hover:text-accent-foreground", }, size: { default: "h-10 px-3", sm: "h-9 px-2.5", - lg: "h-11 px-5" - } + lg: "h-11 px-5", + }, }, defaultVariants: { variant: "default", - size: "default" - } + size: "default", + }, }); export type Variant = VariantProps["variant"]; @@ -27,5 +27,5 @@ export type Size = VariantProps["size"]; export { Root, // - Root as Toggle + Root as Toggle, }; diff --git a/src/lib/components/ui/tooltip/index.ts b/src/lib/components/ui/tooltip/index.ts new file mode 100644 index 0000000..7d0444d --- /dev/null +++ b/src/lib/components/ui/tooltip/index.ts @@ -0,0 +1,15 @@ +import { Tooltip as TooltipPrimitive } from "bits-ui"; +import Content from "./tooltip-content.svelte"; + +const Root = TooltipPrimitive.Root; +const Trigger = TooltipPrimitive.Trigger; + +export { + Root, + Trigger, + Content, + // + Root as Tooltip, + Content as TooltipContent, + Trigger as TooltipTrigger, +}; diff --git a/src/lib/components/ui/tooltip/tooltip-content.svelte b/src/lib/components/ui/tooltip/tooltip-content.svelte new file mode 100644 index 0000000..5c2c1eb --- /dev/null +++ b/src/lib/components/ui/tooltip/tooltip-content.svelte @@ -0,0 +1,28 @@ + + + + + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 62891f7..03260a3 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -4,6 +4,7 @@ import Loader2 from "lucide-svelte/icons/loader-2"; import { MetaTags } from "svelte-meta-tags"; import Markdown from "svelte-exmarkdown"; + import semver from "semver"; import { gfmPlugin } from "svelte-exmarkdown/gfm"; import { localStorageStore } from "$lib/localStorageStore"; import { cn } from "$lib/utils"; @@ -14,13 +15,14 @@ import * as Accordion from "$lib/components/ui/accordion"; import * as Tabs from "$lib/components/ui/tabs"; import * as ToggleGroup from "$lib/components/ui/toggle-group"; + import * as Tooltip from "$lib/components/ui/tooltip"; import ListElementRenderer from "./renderers/ListElementRenderer.svelte"; // Repositories to fetch releases from const repos = { svelte: "Svelte", kit: "SvelteKit" - }; + } as const; let currentRepo: keyof typeof repos = "svelte"; // Svelte setting @@ -150,12 +152,38 @@ {#each Object.entries(repos) as [repo, name]} - {#await octokit.rest.repos.listReleases({ owner: "sveltejs", repo: repo, per_page: 50 })} + {#await octokit.rest.repos.listReleases({ owner: "sveltejs", repo, per_page: 50 })}

Loading...

{:then { data }} + {@const latestRelease = data + .filter(release => release.tag_name.includes(`${repo}@`) && !release.prerelease) + .sort((a, b) => + semver.rcompare( + a.tag_name.substring(a.tag_name.lastIndexOf("@") + 1), + b.tag_name.substring(b.tag_name.lastIndexOf("@") + 1) + ) + )[0]} + {@const earliestOfLatestMajor = data + .filter( + release => + release.tag_name.includes(`${repo}@`) && + !release.prerelease && + (latestRelease + ? semver.major( + latestRelease.tag_name.substring(latestRelease.tag_name.lastIndexOf("@") + 1) + ) === + semver.major(release.tag_name.substring(release.tag_name.lastIndexOf("@") + 1)) + : true) + ) + .sort((a, b) => + semver.compare( + a.tag_name.substring(a.tag_name.lastIndexOf("@") + 1), + b.tag_name.substring(b.tag_name.lastIndexOf("@") + 1) + ) + )[0]} new Date(earliestOfLatestMajor.created_at).getTime() + : false} @@ -196,13 +240,55 @@ > {release.name} - {#if isMajorRelease} - Major - {:else if release.prerelease} - - Prerelease - - {/if} +
+ {#if isLatestRelease} + + + + Latest + + + + This is the latest stable release of {repos[repo]} + + + {/if} + {#if isMajorRelease} + + + Major + + + Major update (e.g.: 1.0.0, 2.0.0, 3.0.0...) + + + {:else if release.prerelease} + + + + Prerelease + + + + This version is a alpha or a beta, unstable version of {repos[repo]} + + + {:else if isMaintenanceRelease} + + + + Maintenance + + + + An update bringing bug fixes and minor improvements to an older major + version + + + {/if} +
new Date().getTime() - 1000 * 60 * 60 * 24 * 7 @@ -213,13 +299,55 @@ {toRelativeDateString(releaseDate)} - {#if isMajorRelease} - - {:else if release.prerelease} - - {/if} +