[reorg] new Recipes section; Basics streamlined

src/components/CMSGuidesNav.astro

@@ -41,17 +41,4 @@ const links = enPages
 	.cms-nav > :global(*) {
 		margin-top: -2rem;
 	}
-
-	.cms-nav > :global(* + *) {
-		margin-top: -3rem;
-	}
-
-	.cms-nav :global(.scope) {
-		font-weight: normal;
-		color: var(--theme-text-lighter);
-	}
-
-	h3 {
-		margin-bottom: 0;
-	}
 </style>

src/components/LeftSidebar/LeftSidebar.astro

@@ -35,7 +35,7 @@ let activeTab: 'learn' | 'api' = 'learn';
 
 // Certain pages are not in the sidebar nav, so we manually set the active tab based on other factors (e.g. Algolia page category).
 const isReference = ['Error Reference', 'Reference'].includes(
-	getPageCategory(new URL(currentPage, import.meta.url))
+	getPageCategory({ pathname: currentPage })
 );
 if (isReference) {
 	activeTab = 'api';

src/components/LeftSidebar/SidebarContent.astro

@@ -1,5 +1,6 @@
 ---
-import { getLanguageFromURL, removeSubpageSegment } from '../../util';
+import { getLanguageFromURL } from '~/util';
+import { isSubPage } from '~/util/isSubPage';
 
 export interface Props {
 	type: TabType;
@@ -44,11 +45,7 @@ const lang = getLanguageFromURL(Astro.url.pathname);
 							<a
 								href={`${Astro.site?.pathname}${lang}/${slug}/`}
 								aria-current={`${currentPageMatch.endsWith(slug) ? 'page' : 'false'}`}
-								data-current-parent={`${
-									removeSubpageSegment(currentPageMatch).endsWith(removeSubpageSegment(slug))
-										? 'true'
-										: 'false'
-								}`}
+								data-current-parent={`${isSubPage(currentPageMatch, slug) ? 'true' : 'false'}`}
 							>
 								<Fragment set:html={text} /> {isFallback && <sup class="fallback">EN</sup>}
 							</a>

src/components/NavGrid/Card.astro

@@ -4,7 +4,7 @@ import BrandLogo from '../BrandLogo.astro';
 
 export interface Props {
 	href: string;
-	logo: LogoKey;
+	logo?: LogoKey;
 	current?: boolean;
 	minimal?: boolean;
 	[key: string]: any;
@@ -14,7 +14,7 @@ const { href, logo, current, minimal, class: classes, ...attrs } = Astro.props a
 ---
 
 <li class:list={['card', minimal ? 'card--minimal' : 'card--maximal', classes]} {...attrs}>
-	<BrandLogo brand={logo} />
+	{logo && <BrandLogo brand={logo} />}
 	<div class="stack">
 		<h3>
 			<a href={href} aria-current={current ? 'page' : 'false'}>

src/components/NavGrid/CardsNav.astro

@@ -8,10 +8,13 @@ export interface Props {
 	minimal?: boolean;
 	links: {
 		title: string;
+		description?: string;
 		href: string;
-		logo: LogoKey;
+		logo?: LogoKey;
 		/** Map of tag IDs to translated tag display text, e.g. `{ static: 'Statisch' }`. */
 		tags?: Record<string, string>;
+		/** The language of the content if it differs from the main page language. */
+		lang?: string;
 	}[];
 	class?: string;
 }
@@ -25,14 +28,15 @@ const currentPage = new URL(Astro.request.url).pathname;
 	<slot />
 	<Grid minimal={minimal}>
 		{
-			links.map(({ href, logo, title, tags }) => (
+			links.map(({ description, href, logo, title, tags, lang }) => (
 				<Card
-					{...{ minimal, logo, href }}
+					{...{ minimal, logo, href, lang }}
 					current={currentPage.includes(href)}
 					class={Object.keys(tags || {}).join(' ')}
 				>
 					<Fragment slot="title" set:html={title} />
 					<Fragment slot="details">
+						{description && <p class="description">{description}</p>}
 						{tags && (
 							<div class="tags">
 								{Object.values(tags).map((tag) => (
@@ -53,6 +57,12 @@ const currentPage = new URL(Astro.request.url).pathname;
 		accent-color: var(--theme-accent-secondary);
 	}
 
+	.description {
+		margin-top: 0.25rem;
+		color: var(--theme-text-lighter);
+		font-size: var(--theme-text-sm);
+	}
+
 	.tags {
 		display: flex;
 		gap: 0.5rem;

src/components/NavGrid/Grid.astro

@@ -18,19 +18,19 @@ const { minimal } = Astro.props as Props;
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(var(--column-min-width), 1fr));
 		grid-template-columns: repeat(auto-fill, minmax(min(var(--column-min-width), 100%), 1fr));
-		gap: 1.5rem;
+		gap: 2rem;
 		list-style: none;
+		align-items: start;
 	}
 
 	@media (min-width: 37.75em) {
 		.fluid-grid {
-			gap: 1.5rem 2.5rem;
+			gap: 2rem 2.5rem;
 		}
 	}
 
 	.fluid-grid--minimal {
 		--column-min-width: 6rem;
 		gap: 1.5rem 0.75rem;
-		align-items: start;
 	}
 </style>

src/components/RecipesNav.astro

@@ -0,0 +1,46 @@
+---
+import { recipePages } from '~/content';
+import { createIsLangEntry, isEnglishEntry } from '~/content/config';
+import { getLanguageFromURL, stripLangFromSlug } from '~/util';
+import CardsNav from './NavGrid/CardsNav.astro';
+
+export interface Props {
+	minimal?: boolean;
+}
+
+const lang = getLanguageFromURL(Astro.url.pathname);
+const langRecipes = recipePages.filter(createIsLangEntry(lang));
+const englishRecipes = recipePages.filter(isEnglishEntry);
+
+/** An array of all recipes, using translations if available and falling back to English otherwise. */
+const recipes = englishRecipes.map((fallback) => {
+	const slug = stripLangFromSlug(fallback.slug);
+	const translation = langRecipes.find((doc) => stripLangFromSlug(doc.slug) === slug);
+	return translation || fallback;
+});
+---
+
+<div>
+	<CardsNav
+		minimal={Astro.props.minimal}
+		links={recipes.map(({ data, slug }) => {
+			const linkLang = slug.split('/').shift();
+			return {
+				title: data.title,
+				description: data.description,
+				// Fallback entries will have a slug starting with 'en/',
+				// so we replace that to link to the correct language.
+				href: '/' + slug.replace('en/', `${lang}/`) + '/',
+				// Fallback content will be in English, unlike the page,
+				// so we set an explicit `lang="en"` for these entries.
+				lang: linkLang !== lang ? linkLang : undefined,
+			};
+		})}
+	/>
+</div>
+
+<style>
+	div > :global(*) {
+		margin-top: -2rem;
+	}
+</style>

src/content.ts

@@ -1,6 +1,7 @@
 import { getCollection } from 'astro:content';
-import { isEnglishEntry, isTutorialEntry } from './content/config';
+import { isEnglishEntry, isRecipeEntry, isTutorialEntry } from './content/config';
 
 export const allPages = await getCollection('docs');
 export const tutorialPages = allPages.filter(isTutorialEntry);
+export const recipePages = allPages.filter(isRecipeEntry);
 export const englishPages = allPages.filter(isEnglishEntry);

src/content/config.ts

@@ -45,6 +45,11 @@ export const tutorialSchema = baseSchema.extend({
 	unitTitle: z.string().optional(),
 });
 
+export const recipeSchema = baseSchema.extend({
+	type: z.literal('recipe'),
+	description: z.string(),
+});
+
 export type DeployEntry = CollectionEntry<'docs'> & {
 	data: z.infer<typeof deploySchema>;
 };
@@ -65,6 +70,10 @@ export type TutorialEntry = CollectionEntry<'docs'> & {
 	data: z.infer<typeof tutorialSchema>;
 };
 
+export type RecipeEntry = CollectionEntry<'docs'> & {
+	data: z.infer<typeof recipeSchema>;
+};
+
 export type IntegrationCategory = z.infer<typeof integrationSchema>['category'];
 
 export function isCmsEntry(entry: CollectionEntry<'docs'>): entry is CmsEntry {
@@ -83,10 +92,18 @@ export function isMigrationEntry(entry: CollectionEntry<'docs'>): entry is Migra
 	return entry.data.type === 'migration';
 }
 
-export function isEnglishEntry(entry: CollectionEntry<'docs'>): boolean {
-	return entry.slug.startsWith('en/');
+export function isRecipeEntry(entry: CollectionEntry<'docs'>): entry is RecipeEntry {
+	return entry.data.type === 'recipe';
 }
 
+export function createIsLangEntry(lang: string) {
+	return function isLangEntry(entry: CollectionEntry<'docs'>): boolean {
+		return entry.slug.startsWith(lang + '/');
+	};
+}
+
+export const isEnglishEntry = createIsLangEntry('en');
+
 const docs = defineCollection({
 	schema: z.union([
 		baseSchema,
@@ -95,6 +112,7 @@ const docs = defineCollection({
 		migrationSchema,
 		tutorialSchema,
 		deploySchema,
+		recipeSchema,
 	]),
 });