Navigation component and some minor issues

[delbronski]

Hey,

Really cool library, thanks for building this!

I have one request and a few super small bugs/ docs recommendations I hope you find helpful

My feature requests: It would be really cool if the navigation components in the example tempaltes were also available.

Besides that, here are a few difficulties I encountered when setting this up:

I followed the next.js installation and tried out one of the examples but kept getting errors like:

Error: Invalid src prop (https://picsum.photos/id/64/100/100) on next/image, hostname "picsum.photos" is not configured under images in your next.config.js

I eventually figured out I had to do this:

/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
domains: ['picsum.photos']
}
};

However, the next.js docs recommend doing something like this:

module.exports = {
images: {
domains: ['https://picsum.photos/']
}
};

Which led to some errors about module.exports. It was an annoying little error that almost made me quit and move on to something else. I recommend adding something about this to the docs.

---

For some reason I could not figure out, some buttons seem to lose their styling in some of the examples. This does not happen in all the examples I copied

---

Small one, but if you want to make your docs really world-class I think it helps to be very obvious. Often when devs are trying new things they follow instructions to the tea.

Int the next.js docs after this step:

npx create-next-app@latest my-app --typescript --tailwind --eslint

Remind users that they must cd into my-app and continue with the rest of the steps. I know it seems obvious, but it got me and I've been working with React for a while.

---

Unless users are familiar with tailwind, in the step of copying things to global.css, make it obvious in the docs that users should keep

@tailwind base;
@tailwind components;
@tailwind utilities;

PASTE CODE HERE...

or just include everything they need to paste.

---

The landing testimonials has some small styling issues on mobile

Thanks again for working on this.

[balibou]

Hello @delbronski, you can find a component TemplateHeader used in a template

[danmindru]

hey guys,

This is awesome feedback. Thank you so much for taking the time to write this. It's worth its weight in gold!

1. Would defo make sense to include the Header/Footer also a one-click copy.

in the meantime, @balibou is right. You can grab those from the source. Also the footer and other components are available in the source.
Check out components/shared to find them all :)

2. Regarding the image error, how about I bundle a sample image into the install script? Would that be okay? Then you don't need to configure anything at all.

3. Missing styling

For some reason I could not figure out, some buttons seem to lose their styling in some of the examples. This does not happen in all the examples I copied

It's fine to say no because this takes some time, but do you think it's possible to make a repo where you reproduce this issue?

4. Regarding the testimonials on mobile, would you expect them to be left aligned? Just to understand what the styling issue is 😬

I have updated the docs with your suggestions. Stellar feedback!

Have a fantastic day ☀️
Dan

[delbronski]

Hey thanks for the quick reply!

1. Thanks, I missed that in the repo!
2. Yeah that should work.
3. Sure, I'll do this when I get some time this week! For some reason a few buttons just lost their color properties.
4. I guess maybe this is a matter of preference. I would expect for the avatar images to be vertically aligned with one another. It is a very small detail as I said. But it seemed off to me that the first avatar image is a tad bit to the right than the other 3. I suspect this is because the text of the first avatar is just shorter.

[danmindru]

Just a small update, I have fixed no. 4 in v1.1.2. Your suggestion made sense 👍

[nishchal27]

hello, @danmindru. I'd like to contribute to this OS repo. Is this repo open for contributions?

[danmindru]

hey @nishchal27, of course! That’ll be awesome!