feat(QuickStart): replace Docusaurus CodeBlock styles

[Tony133]

Proposal:

• Replaces Docusaurus CodeBlock styles
• Added CodeBlock function in theme directory
• Added styles.module.css in QuickStart directory
• Update index.jsx in QuickStart directory

---

• Preview Quickstart:

• Preview Using CLI:

• Preview Tab ESM:

• Preview Tab CJS:

• Preview Typescript Support:

---

cc @fastify/frontend @fastify/website

[ilteoood]

Honestly I don't understand why we need this.
All the 3 features that you highlighted are already available even with the default codeblock, here follows an example:

Consider also that creating a new component makes the migration to the new versions of docusaurus harder than what they already are.

[Tony133]

Honestly I don't understand why we need this. All the 3 features that you highlighted are already available even with the default codeblock, here follows an example:

Consider also that creating a new component makes the migration to the new versions of docusaurus harder than what they already are.

Thanks for the review! You're absolutely right, the default configuration supports these features. The primary reason was purely aesthetic: I wanted to give the homepage/QuickStart a more customized and polished look. The goal was just to make the homepage a little bit nicer! 🙂 As I had started doing in this PR: #443

[ilteoood]

Honestly I don't understand why we need this. All the 3 features that you highlighted are already available even with the default codeblock, here follows an example:

Consider also that creating a new component makes the migration to the new versions of docusaurus harder than what they already are.

Thanks for the review! You're absolutely right, the default configuration supports these features. The primary reason was purely aesthetic: I wanted to give the homepage/QuickStart a more customized and polished look. The goal was just to make the homepage a little bit nicer! 🙂 As I had started doing in this PR: #443

I get it, but then why not opting for customizations through CSS? Is it something you considered or did you have any problem with it?

[Tony133]

Honestly I don't understand why we need this. All the 3 features that you highlighted are already available even with the default codeblock, here follows an example:
Consider also that creating a new component makes the migration to the new versions of docusaurus harder than what they already are.

Thanks for the review! You're absolutely right, the default configuration supports these features. The primary reason was purely aesthetic: I wanted to give the homepage/QuickStart a more customized and polished look. The goal was just to make the homepage a little bit nicer! 🙂 As I had started doing in this PR: #443

I get it, but then why not opting for customizations through CSS? Is it something you considered or did you have any problem with it?

I’ll try to see what I can do by tweaking the CSS a little, without creating any custom components 💪🏻

[ilteoood]

Honestly I don't understand why we need this. All the 3 features that you highlighted are already available even with the default codeblock, here follows an example:
Consider also that creating a new component makes the migration to the new versions of docusaurus harder than what they already are.

Thanks for the review! You're absolutely right, the default configuration supports these features. The primary reason was purely aesthetic: I wanted to give the homepage/QuickStart a more customized and polished look. The goal was just to make the homepage a little bit nicer! 🙂 As I had started doing in this PR: #443

I get it, but then why not opting for customizations through CSS? Is it something you considered or did you have any problem with it?

I’ll try to see what I can do by tweaking the CSS a little, without creating any custom components 💪🏻

Thank you so much, please keep me posted!

[Tony133]

@ilteoood As soon as you have time, I made a change via CSS without using custom components, see commit here: 34fe371

I've also updated the screenshots in the PR description 🙌

[ilteoood]

Considering that you are wrapping everything with the qsCodeBlock class, do you still need this?

[Tony133]

Considering that you are wrapping everything with the qsCodeBlock class, do you still need this?

removed, see commit here: b2b0097

[ilteoood]

Are these important really needed?
Maybe by using a more specific selector we can get rid of them

[Tony133]

Are these important really needed? Maybe by using a more specific selector we can get rid of them

see commit here: dee94c9