Add RecipeLink component and link to recipes (#3005)

Co-authored-by: Reuben Tier <[email protected]> Co-authored-by: Sarah Rainsberger <[email protected]> Co-authored-by: Chris Swithinbank <[email protected]>
withastro · Apr 27, 2023 · 829b663 · 829b663
1 parent 3c2d147
commit 829b663
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 4 deletions.
diff --git a/public/houston_chef.webp b/public/houston_chef.webp
diff --git a/src/components/RecipeLinks.astro b/src/components/RecipeLinks.astro
@@ -0,0 +1,64 @@
+---
+import { getEntryBySlug } from 'astro:content';
+import { removeLeadingSlash, removeTrailingSlash } from '~/util';
+
+export interface Props {
+	slugs: string[];
+}
+
+const slugs = Astro.props.slugs.map((slug) => removeLeadingSlash(removeTrailingSlash(slug)));
+
+const entries = await Promise.all(
+	slugs.map(async (slug, i) => {
+		const entry = await getEntryBySlug('docs', slug);
+		if (!entry) {
+			throw new Error(`Could not find entry for slug "${Astro.props.slugs[i]}"`);
+		}
+		return entry;
+	})
+);
+
+const isList = entries.length > 1;
+const noun = isList ? 'recipes' : 'recipe';
+---
+
+<div class="root">
+	<div class="flex">
+		<img src="/houston_chef.webp" width="26" alt="" />
+		<strong>Related {noun}:</strong>
+		{!isList && <a href={`/${entries[0]!.slug}/`}> {entries[0]!.data.title}</a>}
+	</div>
+	{
+		isList && (
+			<ul>
+				{entries.map((entry) => (
+					<li>
+						<a href={`/${entry!.slug}/`}>{entry!.data.title}</a>
+					</li>
+				))}
+			</ul>
+		)
+	}
+</div>
+
+<style>
+	.flex {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 0.25rem;
+	}
+	.flex > img {
+		margin-right: 0.25rem;
+	}
+	ul {
+		margin-left: 0.5rem;
+	}
+	.root {
+		background-color: var(--theme-bg-offset);
+		border-radius: 8px;
+		padding: 24px;
+		width: max-content;
+		max-width: 100%;
+	}
+</style>
diff --git a/src/content/docs/en/core-concepts/endpoints.mdx b/src/content/docs/en/core-concepts/endpoints.mdx
@@ -3,6 +3,8 @@ title: Endpoints
 description: Learn how to create endpoints that serve any kind of data
 i18nReady: true
 ---
+import RecipeLinks from "~/components/RecipeLinks.astro";
+
 Astro lets you create custom endpoints to serve any kind of data. You can use this to generate images, expose an RSS document, or use them as API Routes to build a full API for your site.
 
 In statically-generated sites, your custom endpoints are called at build time to produce static files. If you opt in to [SSR](/en/guides/server-side-rendering/) mode, custom endpoints turn into live server endpoints that are called on request. Static and SSR endpoints are defined similarly, but SSR endpoints support additional features.
@@ -171,6 +173,8 @@ export const all: APIRoute = ({ request }) => {
 }
 ```
 
+<RecipeLinks slugs={["en/recipes/captcha", "en/recipes/build-forms-api" ]}/>
+
 ### `request` 
 In SSR mode, the `request` property returns a fully usable [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) object that refers to the current request. This allows you to accept data and check headers:
 
@@ -210,4 +214,3 @@ export async function get({ params, redirect }) {
 }
 ```
 
-**Related recipe:** [Use server endpoints to verify a CAPTCHA](/en/recipes/captcha/)
diff --git a/src/content/docs/en/core-concepts/routing.mdx b/src/content/docs/en/core-concepts/routing.mdx
@@ -4,6 +4,7 @@ description: An intro to routing with Astro.
 i18nReady: true
 ---
 import FileTree from '~/components/FileTree.astro'
+import RecipeLinks from "~/components/RecipeLinks.astro"
 
 Astro uses **file-based routing** to generate your build URLs based on the file layout of your project `src/pages/` directory.
 
@@ -83,6 +84,8 @@ Parameters can be included in separate parts of the path. For example, the file
 
 📚 Learn more about [`getStaticPaths()`](/en/reference/api-reference/#getstaticpaths).
 
+<RecipeLinks slugs={["en/recipes/i18n"]} />
+
 #### Rest parameters
 
 If you need more flexibility in your URL routing, you can use a [rest parameter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) (`[...path]`) in your `.astro` filename to match file paths of any depth:

diff --git a/src/content/docs/en/guides/content.mdx b/src/content/docs/en/guides/content.mdx
@@ -6,6 +6,8 @@ description: >-
   connect your CMS of choice.
 i18nReady: false
 ---
+import RecipeLinks from "~/components/RecipeLinks.astro"
+
 Astro is a perfect choice for your content-focused site: blogs, marketing sites, portfolios, and more!
 
 Astro helps you author and present your content. You can write a blog post directly in Astro using Markdown/MDX, or fetch your content from a headless CMS. Astro lets you build a site around your content: you can add a layout to your pages, create an index of posts, and set up an RSS feed to allow readers to subscribe.
@@ -48,6 +50,8 @@ If you're writing your content in a CMS, you can fetch your posts and use [dynam
 
 To build common features to organize and display your content, such as a blog archive or a page for each blog tag, Astro allows you to [fetch filenames and metadata](/en/reference/api-reference/#astroglob) from your Markdown and MDX frontmatter and use these to generate page content and routes.
 
+<RecipeLinks slugs={["en/guides/rss"]} />
+
 ## Community Integrations
 
 In addition to the official [`@astrojs/mdx`](/en/guides/integrations-guide/mdx/) integration, there are several third-party [community integrations](https://astro.build/integrations/?search=&categories%5B%5D=css%2Bui) for working with content in your Astro project.
diff --git a/src/content/docs/en/guides/imports.mdx b/src/content/docs/en/guides/imports.mdx
@@ -3,6 +3,7 @@ title: Imports
 description: Learn how to import different content types with Astro.
 i18nReady: true
 ---
+import RecipeLinks from "~/components/RecipeLinks.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.
 
@@ -236,4 +237,4 @@ With **Vite** and compatible **Rollup** plugins, you can import file types which
 Refer to your plugin's documentation for configuration options, and how to correctly install it.
 :::
 
-**Related recipe:** [Add support for importing YAML data](/en/recipes/add-yaml-support/).
+<RecipeLinks slugs={["en/recipes/add-yaml-support"]} />
diff --git a/src/content/docs/en/guides/server-side-rendering.mdx b/src/content/docs/en/guides/server-side-rendering.mdx
@@ -5,7 +5,6 @@ i18nReady: true
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 import Since from '~/components/Since.astro';
 
-
 **Server-side Rendering**, aka SSR, can be enabled in Astro. When you enable SSR you can:
 
 - Implement sessions for login state in your app.
@@ -230,4 +229,4 @@ if (!product) {
 ### Server Endpoints
 
 A server endpoint, also known as an **API route**, is a special function exported from a `.js` or `.ts` file within the `src/pages/` folder. 
-The function takes an [endpoint context](/en/reference/api-reference/#endpoint-context) and returns a [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response). A powerful feature of SSR, API routes are able to securely execute code on the server. To learn more, see our [Endpoints Guide](/en/core-concepts/endpoints/#server-endpoints-api-routes).
+The function takes an [endpoint context](/en/reference/api-reference/#endpoint-context) and returns a [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response). A powerful feature of SSR, API routes are able to securely execute code on the server. To learn more, see our [Endpoints Guide](/en/core-concepts/endpoints/#server-endpoints-api-routes).