Feat: Add the Newsletter feature to the website. #308

ayushnau · 2024-02-13T16:25:26Z

GitHub Issue: #243

Summary:

Do you think resolving this issue might require an Architectural Decision Record (ADR)? (significant or noteworthy)
No

No

benjagm

Thanks for this PR @ayushnau !

We'll need to do some additional work to make sure we provide the name and email fields alongside with the subscribe button in the landing page like the example provided from AsyncAPI.

In addition, the new page should have all the styling than the other pages of the website including headers and footer... you can see a similar page in "https://json-schema.org/implementations" and the equivalent page in ASyncAPI site:

https://www.asyncapi.com/newsletter

~~Is it ok to rename the page subscribe to newsletter?~~

Could it be possible to avoid uppercase in the name of Newsletter.tsx?

ayushnau · 2024-02-15T20:10:01Z

@benjagm can you elaborate the newsletter point. do you want it for filename or for component name . cause i can see in some places we have used uppercases in filename and also in component name.

benjagm · 2024-02-15T20:14:35Z

newsletter point

Forget about my comment on this one @ayushnau. My bad, this as internal component and uppercase in the first letter is irrelevant.

ayushnau · 2024-02-15T20:16:01Z

ok can you review the pr. here is how it looks. @benjagm

ayushnau · 2024-02-15T20:18:08Z

Also please provide me the api for subscribe. will integrate it.

benjagm

Great progress @ayushnau !!! Thanks a lot.

Just few comments: The screenshot I provided was just an example, so it is not necessary to add that black background.

For the newsletter page: Background should be white, fonts smaller and increase the horizontal padding to at least 8.
For showing the component in the landing page remember it is going to be shown in this section (make sure the styles work here and also in the newsletter page):

ayushnau · 2024-02-20T15:18:12Z

For second point will the newsletter component replace it or will added next to the text.

@benjagm

benjagm

You did a lot of progress @ayushnau , Thanks!!

I left some additional change requests to make sure we are covering all the scenarios.

Great progress so far!!! Congrats. We are very close.

benjagm · 2024-02-21T10:43:19Z

components/Newsletter.tsx

