Add <ReadMore> component

src/components/ReadMore.astro

@@ -0,0 +1,24 @@
+---
+import { Icon } from '@astrojs/starlight/components';
+---
+
+<div class="read-more">
+	<Icon class="icon" name="open-book" />
+	<span><slot /></span>
+</div>
+
+<style>
+	.read-more {
+		display: flex;
+		gap: 0.5rem;
+		align-items: flex-start;
+	}
+	.icon {
+		--icon-size: 1.5rem;
+		font-size: var(--icon-size);
+		flex-shrink: 0;
+		/* Align to the middle of the first line of text. */
+		margin-block: calc((var(--sl-line-height) * 1rem - var(--icon-size)) / 2);
+		color: var(--sl-color-text-accent);
+	}
+</style>

src/components/RecipeLinks.astro

@@ -34,7 +34,7 @@ if (!firstRecipe) {
 
 <div class="root">
 	<div class="flex">
-		<img src="/houston_chef.webp" width="26" alt="" />
+		<img src="/houston_chef.webp" width="24" alt="" />
 		<strong><UIString key={labelKey} /></strong>
 		{
 			!isList && (
@@ -64,19 +64,10 @@ if (!firstRecipe) {
 		display: flex;
 		align-items: center;
 		flex-wrap: wrap;
-		gap: 0.25rem;
-	}
-	.flex > img {
-		margin-right: 0.25rem;
+		gap: 0.5rem;
 	}
 	ul {
-		margin-left: 0.5rem;
-	}
-	.root {
-		background-color: var(--theme-bg-offset);
-		border-radius: 8px;
-		padding: 24px;
-		width: max-content;
-		max-width: 100%;
+		margin-top: 0 !important;
+		margin-inline-start: 0.5rem;
 	}
 </style>

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

@@ -383,4 +383,6 @@ A [`<slot />` element](/en/core-concepts/astro-components/#slots) inside an HTML
 
 ## Next Steps
 
-📚 Learn about using [UI framework components](/en/core-concepts/framework-components/) in your Astro project.
+import ReadMore from '~/components/ReadMore.astro';
+
+<ReadMore>Read more about using [UI framework components](/en/core-concepts/framework-components/) in your Astro project.</ReadMore>

src/content/docs/en/core-concepts/astro-pages.mdx

@@ -4,6 +4,7 @@ description: An introduction to Astro pages
 i18nReady: true
 ---
 
+import ReadMore from '~/components/ReadMore.astro';
 import Since from '~/components/Since.astro'
 
 **Pages** are files that live in the `src/pages/` subdirectory of your Astro project. They are responsible for handling routing, data loading, and overall page layout for every page in your website.
@@ -23,7 +24,7 @@ Astro leverages a routing strategy called **file-based routing**. Each file in y
 
 A single file can also generate multiple pages using [dynamic routing](/en/core-concepts/routing/#dynamic-routes). This allows you to create pages even if your content lives outside of the special `/pages/` directory, such as in a [content collection](/en/guides/content-collections/) or a [CMS](/en/guides/cms/).
 
-📚 Read more about [Routing in Astro](/en/core-concepts/routing/).
+<ReadMore>Read more about [Routing in Astro](/en/core-concepts/routing/).</ReadMore>
 
 ### Link between pages
 
@@ -66,7 +67,7 @@ import MySiteLayout from '../layouts/MySiteLayout.astro';
 </MySiteLayout>
 ```
 
-📚 Read more about [layout components](/en/core-concepts/layouts/) in Astro.
+<ReadMore>Read more about [layout components](/en/core-concepts/layouts/) in Astro.</ReadMore>
 
 ## Markdown/MDX Pages
 
@@ -87,7 +88,7 @@ title: 'My Markdown page'
 This is my page, written in **Markdown.**
 ```
 
-📚 Read more about [Markdown](/en/guides/markdown-content/) in Astro.
+<ReadMore>Read more about [Markdown](/en/guides/markdown-content/) in Astro.</ReadMore>
 
 ## HTML Pages
 

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

@@ -4,6 +4,7 @@ description: Learn how to use React, Svelte, etc.
 i18nReady: true
 ---
 import IntegrationsNav from '~/components/IntegrationsNav.astro'
+import ReadMore from '~/components/ReadMore.astro'
 
 Build your Astro website without sacrificing your favorite component framework. Create Astro [islands](/en/concepts/islands/) with the UI frameworks of your choice.
 
@@ -79,7 +80,7 @@ Most framework-specific accessibility patterns should work the same when these c
 
 There are several hydration directives available for UI framework components: `client:load`, `client:idle`, `client:visible`, `client:media={QUERY}` and `client:only={FRAMEWORK}`.
 
-📚 See our [directives reference](/en/reference/directives-reference/#client-directives) page for a full description of these hydration directives, and their usage.
+<ReadMore>See our [directives reference](/en/reference/directives-reference/#client-directives) page for a full description of these hydration directives, and their usage.</ReadMore>
 
 ## Mixing Frameworks
 
@@ -233,7 +234,7 @@ If you try to hydrate an Astro component with a `client:` modifier, you will get
 
 [Astro components](/en/core-concepts/astro-components/) are HTML-only templating components with no client-side runtime. But, you can use a `<script>` tag in your Astro component template to send JavaScript to the browser that executes in the global scope.
 
-📚 Learn more about [client-side `<script>` tags in Astro components](/en/guides/client-side-scripts/)
+<ReadMore>Learn more about [client-side `<script>` tags in Astro components](/en/guides/client-side-scripts/)</ReadMore>
 
 [mdn-io]: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
 [mdn-ric]: https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback

src/content/docs/en/core-concepts/layouts.mdx

@@ -4,6 +4,8 @@ description: An intro to layouts, a type of Astro component that is shared betwe
 i18nReady: true
 ---
 
+import ReadMore from '~/components/ReadMore.astro'
+
 **Layouts** are [Astro components](/en/core-concepts/astro-components/) used to provide a reusable UI structure, such as a page template.
 
 We conventionally use the term "layout" for Astro components that provide common UI elements shared across pages such as headers, navigation bars, and footers. A typical Astro layout component provides [Astro, Markdown or MDX pages](/en/core-concepts/astro-pages/) with:
@@ -54,7 +56,7 @@ import MySiteLayout from '../layouts/MySiteLayout.astro';
 ```
 
 
-📚 Learn more about [slots](/en/core-concepts/astro-components/#slots).
+<ReadMore>Learn more about [slots](/en/core-concepts/astro-components/#slots).</ReadMore>
 
 ## Markdown/MDX Layouts
 
@@ -227,7 +229,7 @@ const { title, fancyJsHelper } = Astro.props;
 <!-- -->
 ```
 
-📚 Learn more about Astro’s Markdown and MDX support in our [Markdown/MDX guide](/en/guides/markdown-content/).
+<ReadMore>Learn more about Astro’s Markdown and MDX support in our [Markdown/MDX guide](/en/guides/markdown-content/).</ReadMore>
 
 ## Using one Layout for `.md`, `.mdx`, and `.astro`
 

src/content/docs/en/core-concepts/routing.mdx

@@ -6,6 +6,7 @@ i18nReady: true
 import FileTree from '~/components/FileTree.astro'
 import RecipeLinks from "~/components/RecipeLinks.astro"
 import Since from '~/components/Since.astro'
+import ReadMore from '~/components/ReadMore.astro'
 
 Astro uses **file-based routing** to generate your build URLs based on the file layout of your project `src/pages/` directory.
 
@@ -83,7 +84,8 @@ This will generate `/en-v1/info` and `/fr-v2/info`.
 
 Parameters can be included in separate parts of the path. For example, the file `src/pages/[lang]/[version]/info.astro` with the same `getStaticPaths()` above will generate the routes `/en/v1/info` and `/fr/v2/info`.
 
-📚 Learn more about [`getStaticPaths()`](/en/reference/api-reference/#getstaticpaths).
+<ReadMore>Learn more about [`getStaticPaths()`](/en/reference/api-reference/#getstaticpaths).</ReadMore>
+
 
 <RecipeLinks slugs={["en/recipes/i18n"]} />
 

src/content/docs/en/editor-setup.mdx

@@ -20,7 +20,9 @@ Astro works with any code editor. However, VS Code is our recommended editor for
 
 To get started, install the [Astro VS Code Extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) today.
 
-📚 See how to [set up TypeScript](/en/guides/typescript/) in your Astro project.
+import ReadMore from '~/components/ReadMore.astro';
+
+<ReadMore>See how to [set up TypeScript](/en/guides/typescript/) in your Astro project.</ReadMore>
 
 ## JetBrains IDEs
 

src/content/docs/en/guides/client-side-scripts.mdx

@@ -5,6 +5,7 @@ description: >-
   JavaScript APIs.
 i18nReady: true
 ---
+import ReadMore from '~/components/ReadMore.astro'
 
 You can add interactivity to your Astro components without [using a UI framework](/en/core-concepts/framework-components/) like React, Svelte, Vue, etc. using standard HTML `<script>` tags. This allows you to send JavaScript to run in the browser and add functionality to your Astro components.
 
@@ -87,7 +88,8 @@ To prevent Astro from processing a script, add the `is:inline` directive.
 Astro will not process your script tags in some situations. In particular, adding `type="module"` or any attribute other than `src` to a `<script>` tag will cause Astro to treat the tag as if it had an `is:inline` directive. The same will be true when the script is written in a JSX expression.
 :::
 
-📚 See our [directives reference](/en/reference/directives-reference/#script--style-directives) page for more information about the directives available on `<script>` tags.
+<ReadMore>See our [directives reference](/en/reference/directives-reference/#script--style-directives) page for more information about the directives available on `<script>` tags.</ReadMore>
+
 
 ### Include javascript files on your page
 
@@ -190,7 +192,8 @@ There are two advantages to using a custom element here:
 
 2. Although a `<script>` only runs once, the browser will run our custom element’s `constructor()` method each time it finds `<astro-heart>` on the page. This means you can safely write code for one component at a time, even if you intend to use this component multiple times on a page.
 
-📚 You can learn more about custom elements in [web.dev’s Reusable Web Components guide](https://web.dev/custom-elements-v1/) and [MDN’s introduction to custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements).
+<ReadMore>You can learn more about custom elements in [web.dev’s Reusable Web Components guide](https://web.dev/custom-elements-v1/) and [MDN’s introduction to custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements).</ReadMore>
+
 
 ### Pass frontmatter variables to scripts
 

src/content/docs/en/guides/configuring-astro.mdx

@@ -2,10 +2,12 @@
 title: Configuring Astro
 i18nReady: true
 ---
+import ReadMore from '~/components/ReadMore.astro'
 
 Customize how Astro works by adding an `astro.config.mjs` file in your project. This is a common file in Astro projects, and all official example templates and themes ship with one by default.
 
-📚 Read Astro's [API configuration reference](/en/reference/configuration-reference/) for a full overview of all supported configuration options.
+<ReadMore>Read Astro's [API configuration reference](/en/reference/configuration-reference/) for a full overview of all supported configuration options.</ReadMore>
+
 ## The Astro Config File
 
 A valid Astro config file exports its configuration using the `default` export, using the recommended `defineConfig` helper:
@@ -164,5 +166,5 @@ const { SECRET_PASSWORD } = loadEnv(process.env.NODE_ENV, process.cwd(), "");
 
 ## Configuration Reference
 
-📚 Read Astro's [API configuration reference](/en/reference/configuration-reference/) for a full overview of all supported configuration options.
+<ReadMore>Read Astro's [API configuration reference](/en/reference/configuration-reference/) for a full overview of all supported configuration options.</ReadMore>
 

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

@@ -7,6 +7,7 @@ description: >-
 i18nReady: false
 ---
 import RecipeLinks from "~/components/RecipeLinks.astro"
+import ReadMore from '~/components/ReadMore.astro';
 
 Astro is a perfect choice for your content-focused site: blogs, marketing sites, portfolios, and more!
 
@@ -25,14 +26,14 @@ Markdown is a convenient syntax for writing rich text with basic formatting and
 
 Create and write a new `.md` file in your code editor or bring in an existing file written in your favorite Markdown editor. Some online Markdown editors like [StackEdit](https://stackedit.io/) and [Dillinger](https://dillinger.io) will even allow you to edit and sync your work with your Astro repository stored on GitHub.
 
-📚 Learn more about [writing Markdown content in Astro](/en/guides/markdown-content/).
+<ReadMore>Learn more about [writing Markdown content in Astro](/en/guides/markdown-content/).</ReadMore>
 
 ### MDX Authoring
 If you add the MDX integration to your project, you can also write content using `.mdx` files, which let you include JavaScript expressions and custom components within your Markdown. This includes both static [Astro components](/en/core-concepts/astro-components/) and interactive [framework components](/en/core-concepts/framework-components/). Add UI elements such as a banner or an interactive carousel right in your text to turn your content into full-fledged web pages.
 
 Write and edit `.mdx` files directly in your code editor, alongside your project files.
 
-📚 Learn more about [using MDX with Astro](/en/guides/integrations-guide/mdx/).
+<ReadMore>Learn more about [using MDX with Astro](/en/guides/integrations-guide/mdx/).</ReadMore>
 
 ### Headless CMS Authoring
 

src/content/docs/en/guides/deploy/cloudflare.mdx

@@ -4,6 +4,7 @@ description: How to deploy your Astro site to the web using Cloudflare Pages.
 type: deploy
 i18nReady: true
 ---
+import ReadMore from '~/components/ReadMore.astro'
 
 You can deploy your Astro project on [Cloudflare Pages](https://pages.cloudflare.com/), a platform for frontend developers to collaborate and deploy static (JAMstack) and SSR websites.
 
@@ -127,7 +128,7 @@ There are currently two modes supported when using Pages Functions with the [`@a
 
 To get started, create a `/functions` directory at the root of your project. Writing your Functions files in this directory automatically generates a Worker with custom functionality at the predesignated routes. To learn more about writing Functions, see the [Pages Functions documentation](https://developers.cloudflare.com/pages/platform/functions/).
 
-📚 Read more about [SSR in Astro](/en/guides/server-side-rendering/).
+<ReadMore>Read more about [SSR in Astro](/en/guides/server-side-rendering/).</ReadMore>
 
 ## Troubleshooting
 

src/content/docs/en/guides/deploy/deno.mdx

@@ -4,6 +4,7 @@ description: How to deploy your Astro site to the web using Deno.
 type: deploy
 i18nReady: true
 ---
+import ReadMore from '~/components/ReadMore.astro'
 
 You can deploy a server-side rendered Astro site to [Deno Deploy](https://deno.com/deploy), a distributed system that runs JavaScript, TypeScript, and WebAssembly at the edge, worldwide.
 
@@ -170,6 +171,7 @@ If your project is stored on GitHub, the [Deno Deploy website](https://dash.deno
     ```
 
 
-📚 Read more about [SSR in Astro](/en/guides/server-side-rendering/).
+<ReadMore>Read more about [SSR in Astro](/en/guides/server-side-rendering/).</ReadMore>
+
 
 [Deno adapter]: https://github.com/denoland/deno-astro-adapter

src/content/docs/en/guides/deploy/netlify.mdx

@@ -4,6 +4,8 @@ description: How to deploy your Astro site to the web on Netlify.
 type: deploy
 i18nReady: true
 ---
+import ReadMore from '~/components/ReadMore.astro'
+
 [Netlify](https://netlify.com) offers hosting and serverless backend services for web applications and static websites. Any Astro site can be hosted on Netlify!
 
 This guide includes instructions for deploying to Netlify through the website UI or Netlify's CLI.
@@ -96,7 +98,7 @@ To configure the default settings, create a `netlify.toml` file with the followi
   publish = "dist"
 ```
 
-📚 More info at [“Deploying an existing Astro Git repository”](https://www.netlify.com/blog/how-to-deploy-astro/#deploy-an-existing-git-repository-to-netlify) on Netlify’s blog
+<ReadMore>More info at [“Deploying an existing Astro Git repository”](https://www.netlify.com/blog/how-to-deploy-astro/#deploy-an-existing-git-repository-to-netlify) on Netlify’s blog</ReadMore>
 
 
 ### CLI Deployment
@@ -120,7 +122,7 @@ You can also create a new site on Netlify and link up your Git repository by ins
 
     The CLI will add a deploy key to the repository, which means your site will be automatically rebuilt on Netlify every time you `git push`.
 
-📚 More details from Netlify on [Deploy an Astro site using the Netlify CLI](https://www.netlify.com/blog/how-to-deploy-astro/#link-your-astro-project-and-deploy-using-the-netlify-cli)
+<ReadMore>More details from Netlify on [Deploy an Astro site using the Netlify CLI](https://www.netlify.com/blog/how-to-deploy-astro/#link-your-astro-project-and-deploy-using-the-netlify-cli)</ReadMore>
 
 ### Set a Node.js Version
 

src/content/docs/en/guides/deploy/vercel.mdx

@@ -4,6 +4,7 @@ description: How to deploy your Astro site to the web on Vercel.
 type: deploy
 i18nReady: true
 ---
+import ReadMore from '~/components/ReadMore.astro'
 
 You can use [Vercel](http://vercel.com/) to deploy an Astro site to their global edge network with zero configuration.
 
@@ -60,7 +61,7 @@ You can deploy to Vercel through the website UI or using Vercel’s CLI (command
 
 After your project has been imported and deployed, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/concepts/deployments/preview-deployments), and all changes made to the Production Branch (commonly “main”) will result in a [Production Deployment](https://vercel.com/docs/concepts/deployments/environments#production).
 
-📚 Learn more about Vercel’s [Git Integration](https://vercel.com/docs/concepts/git).
+<ReadMore>Learn more about Vercel’s [Git Integration](https://vercel.com/docs/concepts/git).</ReadMore>
 
 
 ### CLI Deployment
@@ -81,7 +82,7 @@ After your project has been imported and deployed, all subsequent pushes to bran
 
 You can use `vercel.json` to override the default behavior of Vercel and to configure additional settings. For example, you may wish to attach headers to HTTP responses from your Deployments. 
 
-📚 Learn more about [Vercel’s project configuration](https://vercel.com/docs/project-configuration).
+<ReadMore>Learn more about [Vercel’s project configuration](https://vercel.com/docs/project-configuration).</ReadMore>
 
 ### Upgrading to Astro 2.0
 

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

@@ -4,6 +4,7 @@ description: Learn how to import different content types with Astro.
 i18nReady: true
 ---
 import RecipeLinks from "~/components/RecipeLinks.astro";
+import ReadMore from '~/components/ReadMore.astro'
 
 Astro supports most static assets with zero configuration required. You can use the `import` statement anywhere in your project JavaScript (including your Astro frontmatter) and Astro will include a built, optimized copy of that static asset in your final build. `@import` is also supported inside of CSS & `<style>` tags.
 
@@ -61,7 +62,8 @@ import MyComponent from "./MyComponent"; // MyComponent.tsx
 
 :::
 
-📚 Read more about [TypeScript support in Astro](/en/guides/typescript/).
+<ReadMore>Read more about [TypeScript support in Astro](/en/guides/typescript/).</ReadMore>
+
 
 ### JSX / TSX