feat(ui): creators blog

[kaf-lamed-beyt]

Hi @acekyd, when you're chanced, kindly review.

However, here's a short note on what this PR entails and the reason behind the changes I made.

• With version 14.4.19 of next — the version I met in this branch when I switched to it — the dev server kept on exiting when I run next dev, so I bumped the version to 14.0.0 and that solved it, I guess.

• With this new version, there was always this "the user aborted a request" error in the terminal. It was due to a wrong import of the NavBar component. Fixing the import, resolved the error.

• I noticed that, on clicking a nav item in the NavBar, it causes a page reload as you navigate to that route, which goes mildly against the SPA pattern, we shouldn't be having that page reload. So I made a change that addressed this in the component by passing NextLink to the as prop of the Chakra link component.

• Where necessary, I renamed some components to use TypeScript fully for type safety and to have full control of the props I'm sharing among components. Where it wasn't necessary, I resorted to the "prop-types" module.

• For now, we only have two custom components in /app/components/mdx-components/article-components.tsx that'll be used for the styles of the element in the /slug route. As time goes on, we can add more.

• There's one thing I noticed with the <PrimaryButton /> component in the <BlogNewsletter /> component though. The specified bg color in its style is green, but it doesn't render correctly. I tried fixing it to no avail.

what's left

• For now, I think I still have to perfect the responsiveness of the blog layout on various breakpoints.
• Add SEO metatags with the metadata API of Next.js

addresses #263

[codesandbox[bot]]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

[acekyd]

Oh this awesome! Thanks @kaf-lamed-beyt. Responses to your notes:

• That's odd - I have 13.4.19 fixed on my local. No idea why it should default to 14+ for you. But that could also explain the import error.
• Thanks for catching the page load thing - might create another issue but is it possible to add a loader as the page seems to freeze for a second before switching with this implementation?

For the other things, we can continue to fix and update the experience as the project goes on.

A few things:

• The blog is meant to be under the /creators link and menu instead of having a blog path or menu of it's own.
• The blog search also doesn't work yet, right?

[kaf-lamed-beyt]

That's odd - I have 13.4.19 fixed on my local. No idea why it should default to 14+ for you. But that could also explain the import error.

That's weird. I'd try downgrading again to see if the issue persists. If it does, I'll revert to 14.0.0 if that sounds okay.

Thanks for catching the page load thing - might create another issue but is it possible to add a loader as the page seems to freeze for a second before switching with this implementation?

Oh yes, that is possible. For now, the loader could just be a spinner, yes?

The blog is meant to be under the /creators link and menu instead of having a blog path or menu of it's own.

Nice! So if I understand you correctly, the creators nav item is going to be a drop-down? Or the blog's path is just going to be a URL segment. Something like: "/localhost:3000/creators/blog/"?

And yes. the blog search doesn't work for now. I forgot to mention it. But, It'll go into the next set of commit(s).

[acekyd]

No I’m saying /blog should become /creators. There’d be no /blog path.

The blog feature is meant for the creators.

--

Best, Adewale Abati Web Engineer & Developer Advocate, adewaleabati.com https://www.adewaleabati.com/ @ace_kyd https://twitter.com/ace_kyd

On Wed, Jan 17, 2024 at 12:41 PM null (for now) @.***> wrote:

That's odd - I have 13.4.19 fixed on my local. No idea why it should default to 14+ for you. But that could also explain the import error.

That's weird. I'd try downgrading again to see if the issue persists. If it does, I'll revert to 14.0.0 if that sounds okay.

Thanks for catching the page load thing - might create another issue but is it possible to add a loader as the page seems to freeze for a second before switching with this implementation?

Oh yes, that is possible. For now, the loader could just be a spinner, yes?

The blog is meant to be under the /creators link and menu instead of having a blog path or menu of it's own.

Nice! So if I understand you correctly, the creators nav item is going to be a drop-down? Or the blog's path is just going to be a URL segment. Something like: "/localhost:3000/creators/blog/"?

And yes. the blog search doesn't work for now. I forgot to mention it. But, It'll go into the next set of commit(s).

— Reply to this email directly, view it on GitHub https://github.com/acekyd/made-in-nigeria/pull/265#issuecomment-1895636922, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA6RNUTBTADEFHQP6BMQRD3YO62ILAVCNFSM6AAAAABB56D3SKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOJVGYZTMOJSGI . You are receiving this because you were mentioned.Message ID: @.***>

[kaf-lamed-beyt]

Oh! Thanks. I understand now.

[acekyd]

Cool. Let me know when the change is live so I can merge! @kaf-lamed-beyt

[kaf-lamed-beyt]

Sure thing. I'll let you know.

[kaf-lamed-beyt]

Hi @acekyd

So, I've moved /blog to /creators and also included search. One other thing I did was to conditionally render the navbar search component only on pages that need it. So, the homepage, creators, and projects.

You can test the "load more articles" button too.

I tried to see if I could extend the search feature of the blog to the navbar component. But, it feels a little bit deeper than I thought. The search component needs different types of data — articles and projects — and it is a global component housed in the root layout.

Perhaps, when I'm able to sit down and properly think of the flow, I can come up with a solution. In the meantime, kindly review this. Thanks!

[acekyd]

Hey! I love this start - we might have to have two different search components - for projects and creators. But this is a great start and I'll be merging now. Thanks @kaf-lamed-beyt

[kaf-lamed-beyt]

Nice!! I'm glad it made sense.