From 34fe3719af153533a620b021aa8759164c2ecf46 Mon Sep 17 00:00:00 2001 From: Tony133 Date: Sat, 27 Jun 2026 16:16:17 +0200 Subject: [PATCH 1/4] refactor(quickstart): replace Docusaurus CodeBlock styles --- src/components/QuickStart/index.jsx | 85 +++++++++++------- src/components/QuickStart/styles.module.css | 99 +++++++++++++++++++++ src/theme/CodeBlock/index.js | 8 ++ 3 files changed, 161 insertions(+), 31 deletions(-) create mode 100644 src/components/QuickStart/styles.module.css create mode 100644 src/theme/CodeBlock/index.js diff --git a/src/components/QuickStart/index.jsx b/src/components/QuickStart/index.jsx index 670fc710..489be011 100644 --- a/src/components/QuickStart/index.jsx +++ b/src/components/QuickStart/index.jsx @@ -1,9 +1,10 @@ import React from 'react' import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem' -import CodeBlock from '@theme/CodeBlock' import Link from '@docusaurus/Link' import Heading from '@theme/Heading' +import CodeBlock from '@theme/CodeBlock' +import styles from './styles.module.css' export default function QuickStart() { const esm = `// Import the framework and instantiate it @@ -169,24 +170,36 @@ start()` Quick start

Get Fastify with NPM:

- npm install fastify +
+ npm install fastify +

Then create server.js and add the following content:

- - - {esm} - - - {cjs} - - +
+ + + + {esm} + + + + + {cjs} + + + +

Finally, launch the server with:

- node server +
+ node server +

and test it with:

- curl http://localhost:3000 +
+ curl http://localhost:3000 +
Using CLI

@@ -197,29 +210,35 @@ start()` to create a new scaffolding project:

- - npm install --global fastify-cli -
- fastify generate myproject - +
+ {`npm install --global fastify-cli\n\nfastify generate myproject`} +

Or to create a TypeScript project:

- fastify generate myproject --lang=ts +
+ fastify generate myproject --lang=ts +
Request/Response validation and hooks

Fastify can do much more than this. For example, you can easily provide input and output validation using JSON Schema and perform specific operations before the handler is executed:

- - - {exampleRequestResponseEsm} - - - {exampleRequestResponseCjs} - - +
+ + + + {exampleRequestResponseEsm} + + + + + {exampleRequestResponseCjs} + + + +
TypeScript Support

@@ -239,11 +258,15 @@ start()` This ensures within the server handler we also get http.ServerResponse with correct typings on{' '} reply.res.

- - - {typescript} - - +
+ + + + {typescript} + + + +

