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

cms-ify the footer #127

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+169 −129
Open

cms-ify the footer #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 4 additions & 1 deletion src/components/FooterFull.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import styled from 'styled-components'

import { mqs } from '@src/breakpoints'
import { type FooterFragment } from '@src/generated/graphqlDirectus'

import { BasicFooter, MinAltFooter } from './BasicFooter'
import { FooterNav } from './FooterNav'
Expand All @@ -21,11 +22,13 @@ export enum HeaderVariant {
}

export function FullFooter({
footerData,
className,
variant = FooterVariant.withNav,
}: {
className?: string
variant?: FooterVariant
footerData: Nullable<FooterFragment>
}) {
if (variant === FooterVariant.none) {
return null
Expand Down Expand Up @@ -55,7 +58,7 @@ export function FullFooter({
role="contentinfo"
className="relative z-20 flex flex-col gap-y-xxxlarge pt-xxxxlarge"
>
{showNav && <FooterNav />}
{showNav && <FooterNav footerData={footerData} />}
<BasicFooter />
</div>
</StickyFooterSC>
Expand Down
204 changes: 80 additions & 124 deletions src/components/FooterNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,115 +1,16 @@
import { type ComponentProps, type ReactNode } from 'react'

import Link from 'next/link'

import styled from 'styled-components'
import { type ReadonlyDeep } from 'type-fest'

import { mqs } from '@src/breakpoints'
import { DISCORD_LINK } from '@src/consts'
import {
type FooterFragment,
type FooterLinkFragment,
} from '@src/generated/graphqlDirectus'

import { FullPageWidth } from './layout/LayoutHelpers'
import { NewsletterSignupForm } from './NewsletterSignupForm'

type NavItemT = {
heading: ReactNode
links: ComponentProps<typeof Link>[]
}

const navItems = [
{
heading: 'Product',
links: [
{
children: 'Login',
href: 'https://app.plural.sh/login',
target: '_blank',
},
{
children: 'GitHub',
href: 'https://github.com/pluralsh/plural',
target: '_blank',
},
{
children: 'Pricing',
href: '/pricing',
},
{
children: 'Support',
href: '/contact',
},
],
},
{
heading: 'Company',
links: [
{
children: 'About',
href: '/about',
},
{
children: 'Careers',
href: '/careers',
},
{
children: 'In the news',
href: 'https://www.plural.sh/blog',
target: '_blank',
},
],
},
{
heading: 'Resources',
links: [
{
children: 'Docs',
href: 'https://docs.plural.sh',
target: '_blank',
},
{
children: 'Blog',
href: 'https://www.plural.sh/blog',
target: '_blank',
},
{
children: 'Releases',
href: 'https://github.com/pluralsh/plural/releases',
target: '_blank',
},
// {
// children: 'Security & Trust Portal',
// href: 'https://github.com/pluralsh/plural/releases',
// target: '_blank',
// },
] as const,
},
{
heading: 'Contact',
links: [
{
children: 'Discord',
href: DISCORD_LINK,
target: '_blank',
},
{
children: 'Twitter',
href: 'https://www.twitter.com/plural_sh',
target: '_blank',
},
{
children: 'LinkedIn',
href: 'https://www.linkedin.com/company/pluralsh',
target: '_blank',
},
{
children: 'Email',
href: '/contact',
target: '_blank',
},
],
},
] as const satisfies ReadonlyDeep<NavItemT[]>

const NavSections = styled.ul(({ theme }) => ({
...theme.partials.reset.list,
display: 'grid',
Expand Down Expand Up @@ -149,6 +50,7 @@ const NavItems = styled.ul(({ theme }) => ({
flexDirection: 'column',
gap: theme.spacing.xsmall,
}))

const NavItem = styled.li(({ theme }) => ({
...theme.partials.reset.li,
margin: 0,
Expand All @@ -166,29 +68,83 @@ export const FooterNavLink = styled(Link)(({ theme }) => ({
},
}))

export const FooterNav = styled(({ ...props }: ComponentProps<'div'>) => (
<div {...props}>
<FullPageWidth>
<NavSections>
{navItems.map((navItem) => (
<NavSection key={navItem.heading}>
<FooterHeading>{navItem.heading}</FooterHeading>
<NavItems>
{navItem.links.map((link) => (
<NavItem key={`${link.children}${link.href}`}>
<FooterNavLink {...link} />
</NavItem>
))}
</NavItems>
export function FooterNav({
footerData,
}: {
footerData: Nullable<FooterFragment>
}) {
if (!footerData) return null

return (
<FooterNavWrapSC>
<FullPageWidth>
<NavSections>
<FooterColumn
title={footerData.column_1_title}
links={sanitizeFooterLinks(footerData.column_1_links)}
/>
<FooterColumn
title={footerData.column_2_title}
links={sanitizeFooterLinks(footerData.column_2_links)}
/>
<FooterColumn
title={footerData.column_3_title}
links={sanitizeFooterLinks(footerData.column_3_links)}
/>
<FooterColumn
title={footerData.column_4_title}
links={sanitizeFooterLinks(footerData.column_4_links)}
/>
<NavSection className="newsletter">
<NewsletterSignupForm />
</NavSection>
</NavSections>
</FullPageWidth>
</FooterNavWrapSC>
)
}

const sanitizeFooterLinks = (
links: Nullable<
Nullable<{ footer_links_id?: Nullable<FooterLinkFragment> }>[]
>
) =>
links
?.filter((link): link is { footer_links_id: FooterLinkFragment } => !!link)
.map((link) => ({
name: link.footer_links_id?.name ?? '',
url: link.footer_links_id?.url ?? '',
})) ?? []

function FooterColumn({
title,
links,
}: {
title: Nullable<string>
links: { name: string; url: string }[]
}) {
if (!title) return null

return (
<NavSection>
<FooterHeading>{title}</FooterHeading>
<NavItems>
{links?.map((link) => (
<NavItem key={link?.url}>
<FooterNavLink
href={link?.url || ''}
target={link?.url.charAt(0) === '/' ? '_self' : '_blank'}
>
{link?.name}
</FooterNavLink>
</NavItem>
))}
<NavSection className="newsletter">
<NewsletterSignupForm />
</NavSection>
</NavSections>
</FullPageWidth>
</div>
))(({ theme }) => {
</NavItems>
</NavSection>
)
}

const FooterNavWrapSC = styled.div(({ theme }) => {
const outlineOffset = -4

return {
Expand Down
5 changes: 4 additions & 1 deletion src/components/PrimaryPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,10 @@ export default function PrimaryPage({
/>
{children}
<ExternalScripts />
<FullFooter variant={pageProps.footerVariant} />
<FullFooter
variant={pageProps.footerVariant}
footerData={globalProps.footerData}
/>
</PagePropsContext.Provider>
</GlobalPropsContext.Provider>
</NavDataProvider>
Expand Down
48 changes: 45 additions & 3 deletions src/generated/graphqlDirectus.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12639,12 +12639,16 @@ export type OurImpactComponentFragment = { __typename?: 'our_impact', top_left_m

export type QuoteCarouselComponentFragment = { __typename?: 'quote_carousel', title?: string | null, quotes?: { __typename?: 'quote_lists', slug: string, items?: Array<{ __typename?: 'quote_lists_items', item?: { __typename?: 'quotes', id: string, quote?: string | null, author_text?: string | null } | null } | null> | null } | null };

export type GlobalDataFragment = { __typename?: 'Query', site_settings?: { __typename?: 'site_settings', og_description?: string | null, og_image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null, solutions_pages: Array<{ __typename?: 'solutions_pages', id: string, slug: string, category?: string | null, dropdown_icon?: string | null, dropdown_title?: string | null }>, product_pages: Array<{ __typename?: 'product_pages', id: string, slug: string, dropdown_icon?: string | null, dropdown_title?: string | null, dropdown_description?: string | null }>, resource_pages: Array<{ __typename?: 'resource_pages', id: string, external: boolean, slug: string, url?: string | null, dropdown_title?: string | null }> };
export type GlobalDataFragment = { __typename?: 'Query', site_settings?: { __typename?: 'site_settings', og_description?: string | null, og_image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null, solutions_pages: Array<{ __typename?: 'solutions_pages', id: string, slug: string, category?: string | null, dropdown_icon?: string | null, dropdown_title?: string | null }>, product_pages: Array<{ __typename?: 'product_pages', id: string, slug: string, dropdown_icon?: string | null, dropdown_title?: string | null, dropdown_description?: string | null }>, resource_pages: Array<{ __typename?: 'resource_pages', id: string, external: boolean, slug: string, url?: string | null, dropdown_title?: string | null }>, footer?: { __typename?: 'footer', column_1_title?: string | null, column_2_title?: string | null, column_3_title?: string | null, column_4_title?: string | null, column_1_links?: Array<{ __typename?: 'footer_footer_links', footer_links_id?: { __typename?: 'footer_links', name: string, url: string } | null } | null> | null, column_2_links?: Array<{ __typename?: 'footer_footer_links_1', footer_links_id?: { __typename?: 'footer_links', name: string, url: string } | null } | null> | null, column_3_links?: Array<{ __typename?: 'footer_footer_links_2', footer_links_id?: { __typename?: 'footer_links', name: string, url: string } | null } | null> | null, column_4_links?: Array<{ __typename?: 'footer_footer_links_3', footer_links_id?: { __typename?: 'footer_links', name: string, url: string } | null } | null> | null } | null };

export type FooterFragment = { __typename?: 'footer', column_1_title?: string | null, column_2_title?: string | null, column_3_title?: string | null, column_4_title?: string | null, column_1_links?: Array<{ __typename?: 'footer_footer_links', footer_links_id?: { __typename?: 'footer_links', name: string, url: string } | null } | null> | null, column_2_links?: Array<{ __typename?: 'footer_footer_links_1', footer_links_id?: { __typename?: 'footer_links', name: string, url: string } | null } | null> | null, column_3_links?: Array<{ __typename?: 'footer_footer_links_2', footer_links_id?: { __typename?: 'footer_links', name: string, url: string } | null } | null> | null, column_4_links?: Array<{ __typename?: 'footer_footer_links_3', footer_links_id?: { __typename?: 'footer_links', name: string, url: string } | null } | null> | null };

export type FooterLinkFragment = { __typename?: 'footer_links', name: string, url: string };

export type GetGlobalDataQueryVariables = Exact<{ [key: string]: never; }>;


export type GetGlobalDataQuery = { __typename?: 'Query', site_settings?: { __typename?: 'site_settings', og_description?: string | null, og_image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null, solutions_pages: Array<{ __typename?: 'solutions_pages', id: string, slug: string, category?: string | null, dropdown_icon?: string | null, dropdown_title?: string | null }>, product_pages: Array<{ __typename?: 'product_pages', id: string, slug: string, dropdown_icon?: string | null, dropdown_title?: string | null, dropdown_description?: string | null }>, resource_pages: Array<{ __typename?: 'resource_pages', id: string, external: boolean, slug: string, url?: string | null, dropdown_title?: string | null }> };
export type GetGlobalDataQuery = { __typename?: 'Query', site_settings?: { __typename?: 'site_settings', og_description?: string | null, og_image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null, solutions_pages: Array<{ __typename?: 'solutions_pages', id: string, slug: string, category?: string | null, dropdown_icon?: string | null, dropdown_title?: string | null }>, product_pages: Array<{ __typename?: 'product_pages', id: string, slug: string, dropdown_icon?: string | null, dropdown_title?: string | null, dropdown_description?: string | null }>, resource_pages: Array<{ __typename?: 'resource_pages', id: string, external: boolean, slug: string, url?: string | null, dropdown_title?: string | null }>, footer?: { __typename?: 'footer', column_1_title?: string | null, column_2_title?: string | null, column_3_title?: string | null, column_4_title?: string | null, column_1_links?: Array<{ __typename?: 'footer_footer_links', footer_links_id?: { __typename?: 'footer_links', name: string, url: string } | null } | null> | null, column_2_links?: Array<{ __typename?: 'footer_footer_links_1', footer_links_id?: { __typename?: 'footer_links', name: string, url: string } | null } | null> | null, column_3_links?: Array<{ __typename?: 'footer_footer_links_2', footer_links_id?: { __typename?: 'footer_links', name: string, url: string } | null } | null> | null, column_4_links?: Array<{ __typename?: 'footer_footer_links_3', footer_links_id?: { __typename?: 'footer_links', name: string, url: string } | null } | null> | null } | null };

export type MinJobListingFragment = { __typename?: 'job_listings', id: string, slug: string, job_title?: string | null, department?: string | null, tags?: any | null, location?: string | null, status?: string | null };

Expand Down Expand Up @@ -13104,6 +13108,40 @@ export const ResourcePageTinyFragmentDoc = gql`
dropdown_title
}
`;
export const FooterLinkFragmentDoc = gql`
fragment FooterLink on footer_links {
name
url
}
`;
export const FooterFragmentDoc = gql`
fragment Footer on footer {
column_1_title
column_1_links {
footer_links_id {
...FooterLink
}
}
column_2_title
column_2_links {
footer_links_id {
...FooterLink
}
}
column_3_title
column_3_links {
footer_links_id {
...FooterLink
}
}
column_4_title
column_4_links {
footer_links_id {
...FooterLink
}
}
}
${FooterLinkFragmentDoc}`;
export const GlobalDataFragmentDoc = gql`
fragment GlobalData on Query {
site_settings {
Expand All @@ -13118,11 +13156,15 @@ export const GlobalDataFragmentDoc = gql`
resource_pages(filter: {status: {_neq: "hidden"}}) {
...ResourcePageTiny
}
footer {
...Footer
}
}
${SiteSettingsFragmentDoc}
${SolutionPageTinyFragmentDoc}
${ProductPageTinyFragmentDoc}
${ResourcePageTinyFragmentDoc}`;
${ResourcePageTinyFragmentDoc}
${FooterFragmentDoc}`;
export const MinJobListingFragmentDoc = gql`
fragment MinJobListing on job_listings {
id
Expand Down
35 changes: 35 additions & 0 deletions src/graph/directus/globalData.graphql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,41 @@ fragment GlobalData on Query {
resource_pages(filter: { status: { _neq: "hidden" } }) {
...ResourcePageTiny
}
footer {
...Footer
}
}

fragment Footer on footer {
column_1_title
column_1_links {
footer_links_id {
...FooterLink
}
}
column_2_title
column_2_links {
footer_links_id {
...FooterLink
}
}
column_3_title
column_3_links {
footer_links_id {
...FooterLink
}
}
column_4_title
column_4_links {
footer_links_id {
...FooterLink
}
}
}

fragment FooterLink on footer_links {
name
url
}

query GetGlobalData {
Expand Down
Loading
Loading