-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e4ddcc3
commit 12d9eb8
Showing
26 changed files
with
6,260 additions
and
2,346 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import { styledTheme } from '@pluralsh/design-system' | ||
| import { type GetStaticPaths, type InferGetStaticPropsType } from 'next' | ||
|
|
||
| import { ThemeProvider } from 'styled-components' | ||
|
|
||
| import { directusClient } from '@src/apollo-client' | ||
| import { renderComponent } from '@src/components/custom-page/common' | ||
| import { FooterVariant } from '@src/components/FooterFull' | ||
| import { | ||
| CustomPageDocument, | ||
| type CustomPageQuery, | ||
| type CustomPageQueryVariables, | ||
| CustomPageSlugsDocument, | ||
| type CustomPageSlugsQuery, | ||
| type CustomPageSlugsQueryVariables, | ||
| } from '@src/generated/graphqlDirectus' | ||
| import { propsWithGlobalSettings } from '@src/utils/getGlobalProps' | ||
|
|
||
| export default function CustomPage({ | ||
| components, | ||
| }: InferGetStaticPropsType<typeof getStaticProps>) { | ||
| return ( | ||
| // TODO: make theme adjustable | ||
| <ThemeProvider theme={styledTheme}> | ||
| {components.map((component, index) => ( | ||
| <div | ||
| className="contents" | ||
| key={index} | ||
| > | ||
| {renderComponent(component?.item)} | ||
| </div> | ||
| ))} | ||
| </ThemeProvider> | ||
| ) | ||
| } | ||
|
|
||
| export const getStaticPaths: GetStaticPaths = async () => { | ||
| const { data, error } = await directusClient.query< | ||
| CustomPageSlugsQuery, | ||
| CustomPageSlugsQueryVariables | ||
| >({ | ||
| query: CustomPageSlugsDocument, | ||
| }) | ||
|
|
||
| if (error) { | ||
| console.error('GraphQL query error in static:', error) | ||
| } | ||
|
|
||
| return { | ||
| paths: data.custom_pages.map((page) => ({ | ||
| params: { keyword: page.slug }, | ||
| })), | ||
| fallback: 'blocking', | ||
| } | ||
| } | ||
|
|
||
| export const getStaticProps = async (context) => { | ||
| const slug = | ||
| typeof context?.params?.keyword === 'string' | ||
| ? context?.params?.keyword | ||
| : null | ||
|
|
||
| if (!slug) { | ||
| return { notFound: true } | ||
| } | ||
|
|
||
| const { data, error } = await directusClient.query< | ||
| CustomPageQuery, | ||
| CustomPageQueryVariables | ||
| >({ | ||
| query: CustomPageDocument, | ||
| variables: { slug }, | ||
| }) | ||
|
|
||
| if (error) { | ||
| console.error('GraphQL query error in static: ', error) | ||
| } | ||
| const page = data.custom_pages?.[0] || null | ||
|
|
||
| if (!page) { | ||
| return { notFound: true } | ||
| } | ||
|
|
||
| return propsWithGlobalSettings( | ||
| { | ||
| metaTitle: 'Plural', | ||
| metaDescription: page.slug, | ||
| footerVariant: FooterVariant.none, | ||
| hideHeader: true, | ||
| components: page.components ?? [], | ||
| }, | ||
| { | ||
| revalidate: 20, | ||
| } | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,99 +1,76 @@ | ||
| import { type ComponentProps, type ReactNode } from 'react' | ||
|
|
||
| import { WrapWithIf } from '@pluralsh/design-system' | ||
| import { type ComponentProps } from 'react' | ||
|
|
||
| import styled, { useTheme } from 'styled-components' | ||
| import { type Merge } from 'type-fest' | ||
|
|
||
| import { TextLabel } from '@src/components/Typography' | ||
| import { type PartnerLogos } from '@src/data/getSiteSettings' | ||
|
|
||
| import { StandardPageWidth } from './layout/LayoutHelpers' | ||
|
|
||
| const CompanyLogosSectionSC = styled.div(({ theme: _ }) => ({ | ||
| ul: {}, | ||
| img: { | ||
| width: 100, | ||
| }, | ||
| })) | ||
| import { getImageUrl } from '@src/consts/routes' | ||
| import { type LogoListFragment } from '@src/generated/graphqlDirectus' | ||
|
|
||
| // Using old inline-block layout technique so we can use 'text-wrap: balance' | ||
| // to keep things looking nice when it breaks to multiple lines | ||
| const LogosListSC = styled.ul(({ theme }) => ({ | ||
| textAlign: 'center', | ||
| textWrap: 'balance', | ||
| margin: -theme.spacing.xxlarge / 2, | ||
| const LogosListSC = styled.div(({ theme }) => ({ | ||
| display: 'flex', | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| gap: theme.spacing.xxlarge, | ||
| paddingRight: theme.spacing.xxlarge, | ||
| paddingLeft: theme.spacing.xxlarge, | ||
| })) | ||
| const LogoSC = styled.li(({ theme }) => ({ | ||
| display: 'inline-block', | ||
| padding: 0, | ||
| margin: theme.spacing.xxlarge / 2, | ||
| verticalAlign: 'middle', | ||
| const LogoSC = styled.a(({ theme }) => ({ | ||
| display: 'flex', | ||
| justifyContent: 'center', | ||
| padding: theme.spacing.medium, | ||
| width: 175, | ||
| height: 80, | ||
| borderRadius: theme.borderRadiuses.medium, | ||
| transition: 'background 0.2s ease-in-out', | ||
| '&:hover': { | ||
| background: theme.colors['fill-zero-hover'], | ||
| }, | ||
| })) | ||
|
|
||
| export function CompanyLogosSection({ | ||
| logos, | ||
| heading, | ||
| ...props | ||
| }: Merge< | ||
| ComponentProps<typeof CompanyLogosSectionSC>, | ||
| { | ||
| logos?: PartnerLogos['items'] | ||
| heading?: ReactNode | ||
| } | ||
| ComponentProps<typeof LogosListSC>, | ||
| { logos?: LogoListFragment['logos'] } | ||
| >) { | ||
| const theme = useTheme() | ||
|
|
||
| return ( | ||
| <StandardPageWidth> | ||
| <CompanyLogosSectionSC {...props}> | ||
| <TextLabel | ||
| className="mb-large text-center md:mb-xxlarge" | ||
| color={theme.mode === 'light' ? 'text-light' : 'text-xlight'} | ||
| > | ||
| {heading || 'Used by fast-moving teams at'} | ||
| </TextLabel> | ||
| <LogosListSC> | ||
| {logos?.map((logo) => { | ||
| if (!logo?.item) { | ||
| return null | ||
| } | ||
| const { | ||
| slug, | ||
| logo_dark: logoDark, | ||
| logo_light: logoLight, | ||
| name, | ||
| url, | ||
| width, | ||
| } = logo.item | ||
| const imgUrl = theme.mode === 'light' ? logoLight : logoDark | ||
| <LogosListSC {...props}> | ||
| {logos?.map((logo) => { | ||
| if (!logo?.company_logos_id) { | ||
| return null | ||
| } | ||
| const { | ||
| slug, | ||
| logo_dark: logoDark, | ||
| logo_light: logoLight, | ||
| name, | ||
| url, | ||
| } = logo.company_logos_id | ||
| const imgUrl = getImageUrl( | ||
| theme.mode === 'light' ? logoLight : logoDark | ||
| ) | ||
|
|
||
| return ( | ||
| imgUrl && ( | ||
| <LogoSC key={slug}> | ||
| <WrapWithIf | ||
| condition={!!url} | ||
| wrapper={ | ||
| // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label | ||
| <a | ||
| href={url || ''} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| /> | ||
| } | ||
| > | ||
| <img | ||
| src={imgUrl} | ||
| alt={name} | ||
| style={{ width: `${width ?? 50}px` }} | ||
| /> | ||
| </WrapWithIf> | ||
| </LogoSC> | ||
| ) | ||
| ) | ||
| })} | ||
| </LogosListSC> | ||
| </CompanyLogosSectionSC> | ||
| </StandardPageWidth> | ||
| return ( | ||
| imgUrl && ( | ||
| <LogoSC | ||
| key={slug} | ||
| {...(url && { | ||
| href: url, | ||
| target: '_blank', | ||
| rel: 'noopener noreferrer', | ||
| })} | ||
| > | ||
| <img | ||
| src={imgUrl} | ||
| alt={name} | ||
| /> | ||
| </LogoSC> | ||
| ) | ||
| ) | ||
| })} | ||
| </LogosListSC> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.