Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Improved Registy card and Registy page (single) #1384

Merged
merged 2 commits into from
Nov 19, 2024
Merged

feat: Improved Registy card and Registy page (single) #1384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6540d31
feat: Improved Registy card and Registy page (single)
siamak Nov 12, 2024
6d4560b
fix(ui): Fixed ui issues on header
siamak Nov 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions apps/frontend/components/templates/CodemodPage/AuthorSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,8 @@ export const AuthorSection = ({
className="rounded-sm focus:outline-none focus-visible:ring-[4px] focus-visible:ring-border-light dark:focus-visible:ring-border-dark"
prefetch
>
<div className="flex items-center gap-xs">
<div className="flex items-center gap-xxs group">
<span className="body-s-medium font-medium">by</span>

<>
{authorImage?.image.light && (
<SanityImage
Expand Down Expand Up @@ -42,7 +41,9 @@ export const AuthorSection = ({
/>
)}
</>
<span className="body-s-medium font-medium">{author}</span>
<span className="body-s-medium font-mono group-hover:opacity-50 transition-opacity">
@{author}
</span>
</div>
</Link>
);
102 changes: 53 additions & 49 deletions apps/frontend/components/templates/CodemodPage/CodemodPageUI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import Icon from "@/components/shared/Icon";
import Section from "@/components/shared/Section";
import Snippet from "@/components/shared/Snippet";
import Tag from "@/components/shared/Tag";
import { AuthorSection } from "@/components/templates/CodemodPage/AuthorSection";
import { VCCodeShift } from "@/components/templates/CodemodPage/VCCodeShift";
import { getCodemodCard } from "@/components/templates/CodemodPage/buildYourCodemodCard";
import { getFrameworkCard } from "@/components/templates/CodemodPage/getFrameworkCard";
Expand All @@ -17,10 +16,12 @@ import { prop, uniqBy } from "ramda";
import type { ReactNode } from "react";
import VerifiedBadge from "../Registry/VerifiedBadge";
import {
extractRepoPath,
getAutomationFrameworkTitles,
getFilterIcon,
getFilterSection,
} from "../Registry/helpers";
import { AuthorSection } from "./AuthorSection";
import InfoTooltip from "./parts/InfoTooltip";

export interface CodemodPageProps {
Expand Down Expand Up @@ -72,6 +73,12 @@ export default function CodemodPageUI({ data, description }: CodemodPageProps) {
);

const currentVersion = data?.versions[0];
const totalRunsValue = data?.totalRuns ?? 0;

const totalRuns =
totalRunsValue < 100 ? "< 100 runs" : totalRunsValue.toLocaleString();

const sourceRepo = extractRepoPath(currentVersion?.sourceRepo || "");

return (
<Section className="pt-[calc(var(--header-height)+24px)]">
Expand All @@ -88,7 +95,44 @@ export default function CodemodPageUI({ data, description }: CodemodPageProps) {

<div className="relative flex w-full flex-col gap-l pb-xl lg:flex lg:flex-row lg:gap-2xl lg:pb-[80px]">
<div className="flex w-full flex-col lg:w-2/3">
<div className="flex flex-col justify-between gap-4 lg:flex-row lg:items-center">
<div className="flex mb-2 flex-col gap-[12px]">
{data?.automationName && (
<h1 className="m-heading">{unslugify(data?.automationName)}</h1>
)}
</div>

<div className="flex mb-3 items-center flex-row gap-xs">
<span className="font-mono">{currentVersion?.version}</span>

{currentVersion?.updatedAt && (
<>
<i className="inline-block w-0.5 h-0.5 rounded-full bg-secondary-light dark:bg-secondary-dark" />
<span>
Last update{" "}
{new Date(currentVersion?.updatedAt).toLocaleString("en-us", {
month: "short",
day: "numeric",
year: "numeric",
})}
</span>
</>
)}

{/* Attribution */}
{data?.author && (
<>
<i className="inline-block w-0.5 h-0.5 rounded-full bg-secondary-light dark:bg-secondary-dark" />

<AuthorSection
author={data?.author}
href={authorHref}
authorImage={authorImage}
/>
</>
)}
</div>

<div className="flex mb-2 flex-col justify-between gap-4 lg:flex-row lg:items-center">
<div className="flex items-center gap-xs">
{data?.verified && (
<VerifiedBadge content="Regularly tested and maintained by our engineers and codemod expert community." />
Expand All @@ -108,59 +152,20 @@ export default function CodemodPageUI({ data, description }: CodemodPageProps) {
</Link>
)}
</div>
{/* Attribution */}
{data?.author && (
<AuthorSection
author={data?.author}
href={authorHref}
authorImage={authorImage}
/>
)}
</div>

<div className="mt-6 flex flex-col gap-[12px]">
{data?.automationName && (
<h1 className="m-heading">{unslugify(data?.automationName)}</h1>
)}
</div>
{/* <div className="relative z-20 h-px w-full bg-gradient-to-r from-transparent via-[#0b151e39] dark:via-[#ffffff34]" /> */}

<div className="mt-6 flex items-center gap-s rounded-[8px] border border-border-light p-s dark:border-border-dark">
{/*{frameworks.length ? (*/}
{/* <>*/}
{/* <InfoCard*/}
{/* value={frameworksDescription}*/}
{/* label="Made for"*/}
{/* icon="/icons/badge-info.svg"*/}
{/* />*/}
{/* <span className="h-full w-[2px] bg-border-light dark:bg-border-dark" />*/}
{/* </>*/}
{/*) : null}*/}
{currentVersion?.updatedAt && (
<InfoCard
value={new Date(currentVersion?.updatedAt).toLocaleString(
"en-us",
{
month: "short",
day: "numeric",
year: "numeric",
},
)}
label="Last update"
icon="/icons/calendar.svg"
/>
)}
</div>
{description ? (
<div className="mt-10 hidden flex-col gap-4 lg:flex">
{description}
</div>
) : null}
</div>
{/* Sidebar */}
<aside className="lg:top-[128px] flex h-fit w-full flex-col gap-m lg:sticky lg:w-1/3 lg:min-w-[360px] lg:pl-[52px]">
<aside className="lg:top-[128px] flex h-fit w-full flex-col gap-m lg:sticky lg:w-1/3 lg:min-w-[360px] lg:pl-[0]">
{/* Run */}

<div className="flex w-full flex-col gap-s rounded-[8px] border border-border-light p-s dark:border-border-dark">
<div className="flex w-full flex-col gap-m rounded-[8px] border border-border-light p-s dark:border-border-dark">
<div className="flex items-center justify-between">
<p className="xs-heading">Run</p>
{data?.globalLabels?.documentationPopup && (
Expand Down Expand Up @@ -238,10 +243,10 @@ export default function CodemodPageUI({ data, description }: CodemodPageProps) {
<a
target="_blank"
href={currentVersion?.sourceRepo}
className="truncate underline"
className="truncate"
rel="noreferrer"
>
{currentVersion?.sourceRepo}
{sourceRepo}
</a>
</div>
</div>
Expand All @@ -255,9 +260,9 @@ export default function CodemodPageUI({ data, description }: CodemodPageProps) {

<div className="flex-1" />
</div> */}
<span className="h-px w-full bg-border-light dark:bg-border-dark" />
{/* <span className="h-px w-full bg-border-light dark:bg-border-dark" /> */}
<div className="flex items-center gap-s">
<InfoCard value={String(data?.totalRuns)} label="Total runs" />
<InfoCard value={totalRuns} label="Total runs" />
<span className="h-[36px] w-[2px] bg-border-light dark:bg-border-dark" />
<InfoCard
value={String(currentVersion?.version)}
Expand All @@ -267,7 +272,6 @@ export default function CodemodPageUI({ data, description }: CodemodPageProps) {
<div className="flex flex-wrap gap-2">
{(currentVersion?.tags?.filter(Boolean).length || 0) > 0 && (
<>
<span className="h-px w-full bg-border-light dark:bg-border-dark" />
{currentVersion?.tags?.filter(Boolean).map((label) => (
<Link prefetch key={label} href={`/registry?q=${label}`}>
<Tag key={label}>{label}</Tag>
Expand Down
34 changes: 20 additions & 14 deletions apps/frontend/components/templates/Registry/RegistryCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,14 +66,14 @@ export default function RegistryCard(props: RegistryCardData) {
</h3>
</SanityLink>
{formattedDescription ? (
<div className=" mt-10 flex-col gap-4">
<div className="mt-4 flex-col gap-4">
<Markdown>{formattedDescription}</Markdown>
</div>
) : null}
</div>
</div>

<div className="flex w-full flex-col gap-m lg:flex-row lg:justify-between">
<div className="flex w-full flex-col gap-m lg:flex-row lg:justify-between lg:items-center">
{/* tags */}
<div className="flex items-center gap-xs">
{props.verified && <VerifiedBadge content={props.verifiedTooltip} />}
Expand Down Expand Up @@ -153,16 +153,22 @@ export default function RegistryCard(props: RegistryCardData) {

{/* Attribution */}
{props.author && (
<button
onClick={() =>
handleFilterChange(REGISTRY_FILTER_TYPES.owner, props.author)
}
onLoad={() =>
prefetchFilterChange(REGISTRY_FILTER_TYPES.owner, props.author)
}
<div
// onClick={() =>
// handleFilterChange(REGISTRY_FILTER_TYPES.owner, props.author)
// }
// onLoad={() =>
// prefetchFilterChange(REGISTRY_FILTER_TYPES.owner, props.author)
// }
className="rounded-sm focus:outline-none focus-visible:ring-[4px] focus-visible:ring-border-light dark:focus-visible:ring-border-dark"
>
<div className="flex items-center gap-xxs">
<SanityLink
className="inline-flex items-center gap-xxs group"
link={{
_type: "link",
href: `https://github.com/${props.author}`,
}}
>
<span className="body-s-medium font-medium">by</span>

<>
Expand Down Expand Up @@ -192,11 +198,11 @@ export default function RegistryCard(props: RegistryCardData) {
/>
)}
</>
<span className="body-s-medium font-medium">
{capitalize(props.author)}
<span className="body-s-medium font-mono group-hover:opacity-50 transition-opacity">
@{props.author}
</span>
</div>
</button>
</SanityLink>
</div>
)}
</div>
</li>
Expand Down
4 changes: 2 additions & 2 deletions apps/frontend/components/templates/Registry/VerifiedBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@ export default function VerifiedBadge({
{content && (
<div
className={cx(
"absolute bottom-full left-0 z-10 w-56 cursor-default rounded-md border bg-white p-2 text-left shadow-xl transition-all duration-300 2xl:-left-24 dark:border-border-dark dark:border-opacity-40 dark:bg-background-dark",
"absolute bottom-full left-0 z-10 w-56 cursor-default border bg-white/75 p-4 space-y-2 text-left shadow-xl transition-all duration-300 2xl:-left-24 dark:border-border-dark dark:border-opacity-40 dark:bg-background-dark/75 backdrop-blur-lg rounded-xl",

"pointer-events-none invisible translate-y-0 opacity-0",
"group-hover:pointer-events-auto group-hover:visible group-hover:-translate-y-2 group-hover:opacity-100",
)}
>
<h5 className="body-s-medium pb-1 font-medium">Codemod verified</h5>
<h5 className="body-s-medium font-bold">Codemod verified</h5>
<p className="body-s font-regular">{content}</p>
</div>
)}
Expand Down
10 changes: 10 additions & 0 deletions apps/frontend/components/templates/Registry/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,3 +142,13 @@ export function transformAutomation(
title: unslugify(automation.name),
};
}

export function extractRepoPath(githubUrl: string) {
// Remove the protocol (e.g., https:// or http://) and split by "/"
const parts = githubUrl
.replace(/^https?:\/\/(www\.)?github\.com\//, "")
.split("/");

// Return "username/repo" if it exists, otherwise return an empty string
return parts.length >= 2 ? `${parts[0]}/${parts[1]}` : "";
}