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

clients/repo: implement sidebar to repo pages #2947

Merged
merged 4 commits into from
Mar 22, 2024
Merged

clients/repo: implement sidebar to repo pages #2947

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8227780
clients/repo: implement a sidebar layout on repo pages
emilwidlund Mar 21, 2024
91940f5
clients/repo: add more space between cols
emilwidlund Mar 21, 2024
3ef6e96
clients/repo: adjust text
emilwidlund Mar 21, 2024
66c2f69
clients/repo: implement sidebar to repo pages
emilwidlund Mar 22, 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
280 changes: 190 additions & 90 deletions clients/apps/web/src/app/[organization]/[repo]/ClientPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
'use client'

import revalidate from '@/app/actions'
import { FreeTierSubscribe } from '@/components/Organization/FreeTierSubscribe'
import IssuesLookingForFunding from '@/components/Organization/IssuesLookingForFunding'
import { CoverEditor } from '@/components/Profile/CoverEditor/CoverEditor'
import { CreatorsEditor } from '@/components/Profile/CreatorEditor/CreatorsEditor'
Expand All @@ -13,17 +14,20 @@ import { SubscriptionTierEditor } from '@/components/Profile/SubscriptionTierEdi
import useDebouncedCallback from '@/hooks/utils'
import { useTrafficRecordPageView } from '@/utils/traffic'
import { ArrowUpRightIcon } from '@heroicons/react/20/solid'
import { ArrowForward } from '@mui/icons-material'
import {
Article,
ListResourceIssueFunding,
Organization,
Repository,
RepositoryProfileSettingsUpdate,
SubscriptionTier,
SubscriptionTierType,
} from '@polar-sh/sdk'
import Link from 'next/link'
import { OgObject } from 'open-graph-scraper-lite/dist/lib/types'
import Avatar from 'polarkit/components/ui/atoms/avatar'
import { ShadowBoxOnMd } from 'polarkit/components/ui/atoms/shadowbox'
import { Separator } from 'polarkit/components/ui/separator'
import { useUpdateProject } from 'polarkit/hooks'
import { formatStarsNumber } from 'polarkit/utils'
import { organizationPageLink } from 'polarkit/utils/nav'
Expand All @@ -37,6 +41,7 @@ const ClientPage = ({
adminOrganizations,
subscriptionTiers,
links,
posts,
}: {
organization: Organization
repository: Repository
Expand All @@ -45,6 +50,7 @@ const ClientPage = ({
adminOrganizations: Organization[]
subscriptionTiers: SubscriptionTier[]
links: { opengraph: OgObject; url: string }[]
posts: Article[]
}) => {
const [descriptionIsLoading, setDescriptionIsLoading] = useState(false)
const isAdmin = useMemo(
Expand Down Expand Up @@ -96,12 +102,16 @@ const ClientPage = ({
updateProfile({ links: links.map((l) => l.url) })
}

const freeSubscriptionTier = subscriptionTiers.find(
(tier) => tier.type === SubscriptionTierType.FREE,
)

return (
<div className="flex w-full flex-col gap-y-12">
<div className="flex w-full max-w-5xl flex-col gap-y-16">
<div className="flex w-full flex-col gap-y-16">
{repository.description && (
<>
<div className="flex w-full flex-col gap-16">
<div className="flex flex-col gap-16 md:flex-row">
<div className="flex w-full min-w-0 flex-shrink flex-col gap-y-16">
{repository.description && (
<DescriptionEditor
description={
repository.profile_settings.description ??
Expand All @@ -112,96 +122,186 @@ const ClientPage = ({
disabled={!isAdmin}
loading={descriptionIsLoading}
/>
<Separator className="h-0.5 w-12 bg-black dark:bg-white" />
</>
)}
<div className="grid grid-cols-2 flex-row gap-12 md:flex md:gap-24">
<div className="flex flex-col gap-y-1">
<span className="dark:text-polar-400 text-gray-600">Creator</span>
<Link href={organizationPageLink(organization)}>
{repository.organization.pretty_name}
</Link>
</div>
<div className="flex flex-col gap-y-1">
<span className="dark:text-polar-400 text-gray-600">Stars</span>
<span>{formatStarsNumber(repository.stars ?? 0)}</span>
</div>
<div className="flex flex-col gap-y-1">
<span className="dark:text-polar-400 text-gray-600">License</span>
<span>{repository.license ?? 'Unlicensed'}</span>
</div>
<div className="flex flex-col gap-y-1">
<span className="dark:text-polar-400 text-gray-600">
Repository
</span>
<Link
className="flex flex-row items-center gap-x-2"
href={`https://github.com/${repository.organization.name}/${repository.name}`}
rel="noopener noreferrer"
target="_blank"
>
{'GitHub'}
<ArrowUpRightIcon className="h-5 w-5" />
</Link>
)}
<CoverEditor
organization={organization}
onChange={updateCoverImage}
coverImageUrl={repository.profile_settings.cover_image_url}
disabled={!isAdmin}
/>

<SubscriptionTierEditor
organization={organization}
repository={repository}
subscriptionTiers={subscriptionTiers}
disabled={!isAdmin}
/>

<CreatorsEditor
organization={organization}
featuredOrganizations={featuredOrganizations}
onChange={updateFeaturedCreators}
disabled={!isAdmin}
/>

{(issuesFunding.items?.length ?? 0) > 0 && (
<ShadowBoxOnMd>
<div className="p-4">
<IssuesLookingForFunding
organization={organization}
repository={repository}
issues={issuesFunding}
/>
</div>
</ShadowBoxOnMd>
)}
</div>

<div className="flex w-full flex-col gap-12 md:max-w-52 lg:max-w-72">
<div className="flex flex-col gap-6">
<ShadowBoxOnMd className="flex flex-col gap-6 md:p-6">
<div className="flex flex-col gap-4">
<Avatar
className="h-12 w-12"
avatar_url={organization.avatar_url}
name={organization.name}
/>
<span className="flex flex-row flex-wrap gap-2">
<Link
className="dark:text-polar-500 text-wrap text-gray-500 transition-colors hover:text-blue-500 dark:hover:text-blue-400"
href={organizationPageLink(organization)}
>
{repository.organization.name}
</Link>
<span className="dark:text-polar-600 text-gray-400">/</span>
<Link
className="text-wrap transition-colors hover:text-blue-500 dark:hover:text-blue-400"
href={organizationPageLink(organization, repository.name)}
>
{repository.name}
</Link>
</span>
</div>
<div className="flex flex-col gap-1.5 text-sm">
<div className="flex flex-row justify-between gap-x-4">
<span className="dark:text-polar-400 text-gray-600">
Creator
</span>
<Link
className="truncate text-right"
href={organizationPageLink(organization)}
>
{repository.organization.pretty_name}
</Link>
</div>
<div className="flex flex-row justify-between gap-x-4">
<span className="dark:text-polar-400 text-gray-600">
Stars
</span>
<span className="truncate text-right">
{formatStarsNumber(repository.stars ?? 0)}
</span>
</div>
<div className="flex flex-row justify-between gap-x-4">
<span className="dark:text-polar-400 text-gray-600">
License
</span>
<span className="truncate text-right">
{repository.license ?? 'Unlicensed'}
</span>
</div>
<div className="flex flex-row justify-between gap-x-4">
<span className="dark:text-polar-400 text-gray-600">
Repository
</span>
<Link
className="flex flex-row items-center gap-x-2 truncate text-right"
href={`https://github.com/${repository.organization.name}/${repository.name}`}
rel="noopener noreferrer"
target="_blank"
>
{'GitHub'}
<ArrowUpRightIcon className="h-4 w-4" />
</Link>
</div>
{repository.homepage && (
<div className="flex flex-row justify-between gap-x-4">
<span className="dark:text-polar-400 text-gray-600">
Website
</span>
<Link
className="flex flex-row items-center gap-x-2 truncate text-right"
href={repository.homepage}
rel="noopener noreferrer"
target="_blank"
>
{new URL(repository.homepage).hostname}
<ArrowUpRightIcon className="h-4 w-4" />
</Link>
</div>
)}
</div>
</ShadowBoxOnMd>

{freeSubscriptionTier && !isAdmin ? (
<>
<FreeTierSubscribe
subscriptionTier={freeSubscriptionTier}
organization={organization}
upsellSubscriptions
/>
</>
) : null}
</div>
{repository.homepage && (
<div className="flex flex-col gap-y-1">
<span className="dark:text-polar-400 text-gray-600">
Website
</span>
<Link
className="flex flex-row items-center gap-x-2"
href={repository.homepage}
rel="noopener noreferrer"
target="_blank"
>
{new URL(repository.homepage).hostname}
<ArrowUpRightIcon className="h-5 w-5" />
</Link>

{posts.length > 0 && (
<div className="flex flex-col gap-6">
<div className="flex flex-row items-center gap-4">
<h3>Posts from the creator</h3>
</div>
<ShadowBoxOnMd className="flex w-full flex-col gap-6 md:p-6">
{posts.map((post) => (
<Link
key={post.id}
href={organizationPageLink(
organization,
`posts/${post.slug}`,
)}
className="flex w-full flex-col gap-1 transition-opacity hover:opacity-70"
>
<h3 className="line-clamp-2">{post.title}</h3>
<span className="dark:text-polar-500 text-sm text-gray-500">
{new Date(post.published_at ?? 0).toLocaleDateString(
'en-US',
{
year: 'numeric',
month: 'long',
day: 'numeric',
},
)}
</span>
</Link>
))}
<Link
className="flex flex-row items-center gap-2 text-sm text-blue-500 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
href={organizationPageLink(organization, 'posts')}
>
<span>View all</span>
<ArrowForward fontSize="inherit" />
</Link>
</ShadowBoxOnMd>
</div>
)}

<LinksEditor
organization={organization}
links={links}
onChange={updateLinks}
disabled={!isAdmin}
variant="column"
/>
</div>
</div>

<CoverEditor
organization={organization}
onChange={updateCoverImage}
coverImageUrl={repository.profile_settings.cover_image_url}
disabled={!isAdmin}
/>

<SubscriptionTierEditor
organization={organization}
repository={repository}
subscriptionTiers={subscriptionTiers}
disabled={!isAdmin}
/>

<CreatorsEditor
organization={organization}
featuredOrganizations={featuredOrganizations}
onChange={updateFeaturedCreators}
disabled={!isAdmin}
/>

<LinksEditor
organization={organization}
links={links}
onChange={updateLinks}
disabled={!isAdmin}
/>

{(issuesFunding.items?.length ?? 0) > 0 && (
<ShadowBoxOnMd>
<div className="p-4">
<IssuesLookingForFunding
organization={organization}
repository={repository}
issues={issuesFunding}
/>
</div>
</ShadowBoxOnMd>
)}
</div>
</div>
)
Expand Down
4 changes: 2 additions & 2 deletions clients/apps/web/src/app/[organization]/[repo]/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export default async function Layout({
return (
<PublicPageOrganizationContextProvider organization={organization}>
<div className="flex flex-col">
<div className="mx-auto flex w-full max-w-6xl flex-col items-start gap-y-8 px-4 pb-12 md:h-full md:space-y-8 md:px-24">
<div className="mx-auto flex w-full max-w-[1580px] flex-col items-start gap-y-8 px-4 pb-12 md:h-full md:space-y-8 md:px-24">
<div className="dark:bg-polar-950 sticky top-0 z-20 flex w-full flex-row items-center justify-between bg-white py-4 md:relative md:hidden">
<a href="/">
<LogoIcon
Expand All @@ -96,7 +96,7 @@ export default async function Layout({
<div className="jusitfy-between flex w-full flex-row items-center gap-x-10">
<div className="flex w-full flex-row items-center gap-x-8">
<LogoIcon
className="hidden text-blue-500 dark:text-blue-400 md:block"
className="hidden text-blue-500 md:block dark:text-blue-400"
size={40}
/>
<Link className="-mr-4" href={organizationPageLink(organization)}>
Expand Down
Loading
Loading