Skip to content
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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add documentation regarding usage of style tags in components containing html tags (i.e. layout components) #8603

Closed
Trombach opened this issue Jun 20, 2024 · 4 comments 路 Fixed by #8621
Closed

Add documentation regarding usage of style tags in components containing html tags (i.e. layout components) #8603

Trombach opened this issue Jun 20, 2024 · 4 comments 路 Fixed by #8621

Comments

@Trombach
Copy link
Contributor

馃搵 Explain your issue

I'm opening this issue to ask for advice on fixing a gap in the documentation regarding layout components. The issue is that if a layout component contains an html tag, any style tags (this might also apply to script tags?) need to be nested inside the html tag. This is different to how astro components normally behave where the style tag is usually placed outside of any other tags.

Example

// invalid
---
---
<html>
  <head>...</head>
  <body>...</body>
<html>

<style>...</style>

// valid
---
---
<html>
  <head>...</head>
  <body>...</body>
  <style>...</style>
<html>

The behaviour and workaround was confirmed in this issue.

Suggestion

I think this would make sense to explain in a callout box on the layouts page. Something akin to

Warning

A style tag in an Astro component containing an html tag must be nested inside the html tag.

I don't think I have seen this mentioned anywhere else in the docs, but I might have overlooked it. Ideally this should trigger at least a linter warning in the language tools, but getting it documented would be a good start.

More than happy to send a PR!
@at-the-vr
Copy link
Member

Can confirm the suggestion is valid based off Issue linked & withastro/astro/blob/main/examples/blog/src/layouts/BlogPost.astro. Hit your PR right away 馃槈

@sarah11918
Copy link
Member

I saw the discussion and agree it seems to be something that needs documenting!

I will point out though, that a call out is probably NOT the way to do this. ;) Cautions and warnings are for: security risk, might lose data, set your house on fire etc. In general, "how things work" is not a special note, it's just part of regular documentation!

So, I would encourage you to look for where, in normal paragraph text, this content makes sense to add! Then, I'll help edit it and get it over the finish line. 馃挭

@Trombach
Copy link
Contributor Author

@sarah11918 Thanks, good point regarding the callout. I will write something up later today and send it through. I can also send through a German translation at the same time, I presume I'd do that in a separate PR?

@Trombach Trombach mentioned this issue Jun 21, 2024
Merged
@sarah11918
Copy link
Member

Yes! The German would be in a 2nd PR, thanks! Especially since you won't know for sure what the final English version will be until Team Docs is finished reviewing and possibly editing it, it saves work by not doing the translation too early. 馃檶

@Nin3lee Nin3lee mentioned this issue Jun 24, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

add hint regarding style and script tag locations in layout components Trombach/astro-docs
3 participants
@sarah11918 @Trombach @at-the-vr