Visit the Documentation to learn more about all the features that Fastify has to offer. diff --git a/src/components/QuickStart/styles.module.css b/src/components/QuickStart/styles.module.css new file mode 100644 index 00000000..25ef3a32 --- /dev/null +++ b/src/components/QuickStart/styles.module.css @@ -0,0 +1,99 @@ +.subLabel { + font-family: var(--ifm-font-family-monospace); + font-size: 11px; + color: var(--ifm-color-primary); + letter-spacing: 0.08em; + margin-bottom: 0.5rem !important; + margin-top: 1.5rem !important; +} + +.qsCodeblock { + border: 0.5px solid #2d3040; + border-radius: 12px; + overflow: hidden; + margin: 8px 0; + background: #16181d; +} + +.qsCodeblock > div, +.qsCodeblock [class*='tabItem'], +.qsCodeblock [role='tabpanel'], +.qsCodeblock [class*='codeBlockContainer'], +.qsCodeblock [class*='codeBlockContent'] pre { + margin: 0 !important; + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.qsCodeblock [class*='tabList__'] { + background: #1c1f28 !important; + border-bottom: 0.5px solid #2d3040 !important; + border-radius: 0 !important; + margin: 0 !important; + padding: 0 !important; + gap: 0 !important; +} + +.qsCodeblock [class*='tabList__'] [aria-selected='true'] { + font-size: 13px !important; + font-weight: 500 !important; + color: #25c2a0 !important; + background: none !important; + margin: 10px 0px 0px 0px !important; + border: none !important; + text-transform: uppercase; +} + +.qsCodeblock [class*='tabList__'] [aria-selected='false'] { + font-size: 13px !important; + font-weight: 500 !important; + border-bottom: 2px solid transparent !important; + color: #6c7086 !important; + background: none !important; + margin: 10px 0px 0px 0px !important; + text-transform: uppercase; +} + +.qsCodeblock [role='tabpanel'] { + padding: 0 !important; + margin: 0 !important; +} + +.qsCodeblock [class*='codeBlockContainer'] { + border-radius: 0 !important; + border: none !important; + box-shadow: none !important; + margin: 0 !important; + background: #16181d !important; +} + +.qsCodeblock [class*='codeBlockContent'] { + background: #16181d !important; +} + +.qsCodeblock [class*='codeBlockContent'] pre { + background: #16181d !important; + margin: 0 !important; +} + +.qsCodeblock [class*='codeBlockTitle'] { + background: #1c1f28 !important; + border-bottom: 0.5px solid #2d3040 !important; + border-radius: 0 !important; + color: #25c2a0 !important; + font-size: 11px !important; + font-weight: 500 !important; + letter-spacing: 0.07em !important; + text-transform: uppercase !important; + padding: 8px 16px !important; + margin: 0 !important; +} + +.qsCodeblock [class*='copyButton'] { + color: #25c2a0 !important; +} + +.qsCodeblock [class*='copyButton']:hover { + color: #25c2a0bb !important; + background: transparent !important; +} diff --git a/src/theme/CodeBlock/index.js b/src/theme/CodeBlock/index.js new file mode 100644 index 00000000..7da6d8fe --- /dev/null +++ b/src/theme/CodeBlock/index.js @@ -0,0 +1,8 @@ +import React from 'react' +import OriginalCodeBlock from '@docusaurus/theme-classic/lib/theme/CodeBlock/index.js' + +export default function CodeBlock({ language, title, noTitle, ...props }) { + const resolvedTitle = noTitle ? undefined : (title ?? language) + + return +} From b2b009764f532f18db2511472102b3fff933660c Mon Sep 17 00:00:00 2001 From: Tony133 Date: Sat, 27 Jun 2026 22:42:54 +0200 Subject: [PATCH 2/4] chore: cleaning up css styles --- src/components/QuickStart/styles.module.css | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/components/QuickStart/styles.module.css b/src/components/QuickStart/styles.module.css index 25ef3a32..90bfe22e 100644 --- a/src/components/QuickStart/styles.module.css +++ b/src/components/QuickStart/styles.module.css @@ -1,12 +1,3 @@ -.subLabel { - font-family: var(--ifm-font-family-monospace); - font-size: 11px; - color: var(--ifm-color-primary); - letter-spacing: 0.08em; - margin-bottom: 0.5rem !important; - margin-top: 1.5rem !important; -} - .qsCodeblock { border: 0.5px solid #2d3040; border-radius: 12px; From c90a5dcab5235241beac9247835d8b5ab59ef7a3 Mon Sep 17 00:00:00 2001 From: Tony133 Date: Sun, 28 Jun 2026 09:58:20 +0200 Subject: [PATCH 3/4] fix: update --- src/components/QuickStart/styles.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/QuickStart/styles.module.css b/src/components/QuickStart/styles.module.css index 90bfe22e..7ae1cf76 100644 --- a/src/components/QuickStart/styles.module.css +++ b/src/components/QuickStart/styles.module.css @@ -30,7 +30,7 @@ font-weight: 500 !important; color: #25c2a0 !important; background: none !important; - margin: 10px 0px 0px 0px !important; + margin: 10px 0 0 !important; border: none !important; text-transform: uppercase; } @@ -41,7 +41,7 @@ border-bottom: 2px solid transparent !important; color: #6c7086 !important; background: none !important; - margin: 10px 0px 0px 0px !important; + margin: 10px 0 0 !important; text-transform: uppercase; } From dee94c99d8b0559d73aea2817032876d8a86f4bb Mon Sep 17 00:00:00 2001 From: Tony133 Date: Sun, 28 Jun 2026 11:04:26 +0200 Subject: [PATCH 4/4] chore: cleaning up css styles --- src/components/QuickStart/styles.module.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/QuickStart/styles.module.css b/src/components/QuickStart/styles.module.css index 7ae1cf76..09ca0d64 100644 --- a/src/components/QuickStart/styles.module.css +++ b/src/components/QuickStart/styles.module.css @@ -11,9 +11,9 @@ .qsCodeblock [role='tabpanel'], .qsCodeblock [class*='codeBlockContainer'], .qsCodeblock [class*='codeBlockContent'] pre { - margin: 0 !important; - padding-top: 0 !important; - padding-bottom: 0 !important; + margin: 0; + padding-top: 0; + padding-bottom: 0; } .qsCodeblock [class*='tabList__'] { @@ -46,15 +46,15 @@ } .qsCodeblock [role='tabpanel'] { - padding: 0 !important; - margin: 0 !important; + padding: 0; + margin: 0; } .qsCodeblock [class*='codeBlockContainer'] { border-radius: 0 !important; border: none !important; box-shadow: none !important; - margin: 0 !important; + margin: 0; background: #16181d !important; } @@ -64,7 +64,7 @@ .qsCodeblock [class*='codeBlockContent'] pre { background: #16181d !important; - margin: 0 !important; + margin: 0; } .qsCodeblock [class*='codeBlockTitle'] {