+  wrapperClassName?: string
+  className?: string
+}
+const NewsletterForm: React.FC<NewsletterFormProps> = ({ wrapperClassName = '', className = '' }) => { 


This component is going to be presented in two scenarios:

In the newsletter page with while background and black letters. (default)

In the landing page call to action banners, with blue background and white letters. (see image)

With that in mind you will need to define an input parameter allowing to define what of those 2 behaviours the component will render.

components/Newsletter.tsx

benjagm · 2024-02-21T10:52:54Z

pages/index.page.tsx

@@ -320,7 +320,7 @@ const Home = (props: any) => {
        <section className='w-full h-[300px] lg:h-[367px] bg-gradient-to-r from-primary from-1.95% to-endBlue clip-both'>
          <div className='lg:w-full mx-auto text-center mt-28 '>
            <h2 className='text-h3mobile lg:text-h3 text-white mb-6'>Start contributing to JSON Schema</h2>
-            <button className='w-[170px] h-[45px] mx-auto rounded border-2 bg-primary text-white font-semibold'><a href='https://github.com/json-schema-org#-contributing-to-json-schema'>Contribute</a></button>
+            <button className='w-[170px] h-[45px] mx-auto rounded border-2 bg-primary text-white font-semibold'><a href='/newsletter'>Subscribe</a></button>


Wha we need here is to show the component itself, no a button to navigate to the newsletter page. We need here to remove that extra step. Make it is easy for the user to subscribe.

See my first comment regarding how to make the component use different fonts/colours depending on the context.

My expectation is to implement the same approach than asyncapi. They show component in the landing page with white fonts:
https://www.asyncapi.com/en
And they show the component with black fonts in the newsletter page:
https://www.asyncapi.com/newsletter

components/Newsletter.tsx

AyushNautiyalDeveloper · 2024-02-22T13:02:05Z

@benjagm

AyushNautiyalDeveloper · 2024-02-22T13:02:58Z

Pasted ss for newsletter page and landing page both in mobile and web views.

benjagm

@AyushNautiyalDeveloper @ayushnau Are you the same person?

Please check and increase the horizontal paddings or margins in mobile to make it look similar to AsyncAPI:

For desktop: This is what I see

I think something is missing when appearing in the landing page. In addition in this case I think the background of the inputboxes will look better white.

ayushnau · 2024-02-24T12:15:51Z

made the changes. here is the images for reference. @benjagm

ayushnau · 2024-02-24T12:16:19Z

and yes we both are same person.

benjagm

Excelent work @ayushnau!

Just pushed some extra code to make it work with our mailchimp account. Will merge it in the next days!

ayushnau · 2024-02-25T05:05:39Z

ok sure that would be great. @benjagm

benjagm · 2024-03-05T16:17:34Z

@ayushnau Do you mind rebasing and solving the merge conflicts? We'll merge it.

benjagm

Can we please avoid the changes in package.json and yarn.lock? I think all those changes are not necessary.

benjagm · 2024-03-06T17:49:39Z

Can you please change the target branch to https://github.com/json-schema-org/website/tree/web-release-3?

Reference docs: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-base-branch-of-a-pull-request

DhairyaMajmudar · 2024-03-07T11:15:23Z

@ayushnau do you need any help for the pr, feel free to ask : )

Maykkkk · 2024-03-09T09:25:02Z

@ayushnau its almost done let me know if you need any help.

benjagm · 2024-03-11T12:20:58Z

Can you please change the target branch to https://github.com/json-schema-org/website/tree/web-release-3?

Reference docs: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-base-branch-of-a-pull-request

benjagm · 2024-03-11T12:30:57Z

Are we closing this in favour of #489 ?

AyushNautiyalDeveloper · 2024-03-11T12:44:51Z

Are we closing this in favour of #489 ?

yes.

benjagm · 2024-03-11T13:02:18Z

Closed in favour of #489

AyushNautiyalDeveloper added 2 commits February 13, 2024 03:24

initialize the Test directory.

d9162a4

Added the subscribe button.

acd00e8

ayushnau mentioned this pull request Feb 13, 2024

Add a newsletter subscribe form to the Landing Page #243

Closed

Added the subscribe page.

d8976e6

benjagm requested changes Feb 15, 2024

View reviewed changes

AyushNautiyalDeveloper added 2 commits February 16, 2024 01:35

Added the newsletter page.

2d81616

changed name to newsletter.

18406f1

removed the unwated code.

cb8e606

removed the unwated components.

95ce601

benjagm requested changes Feb 19, 2024

View reviewed changes

AyushNautiyalDeveloper added 2 commits February 20, 2024 20:45

decreased the horizontal width and changed the color.

c2428ba

decreased the font size.

5250509

benjagm requested changes Feb 21, 2024

View reviewed changes

Added the changes for the newsletter banner.

27ff58e

AyushNautiyalDeveloper added 2 commits February 22, 2024 18:33

Added the newletter component to landing page.

f313f77

added the color for input.

f933741

benjagm requested changes Feb 23, 2024

View reviewed changes

AyushNautiyalDeveloper and others added 3 commits February 24, 2024 17:47

Added the required horizontal padding.

5854389

Added the required horizontal padding. for newsletter page.

46c1b31

Add changes to make it work with mailchimp

31dfed6

benjagm approved these changes Feb 24, 2024

View reviewed changes

benjagm marked this pull request as draft February 26, 2024 17:49

benjagm added the Status: Completed Nothing further to be done with this issue. label Mar 1, 2024

AyushNautiyalDeveloper added 2 commits March 5, 2024 22:31

Merge branch 'main' of github.com:json-schema-org/website

e711443

Merge remote-tracking branch 'origin/main'

be054b4

benjagm requested changes Mar 6, 2024

View reviewed changes

benjagm mentioned this pull request Mar 6, 2024

Execute the documentation strategy #158

Open

35 tasks

added the yarn file back.

3661714

ayushnau force-pushed the main branch from eb6078d to 3661714 Compare March 9, 2024 10:44

AyushNautiyalDeveloper and others added 6 commits March 9, 2024 16:15

Added yarn.lock file.

562b313

added old package .json file.

47db7d7

Update yarn.lock

5796e8a

linted the newsletter.tsx

2c91cc9

linted newsletter

a363438

fix the index.page

c186192

benjagm closed this Mar 11, 2024

benjagm mentioned this pull request Apr 8, 2024

✨ Enhancement: Newsletter landing page #634

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: Add the Newsletter feature to the website. #308

Feat: Add the Newsletter feature to the website. #308

ayushnau commented Feb 13, 2024

benjagm left a comment •

edited

Loading

ayushnau commented Feb 15, 2024

benjagm commented Feb 15, 2024 •

edited

Loading

ayushnau commented Feb 15, 2024 •

edited

Loading

ayushnau commented Feb 15, 2024 •

edited

Loading

benjagm left a comment •

edited

Loading

ayushnau commented Feb 20, 2024 •

edited

Loading

benjagm left a comment

benjagm Feb 21, 2024

benjagm Feb 21, 2024

ayushnau Feb 24, 2024

AyushNautiyalDeveloper commented Feb 22, 2024

AyushNautiyalDeveloper commented Feb 22, 2024

benjagm left a comment

ayushnau commented Feb 24, 2024

ayushnau commented Feb 24, 2024

benjagm left a comment

ayushnau commented Feb 25, 2024

benjagm commented Mar 5, 2024

benjagm left a comment

benjagm commented Mar 6, 2024

DhairyaMajmudar commented Mar 7, 2024

Maykkkk commented Mar 9, 2024

benjagm commented Mar 11, 2024

benjagm commented Mar 11, 2024

AyushNautiyalDeveloper commented Mar 11, 2024

benjagm commented Mar 11, 2024

Feat: Add the Newsletter feature to the website. #308

Feat: Add the Newsletter feature to the website. #308

Conversation

ayushnau commented Feb 13, 2024

benjagm left a comment • edited Loading

Choose a reason for hiding this comment

ayushnau commented Feb 15, 2024

benjagm commented Feb 15, 2024 • edited Loading

ayushnau commented Feb 15, 2024 • edited Loading

ayushnau commented Feb 15, 2024 • edited Loading

benjagm left a comment • edited Loading

Choose a reason for hiding this comment

ayushnau commented Feb 20, 2024 • edited Loading

benjagm left a comment

Choose a reason for hiding this comment

benjagm Feb 21, 2024

Choose a reason for hiding this comment

benjagm Feb 21, 2024

Choose a reason for hiding this comment

ayushnau Feb 24, 2024

Choose a reason for hiding this comment

AyushNautiyalDeveloper commented Feb 22, 2024

AyushNautiyalDeveloper commented Feb 22, 2024

benjagm left a comment

Choose a reason for hiding this comment

ayushnau commented Feb 24, 2024

ayushnau commented Feb 24, 2024

benjagm left a comment

Choose a reason for hiding this comment

ayushnau commented Feb 25, 2024

benjagm commented Mar 5, 2024

benjagm left a comment

Choose a reason for hiding this comment

benjagm commented Mar 6, 2024

DhairyaMajmudar commented Mar 7, 2024

Maykkkk commented Mar 9, 2024

benjagm commented Mar 11, 2024

benjagm commented Mar 11, 2024

AyushNautiyalDeveloper commented Mar 11, 2024

benjagm commented Mar 11, 2024

benjagm left a comment •

edited

Loading

benjagm commented Feb 15, 2024 •

edited

Loading

ayushnau commented Feb 15, 2024 •

edited

Loading

ayushnau commented Feb 15, 2024 •

edited

Loading

benjagm left a comment •

edited

Loading

ayushnau commented Feb 20, 2024 •

edited

Loading