From 4b9d201d1e7c82b1cc923782b9b34fadf796edf1 Mon Sep 17 00:00:00 2001 From: Atharva Date: Wed, 10 Jul 2024 13:48:53 +0530 Subject: [PATCH 1/6] [layouts.mdx] add information about using TypeScript for one single layout --- src/content/docs/en/basics/layouts.mdx | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/content/docs/en/basics/layouts.mdx b/src/content/docs/en/basics/layouts.mdx index 2e5d420c30002..5ad48c02fac14 100644 --- a/src/content/docs/en/basics/layouts.mdx +++ b/src/content/docs/en/basics/layouts.mdx @@ -258,6 +258,28 @@ const { title } = Astro.props.frontmatter || Astro.props; ``` +### Working with TypeScript + +Any astro layout can be modified to introduce typesafety & autocompletion via + +```astro ins={3} ": CustomProps" +--- +// src/components/MyLayout.astro +type CustomProps = { title: string }; +const { title } : CustomProps = Astro.props.frontmatter || Astro.props; +--- +``` + +or by overriding default Props via + +```astro ins={3} +--- +// src/components/MyLayout.astro +interface Props { title: string } +const { title } = Astro.props; +--- +``` + ## Nesting Layouts Layout components do not need to contain an entire page worth of HTML. You can break your layouts into smaller components, and combine layout components to create even more flexible, page templates. This pattern is useful when you want to share some code across multiple layouts. From 6bd173638c7b07255ff70236a75088ab61a1c71a Mon Sep 17 00:00:00 2001 From: Atharva Date: Wed, 10 Jul 2024 19:37:01 +0530 Subject: [PATCH 2/6] Update src/content/docs/en/basics/layouts.mdx Co-authored-by: Sarah Rainsberger --- src/content/docs/en/basics/layouts.mdx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/content/docs/en/basics/layouts.mdx b/src/content/docs/en/basics/layouts.mdx index 5ad48c02fac14..7e6c4e209ff9f 100644 --- a/src/content/docs/en/basics/layouts.mdx +++ b/src/content/docs/en/basics/layouts.mdx @@ -260,23 +260,23 @@ const { title } = Astro.props.frontmatter || Astro.props; ### Working with TypeScript -Any astro layout can be modified to introduce typesafety & autocompletion via +Any astro layout can be modified to introduce typesafety & autocompletion by providing the types for your props: -```astro ins={3} ": CustomProps" +```astro ins={2} title="src/components/MyLayout.astro" --- -// src/components/MyLayout.astro -type CustomProps = { title: string }; -const { title } : CustomProps = Astro.props.frontmatter || Astro.props; +interface Props { + title: string +} +const { title } = Astro.props; --- ``` -or by overriding default Props via +You can override Astro's default `Props` to handle situations where your layout recieves props of different types: -```astro ins={3} +```astro ": CustomProps" title="src/components/MyLayout.astro" --- -// src/components/MyLayout.astro -interface Props { title: string } -const { title } = Astro.props; +type CustomProps = { title: string }; +const { title } : CustomProps = Astro.props.frontmatter || Astro.props; --- ``` From 15044faf44fc78623a128b8547623f097c4aab7b Mon Sep 17 00:00:00 2001 From: Atharva Date: Wed, 10 Jul 2024 21:57:53 +0530 Subject: [PATCH 3/6] add brief code snippet of typesafe layout --- src/content/docs/en/basics/layouts.mdx | 34 ++++++++++++++++++++++---- 1 file changed, 29 insertions(+), 5 deletions(-) diff --git a/src/content/docs/en/basics/layouts.mdx b/src/content/docs/en/basics/layouts.mdx index 7e6c4e209ff9f..0decc1ec44be9 100644 --- a/src/content/docs/en/basics/layouts.mdx +++ b/src/content/docs/en/basics/layouts.mdx @@ -262,21 +262,45 @@ const { title } = Astro.props.frontmatter || Astro.props; Any astro layout can be modified to introduce typesafety & autocompletion by providing the types for your props: -```astro ins={2} title="src/components/MyLayout.astro" +```astro ins={2-7} title="src/components/MyLayout.astro" --- interface Props { - title: string + title: string; + description: string; + publishDate: Date; + viewCount: number; } -const { title } = Astro.props; +const { title, description, publishDate, viewCount } = Astro.props; --- + + + + + {title} + + +
+

Published on {publishDate}

+

Viewed by {viewCount} folks

