Skip to content

Commit

Permalink
fix: Use button for Ghost.io newsletter signup (#337)
Browse files Browse the repository at this point in the history
Signed-off-by: John McBride <[email protected]>
  • Loading branch information
jpmcb authored Aug 9, 2024
1 parent 1bdcdd2 commit 4c029ca
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 159 deletions.
43 changes: 10 additions & 33 deletions components/sections/home-page/Newsletter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,48 +21,25 @@ const Newsletter = () => {
<Image alt="Doodles" src={StrokeR3} />
</div>
</div>

<div className="flex flex-col items-center gap-y-8">
<Heading alignSmall="center">
$orange-to-yellowThe fast track$orange-to-yellow to open source
$orange-to-yellowThe fast track$orange-to-yellow to open source
</Heading>

<Typography alignSmall="center" variant="body1" >
Stay up to date with the latest OpenSauced news and trends.
Stay up to date with the latest OpenSauced news and trends.
</Typography>

<GradientBorderWrapper>
<form
className="relative box-border px-4 flex items-center w-[280px] h-[38px] text-[#FEEADD] pr-4 py-3 text-sm font-medium bg-[#211E1C] rounded-md largeTablet:w-[394px]"
name="newsletter"
action="?success=true"
data-netlify="true"
data-netlify-honeypot="bot-field"
autoComplete="off"
<a
href="https://news.opensauced.pizza/#/portal/signup"
target="_blank"
rel="noopener noreferrer"
className="relative box-border px-4 flex items-center justify-center w-[280px] h-[38px] text-[#FEEADD] pr-4 py-3 text-sm font-medium bg-[#211E1C] rounded-md largeTablet:w-[394px]"
>
<div hidden aria-hidden="true">
<label>
Try your luck
<input type="hidden" value="bot-field" name="newsletter" />
</label>
</div>
<input
placeholder="Email"
name="Your email"
type="email"
className="pr-4 outline-none focus:outline-none bg-[#211E1C] w-[180px] largeTablet:w-[290px]"
></input>
<button
className=" text-brandOrange text-sm cursor-pointer"
type="submit"
>
Subscribe
</button>
</form>
<span className="text-brandOrange">Subscribe</span>
</a>
</GradientBorderWrapper>
</div>
</SectionWrapper>
)
}

export default Newsletter
export default Newsletter
68 changes: 0 additions & 68 deletions components/sections/maintainers/Newsletter.tsx

This file was deleted.

116 changes: 58 additions & 58 deletions pages/maintainers/index.tsx
Original file line number Diff line number Diff line change
@@ -1,86 +1,86 @@
import type { NextPage } from 'next'
import {
getAllBlogs,
getCommonData,
getFeaturedBlogs,
getMaintainersPageData
getAllBlogs,
getCommonData,
getFeaturedBlogs,
getMaintainersPageData
} from '../../lib/sanity'
import {
Blog as SanityBlog,
Footer as SanityFooter,
MaintainersPage as SanityMaintainersPage,
Navigation as SanityNavigation,
Seo as SanitySeo,
User as SanityUser,
Blog as SanityBlog,
Footer as SanityFooter,
MaintainersPage as SanityMaintainersPage,
Navigation as SanityNavigation,
Seo as SanitySeo,
User as SanityUser,
} from '../../sanity.types'
import Hero from '../../components/sections/home-page/Hero'
import Logos from '../../components/sections/home-page/Logos'
import Background from '../../components/sections/maintainers/Background'
import Blogs from '../../components/sections/maintainers/blogs/Blogs'
import PageLayout from '../../components/common/layout/PageLayout'
import Newsletter from '../../components/sections/maintainers/Newsletter'
import Newsletter from '../../components/sections/home-page/Newsletter'
import TeamsFeatures from '../../components/sections/home-page/features/TeamsFeatures'
import CTA from '../../components/sections/teams/CTA'

interface MaintainersPageProps {
data: {
commonData: {
navigationLinks: SanityNavigation[]
seoData: SanitySeo
footer: SanityFooter[]
data: {
commonData: {
navigationLinks: SanityNavigation[]
seoData: SanitySeo
footer: SanityFooter[]
}
maintainersPageData: SanityMaintainersPage
blogs: SanityBlog[]
featuredBlogs: SanityBlog[]
}
maintainersPageData: SanityMaintainersPage
blogs: SanityBlog[]
featuredBlogs: SanityBlog[]
}
}

const MaintainersPage: NextPage<MaintainersPageProps> = ({
data: { commonData, maintainersPageData, blogs, featuredBlogs },
data: { commonData, maintainersPageData, blogs, featuredBlogs },
}) => {
const displayBlogs = [...blogs, ...featuredBlogs].sort(
(a, b) => +new Date(b._createdAt) - +new Date(a._createdAt)
)
const displayBlogs = [...blogs, ...featuredBlogs].sort(
(a, b) => +new Date(b._createdAt) - +new Date(a._createdAt)
)

return (
<PageLayout
seoData={commonData.seoData}
navigationURLs={commonData.navigationLinks}
BackgroundWrapper={Background}
>
<Hero data={maintainersPageData.hero as unknown as SanityMaintainersPage['hero']} />
<Logos data={maintainersPageData.hero?.users as unknown as SanityUser[] || []} />
<TeamsFeatures topUseCase={maintainersPageData.topUseCase} features={maintainersPageData.features} />
<CTA data={maintainersPageData.ctaSection} />
<Blogs
data={{
// _type: "blogSection",
title: "Our secret sauce",
heading: "$yellow-to-orange OpenSauced$yellow-to-orange Blog",
description: "Musings on the open-source community, engineering, and the future of talent acquisition."
}}
blogs={displayBlogs.slice(0, 4)} />
<Newsletter />
</PageLayout>
)
return (
<PageLayout
seoData={commonData.seoData}
navigationURLs={commonData.navigationLinks}
BackgroundWrapper={Background}
>
<Hero data={maintainersPageData.hero as unknown as SanityMaintainersPage['hero']} />
<Logos data={maintainersPageData.hero?.users as unknown as SanityUser[] || []} />
<TeamsFeatures topUseCase={maintainersPageData.topUseCase} features={maintainersPageData.features} />
<CTA data={maintainersPageData.ctaSection} />
<Blogs
data={{
// _type: "blogSection",
title: "Our secret sauce",
heading: "$yellow-to-orange OpenSauced$yellow-to-orange Blog",
description: "Musings on the open-source community, engineering, and the future of talent acquisition."
}}
blogs={displayBlogs.slice(0, 4)} />
<Newsletter />
</PageLayout>
)
}

export default MaintainersPage

export async function getStaticProps() {
const [commonData, maintainersPageData, featuredBlogs, blogs] = await Promise.all([
getCommonData(),
getMaintainersPageData(),
getFeaturedBlogs(),
getAllBlogs(),
])
const [commonData, maintainersPageData, featuredBlogs, blogs] = await Promise.all([
getCommonData(),
getMaintainersPageData(),
getFeaturedBlogs(),
getAllBlogs(),
])

const data = { commonData, maintainersPageData, featuredBlogs, blogs }
const data = { commonData, maintainersPageData, featuredBlogs, blogs }

return {
props: {
data,
},
revalidate: 30,
}
return {
props: {
data,
},
revalidate: 30,
}
}

0 comments on commit 4c029ca

Please sign in to comment.