Skip to content

Commit 60f35d6

Browse files
sarah11918delucismorinokamiJutaniumliruifengv
authored
[reorg] new Recipes section; Basics streamlined (withastro#2550)
* initial sidebar reorg * tutorials key * new (hidden) recipes page * move ui frameworks back to guides * add astro syntax hidden page * update recipes page * create initial nanostores recipe page from sharing state * Update pages for content collections * falso -> false * new captcha recipe pulled from endpoints * add yaml support recipe * move some component content out * slimmed down components page * some simplifying/editing edits to routing * update links to astro-syntax * attempt CI fail fixes * nav.ts indentation? * update CLI page and put in Learn menu * more edits to CLI page intro for friendliness * update i18n nav.ts for sidebar updates * final nav.ts cleanup * more user-friendly CLI intro * even friendlier CLI! * hack so CLI is in Learn category for sidebar highlighting * some Components page tidying - slots! * minor tidying of Astro syntax as a standalone page * Highlight recipes when on a page in recipes folder * Recipe components * i18n(ja): Update nav.ts (withastro#2693) * move Routing and MD/MDX pages into guides * rename new page Astro Template Syntax * recipes folder * Move fonts back to guides * all recipes -> more recipes * remove back button on recipe index * Fix nav key type issue * Move main recipes file to avoid `index.mdx` * i18n(zh-cn): Update nav.ts based on reorg-incl-recipes (withastro#2687) * i18n(zh-cn): Update nav.ts * i18n(zh-cn): Update nav.ts * Update nav.ts --------- Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * update of nav (withastro#2725) * kill nanostores, replace with orig sharing state * add commented out original content back in to CLI * Make logos optional in `<CardsNav>` * Add optional `description` support to `<CardsNav>` * Configure content collection schema for recipes (no tags yet) * Add `type: recipe` to recipes & write missing descriptions * Very basic `<RecipesNav>` — needs tag, i18n support & styling * Replace `<RecipeBox>` with `<RecipesNav>` * Fix es nav type error * sharing state -> share state between islands * Tweak card grid to work better for recipe cards * Style description text in `<Card>` * Remove unneeded styles in `<CMSGuidesNav>` * Fix margins on `<RecipesNav>` * Fix `<RecipesNav>` links & remove tags * Add `<RecipeLayout>` * move CLI Reference page back to reference, remove Learn cateogry * add links back to recipes from original pages * nit edits in integrations-guide * links no longer notes; use emoji * related recipes bold text instead of heading; might delete * updated links to recipes - one line * fix broken link, move recipe to proper page! * Curated -> Official * [i18nIgnore] Add new subpage handling logic (withastro#2758) * [i18nIgnore] Add new subpage handling logic * Revert "[i18nIgnore] Add new subpage handling logic" This reverts commit 5fce612. * Refactor subpage highlighting logic * Add missing frontmatter fields from translations * Avoid using `import.meta.url` --------- Co-authored-by: Chris Swithinbank <swithinbank@gmail.com> * handle forms recipe + skeleton * build forms with api routes - 3 steps, examples for 5 frameworks * captcha we -> you and formatting * incorporate changes from PR2404 into Astro Syntax * incorporated changes from 2404 into Astro Components * update code example to show an Astro component vs UI framework * prereqs * yaml -> vite or rollup * Sarah edits to HTML forms - check carefully for still needs! * tiny Sarah edits * Dan's improved instructions Co-authored-by: Dan Jutan <danjutan@gmail.com> * no typos under Yan's watch! Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> * removing inelegance! Co-authored-by: Dan Jutan <danjutan@gmail.com> * Update src/content/docs/en/recipes/build-forms.mdx Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> * Delete clipboard-check.svg * Remove duplicate nav entry * tweak order of guides * nod to script and style tags in components, removed dup from script page * remove forms recipes * Update PT-BR `nav.ts` file * nav tweaks esp routing * bye bye, "sits the template" * Use translations correct in `<RecipesNav>` * Add `lang="en"` to English fallback content in `<RecipesNav>` * Update PT-BR `rss.mdx` description * Also update the PT-BR `title` prop! --------- Co-authored-by: Chris Swithinbank <swithinbank@gmail.com> Co-authored-by: Shinya Fujino <shf0811@gmail.com> Co-authored-by: Dan Jutan <danjutan@gmail.com> Co-authored-by: 李瑞丰 <liruifeng1024@gmail.com> Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com> Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com>
1 parent 3ae93f0 commit 60f35d6

62 files changed

Lines changed: 905 additions & 554 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/components/CMSGuidesNav.astro‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -41,17 +41,4 @@ const links = enPages
4141
.cms-nav > :global(*) {
4242
margin-top: -2rem;
4343
}
44-
45-
.cms-nav > :global(* + *) {
46-
margin-top: -3rem;
47-
}
48-
49-
.cms-nav :global(.scope) {
50-
font-weight: normal;
51-
color: var(--theme-text-lighter);
52-
}
53-
54-
h3 {
55-
margin-bottom: 0;
56-
}
5744
</style>

‎src/components/LeftSidebar/LeftSidebar.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ let activeTab: 'learn' | 'api' = 'learn';
3535
3636
// Certain pages are not in the sidebar nav, so we manually set the active tab based on other factors (e.g. Algolia page category).
3737
const isReference = ['Error Reference', 'Reference'].includes(
38-
getPageCategory(new URL(currentPage, import.meta.url))
38+
getPageCategory({ pathname: currentPage })
3939
);
4040
if (isReference) {
4141
activeTab = 'api';

‎src/components/LeftSidebar/SidebarContent.astro‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
2-
import { getLanguageFromURL, removeSubpageSegment } from '../../util';
2+
import { getLanguageFromURL } from '~/util';
3+
import { isSubPage } from '~/util/isSubPage';
34
45
export interface Props {
56
type: TabType;
@@ -44,11 +45,7 @@ const lang = getLanguageFromURL(Astro.url.pathname);
4445
<a
4546
href={`${Astro.site?.pathname}${lang}/${slug}/`}
4647
aria-current={`${currentPageMatch.endsWith(slug) ? 'page' : 'false'}`}
47-
data-current-parent={`${
48-
removeSubpageSegment(currentPageMatch).endsWith(removeSubpageSegment(slug))
49-
? 'true'
50-
: 'false'
51-
}`}
48+
data-current-parent={`${isSubPage(currentPageMatch, slug) ? 'true' : 'false'}`}
5249
>
5350
<Fragment set:html={text} /> {isFallback && <sup class="fallback">EN</sup>}
5451
</a>

‎src/components/NavGrid/Card.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import BrandLogo from '../BrandLogo.astro';
44
55
export interface Props {
66
href: string;
7-
logo: LogoKey;
7+
logo?: LogoKey;
88
current?: boolean;
99
minimal?: boolean;
1010
[key: string]: any;
@@ -14,7 +14,7 @@ const { href, logo, current, minimal, class: classes, ...attrs } = Astro.props a
1414
---
1515

1616
<li class:list={['card', minimal ? 'card--minimal' : 'card--maximal', classes]} {...attrs}>
17-
<BrandLogo brand={logo} />
17+
{logo && <BrandLogo brand={logo} />}
1818
<div class="stack">
1919
<h3>
2020
<a href={href} aria-current={current ? 'page' : 'false'}>

‎src/components/NavGrid/CardsNav.astro‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,13 @@ export interface Props {
88
minimal?: boolean;
99
links: {
1010
title: string;
11+
description?: string;
1112
href: string;
12-
logo: LogoKey;
13+
logo?: LogoKey;
1314
/** Map of tag IDs to translated tag display text, e.g. `{ static: 'Statisch' }`. */
1415
tags?: Record<string, string>;
16+
/** The language of the content if it differs from the main page language. */
17+
lang?: string;
1518
}[];
1619
class?: string;
1720
}
@@ -25,14 +28,15 @@ const currentPage = new URL(Astro.request.url).pathname;
2528
<slot />
2629
<Grid minimal={minimal}>
2730
{
28-
links.map(({ href, logo, title, tags }) => (
31+
links.map(({ description, href, logo, title, tags, lang }) => (
2932
<Card
30-
{...{ minimal, logo, href }}
33+
{...{ minimal, logo, href, lang }}
3134
current={currentPage.includes(href)}
3235
class={Object.keys(tags || {}).join(' ')}
3336
>
3437
<Fragment slot="title" set:html={title} />
3538
<Fragment slot="details">
39+
{description && <p class="description">{description}</p>}
3640
{tags && (
3741
<div class="tags">
3842
{Object.values(tags).map((tag) => (
@@ -53,6 +57,12 @@ const currentPage = new URL(Astro.request.url).pathname;
5357
accent-color: var(--theme-accent-secondary);
5458
}
5559

60+
.description {
61+
margin-top: 0.25rem;
62+
color: var(--theme-text-lighter);
63+
font-size: var(--theme-text-sm);
64+
}
65+
5666
.tags {
5767
display: flex;
5868
gap: 0.5rem;

‎src/components/NavGrid/Grid.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,19 @@ const { minimal } = Astro.props as Props;
1818
display: grid;
1919
grid-template-columns: repeat(auto-fill, minmax(var(--column-min-width), 1fr));
2020
grid-template-columns: repeat(auto-fill, minmax(min(var(--column-min-width), 100%), 1fr));
21-
gap: 1.5rem;
21+
gap: 2rem;
2222
list-style: none;
23+
align-items: start;
2324
}
2425

2526
@media (min-width: 37.75em) {
2627
.fluid-grid {
27-
gap: 1.5rem 2.5rem;
28+
gap: 2rem 2.5rem;
2829
}
2930
}
3031

3132
.fluid-grid--minimal {
3233
--column-min-width: 6rem;
3334
gap: 1.5rem 0.75rem;
34-
align-items: start;
3535
}
3636
</style>

‎src/components/RecipesNav.astro‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
import { recipePages } from '~/content';
3+
import { createIsLangEntry, isEnglishEntry } from '~/content/config';
4+
import { getLanguageFromURL, stripLangFromSlug } from '~/util';
5+
import CardsNav from './NavGrid/CardsNav.astro';
6+
7+
export interface Props {
8+
minimal?: boolean;
9+
}
10+
11+
const lang = getLanguageFromURL(Astro.url.pathname);
12+
const langRecipes = recipePages.filter(createIsLangEntry(lang));
13+
const englishRecipes = recipePages.filter(isEnglishEntry);
14+
15+
/** An array of all recipes, using translations if available and falling back to English otherwise. */
16+
const recipes = englishRecipes.map((fallback) => {
17+
const slug = stripLangFromSlug(fallback.slug);
18+
const translation = langRecipes.find((doc) => stripLangFromSlug(doc.slug) === slug);
19+
return translation || fallback;
20+
});
21+
---
22+
23+
<div>
24+
<CardsNav
25+
minimal={Astro.props.minimal}
26+
links={recipes.map(({ data, slug }) => {
27+
const linkLang = slug.split('/').shift();
28+
return {
29+
title: data.title,
30+
description: data.description,
31+
// Fallback entries will have a slug starting with 'en/',
32+
// so we replace that to link to the correct language.
33+
href: '/' + slug.replace('en/', `${lang}/`) + '/',
34+
// Fallback content will be in English, unlike the page,
35+
// so we set an explicit `lang="en"` for these entries.
36+
lang: linkLang !== lang ? linkLang : undefined,
37+
};
38+
})}
39+
/>
40+
</div>
41+
42+
<style>
43+
div > :global(*) {
44+
margin-top: -2rem;
45+
}
46+
</style>

‎src/content.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { getCollection } from 'astro:content';
2-
import { isEnglishEntry, isTutorialEntry } from './content/config';
2+
import { isEnglishEntry, isRecipeEntry, isTutorialEntry } from './content/config';
33

44
export const allPages = await getCollection('docs');
55
export const tutorialPages = allPages.filter(isTutorialEntry);
6+
export const recipePages = allPages.filter(isRecipeEntry);
67
export const englishPages = allPages.filter(isEnglishEntry);

‎src/content/config.ts‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@ export const tutorialSchema = baseSchema.extend({
4545
unitTitle: z.string().optional(),
4646
});
4747

48+
export const recipeSchema = baseSchema.extend({
49+
type: z.literal('recipe'),
50+
description: z.string(),
51+
});
52+
4853
export type DeployEntry = CollectionEntry<'docs'> & {
4954
data: z.infer<typeof deploySchema>;
5055
};
@@ -65,6 +70,10 @@ export type TutorialEntry = CollectionEntry<'docs'> & {
6570
data: z.infer<typeof tutorialSchema>;
6671
};
6772

73+
export type RecipeEntry = CollectionEntry<'docs'> & {
74+
data: z.infer<typeof recipeSchema>;
75+
};
76+
6877
export type IntegrationCategory = z.infer<typeof integrationSchema>['category'];
6978

7079
export function isCmsEntry(entry: CollectionEntry<'docs'>): entry is CmsEntry {
@@ -83,10 +92,18 @@ export function isMigrationEntry(entry: CollectionEntry<'docs'>): entry is Migra
8392
return entry.data.type === 'migration';
8493
}
8594

86-
export function isEnglishEntry(entry: CollectionEntry<'docs'>): boolean {
87-
return entry.slug.startsWith('en/');
95+
export function isRecipeEntry(entry: CollectionEntry<'docs'>): entry is RecipeEntry {
96+
return entry.data.type === 'recipe';
8897
}
8998

99+
export function createIsLangEntry(lang: string) {
100+
return function isLangEntry(entry: CollectionEntry<'docs'>): boolean {
101+
return entry.slug.startsWith(lang + '/');
102+
};
103+
}
104+
105+
export const isEnglishEntry = createIsLangEntry('en');
106+
90107
const docs = defineCollection({
91108
schema: z.union([
92109
baseSchema,
@@ -95,6 +112,7 @@ const docs = defineCollection({
95112
migrationSchema,
96113
tutorialSchema,
97114
deploySchema,
115+
recipeSchema,
98116
]),
99117
});
100118

0 commit comments

Comments
 (0)