Skip to content

add information about using TypeScript with layouts #8763

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
at-the-vr merged 9 commits into from
Jul 31, 2024
Merged

add information about using TypeScript with layouts #8763

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4b9d201
[layouts.mdx] add information about using TypeScript for one single l…
at-the-vr Jul 10, 2024
6bd1736
Update src/content/docs/en/basics/layouts.mdx
at-the-vr Jul 10, 2024
15044fa
add brief code snippet of typesafe layout
at-the-vr Jul 10, 2024
1c870ff
Merge branch 'main' into atv/docs/layout-ts
delucis Jul 13, 2024
d6fbf74
Update src/content/docs/en/basics/layouts.mdx
at-the-vr Jul 30, 2024
f0a2f6e
Merge branch 'main' into atv/docs/layout-ts
at-the-vr Jul 30, 2024
64f74bf
Update src/content/docs/en/basics/layouts.mdx
at-the-vr Jul 30, 2024
269607d
chore: trimming one layout for all section, update typescript layout …
at-the-vr Jul 31, 2024
ce7b540
Merge branch 'main' into atv/docs/layout-ts
at-the-vr Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 23 additions & 11 deletions src/content/docs/en/basics/layouts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,22 +238,34 @@ const { title, fancyJsHelper } = Astro.props;

<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`
### Using TypeScript with layouts

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.
Any astro layout can be modified to introduce typesafety & autocompletion by providing the types for your props:

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]*/
```astro ins={2-7} title="src/components/MyLayout.astro"
---
// src/components/MyLayout.astro
const { title } = Astro.props.frontmatter || Astro.props;
interface Props {
title: string;
description: string;
publishDate: string;
viewCount: number;
}
const { title, description, publishDate, viewCount } = Astro.props;
---
<html>
<head></head>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content={description}>
<title>{title}</title>
</head>
<body>
<h1>{title}</h1>
<slot />
<header>
<p>Published on {publishDate}</p>
<p>Viewed by {viewCount} folks</p>
</header>
<main>
<slot />
</main>
</body>
</html>
```
Expand Down