improve add-ons pages for better integration discovery

src/components/IntegrationsNavAdapters.astro

@@ -0,0 +1,69 @@
+---
+import { englishPages } from '~/content';
+import {
+	type IntegrationCategory,
+	type IntegrationEntry,
+	isIntegrationEntry,
+} from '~/content/config';
+import { isLogoKey } from '~/data/logos';
+import { useTranslations } from '~/i18n/util';
+import { getLanguageFromURL } from '~/util';
+import CardsNav from './NavGrid/CardsNav.astro';
+
+const lang = getLanguageFromURL(Astro.url.pathname);
+
+function categoryLinksFromPages(pages: IntegrationEntry[], category: IntegrationCategory) {
+	return pages
+		.filter((page) => page.data.category === category)
+		.map((page) => {
+			const [scope, name] = page.data.title.split(' ').shift()!.split('/');
+			const pageUrl = page.slug.replace('en/', `/${lang}/`) + '/';
+			return {
+				title:
+					'<span class="scope">' +
+					scope +
+					'/</span><wbr>' +
+					name.replaceAll('-', '&#8288;-&#8288;'),
+				href: pageUrl,
+				logo: isLogoKey(name),
+			};
+		});
+}
+
+const t = useTranslations(Astro);
+
+const enPages = englishPages.filter(isIntegrationEntry);
+
+const categories = [
+	{ title: t('integrations.adapters'), links: categoryLinksFromPages(enPages, 'adapter') },
+];
+---
+
+<section class="integrations-nav">
+	{
+		categories.map((category) => (
+			<CardsNav minimal links={category.links}>
+				<h3>{category.title}</h3>
+			</CardsNav>
+		))
+	}
+</section>
+
+<style>
+	.integrations-nav > :global(*) {
+		margin-top: -2rem;
+	}
+
+	.integrations-nav > :global(* + *) {
+		margin-top: -3rem;
+	}
+
+	.integrations-nav :global(.scope) {
+		font-weight: normal;
+		color: var(--theme-text-lighter);
+	}
+
+	h3 {
+		margin-bottom: 0;
+	}
+</style>

src/components/IntegrationsNavRenderers.astro

@@ -0,0 +1,69 @@
+---
+import { englishPages } from '~/content';
+import {
+	type IntegrationCategory,
+	type IntegrationEntry,
+	isIntegrationEntry,
+} from '~/content/config';
+import { isLogoKey } from '~/data/logos';
+import { useTranslations } from '~/i18n/util';
+import { getLanguageFromURL } from '~/util';
+import CardsNav from './NavGrid/CardsNav.astro';
+
+const lang = getLanguageFromURL(Astro.url.pathname);
+
+function categoryLinksFromPages(pages: IntegrationEntry[], category: IntegrationCategory) {
+	return pages
+		.filter((page) => page.data.category === category)
+		.map((page) => {
+			const [scope, name] = page.data.title.split(' ').shift()!.split('/');
+			const pageUrl = page.slug.replace('en/', `/${lang}/`) + '/';
+			return {
+				title:
+					'<span class="scope">' +
+					scope +
+					'/</span><wbr>' +
+					name.replaceAll('-', '&#8288;-&#8288;'),
+				href: pageUrl,
+				logo: isLogoKey(name),
+			};
+		});
+}
+
+const t = useTranslations(Astro);
+
+const enPages = englishPages.filter(isIntegrationEntry);
+
+const categories = [
+	{ title: t('integrations.renderers'), links: categoryLinksFromPages(enPages, 'renderer') },
+];
+---
+
+<section class="integrations-nav">
+	{
+		categories.map((category) => (
+			<CardsNav minimal links={category.links}>
+				<h3>{category.title}</h3>
+			</CardsNav>
+		))
+	}
+</section>
+
+<style>
+	.integrations-nav > :global(*) {
+		margin-top: -2rem;
+	}
+
+	.integrations-nav > :global(* + *) {
+		margin-top: -3rem;
+	}
+
+	.integrations-nav :global(.scope) {
+		font-weight: normal;
+		color: var(--theme-text-lighter);
+	}
+
+	h3 {
+		margin-bottom: 0;
+	}
+</style>

