jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-10-30 07:26:00 -04:00
Code Issues Activity

clean up /projects styles

Browse Source
This commit is contained in:
Jake Jarvis
2025-05-07 12:51:02 -04:00
parent 236b55fef5
commit 6fd7c9fc4a
7 changed files with 31 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
app/projects/page.tsx
View File

@@ -57,20 +57,20 @@ const Page = async () => {
<div className="row-auto grid w-full grid-cols-none gap-4 md:grid-cols-2">
{repos?.map((repo) => (
<div key={repo!.name} className="border-ring/65 h-fit rounded-2xl border-1 p-4">
<Link href={repo!.url} className="mb-2 inline-block text-base font-semibold">
<div key={repo!.name} className="border-ring/65 h-fit space-y-1.5 rounded-2xl border-1 px-4 py-3">
<Link href={repo!.url} className="inline-block text-base leading-relaxed font-semibold">
{repo!.name}
</Link>
{repo!.description && <p className="text-foreground/85 m-0 text-sm leading-relaxed">{repo!.description}</p>}
{repo!.description && <p className="text-foreground/85 text-sm leading-relaxed">{repo!.description}</p>}
<div className="text-muted-foreground mt-2 flex flex-wrap space-x-4 text-[0.825rem]">
<div className="flex flex-wrap space-x-4 *:inline-flex *:flex-nowrap *:items-center *:text-[0.825rem] *:leading-loose *:whitespace-nowrap">
{repo!.primaryLanguage && (
<div className="mt-1 whitespace-nowrap">
<div className="text-muted-foreground space-x-2">
{repo!.primaryLanguage.color && (
<span
className="mr-2 inline-block size-4 align-text-top"
style={{ backgroundColor: repo!.primaryLanguage.color, borderRadius: "50%" }}
className="inline-block size-4 rounded-full"
style={{ backgroundColor: repo!.primaryLanguage.color }}
/>
)}
<span>{repo!.primaryLanguage.name}</span>
@@ -78,36 +78,28 @@ const Page = async () => {
)}
{repo!.stargazerCount > 0 && (
<div className="mt-1 whitespace-nowrap">
<Link
href={`${repo!.url}/stargazers`}
title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)} ${repo!.stargazerCount === 1 ? "star" : "stars"}`}
className="hover:text-primary text-muted-foreground hover:no-underline"
>
<StarIcon className="mr-2 inline-block size-4 align-text-top" />
<span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)}</span>
</Link>
</div>
<Link
href={`${repo!.url}/stargazers`}
title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)} ${repo!.stargazerCount === 1 ? "star" : "stars"}`}
className="text-muted-foreground hover:text-primary space-x-2 hover:no-underline"
>
<StarIcon className="inline-block size-4 shrink-0" />
<span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)}</span>
</Link>
)}
{repo!.forkCount > 0 && (
<div className="mt-1 whitespace-nowrap">
<Link
href={`${repo!.url}/network/members`}
title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)} ${repo!.forkCount === 1 ? "fork" : "forks"}`}
className="hover:text-primary text-muted-foreground hover:no-underline"
>
<GitForkIcon className="mr-2 inline-block size-4 align-text-top" />
<span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)}</span>
</Link>
</div>
<Link
href={`${repo!.url}/network/members`}
title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)} ${repo!.forkCount === 1 ? "fork" : "forks"}`}
className="text-muted-foreground hover:text-primary space-x-2 hover:no-underline"
>
<GitForkIcon className="inline-block size-4" />
<span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)}</span>
</Link>
)}
<div className="mt-1 whitespace-nowrap">
<span
// invisible icon hack to fix line height
className="mr-0 inline-block h-4 w-0 align-text-top"
/>
<div className="text-muted-foreground whitespace-nowrap">
<span>
Updated <RelativeTime date={repo!.pushedAt} />
</span>

2
components/activity-calendar.tsx
View File

@@ -48,7 +48,7 @@ const Calendar = ({
<Tooltip>
<TooltipTrigger asChild>{block}</TooltipTrigger>
<TooltipContent>
<span>{`${activity.count === 0 ? "No" : activity.count} ${noun}${activity.count === 1 ? "" : "s"} on ${format(activity.date, "MMMM do")}`}</span>
<span className="text-xs font-medium">{`${activity.count === 0 ? "No" : activity.count} ${noun}${activity.count === 1 ? "" : "s"} on ${format(activity.date, "MMMM do")}`}</span>
</TooltipContent>
</Tooltip>
)}

2
components/layout/skip-nav.tsx
View File

@@ -6,7 +6,7 @@ export const SkipNavLink = () => {
return (
<Button
asChild
className="sr-only transition-none focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-100 focus:inline-flex focus:px-4 focus:py-2"
className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-100 focus:inline-flex focus:px-4 focus:py-2"
variant="default"
>
<a href={`#${SKIP_NAV_ID}`}>Skip to content</a>

2
components/ui/button.tsx
View File

@@ -4,7 +4,7 @@ import { cn } from "@/lib/utils";
import type { ComponentPropsWithoutRef } from "react";
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {

2
components/ui/input.tsx
View File

@@ -7,7 +7,7 @@ const Input = ({ className, type, ...props }: ComponentPropsWithoutRef<"input">)
type={type}
data-slot="input"
className={cn(
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/10 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/10 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
className

2
components/ui/textarea.tsx
View File

@@ -6,7 +6,7 @@ const Textarea = ({ className, ...props }: ComponentPropsWithoutRef<"textarea">)
<textarea
data-slot="textarea"
className={cn(
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/10 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/10 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
className
)}
{...props}

4
components/ui/tooltip.tsx
View File

@@ -35,13 +35,13 @@ const TooltipContent = ({
data-slot="tooltip-content"
sideOffset={sideOffset}
className={cn(
"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
"animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md bg-black px-3 py-1.5 text-xs text-balance text-white/90 shadow-sm select-none",
className
)}
{...rest}
>
{children}
<TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-black fill-black shadow-sm" />
</TooltipPrimitive.Content>
</TooltipPrimitive.Portal>
);