From 89a11904c677aa2b245d2dbe52b34e882754f7ff Mon Sep 17 00:00:00 2001 From: The Gentlehacker Date: Tue, 20 Feb 2024 15:32:15 +1000 Subject: [PATCH 1/4] Show Package name when displaying PackageCard Display each package's `.name` property on `PackageCard`, in small, `[]` wrapped text, just after the title. This helps users determine which packages they've already installed or used. Resolves #35. --- components/PackageCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/PackageCard.tsx b/components/PackageCard.tsx index e2a49054c..d91a38c1c 100644 --- a/components/PackageCard.tsx +++ b/components/PackageCard.tsx @@ -1,4 +1,4 @@ -import { Card, Heading, majorScale, Pane, Text } from "evergreen-ui"; +import { Card, Heading, majorScale, Pane, Text, Small } from "evergreen-ui"; import { Package } from "../api/domain"; import { isFeatured } from "../api/packageFeatured"; import { TagBadgeGroup } from "./Tags/TagBadgeGroup"; @@ -39,7 +39,7 @@ export const PackageCard = ( > - {props.package.title} + {props.package.title} [{props.package.name}] {props.hideFeaturedBadge || (isFeatured(props.package) && )} From a722a48115ae290cbd422eb104c5920839f18d76 Mon Sep 17 00:00:00 2001 From: The Gentlehacker Date: Wed, 21 Feb 2024 17:32:36 +1000 Subject: [PATCH 2/4] Make package name more stylish; Consistent The Package name can be displayed in a way that's a bit more stylish, and should be displayed in multiple places. Moved the package name from `PackageCard.tsx` to its own component, `PackageNamer.tsx`. Applied `code` styling and `green600` because it's a nice accent. --- components/PackageCard.tsx | 12 +++++++++--- components/PackageNamer.tsx | 17 +++++++++++++++++ components/index.ts | 1 + pages/[packageName]/v/[version].tsx | 20 ++++++++++++++++---- 4 files changed, 43 insertions(+), 7 deletions(-) create mode 100644 components/PackageNamer.tsx diff --git a/components/PackageCard.tsx b/components/PackageCard.tsx index d91a38c1c..56e5b8213 100644 --- a/components/PackageCard.tsx +++ b/components/PackageCard.tsx @@ -4,10 +4,12 @@ import { isFeatured } from "../api/packageFeatured"; import { TagBadgeGroup } from "./Tags/TagBadgeGroup"; import { FeaturedBadge } from "./featured"; import { Stack } from "./layout"; +import { PackageNamer } from "./PackageNamer"; import { record } from "fp-ts"; import { pipe } from "fp-ts/function"; import { NextjsLink } from "./NextjsLink"; + type Props = { package: Package; onTagClick: (tag: string) => unknown; @@ -39,9 +41,13 @@ export const PackageCard = ( > - {props.package.title} [{props.package.name}] - {props.hideFeaturedBadge || - (isFeatured(props.package) && )} + {props.package.title} + + + + {props.hideFeaturedBadge || + (isFeatured(props.package) && )} + {props.package.description} diff --git a/components/PackageNamer.tsx b/components/PackageNamer.tsx new file mode 100644 index 000000000..f90321018 --- /dev/null +++ b/components/PackageNamer.tsx @@ -0,0 +1,17 @@ +import { Code, majorScale } from "evergreen-ui"; +import { Package } from "../api/domain"; +import { espansoTheme } from "./EspansoThemeProvider"; + +type Props = { + package: Package; +}; + +export const PackageNamer = (props: Props) => ( + + {props.package.name} + +); diff --git a/components/index.ts b/components/index.ts index 60fa00601..37b77cce9 100644 --- a/components/index.ts +++ b/components/index.ts @@ -7,6 +7,7 @@ export * from "./layout"; export * from "./MDXRenderer"; export * from "./Navbar"; export * from "./PackageCard"; +export * from "./PackageNamer" export * from "./Tags/TagBadgeGroup"; export * from "./BetaBanner"; export * from "./Footer"; diff --git a/pages/[packageName]/v/[version].tsx b/pages/[packageName]/v/[version].tsx index 053e90998..b41b018c3 100644 --- a/pages/[packageName]/v/[version].tsx +++ b/pages/[packageName]/v/[version].tsx @@ -13,6 +13,7 @@ import { Position, SelectMenu, SideSheet, + Small, Text, } from "evergreen-ui"; import { @@ -55,6 +56,7 @@ import { MDXRenderer, Navbar, NextjsLink, + PackageNamer, Stack, TabProps, TagBadgeGroup, @@ -325,7 +327,7 @@ const VersionedPackagePage = (props: Props) => { )} - + 400, @@ -333,9 +335,19 @@ const VersionedPackagePage = (props: Props) => { mobile: () => 300, })} color={espansoTheme.colors.muted} - > - By {currentRepo.manifest.author} - + > + + + 400, + tablet: () => 300, + mobile: () => 300, + })} + color={espansoTheme.colors.muted} + > + By {currentRepo.manifest.author} + Date: Fri, 23 Feb 2024 12:24:57 +1000 Subject: [PATCH 3/4] Display package Title instead of Name in Package Detail screen. Since the name is now displayed in a `code` tag under the title, as with the `PackageCard`, we should show the Package's above, instead. (Also removed unused `Small` import) --- pages/[packageName]/v/[version].tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/pages/[packageName]/v/[version].tsx b/pages/[packageName]/v/[version].tsx index b41b018c3..6e184f4c6 100644 --- a/pages/[packageName]/v/[version].tsx +++ b/pages/[packageName]/v/[version].tsx @@ -13,7 +13,6 @@ import { Position, SelectMenu, SideSheet, - Small, Text, } from "evergreen-ui"; import { @@ -264,7 +263,7 @@ const VersionedPackagePage = (props: Props) => { mobile: () => 600, })} > - {currentRepo.package.name} + {currentRepo.package.title} {isFeatured(currentRepo.package) && } From 5082434ab2308bef003d3e1666ebc5b893272f2f Mon Sep 17 00:00:00 2001 From: The Gentlehacker Date: Fri, 23 Feb 2024 12:27:02 +1000 Subject: [PATCH 4/4] Remove unused import from PackageCard --- components/PackageCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/PackageCard.tsx b/components/PackageCard.tsx index 56e5b8213..f3749c50a 100644 --- a/components/PackageCard.tsx +++ b/components/PackageCard.tsx @@ -1,4 +1,4 @@ -import { Card, Heading, majorScale, Pane, Text, Small } from "evergreen-ui"; +import { Card, Heading, majorScale, Pane, Text } from "evergreen-ui"; import { Package } from "../api/domain"; import { isFeatured } from "../api/packageFeatured"; import { TagBadgeGroup } from "./Tags/TagBadgeGroup";