diff --git a/src/pages/en/core-concepts/routing.md b/src/pages/en/core-concepts/routing.md index 79cdf86c66cf9..d6178bc47befe 100644 --- a/src/pages/en/core-concepts/routing.md +++ b/src/pages/en/core-concepts/routing.md @@ -172,7 +172,7 @@ In [SSR mode](/en/guides/server-side-rendering/), dynamic routes are defined the --- const { resource, id } = Astro.params; --- -

{resource}: {id}

+

{resource}: {id}

``` This page will be served for any value of `resource` and `id`: `resources/users/1`, `resources/colors/blue`, etc. diff --git a/src/pages/en/guides/styling.md b/src/pages/en/guides/styling.md index 6a77bedbafdac..f73d5afcbc093 100644 --- a/src/pages/en/guides/styling.md +++ b/src/pages/en/guides/styling.md @@ -92,6 +92,36 @@ const backgroundColor = "rgb(24 121 78)"; 📚 See our [directives reference](/en/reference/directives-reference/#definevars) page to learn more about `define:vars`. +### Passing a `class` to a child component + +In Astro, HTML attributes like `class` do not automatically pass through to child components. + + +Instead, accept a `class` prop in the child component and apply it to the root element. When destructuring, you must rename it, because `class` is a [reserved word](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#reserved_words) in JavaScript. + +```astro title="src/components/MyComponent.astro" {2,4} +--- +const { class: className } = Astro.props; +--- +
+ +
+``` + +```astro title="src/pages/index.astro" +--- +import MyComponent from "../components/MyComponent.astro" +--- + +This will be red! +``` + + + ## External Styles There are two ways to resolve external global stylesheets: an ESM import for files located within your project source, and an absolute URL link for files in your `public/` directory, or hosted outside of your project. diff --git a/src/pages/en/tutorial/2-pages/1.md b/src/pages/en/tutorial/2-pages/1.md index 9588e126b4691..3bbc840011c39 100644 --- a/src/pages/en/tutorial/2-pages/1.md +++ b/src/pages/en/tutorial/2-pages/1.md @@ -158,7 +158,7 @@ If I am unsure what to write, can always start by || **copying and pasting** || - [ ] I can create a new page for my website, and link to it from an existing page. -- [ ] I can commit my changes back to GitHub, and verify that my live website at Netlify has updated. +- [ ] I can commit my changes back to GitHub, and update my live site on Netlify. diff --git a/src/pages/en/tutorial/2-pages/2.md b/src/pages/en/tutorial/2-pages/2.md index 237f4e8ef5c77..956ae51d77ab0 100644 --- a/src/pages/en/tutorial/2-pages/2.md +++ b/src/pages/en/tutorial/2-pages/2.md @@ -155,10 +155,9 @@ To create content for pages built with `.astro` files, I write text within stand ### Checklist for moving on -- [ ] I can create a new folder within `src/pages/` for my blog posts -- [ ] I can create a new Markdown (`.md`) blog post file in this new folder with YAML frontmatter values +- [ ] I can create a new folder within `src/pages/` for my blog posts. +- [ ] I can create a new Markdown (`.md`) blog post file. - [ ] I understand that Markdown is another language that, like Astro, produces HTML in my browser. -- [ ] I can read more about Markdown and YAML on my own if I need to! @@ -166,4 +165,6 @@ To create content for pages built with `.astro` files, I write text within stand - [Markdown Cheat Sheet from The Markdown Guide](https://www.markdownguide.org/cheat-sheet/) external +- [What are browser developer tools? MDN](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools) external + - [YAML frontmatter](https://assemble.io/docs/YAML-front-matter.html) external diff --git a/src/pages/en/tutorial/2-pages/3.md b/src/pages/en/tutorial/2-pages/3.md index 120e641634a36..51cb446b2c28b 100644 --- a/src/pages/en/tutorial/2-pages/3.md +++ b/src/pages/en/tutorial/2-pages/3.md @@ -253,10 +253,8 @@ For each Astro template expression, guess the HTML (if any!) that will be sent t -- [ ] I can define values in my Astro script and render these values in HTML elements. -- [ ] I can conditionally render entire HTML elements using JavaScript expressions and logical operators. -- [ ] I can define objects and arrays in my frontmatter script and use their contents in HTML elements. -- [ ] I can use the JavaScript `map()` function to produce the same HTML element for each item in an array. +- [ ] I can define values in and use values in `.astro` files. +- [ ] I can conditionally render HTML elements. diff --git a/src/pages/en/tutorial/2-pages/4.md b/src/pages/en/tutorial/2-pages/4.md index f44546986df24..e58be5e03cc66 100644 --- a/src/pages/en/tutorial/2-pages/4.md +++ b/src/pages/en/tutorial/2-pages/4.md @@ -173,10 +173,8 @@ const bulletStyle = "'*'"; ### Checklist for moving on - -- [ ] I can add CSS styles to HTML elements on a page using an Astro `