Skip to content

Commit

Permalink
💩 NICE-127 fix Credits Grid later + shows [b] (#2596)
Browse files Browse the repository at this point in the history 
If you want to pull `SHOW` data from an `EVENT.SLUG` --- need to pass the right `database_id`
  • Loading branch information
@JeromeFitz
JeromeFitz committed Jun 30, 2024
1 parent 70646f8 commit ebdfaff
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 104 deletions.
40 changes: 2 additions & 38 deletions ...s/jeromefitzgerald.com/src/app/(notion)/events/[[...catchAll]]/_components/Event.Slug.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ import { Venue } from './Event.Slug.Venue'
import { Image } from './Image'

const { DATABASE_ID } = CONFIG.EVENTS
const { DATABASE_ID: DATABASE_ID__SHOWS } = CONFIG.SHOWS

/**
* @note(notion) Yea these "titles" are not really user friendly :X
Expand Down Expand Up @@ -217,9 +218,8 @@ async function Slug({ revalidate, segmentInfo }) {
properties,
'Rollup.Shows.Primary.Slug',
)[0]
// console.dir(`showPrimarySlug: ${showPrimarySlug}`)
const showPrimaryData = await getDataFromCache({
database_id: DATABASE_ID,
database_id: DATABASE_ID__SHOWS,
draft: false,
filterType: 'equals',
revalidate: false,
Expand Down Expand Up @@ -258,42 +258,6 @@ async function Slug({ revalidate, segmentInfo }) {
<Credits id={id} key={`relations--${id}--wrapper`} relations={R} />
<ArticleMainCTA />
</ArticleMain>
{/* <Grid>
<HeadlineColumnA>
<HeadlineTitleText
aria-hidden={true}
aria-label={title}
className="hidden"
>
<>{title}</>
</HeadlineTitleText>
<HeadlineTitleSub>
{tags.map(({ color, id, name }) => (
<Badge color={color} key={id} size="2">
<Code variant="ghost">{name}</Code>
</Badge>
))}
<Ticket properties={properties} />
</HeadlineTitleSub>
</HeadlineColumnA>
<HeadlineContent>
<Callout size="1" variant="outline" />
<Heading size={{ initial: '7', md: '9' }}>{title}</Heading>
<Image properties={properties} />
<Blocks data={data?.blocks} />
</HeadlineContent>
</Grid>
<Grid>
<HeadlineColumnA>
<HeadlineTitle aria-label={title} as="h2">
<>Info</>
</HeadlineTitle>
</HeadlineColumnA>
<HeadlineContent className="">
<Separator size="4" />
<Relations id={id} key={`relations--${id}--wrapper`} relations={R} />
</HeadlineContent>
</Grid> */}
</ContainerWithSidebar>
)
}
Expand Down
164 changes: 108 additions & 56 deletions sites/jeromefitzgerald.com/src/app/playground/2024/_components/Credits.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { cx } from '@jeromefitz/ds/utils/cx'

import { Box } from '@radix-ui/themes/dist/esm/components/box.js'
// import { Grid } from '@radix-ui/themes/dist/esm/components/grid.js'
import { Text } from '@radix-ui/themes/dist/esm/components/text.js'
import _map from 'lodash/map.js'
import _size from 'lodash/size.js'
Expand All @@ -15,7 +16,84 @@ import { CreditsItems } from './Credits.Items'
import { CreditsLoading } from './Credits.Loading'
import { getRelationTitle } from './Credits.utils'

function RelationContainerTitle({ children, className = '' }) {
return (
<Box
className={cx(
'relative h-16 w-full flex-none p-4',
'px-5 pb-8 pt-5',
'border-gray-7 border-y-1',
className,
)}
>
<Box className={cx('contents')}>
<Box className={cx('flex flex-row items-center justify-start gap-4')}>
{/* <InfoCircledIcon /> */}
<Text className="font-medium capitalize" size={{ initial: '3', md: '5' }}>
{children}
</Text>
</Box>
</Box>
</Box>
)
}

function RelationContainerContent({ children }) {
return (
<Box
className={cx(
'relative flex h-min w-full flex-none flex-col flex-nowrap content-start items-start justify-start gap-4 overflow-visible px-5 py-8',
'bg-accentA-2',
// 'border-gray-7 border-1 border-l-0 border-t-0',
'md:h-full',
)}
>
{children}
</Box>
)
}

function RelationContainer({ children }) {
return (
<Box
className={cx(
'relative flex h-auto w-[1px] flex-col flex-nowrap content-center items-stretch justify-start gap-0 overflow-hidden p-0',
'min-w-[300px]',
// 'flex-[1_0_0px]',
'flex-auto',
)}
>
{children}
</Box>
)
}

/**
* @todo(css) figure out grid for this better please...
*/
function RelationsContainer({ children }) {
return (
<Box
className={cx(
// 'bg-accent-2',
'size-full items-stretch',
'rounded-3 relative z-10 flex h-min w-full flex-row content-start items-start justify-start gap-0 overflow-hidden p-0',
// 'flex-none flex-row flex-nowrap',
'flex-row flex-wrap',
'border-1 border-gray-7',
// 'border-t-1 rounded-t-[0]',
'rounded-t-[0] border-t-0',
)}
id="container--credits--content"
>
{children}
</Box>
)
}