src/content/docs/en/core-concepts/framework-components.mdx

@@ -3,18 +3,27 @@ title: Framework Components
 description: Learn how to use React, Svelte, etc.
 i18nReady: true
 ---
+import IntegrationsNavRenderers from '~/components/IntegrationsNavRenderers.astro'
 
-Build your Astro website without sacrificing your favorite component framework.
+Build your Astro website without sacrificing your favorite component framework. Create Astro [islands](/en/concepts/islands/) with the UI frameworks of your choice.
 
-Astro supports a variety of popular frameworks including [React](https://react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/), [SolidJS](https://www.solidjs.com/), [AlpineJS](https://alpinejs.dev/) and [Lit](https://lit.dev/).
+## Official UI Framework Integrations
+
+Astro supports a variety of popular frameworks including [React](https://react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/), [SolidJS](https://www.solidjs.com/), [AlpineJS](https://alpinejs.dev/) and [Lit](https://lit.dev/) with official integrations. 
+
+Find even more [community-maintained framework integrations](https://astro.build/integrations/?search=&categories%5B%5D=frameworks) (e.g. Angular, Qwik, Elm) in our integrations directory. 
+
+<IntegrationsNavRenderers />
 
 ## Installing Integrations
 
-Astro ships with [optional integrations](/en/guides/integrations-guide/) for React, Preact, Svelte, Vue, SolidJS, AlpineJS and Lit. One or several of these Astro integrations can be installed and configured in your project.
+One or several of these Astro integrations can be installed and configured in your project.
 
-⚙️ View the [Integrations Guide](/en/guides/integrations-guide/) for more details on installing and configuring Astro integrations.
+See the [Integrations Guide](/en/guides/integrations-guide/) for more details on installing and configuring Astro integrations.
 
-⚙️ Want to see an example for the framework of your choice? Visit [astro.new](https://astro.new/) and select one of the framework templates.
+:::tip
+Want to see an example for the framework of your choice? Visit [astro.new](https://astro.new/latest/frameworks) and select one of the framework templates.
+:::
 
 ## Using Framework Components
 

src/content/docs/en/guides/backend.mdx

@@ -7,12 +7,16 @@ import BackendGuidesNav from '~/components/BackendGuidesNav.astro';
 
 **Ready to add features like authentication, storage or data to your Astro project?** Follow one of our guides to integrate a backend service.
 
-## Backend service guides
+:::tip
+Find [community-maintained integrations](https://astro.build/integrations/) for adding popular features to your project in our integrations directory. 
+:::
 
-<BackendGuidesNav />
+## Backend service guides
 
 Note that many of these pages are **stubs**: they're collections of resources waiting for your contribution!
 
+<BackendGuidesNav />
+
 ## What is a backend service?
 
 A backend service is a cloud-based system that helps you build and manage your backend infrastructure. It provides a set of tools and services for managing databases, user authentication, and other server-side functionality. This enables you to focus on building your applications without having to worry about managing the underlying infrastructure.

src/content/docs/en/guides/cms.mdx

@@ -9,12 +9,16 @@ import CMSGuidesNav from '~/components/CMSGuidesNav.astro';
 
 **Ready to connect a Headless CMS to your Astro project?** Follow one of our guides to integrate a CMS.
 
-## CMS Guides
+:::tip
+Find [community-maintained integrations](https://astro.build/integrations/) for adding popular features, such as connecting a CMS to your project, in our integrations directory. 
+:::
 
-<CMSGuidesNav />
+## CMS Guides
 
 Note that many of these pages are **stubs**: they're collections of resources waiting for your contribution!
 
+<CMSGuidesNav />
+
 ## Why use a CMS?
 
 A Content Management System lets you write content and manage assets outside of your Astro project.

src/content/docs/en/guides/integrations-guide.mdx

@@ -2,7 +2,8 @@
 title: Add Integrations
 i18nReady: true
 ---
-import IntegrationsNav from '~/components/IntegrationsNav.astro';
+
+import IntegrationsNav from '~/components/IntegrationsNav.astro'
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 
 
@@ -16,13 +17,19 @@ Integrations can…
 - Add new features to your project, like automatic sitemap generation.
 - Write custom code that hooks into the build process, dev server, and more.
 
+:::tip[INTEGRATIONS DIRECTORY]
+Browse or search the complete set of hundreds of official and community integrations in our [integrations showcase](https://astro.build/integrations/). Find packages to add to your Astro project for authentication, analytics, performance, SEO, accessibility, UI, and developer tools.
+:::
+
 ## Official Integrations
 
+The following integrations are maintained by Astro.
+
 <IntegrationsNav />
 
 ## Automatic Integration Setup
 
-Astro includes an `astro add` command to automate the setup of integrations.
+Astro includes an `astro add` command to automate the setup of official and supported community integrations. Please check the integration's own documentation to see whether `astro add` is supported.
 
 Run the `astro add` command using the package manager of your choice and our automatic integration wizard will update your configuration file and install any necessary dependencies.
 
@@ -68,12 +75,12 @@ It's even possible to add multiple integrations at the same time!
 If you see any warnings like `Cannot find package '[package-name]'` after adding an integration, your package manager may not have installed [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) for you. To install these missing packages, run `npm install [package-name]`.
 :::
 
-## Using Integrations
+### Manual Installation
 
-Astro integrations are always added through the `integrations` property in your  `astro.config.mjs` file.
+Astro integrations are always added through the `integrations` property in your `astro.config.mjs` file.
 
 There are three common ways to import an integration into your Astro project:
-1. Installing an npm package integration.
+1. [Installing an npm package integration](#installing-an-npm-package).
 2. Import your own integration from a local file inside your project.
 3. Write your integration inline, directly in your config file.
 
@@ -97,6 +104,49 @@ There are three common ways to import an integration into your Astro project:
 
 Check out the [Integration API](/en/reference/integrations-reference/) reference to learn all of the different ways that you can write an integration.
 
+#### Installing an NPM package
+
+Install an NPM package integration using a package manager, and then update `astro.config.mjs` manually.
+
+For example, to install the Storyblok CMS integration:
+
+1. Install the Storkyblok integration to your project dependencies using your preferred package manager:
+
+   <PackageManagerTabs>
+     <Fragment slot="npm">
+     ```shell
+     npm install @storyblok/astro
+     ```
+     </Fragment>
+     <Fragment slot="pnpm">
+     ```shell
+     pnpm install @storyblok/astro
+     ```
+     </Fragment>
+     <Fragment slot="yarn">
+     ```shell
+     yarn add @storyblok/astro
+     ```
+     </Fragment>
+   </PackageManagerTabs>
+
+2. Import the integration to your `astro.config.mjs` file, and add it to your `integrations[]` array, along with any configuration options:
+
+    ```js title="astro.config.mjs" ins={2,6-8} {5,9}
+    import { defineConfig } from "astro/config";
+    import storyblok from "@storyblok/astro";
+
+    export default defineConfig({
+      integrations: [
+        storyblok({
+          accessToken: "<your-access-token>",
+        }),
+      ],
+    });
+    ```
+
+    Note that different integrations may have different configuration settings. Read each integration's documentation, and apply any necessary config options to your chosen integration in `astro.config.mjs`
+
 ### Custom Options
 
 Integrations are almost always authored as factory functions that return the actual integration object. This lets you pass arguments and options to the factory function that customize the integration for your project.