Skip to content

Commit

Permalink
Improve <head> docs reference (withastro#301)
Browse files Browse the repository at this point in the history
This might deserve a section on another page like `/component-syntax`, but it's a start.

"Just use `<head>`" doesn't convey that Astro doesn't duplicate `<head>` elements in child components of layouts in a way that `react-helmet` does

It was a bit confusing wording wise equating the two, so I added a caveat.

From what I understand, the current recommendation to add to `<head>` from a lower component is:

```astro
// MainLayout.astro
<HTML>
  <head>
    <title>tada this is my title in regular head</title>
    <slot name="head/>
  </head>
  <body>
    <main>
      <slot/>
    </main>
  </body>
</html>
```

and then in `Component.astro`
```astro
<Fragment slot="head">
  <title>this is a different title now :D</title>
</Fragment>
```
  • Loading branch information
jasikpark authored Apr 6, 2022
1 parent 13d59d1 commit 1529df1
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion src/pages/en/comparing-astro-vs-other-tools.md
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@ Astro component syntax is a superset of HTML. It was designed to feel familiar t
| Requires JS import | No | Yes, `jsxPragma` (`React` or `h`) must be in scope |
| Fragments | Automatic top-level, `<Fragment>` or `<>` inside functions | Wrap with `<Fragment>` or `<>` |
| Multiple frameworks per-file | Yes | No |
| Modifying `<head>` | Just use `<head>` | Per-framework (`<Head>`, `<svelte:head>`, etc) |
| Modifying `<head>` | Just use `<head>` in top-level pages | Per-framework (`<Head>`, `<svelte:head>`, etc) |
| Comment Style | `<!-- HTML -->` | `{/_ JavaScript _/}` |
| Special Characters | `&nbsp;` | `&nbsp;` |
| Attributes | `dash-case` | `camelCase`|
Expand Down

0 comments on commit 1529df1

Please sign in to comment.