-
Notifications
You must be signed in to change notification settings - Fork 19
Migrate /contact-us, /thank-you/* and /book-demo from 11ty to Nuxt #5537
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.
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
Open
ZJvandeWeg
wants to merge
3
commits into
main
Choose a base branch
from
zj-nuxt-contact-book-demo
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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,62 @@ | ||
| <script setup lang="ts"> | ||
| // Ported from src/_includes/hubspot/hs-book-meeting.njk. Loading the meetings | ||
| // embed is gated behind analytics consent: src/js/cookieconsent-config.js | ||
| // (compiled into /js/cc.min.js, injected globally by nuxt/server/plugins/analytics.ts) | ||
| // calls window._ffLoadMeetings() from its onConsent/onFirstConsent handlers | ||
| // once analytics cookies are accepted - both on this page's load and on a | ||
| // later consent change. Until then, the fallback box below stays visible. | ||
| const props = defineProps<{ | ||
| dataSrc: string | ||
| }>() | ||
|
|
||
| const fallbackId = 'meetings-consent-placeholder' | ||
|
|
||
| onMounted(() => { | ||
| (window as any)._ffLoadMeetings = function () { | ||
| const placeholder = document.getElementById(fallbackId) | ||
| if (!placeholder?.parentNode) return | ||
|
|
||
| const parent = placeholder.parentNode | ||
|
|
||
| const container = document.createElement('div') | ||
| container.className = 'meetings-iframe-container -mb-20 md:-mb-6' | ||
| container.setAttribute('data-src', props.dataSrc) | ||
| parent.insertBefore(container, placeholder) | ||
|
|
||
| const script = document.createElement('script') | ||
| script.src = 'https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js' | ||
| script.onload = () => { placeholder.remove() } | ||
| script.onerror = () => { placeholder.classList.remove('hidden') } | ||
| parent.insertBefore(script, placeholder) | ||
| ;(window as any)._ffLoadMeetings = null | ||
| } | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| <div :id="fallbackId" class="ff-hubspot-consent-fallback text-center border bg-indigo-900 rounded-lg px-6 pt-8 pb-4"> | ||
| <h4 class="text-white font-medium"> | ||
| Choose a time to talk | ||
| </h4> | ||
| <p class="text-indigo-200"> | ||
| 30-minute session with our team. | ||
| </p> | ||
| <a | ||
| href="https://meetings-eu1.hubspot.com/michael-davis/round-robin-sales-team" | ||
| class="inline-block ff-btn ff-btn--highlight uppercase mb-2" | ||
| style="cursor: pointer;" | ||
| @click="() => (typeof (window as any).capture === 'function') && (window as any).capture('calendar_fallback_cta_clicked')" | ||
| > | ||
| Pick a time → | ||
| </a> | ||
| <p class="mt-4 text-indigo-200 italic font-xs"> | ||
| Prefer to view availability on this page?<br> | ||
| <a | ||
| class="cursor-pointer text-indigo-200 underline" | ||
| @click="() => (window as any).CookieConsent && (window as any).CookieConsent.showPreferences()" | ||
| >Enable analytics cookies.</a> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </template> |
This file contains hidden or 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,58 @@ | ||
| <script setup lang="ts"> | ||
| // Ported from src/_includes/layouts/mql-contact.njk. The form/meeting embed | ||
| // is passed via the default slot since the two consumers (contact-us, | ||
| // book-demo) use different HubSpot embeds (form vs meetings calendar). | ||
| defineProps<{ | ||
| title: string | ||
| description: string | ||
| otherChannels: Array<{ | ||
| title: string | ||
| description: string | ||
| buttonText: string | ||
| buttonLink: string | ||
| icon: string | ||
| }> | ||
| }>() | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="container m-auto max-w-5xl px-6 pb-16 pt-16"> | ||
| <div class="flex flex-col md:grid md:grid-cols-2 gap-8 md:gap-x-12"> | ||
| <div class="order-1 text-center md:text-left md:col-start-1 md:row-start-1 min-w-0"> | ||
| <h1 class="text-indigo-600 mt-0"> | ||
| {{ title }} | ||
| </h1> | ||
| <!-- eslint-disable-next-line vue/no-v-html --> | ||
| <p class="text-gray-500 mt-3" v-html="description" /> | ||
| </div> | ||
|
|
||
| <div class="order-2 md:col-start-2 md:row-start-1 md:row-span-2 min-w-0 overflow-hidden"> | ||
| <slot /> | ||
| </div> | ||
|
|
||
| <div class="order-4 md:col-start-1 md:row-start-2 min-w-0"> | ||
| <div class="flex flex-col gap-12"> | ||
| <div v-for="channel in otherChannels" :key="channel.title" class="flex flex-col items-center md:items-start"> | ||
| <div class="flex flex-col items-center md:items-start gap-2 mb-2"> | ||
| <UIcon :name="`i-lucide-${channel.icon}`" class="w-8 h-8 text-indigo-400" /> | ||
| <h4 class="text-indigo-400 m-0 text-lg font-medium"> | ||
| {{ channel.title }} | ||
| </h4> | ||
| </div> | ||
| <p class="text-gray-500 mb-2 text-center md:text-left"> | ||
| {{ channel.description }} | ||
| </p> | ||
| <a :href="channel.buttonLink" class="text-blue-600 inline-flex items-center gap-1 mt-4"> | ||
| {{ channel.buttonText }} | ||
| <UIcon name="i-lucide-move-right" class="w-4 h-4" /> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="order-3 md:col-start-1 md:col-span-2 md:row-start-3 min-w-0 border-t border-gray-200 pt-6"> | ||
| <SocialProof /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> |
This file contains hidden or 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,110 @@ | ||
| <script setup lang="ts"> | ||
| import { isFuturePost } from '~/composables/useBlogList' | ||
|
|
||
| const props = defineProps<{ | ||
| readingResources?: string | ||
| collectionName?: string | ||
| downloadFollowUp?: boolean | ||
| hubspotReference: string | ||
| }>() | ||
|
|
||
| const { data: blogPosts } = await useAsyncData(`thank-you-blog-${props.collectionName || 'all'}`, async () => { | ||
| const all = await queryCollection('blog') | ||
| .select('path', 'title', 'date', 'tags') | ||
| .order('date', 'DESC') | ||
| .all() | ||
| return all | ||
| .filter(post => !isFuturePost(post.date) && (!props.collectionName || (post.tags || []).includes(props.collectionName))) | ||
| .slice(0, 3) | ||
| }) | ||
|
|
||
| // Mirrors explore-more-content.njk: takes the single latest-dated webinar overall | ||
| // (not "next upcoming or most recent past"), then checks if that one date is in the future. | ||
| const { data: webinar } = await useAsyncData('thank-you-webinar', async () => { | ||
| const all = await queryCollection('webinars') | ||
| .select('path', 'title', 'date', 'time') | ||
| .order('date', 'DESC') | ||
| .limit(1) | ||
| .all() | ||
| return all[0] ?? null | ||
| }) | ||
|
|
||
| const webinarIsUpcoming = computed(() => webinar.value && new Date(webinar.value.date) >= new Date()) | ||
|
|
||
| const blogListUrl = computed(() => `/blog/${props.collectionName || ''}`) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| <template v-if="readingResources === 'stories'"> | ||
| <ThankYouStoriesBlock /> | ||
| <h4 class="mt-20 w-full text-center text-gray-500 pt-12 border-t"> | ||
| Learn more about how FlowFuse helps with your industrial data applications | ||
| </h4> | ||
| </template> | ||
|
|
||
| <div class="w-full max-w-md md:max-w-none mx-auto flex flex-col md:grid md:grid-cols-3 gap-6 md:gap-x-8 pt-8"> | ||
| <div class="w-full my-2 grid grid-cols-1 pb-4"> | ||
| <div class="pb-2 md:pb-0"> | ||
| <a href="/blog/"> | ||
| <img src="/images/home/blog.png" alt="Image of hands typing on laptop working on Node-RED flows" class="w-full max-w-[448px] mx-auto mb-4 aspect-video object-cover rounded-lg"> | ||
| </a> | ||
| <h3 class="text-xl font-bold pb-3"> | ||
| Latest on the blog | ||
| </h3> | ||
| <a v-for="(post, index) in blogPosts" :key="post.path" :href="post.path" class="w-full flex flex-col group" :class="{ 'border-b': index !== (blogPosts?.length ?? 0) - 1 }"> | ||
| <h4 class="my-2 font-light text-lg"> | ||
| <span class="text-gray-500 group-hover:text-blue-700">{{ post.title }}</span> | ||
| </h4> | ||
| </a> | ||
| </div> | ||
| <a :href="blogListUrl" class="group hover:no-underline w-full text-right flex flex-row items-center justify-end gap-1"> | ||
| <span class="group-hover:underline">See all</span> | ||
| <UIcon name="i-lucide-arrow-right" class="w-5 h-5 shrink-0" /> | ||
| </a> | ||
| </div> | ||
|
|
||
| <div v-if="webinar" class="w-full my-2 grid grid-cols-1 pb-4"> | ||
| <div class="pb-2 md:pb-0"> | ||
| <a :href="webinar.path"> | ||
| <img src="/images/home/webinar.png" alt="Image of hands typing on laptop working on Node-RED flows" class="w-full max-w-[448px] mx-auto mb-4 aspect-video object-cover rounded-lg"> | ||
| </a> | ||
| <h3 class="text-xl font-bold pb-3"> | ||
| {{ webinarIsUpcoming ? 'Upcoming' : 'Latest' }} Webinar | ||
| </h3> | ||
| <div class="w-full flex flex-col"> | ||
| <h4 class="my-2 font-light text-lg"> | ||
| <span class="text-gray-500">{{ webinar.title }}</span> | ||
| </h4> | ||
| </div> | ||
| <div class="w-full border-t pt-3 font-light text-gray-500"> | ||
| <time :datetime="webinar.date">{{ new Date(webinar.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) }}</time> | ||
| <template v-if="webinarIsUpcoming && webinar.time"> | ||
| | <time>{{ webinar.time }}</time> | ||
| </template> | ||
| </div> | ||
| </div> | ||
| <a | ||
| :href="webinar.path" | ||
| class="mt-4 ff-btn uppercase inline-block self-end justify-self-end" | ||
| :class="downloadFollowUp ? 'ff-btn--primary' : 'ff-btn--primary-outlined'" | ||
| >{{ webinarIsUpcoming ? 'REGISTER NOW' : 'WATCH WEBINAR' }}</a> | ||
| </div> | ||
|
|
||
| <div class="w-full my-2 grid grid-cols-1"> | ||
| <div class="pb-2 md:pb-0"> | ||
| <img src="/images/home/newsletter.png" alt="Image of hands typing on laptop working on Node-RED flows" class="w-full max-w-[448px] mx-auto mb-4 aspect-video object-cover rounded-lg"> | ||
| <h3 class="text-xl font-bold pb-3"> | ||
| Newsletter | ||
| </h3> | ||
| <h4 class="font-bold pb-3 pt-2 text-lg"> | ||
| Sign up for our monthly email updates | ||
| </h4> | ||
| </div> | ||
| <div class="-mb-1 self-end w-full"> | ||
| <HubSpotForm form-id="159c173d-dd95-49bd-922b-ff3ef243e90c" cta="cta-blog-subscribe" :reference="hubspotReference" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> |
This file contains hidden or 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,39 @@ | ||
| <script setup lang="ts"> | ||
| // Ported from src/_includes/stories-block.njk + src/_includes/stories/customer-story.njk. | ||
| // The random pick happens inside useAsyncData's fetcher (server-only), so the result is | ||
| // serialized once and reused on the client - re-shuffling in the template would cause a | ||
| // hydration mismatch. | ||
| const { data: stories } = await useAsyncData('thank-you-stories', async () => { | ||
| const all = await queryCollection('stories') | ||
| .select('path', 'title', 'image', 'logo', 'story') | ||
| .all() | ||
| return all | ||
| .map(story => ({ sort: Math.random(), story })) | ||
| .sort((a, b) => a.sort - b.sort) | ||
| .slice(0, 3) | ||
| .map(({ story }) => story) | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <ul class="w-full max-w-md md:max-w-none mx-auto flex flex-col md:grid md:grid-cols-3 gap-3 md:gap-x-4 pt-8"> | ||
| <li v-for="story in stories" :key="story.path" class="w-full my-2 border rounded-lg hover:drop-shadow-lg hover:border-blue-600 transition ease-in-out duration-300 bg-white"> | ||
| <a :href="story.path" class="w-full flex flex-col group hover:no-underline h-full m-0"> | ||
| <div class="relative border-b"> | ||
| <div class="w-full h-52 sm:h-48 overflow-hidden rounded-t-lg"> | ||
| <img :src="story.image || '/images/og-blog.jpg'" :alt="`Image representing ${story.title}`" class="w-full h-full object-cover"> | ||
| </div> | ||
| <div v-if="story.logo" class="w-1/2 h-full absolute left-0 top-0 bg-white flex items-center justify-center rounded-tl-lg"> | ||
| <img :src="story.logo" :alt="`${story.story?.brand} logo`" class="max-w-[70%] max-h-[70%] object-contain"> | ||
| </div> | ||
| </div> | ||
| <div class="flex flex-col mt-1 mb-0 p-5 pt-3 gap-2"> | ||
| <span class="font-bold text-gray-600">{{ story.story?.brand }}</span> | ||
| <h3 class="group-hover:text-blue-600 font-medium m-0 mt-0 mb-2 text-lg leading-relaxed"> | ||
| {{ story.title }} | ||
| </h3> | ||
| </div> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </template> |
This file contains hidden or 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 hidden or 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.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ZJvandeWeg I'm not sure if this was meant to be included in this PR, the title and description only talk about contact us and book a demo. Was this intentional?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, intentional — the title/description have been updated to reflect that this PR also migrates /thank-you/*.