+
+
+ +
+ + ``` You can override Astro's default `Props` to handle situations where your layout recieves props of different types: ```astro ": CustomProps" title="src/components/MyLayout.astro" --- -type CustomProps = { title: string }; -const { title } : CustomProps = Astro.props.frontmatter || Astro.props; +type CustomProps = { + title: string; + description: string; + publishDate: Date; + viewCount: number; +} +const { title, description, publishDate, viewCount } : CustomProps = Astro.props.frontmatter || Astro.props; --- ``` From d6fbf74a9be4043dbe7b6c925ba029cb3ceafb79 Mon Sep 17 00:00:00 2001 From: Atharva Date: Tue, 30 Jul 2024 20:23:21 +0530 Subject: [PATCH 4/6] Update src/content/docs/en/basics/layouts.mdx - taking suggestions from Sarah Co-authored-by: Sarah Rainsberger --- src/content/docs/en/basics/layouts.mdx | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/src/content/docs/en/basics/layouts.mdx b/src/content/docs/en/basics/layouts.mdx index 0decc1ec44be9..2212e452edbda 100644 --- a/src/content/docs/en/basics/layouts.mdx +++ b/src/content/docs/en/basics/layouts.mdx @@ -290,20 +290,6 @@ const { title, description, publishDate, viewCount } = Astro.props; ``` -You can override Astro's default `Props` to handle situations where your layout recieves props of different types: - -```astro ": CustomProps" title="src/components/MyLayout.astro" ---- -type CustomProps = { - title: string; - description: string; - publishDate: Date; - viewCount: number; -} -const { title, description, publishDate, viewCount } : CustomProps = Astro.props.frontmatter || Astro.props; ---- -``` - ## Nesting Layouts Layout components do not need to contain an entire page worth of HTML. You can break your layouts into smaller components, and combine layout components to create even more flexible, page templates. This pattern is useful when you want to share some code across multiple layouts. From 64f74bf24343f120a2a0f914d0fd4098b33749c9 Mon Sep 17 00:00:00 2001 From: Atharva Date: Tue, 30 Jul 2024 20:45:43 +0530 Subject: [PATCH 5/6] Update src/content/docs/en/basics/layouts.mdx taking suggestions from Ryan --- src/content/docs/en/basics/layouts.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/basics/layouts.mdx b/src/content/docs/en/basics/layouts.mdx index 2212e452edbda..be48f3fa22900 100644 --- a/src/content/docs/en/basics/layouts.mdx +++ b/src/content/docs/en/basics/layouts.mdx @@ -267,7 +267,7 @@ Any astro layout can be modified to introduce typesafety & autocompletion by pro interface Props { title: string; description: string; - publishDate: Date; + publishDate: string; viewCount: number; } const { title, description, publishDate, viewCount } = Astro.props; From 269607d99f9fac1a83cbb07a5920112c0c7bc7b3 Mon Sep 17 00:00:00 2001 From: Atharva Date: Wed, 31 Jul 2024 07:48:20 +0530 Subject: [PATCH 6/6] chore: trimming one layout for all section, update typescript layout heading --- src/content/docs/en/basics/layouts.mdx | 22 +--------------------- 1 file changed, 1 insertion(+), 21 deletions(-) diff --git a/src/content/docs/en/basics/layouts.mdx b/src/content/docs/en/basics/layouts.mdx index be48f3fa22900..2291c8f6e9fec 100644 --- a/src/content/docs/en/basics/layouts.mdx +++ b/src/content/docs/en/basics/layouts.mdx @@ -238,27 +238,7 @@ const { title, fancyJsHelper } = Astro.props; Learn more about Astro’s Markdown and MDX support in our [Markdown/MDX guide](/en/guides/markdown-content/). -## Using one Layout for `.md`, `.mdx`, and `.astro` - -A single Astro layout can be written to receive the `frontmatter` object from `.md` and `.mdx` files, as well as any named props passed from `.astro` files. - -In the example below, the layout will display the page title either from a frontmatter YAML `title` property or from an Astro component passing a `title` attribute: - -```astro /{?title}?/ /Astro.props[.a-z]*/ ---- -// src/components/MyLayout.astro -const { title } = Astro.props.frontmatter || Astro.props; ---- - - - -

{title}

- - - -``` - -### Working with TypeScript +### Using TypeScript with layouts Any astro layout can be modified to introduce typesafety & autocompletion by providing the types for your props: