From 3daa4fce62ee6f2724260fe02ec7e73cd214f532 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 26 Jun 2026 08:41:21 +0000 Subject: [PATCH 1/2] Initial plan From 5b02058c573531ab0acff0a75a194bf61cb851c8 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 26 Jun 2026 08:45:16 +0000 Subject: [PATCH 2/2] fix(homepage): add CoreFeatures component with proper formatting and linting --- package-lock.json | 12 --- src/components/CoreFeatures/index.jsx | 74 +++++++++++++++ src/components/CoreFeatures/styles.module.css | 91 +++++++++++++++++++ src/pages/index.jsx | 29 +----- 4 files changed, 167 insertions(+), 39 deletions(-) create mode 100644 src/components/CoreFeatures/index.jsx create mode 100644 src/components/CoreFeatures/styles.module.css diff --git a/package-lock.json b/package-lock.json index be97ad12..a5097d3c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5496,9 +5496,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5515,9 +5512,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -5534,9 +5528,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -5553,9 +5544,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ diff --git a/src/components/CoreFeatures/index.jsx b/src/components/CoreFeatures/index.jsx new file mode 100644 index 00000000..56e9e34c --- /dev/null +++ b/src/components/CoreFeatures/index.jsx @@ -0,0 +1,74 @@ +import React from 'react' +import Link from '@docusaurus/Link' +import css from './styles.module.css' + +const features = [ + { + title: 'Highly performant', + tag: '30k req/s', + accentColor: '#25c2a0', + description: + 'As far as we know, Fastify is one of the fastest web frameworks in town, depending on the code complexity we can serve up to 30 thousand requests per second.', + }, + { + title: 'Extensible', + tag: 'plugin system', + accentColor: '#25c2a0', + description: 'Fastify is fully extensible via its hooks, plugins, and decorators.', + }, + { + title: 'Schema-based', + tag: 'JSON Schema', + accentColor: '#25c2a0', + description: ( + <> + Even if it is not mandatory we recommend using JSON Schema to validate + your routes and serialize your outputs. Internally Fastify compiles the schema in a highly performant function. + + ), + }, + { + title: 'Logging', + tag: 'pino logger', + accentColor: '#25c2a0', + description: ( + <> + Logs are extremely important but are costly; we chose the best logger to almost remove this cost,{' '} + Pino! + + ), + }, + { + title: 'Developer friendly', + tag: 'dx-first', + accentColor: '#25c2a0', + description: + 'The framework is built to be very expressive and help developers in their daily use, without sacrificing performance and security.', + }, + { + title: 'TypeScript ready', + tag: 'types included', + accentColor: '#25c2a0', + description: ( + <> + We work hard to maintain a TypeScript type declaration file so + we can support the growing TypeScript community. + + ), + }, +] + +export default function CoreFeatures() { + return ( +
+ {features.map((f) => ( +
+
+
{f.title}
+
{f.description}
+ {f.tag} +
+ ))} +
+ ) +} diff --git a/src/components/CoreFeatures/styles.module.css b/src/components/CoreFeatures/styles.module.css new file mode 100644 index 00000000..d18cdbd8 --- /dev/null +++ b/src/components/CoreFeatures/styles.module.css @@ -0,0 +1,91 @@ +.grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; + margin-top: 2rem; +} + +@media (width <= 996px) { + .grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (width <= 600px) { + .grid { + grid-template-columns: 1fr; + } +} + +.card { + position: relative; + overflow: hidden; + border-radius: 12px; + padding: 1.25rem 1.25rem 1rem; + border: 1px solid rgb(128 128 128 / 15%); + background: var(--ifm-card-background-color, var(--ifm-background-surface-color)); + transition: + transform 0.2s ease, + border-color 0.2s ease, + box-shadow 0.2s ease; +} + +.card:hover { + transform: translateY(-3px); + border-color: rgb(128 128 128 / 35%); + box-shadow: 0 8px 24px rgb(0 0 0 / 10%); +} + +.accent { + position: absolute; + top: 0; + left: 0; + width: 3px; + height: 0; + border-radius: 0; + transition: height 0.35s ease; +} + +.card:hover .accent { + height: 100%; +} + +.icon { + font-size: 28px; + margin-bottom: 0.75rem; + line-height: 1; +} + +.title { + font-family: var(--ifm-font-family-base); + font-size: 15px; + font-weight: 700; + margin-bottom: 0.5rem; + color: var(--ifm-heading-color); +} + +.desc { + font-size: 13px; + color: var(--ifm-color-secondary-darkest, var(--ifm-font-color-secondary)); + line-height: 1.65; +} + +[data-theme='dark'] .desc { + color: rgb(255 255 255 / 55%); +} + +.tag { + display: inline-block; + margin-top: 0.85rem; + font-family: var(--ifm-font-family-monospace); + font-size: 10px; + padding: 3px 8px; + border-radius: 4px; + background: rgb(128 128 128 / 10%); + color: var(--ifm-color-secondary-darkest); +} + +[data-theme='dark'] .tag { + background: rgb(255 255 255 / 7%); + color: rgb(255 255 255 / 35%); +} diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 1bf01367..34d97837 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -9,6 +9,7 @@ import Organizations from '@site/src/components/Organizations' import Team from '@site/src/components/Team' import QuickStart from '@site/src/components/QuickStart' import Heading from '@theme/Heading' +import CoreFeatures from '@site/src/components/CoreFeatures' import plugins from '@site/static/generated/plugins.json' import styles from '@site/src/css/index.module.css' @@ -64,33 +65,7 @@ export default function Home() {
Core features

These are the main features and principles on which Fastify has been built:

- +