function Credits({ id, relations }) {
let relationsSize = 0
let relationAddition = 0
return (
<Box
className={cx(
Expand All @@ -25,79 +103,53 @@ function Credits({ id, relations }) {
id="container--credits"
>
<CreditsHeader />
<Box
className={cx(
// 'bg-accent-2',
'size-full items-stretch',
'rounded-3 relative z-10 flex h-min w-full flex-row content-start items-start justify-start gap-0 overflow-hidden p-0',
// 'flex-none flex-row flex-nowrap',
'flex-row flex-wrap',
'border-1 border-gray-7',
// 'border-t-1 rounded-t-[0]',
'rounded-t-[0] border-t-0',
)}
id="container--credits--content"
>
<RelationsContainer>
{_map(relations, (items, relation) => {
if (!items) return null
const itemsCount = _size(items)
if (itemsCount === 0) return null
relationsSize++
relationAddition = relationsSize % 3
// console.dir(`relationsSize: ${relationsSize}`)
// console.dir(`relationAddition: ${relationAddition}`)
// console.dir(relationsSize % 3)
const title = pluralize(getRelationTitle(relation), itemsCount)
const key = `relations--${id}--${relation}`
// console.dir(`title: ${title}`)
return (
<Fragment key={key}>
<Box
className={cx(
'relative flex h-auto w-[1px] flex-col flex-nowrap content-center items-stretch justify-start gap-0 overflow-hidden p-0',
'min-w-[300px]',
// 'flex-[1_0_0px]',
'flex-auto',
)}
key={`c1-${relation}`}
>
<Box
className={cx(
'relative h-16 w-full flex-none p-4',
'px-5 pb-8 pt-5',
'border-gray-7 border-y-1',
)}
>
<Box className={cx('contents')}>
<Box
className={cx(
'flex flex-row items-center justify-start gap-4',
)}
>
{/* <InfoCircledIcon /> */}
<Text
className="font-medium capitalize"
size={{ initial: '3', md: '5' }}
>
{title}
</Text>
</Box>
</Box>
</Box>
<Box
className={cx(
'relative flex h-min w-full flex-none flex-col flex-nowrap content-start items-start justify-start gap-4 overflow-visible px-5 py-8',
'bg-accentA-2',
// 'border-gray-7 border-1 border-l-0 border-t-0',
'md:h-full',
)}
>
<RelationContainer>
<RelationContainerTitle>{title}</RelationContainerTitle>
<RelationContainerContent>
<UL>
<Suspense fallback={<CreditsLoading size={itemsCount} />}>
<CreditsItems items={items} />
</Suspense>
</UL>
</Box>
</Box>
</RelationContainerContent>
</RelationContainer>
</Fragment>
)
})}
</Box>
{relationAddition === 1 && (
<>
<RelationContainer>
<RelationContainerTitle className="hidden md:flex">{` `}</RelationContainerTitle>
<RelationContainerContent>{` `}</RelationContainerContent>
</RelationContainer>
<RelationContainer>
<RelationContainerTitle className="hidden md:flex">{` `}</RelationContainerTitle>
<RelationContainerContent>{` `}</RelationContainerContent>
</RelationContainer>
</>
)}
{relationAddition === 2 && (
<RelationContainer>
<RelationContainerTitle className="hidden md:flex">{` `}</RelationContainerTitle>
<RelationContainerContent>{` `}</RelationContainerContent>
</RelationContainer>
)}
</RelationsContainer>
</Box>
)
}
Expand Down
20 changes: 10 additions & 10 deletions sites/jeromefitzgerald.com/src/store/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,23 +213,23 @@ const getDefaultInitialStateStoreMenu = () => ({
titleDescription: '',
},
{
href: '/events/2024/07/18/sketch-comedy-lab-best-of',
href: '/events/2024/07/18/sketch-lab-report-vol-1',
icon: TicketIcon,
id: '2024/07/18/sketch-comedy-lab-best-of',
isActive: false,
isActiveMobile: false,
id: '2024/07/18/sketch-lab-report-vol-1',
isActive: true,
isActiveMobile: true,
keywords: ['sketch', 'comedy', 'lab'],
title: 'Sketch Comedy Lab: THU 07/18',
title: 'Sketch Lab Report Vol. 1: THU 07/18',
titleDescription: '',
},
{
href: '/events/2024/07/19/sketch-comedy-lab-best-of',
href: '/events/2024/07/19/sketch-lab-report-vol-1',
icon: TicketIcon,
id: '2024/07/19/sketch-comedy-lab-best-of',
isActive: false,
isActiveMobile: false,
id: '2024/07/19/sketch-lab-report-vol-1',
isActive: true,
isActiveMobile: true,
keywords: ['sketch', 'comedy', 'lab'],
title: 'Sketch Comedy Lab: FRI 07/19',
title: 'Sketch Lab Report Vol. 1: FRI 07/19',
titleDescription: '',
},
],
Expand Down

0 comments on commit ebdfaff

Please sign in to comment.