LaconicNetwork/laconic-dot-com
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Footer to CMS

Browse Source
This commit is contained in:
Fede Álvarez 2022-06-28 16:38:13 +02:00
parent fd3783188c
commit c884171a5c
17 changed files with 250 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/common/footer/index.tsx
View File

@ -6,6 +6,16 @@ import MailchimpSubscribe from 'react-mailchimp-subscribe'
import { ArrowLink } from '~/components/icons/arrow'
import { Isotype, LogoFooter } from '~/components/icons/logo'
import {
Discord,
Discourse,
Facebook,
Instagram,
Linkedin,
Reddit,
Telegram,
Twitter
} from '~/components/icons/socials'
import { Container } from '~/components/layout/container'
import Section from '~/components/layout/section'
import Heading from '~/components/primitives/heading'
@ -13,12 +23,6 @@ import Link from '~/components/primitives/link'
import Switch from '~/components/primitives/switch'
import { useIsomorphicLayoutEffect } from '~/hooks/use-isomorphic-layout-effect'
import {
AboutLinks,
ConnectLinks,
DevelopersLinks,
ProductsLinks
} from './footer'
import s from './footer.module.scss'
type FormProps = {
@ -81,7 +85,17 @@ const SimpleForm = ({
)
}
export const Footer = () => {
interface Props {
data: {
aboutLinks: { href: string; title: string }[]
communityLinks: { href: string; title: string }[]
connectLinks: { href: string; title: string }[]
developerLinks: { href: string; title: string }[]
productsLinks: { href: string; title: string }[]
}
}
export const Footer = ({ data }: Props) => {
const { theme, setTheme } = useTheme()
const router = useRouter()
@ -190,7 +204,7 @@ export const Footer = () => {
</div>
<nav>
<ul>
{DevelopersLinks.map((link) => {
{data.developerLinks.map((link) => {
return (
<li key={link.title}>
<Link href={link.href} variant="nav">
@ -201,7 +215,7 @@ export const Footer = () => {
})}
</ul>
<ul>
{ProductsLinks.map((link) => {
{data.productsLinks.map((link) => {
return (
<li key={link.title}>
<Link href={link.href} variant="nav">
@ -212,7 +226,7 @@ export const Footer = () => {
})}
</ul>
<ul>
{AboutLinks.map((link) => {
{data.aboutLinks.map((link) => {
return (
<li key={link.title}>
<Link href={link.href} variant="nav">
@ -229,12 +243,19 @@ export const Footer = () => {
</Link>
</li>
<li>
{ConnectLinks.map((link, index) => {
{data?.connectLinks.map((link, index) => {
return (
<div key={`${link.title}-${index}`}>
<Link href={link.href} variant="unstyled">
<span className="sr-only">{link.title}</span>
{link.logo && link.logo}
{link?.title === 'Twitter' && <Twitter />}
{link?.title === 'Discord' && <Discord />}
{link?.title === 'Discourse' && <Discourse />}
{link?.title === 'Instagram' && <Instagram />}
{link?.title === 'Facebook' && <Facebook />}
{link?.title === 'Telegram' && <Telegram />}
{link?.title === 'Linkedin' && <Linkedin />}
{link?.title === 'Reddit' && <Reddit />}
</Link>
</div>
)
@ -247,12 +268,19 @@ export const Footer = () => {
<nav className={s['sub__footer']}>
<ul className={s['connect__links__mobile']}>
<li>
{ConnectLinks.map((link, index) => {
{data?.connectLinks.map((link, index) => {
return (
<div key={`${link.title}-${index}`}>
<Link href={link.href} variant="unstyled">
<span className="sr-only">{link.title}</span>
{link.logo && link.logo}
{link?.title === 'Twitter' && <Twitter />}
{link?.title === 'Discord' && <Discord />}
{link?.title === 'Discourse' && <Discourse />}
{link?.title === 'Instagram' && <Instagram />}
{link?.title === 'Facebook' && <Facebook />}
{link?.title === 'Telegram' && <Telegram />}
{link?.title === 'Linkedin' && <Linkedin />}
{link?.title === 'Reddit' && <Reddit />}
</Link>
</div>
)

8
src/components/layout/page.tsx
View File

@ -2,17 +2,23 @@ import * as React from 'react'
import { CUSTOM_EASE, DURATION, ScrollSmoother } from '~/lib/gsap'
import { Footer } from '../common/footer'
import { Header } from '../common/header'
type Props = {
children?: React.ReactNode
extras?: React.ReactNode
smoothScroll?: boolean
footerData?: any
}
const ContentMemo = React.memo(({ children, extras }: Props) => {
const ContentMemo = React.memo(({ children, extras, footerData }: Props) => {
return (
<>
<Header />
{extras}
<main>{children}</main>
<Footer data={footerData} />
</>
)
})

14
src/lib/cms/queries/footer.js Normal file
View File

@ -0,0 +1,14 @@
const FooterQuery = {
query: `
{
footer {
aboutLinks
communityLinks
connectLinks
developerLinks
productsLinks
}
}`
}
export { FooterQuery }

18
src/pages/404.tsx
View File

@ -1,12 +1,26 @@
import { Meta } from '~/components/common/meta'
import { PageLayout } from '~/components/layout/page'
import Hero from '~/components/sections/404/hero'
import { FooterQuery } from '~/lib/cms/queries/footer'
import { request } from '../lib/datocms'
export const getStaticProps = async () => {
const [footerData] = await Promise.all([request(FooterQuery)])
return {
props: {
footerData: footerData?.footer
},
revalidate: 60
}
}
import { Page } from './_app'
const NotFoundPage: Page = () => {
const NotFoundPage: Page = ({ footerData }) => {
return (
<PageLayout>
<PageLayout footerData={footerData}>
<Meta />
<Hero />
</PageLayout>

8
src/pages/_app.tsx
View File

@ -7,8 +7,8 @@ import { ThemeProvider } from 'next-themes'
import * as React from 'react'
import { QueryClient, QueryClientProvider } from 'react-query'
import { Footer } from '~/components/common/footer'
import { Header } from '~/components/common/header'
// import { Footer } from '~/components/common/footer'
// import { Header } from '~/components/common/header'
import { Noise } from '~/components/common/noise'
import { AnimationContextProvider } from '~/context/animation'
import { basementLog, isProd } from '~/lib/constants'
@ -66,9 +66,9 @@ const App = ({ Component, pageProps, ...rest }: AppProps) => {
<ThemeProvider enableSystem={false} defaultTheme="dark">
<GAScripts />
<FontsReadyScript />
<Header />
{/* <Header /> */}
{getLayout({ Component, pageProps, ...rest })}
<Footer />
{/* <Footer /> */}
</ThemeProvider>
</AnimationContextProvider>
</RealViewportProvider>

30
src/pages/about.tsx
View File

@ -18,6 +18,7 @@ import {
AboutWhitepaper,
Teams
} from '~/lib/cms/queries/about'
import { FooterQuery } from '~/lib/cms/queries/footer'
import { request } from '../lib/datocms'
@ -29,14 +30,21 @@ export const getStaticProps = async () => {
const heroBlogPost = allBlogPosts.data[0]
const [heroData, teamsData, teamsPageData, whitepaperData, roadmapData] =
await Promise.all([
request(AboutHero),
request(Teams),
request(AboutTeam),
request(AboutWhitepaper),
request(AboutRoadmap)
])
const [
heroData,
teamsData,
teamsPageData,
whitepaperData,
roadmapData,
footerData
] = await Promise.all([
request(AboutHero),
request(Teams),
request(AboutTeam),
request(AboutWhitepaper),
request(AboutRoadmap),
request(FooterQuery)
])
return {
props: {
@ -49,6 +57,7 @@ export const getStaticProps = async () => {
whitepaperData: whitepaperData?.aboutPage,
roadmapData: roadmapData?.aboutPage,
teamsPageData: teamsPageData?.aboutPage,
footerData: footerData?.footer,
categories,
page:
{
@ -65,10 +74,11 @@ const About = ({
teamsData,
teamsPageData,
roadmapData,
whitepaperData
whitepaperData,
footerData
}: InferGetStaticPropsType<typeof getStaticProps>) => {
return (
<PageLayout>
<PageLayout footerData={footerData}>
<Meta />
<Hero data={heroData} />
<Team teamData={teamsData} data={teamsPageData} />

12
src/pages/blog/[slug].tsx
View File

@ -18,11 +18,14 @@ import Related from '~/components/sections/about/related'
import Content from '~/components/sections/blog/post-content'
import Hero from '~/components/sections/blog/post-hero'
import Shares from '~/components/sections/blog/shares'
import { FooterQuery } from '~/lib/cms/queries/footer'
import { siteOrigin } from '~/lib/constants'
import { request } from '~/lib/datocms'
const BlogPost = ({
latestPosts,
post
post,
footerData
}: InferGetStaticPropsType<typeof getStaticProps>) => {
const router = useRouter()
@ -33,7 +36,7 @@ const BlogPost = ({
}
return (
<PageLayout>
<PageLayout footerData={footerData}>
<Meta />
<Hero data={post} />
<Content data={post} />
@ -70,10 +73,13 @@ export const getStaticProps: GetStaticProps = async (
)
)
const [footerData] = await Promise.all([request(FooterQuery)])
return {
props: {
latestPosts: relatedPosts.slice(0, 3),
post: post
post: post,
footerData: footerData?.footer
},
revalidate: 60
}

9
src/pages/blog/index.tsx
View File

@ -19,14 +19,18 @@ import SearchBar, {
SearchContainer
} from '~/components/sections/blog/search'
import { CategoryFragment } from '~/lib/cms/generated'
import { FooterQuery } from '~/lib/cms/queries/footer'
import { getHrefWithQuery, makeQuery } from '~/lib/utils/router'
import { request } from '../../lib/datocms'
const getMatchingCategory = (categories: CategoryFragment[], c?: string) =>
categories.find((cat) => cat.slug === c)
const BlogIndexPage = ({
categories,
initialBlogPosts,
footerData,
page: { heroBlogPost }
}: InferGetStaticPropsType<typeof getStaticProps>) => {
const router = useRouter()
@ -75,7 +79,7 @@ const BlogIndexPage = ({
const hasResults = !!queriedPosts?.pages[0]?.data?.length
return (
<PageLayout>
<PageLayout footerData={footerData}>
<Meta />
<Hero featuredPost={heroBlogPost} />
<SearchContainer>
@ -180,12 +184,15 @@ export const getStaticProps = async () => {
const heroBlogPost = allBlogPosts.data[0]
const [footerData] = await Promise.all([request(FooterQuery)])
return {
props: {
initialBlogPosts: {
pagination: allBlogPosts.pagination,
data: allBlogPosts.data.slice(0, 9)
},
footerData: footerData?.footer,
categories,
page:
{

30
src/pages/careers.tsx
View File

@ -18,6 +18,7 @@ import {
CareersValues,
CareersWhy
} from '~/lib/cms/queries/careers'
import { FooterQuery } from '~/lib/cms/queries/footer'
import { request } from '../lib/datocms'
@ -29,14 +30,21 @@ export const getStaticProps = async () => {
const heroBlogPost = allBlogPosts.data[0]
const [heroData, valuesData, whyData, positionsData, positionsSectData] =
await Promise.all([
request(CareersHero),
request(CareersValues),
request(CareersWhy),
request(CareersPositions),
request(CareersPositionsSection)
])
const [
heroData,
valuesData,
whyData,
positionsData,
positionsSectData,
footerData
] = await Promise.all([
request(CareersHero),
request(CareersValues),
request(CareersWhy),
request(CareersPositions),
request(CareersPositionsSection),
request(FooterQuery)
])
return {
props: {
@ -45,6 +53,7 @@ export const getStaticProps = async () => {
positionsSectData: positionsSectData?.careersPage,
whyData: whyData?.careersPage,
positionsData: positionsData?.allPositions,
footerData: footerData?.footer,
initialBlogPosts: {
pagination: allBlogPosts.pagination,
data: allBlogPosts.data.slice(0, 3)
@ -65,10 +74,11 @@ const Careers = ({
initialBlogPosts,
whyData,
positionsData,
positionsSectData
positionsSectData,
footerData
}: InferGetStaticPropsType<typeof getStaticProps>) => {
return (
<PageLayout>
<PageLayout footerData={footerData}>
<Meta />
<Hero data={heroData} />
<Values data={valuesData} />

21
src/pages/community.tsx
View File

@ -11,16 +11,18 @@ import {
CommunitySocials,
Events as EventsQuery
} from '~/lib/cms/queries/community'
import { FooterQuery } from '~/lib/cms/queries/footer'
import { request } from '../lib/datocms'
export const getStaticProps = async () => {
const [heroData, eventsData, eventsSectionData, socialsData] =
const [heroData, eventsData, eventsSectionData, socialsData, footerData] =
await Promise.all([
request(CommunityHero),
request(EventsQuery),
request(CommunityEvents),
request(CommunitySocials)
request(CommunitySocials),
request(FooterQuery)
])
return {
@ -28,7 +30,8 @@ export const getStaticProps = async () => {
heroData: heroData?.communityPage,
eventsData: eventsData?.allEvents,
eventsSectionData: eventsSectionData?.communityPage,
socialsData: socialsData?.communityPage
socialsData: socialsData?.communityPage,
footerData: footerData?.footer
},
revalidate: 60
}
@ -38,16 +41,12 @@ const Community = ({
heroData,
eventsData,
eventsSectionData,
socialsData
socialsData,
footerData
}: InferGetStaticPropsType<typeof getStaticProps>) => {
return (
<PageLayout>
<Meta
// preload={[
// { href: '/videos/banner-community.mp4', as: 'fetch' },
// { href: '/videos/banner-community.webm', as: 'fetch' }
// ]}
/>
<PageLayout footerData={footerData}>
<Meta />
<Hero data={heroData} />
<Events eventsData={eventsData} data={eventsSectionData} />
<Socials data={socialsData} />

14
src/pages/contact.tsx
View File

@ -7,21 +7,24 @@ import Form from '~/components/sections/contact/form'
import Hero from '~/components/sections/contact/hero'
import { CommunitySocials } from '~/lib/cms/queries/community'
import { ContactForm, ContactHero } from '~/lib/cms/queries/contact'
import { FooterQuery } from '~/lib/cms/queries/footer'
import { request } from '../lib/datocms'
export const getStaticProps = async () => {
const [heroData, formData, socialsData] = await Promise.all([
const [heroData, formData, socialsData, footerData] = await Promise.all([
request(ContactHero),
request(ContactForm),
request(CommunitySocials)
request(CommunitySocials),
request(FooterQuery)
])
return {
props: {
heroData: heroData?.contactPage,
formData: formData?.contactPage,
socialsData: socialsData?.communityPage
socialsData: socialsData?.communityPage,
footerData: footerData?.footer
},
revalidate: 60
}
@ -29,10 +32,11 @@ export const getStaticProps = async () => {
const Contact = ({
heroData,
formData,
socialsData
socialsData,
footerData
}: InferGetStaticPropsType<typeof getStaticProps>) => {
return (
<PageLayout>
<PageLayout footerData={footerData}>
<Meta />
<Hero data={heroData} />
<Form data={formData} />

30
src/pages/index.tsx
View File

@ -10,6 +10,7 @@ import Benefits from '~/components/sections/homepage/benefits'
import Hero from '~/components/sections/homepage/hero'
import LatestNews from '~/components/sections/homepage/latest-news'
import WhatOthersSay from '~/components/sections/homepage/what-others-say'
import { FooterQuery } from '~/lib/cms/queries/footer'
import {
HomeBenefits,
HomeHero,
@ -28,14 +29,21 @@ export const getStaticProps = async () => {
const heroBlogPost = allBlogPosts.data[0]
const [heroData, benefitsData, othersData, latestData, testimonialsData] =
await Promise.all([
request(HomeHero),
request(HomeBenefits),
request(HomeOthers),
request(HomeLatest),
request(Testimonials)
])
const [
heroData,
benefitsData,
othersData,
latestData,
testimonialsData,
footerData
] = await Promise.all([
request(HomeHero),
request(HomeBenefits),
request(HomeOthers),
request(HomeLatest),
request(Testimonials),
request(FooterQuery)
])
return {
props: {
@ -48,6 +56,7 @@ export const getStaticProps = async () => {
othersData: othersData?.homePage,
latestData: latestData?.homePage,
testimonialsData: testimonialsData?.allTestimonials,
footerData: footerData?.footer,
categories,
page:
{
@ -64,10 +73,11 @@ const HomePage = ({
benefitsData,
latestData,
othersData,
testimonialsData
testimonialsData,
footerData
}: InferGetStaticPropsType<typeof getStaticProps>) => {
return (
<PageLayout>
<PageLayout footerData={footerData}>
<Meta
// preload={[{ href: '/videos/hero-grid.mp4', as: 'fetch' }]}
/>

30
src/pages/partners.tsx
View File

@ -10,6 +10,7 @@ import WhatOthersSay from '~/components/sections/homepage/what-others-say'
import Contact from '~/components/sections/partners/contact'
import Hero from '~/components/sections/partners/hero'
import Opportunities from '~/components/sections/partners/opportunities'
import { FooterQuery } from '~/lib/cms/queries/footer'
import { HomeOthers, Testimonials } from '~/lib/cms/queries/home'
import {
PartnersContact,
@ -27,14 +28,21 @@ export const getStaticProps = async () => {
const heroBlogPost = allBlogPosts.data[0]
const [othersData, testimonialsData, heroData, contactData, optData] =
await Promise.all([
request(HomeOthers),
request(Testimonials),
request(PartnersHero),
request(PartnersContact),
request(PartnersOportunities)
])
const [
othersData,
testimonialsData,
heroData,
contactData,
optData,
footerData
] = await Promise.all([
request(HomeOthers),
request(Testimonials),
request(PartnersHero),
request(PartnersContact),
request(PartnersOportunities),
request(FooterQuery)
])
return {
props: {
@ -43,6 +51,7 @@ export const getStaticProps = async () => {
heroData: heroData?.partnersPage,
contactData: contactData?.partnersPage,
optData: optData?.partnersPage,
footerData: footerData?.footer,
initialBlogPosts: {
pagination: allBlogPosts.pagination,
data: allBlogPosts.data.slice(0, 3)
@ -62,10 +71,11 @@ const Careers = ({
testimonialsData,
heroData,
contactData,
optData
optData,
footerData
}: InferGetStaticPropsType<typeof getStaticProps>) => {
return (
<PageLayout>
<PageLayout footerData={footerData}>
<Meta />
<Hero data={heroData} />
<Opportunities data={optData} />

13
src/pages/press.tsx
View File

@ -10,6 +10,7 @@ import Related from '~/components/sections/about/related'
import Hero from '~/components/sections/newsroom/hero'
import Media from '~/components/sections/newsroom/media'
import Press from '~/components/sections/newsroom/press'
import { FooterQuery } from '~/lib/cms/queries/footer'
import {
PressFeatured,
PressFeaturedSection,
@ -35,14 +36,16 @@ export const getStaticProps = async () => {
pressFeaturedData,
pressReleases,
pressMedia,
pressPress
pressPress,
footerData
] = await Promise.all([
request(PressHero),
request(PressFeaturedSection),
request(PressFeatured),
request(PressReleases),
request(PressMedia),
request(PressPress)
request(PressPress),
request(FooterQuery)
])
return {
@ -53,6 +56,7 @@ export const getStaticProps = async () => {
pressPostsData: pressReleases?.allPressReleases,
mediaData: pressMedia?.pressPage,
pressData: pressPress?.pressPage,
footerData: footerData?.footer,
initialBlogPosts: {
pagination: allBlogPosts?.pagination,
data: allBlogPosts?.data.slice(0, 3)
@ -74,10 +78,11 @@ const Newsroom = ({
featuredPostsData,
mediaData,
pressData,
pressPostsData
pressPostsData,
footerData
}: InferGetStaticPropsType<typeof getStaticProps>) => {
return (
<PageLayout>
<PageLayout footerData={footerData}>
<Meta />
<Hero data={heroData} />
<Related

14
src/pages/privacy-policy.tsx
View File

@ -5,26 +5,32 @@ import { PageLayout } from '~/components/layout/page'
import Hero from '~/components/sections/privacy/hero'
import s from '~/components/sections/privacy/hero/hero.module.scss'
import PrivacyPolicy from '~/components/sections/privacy/privacypolicy'
import { FooterQuery } from '~/lib/cms/queries/footer'
import { Privacy as PrivacyQuery } from '~/lib/cms/queries/legal'
import { request } from '../lib/datocms'
export const getStaticProps = async () => {
const [privacyData] = await Promise.all([request(PrivacyQuery)])
const [privacyData, footerData] = await Promise.all([
request(PrivacyQuery),
request(FooterQuery)
])
return {
props: {
privacyData: privacyData?.privacyPage
privacyData: privacyData?.privacyPage,
footerData: footerData?.footer
},
revalidate: 60
}
}
const Privacy = ({
privacyData
privacyData,
footerData
}: InferGetStaticPropsType<typeof getStaticProps>) => {
return (
<PageLayout>
<PageLayout footerData={footerData}>
<div className={s.gradient}></div>
<Meta />
<Hero />

33
src/pages/products.tsx
View File

@ -13,6 +13,7 @@ import Network from '~/components/sections/products/network'
import Stack from '~/components/sections/products/stack'
import Token from '~/components/sections/products/token'
import Watchers from '~/components/sections/products/watchers'
import { FooterQuery } from '~/lib/cms/queries/footer'
import {
ProductsApp,
ProductsHero,
@ -32,15 +33,23 @@ export const getStaticProps = async () => {
const heroBlogPost = allBlogPosts.data[0]
const [heroData, watchersData, stackData, networkData, appData, tokenData] =
await Promise.all([
request(ProductsHero),
request(ProductsWatchers),
request(ProductsStack),
request(ProductsNetwork),
request(ProductsApp),
request(ProductsToken)
])
const [
heroData,
watchersData,
stackData,
networkData,
appData,
tokenData,
footerData
] = await Promise.all([
request(ProductsHero),
request(ProductsWatchers),
request(ProductsStack),
request(ProductsNetwork),
request(ProductsApp),
request(ProductsToken),
request(FooterQuery)
])
return {
props: {
@ -54,6 +63,7 @@ export const getStaticProps = async () => {
networkData: networkData?.productsPage,
appData: appData?.productsPage,
tokenData: tokenData?.productsPage,
footerData: footerData?.footer,
categories,
page:
{
@ -71,10 +81,11 @@ const Products = ({
stackData,
networkData,
appData,
tokenData
tokenData,
footerData
}: InferGetStaticPropsType<typeof getStaticProps>) => {
return (
<PageLayout>
<PageLayout footerData={footerData}>
<Meta />
<Hero data={heroData} />
<Watchers data={watchersData} />

14
src/pages/terms-of-use.tsx
View File

@ -5,26 +5,32 @@ import { PageLayout } from '~/components/layout/page'
import Hero from '~/components/sections/terms/hero'
import s from '~/components/sections/terms/hero/hero.module.scss'
import TermsOfUse from '~/components/sections/terms/termsofuse'
import { FooterQuery } from '~/lib/cms/queries/footer'
import { Terms as TermsQuery } from '~/lib/cms/queries/legal'
import { request } from '../lib/datocms'
export const getStaticProps = async () => {
const [termsData] = await Promise.all([request(TermsQuery)])
const [termsData, footerData] = await Promise.all([
request(TermsQuery),
request(FooterQuery)
])
return {
props: {
termsData: termsData?.termsPage
termsData: termsData?.termsPage,
footerData: footerData?.footer
},
revalidate: 60
}
}
const Terms = ({
termsData
termsData,
footerData
}: InferGetStaticPropsType<typeof getStaticProps>) => {
return (
<PageLayout>
<PageLayout footerData={footerData}>
<div className={s.gradient}></div>
<Meta />
<Hero />