Merge branch 'main' into update-endpoints

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;
 ---
-<h1>{resource}: {id}<h1>
+<h1>{resource}: {id}</h1>
 ```
 This page will be served for any value of `resource` and `id`: `resources/users/1`, `resources/colors/blue`, etc.
 

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;
+---
+<div class={className}>
+  <slot/>
+</div>
+```
+
+```astro title="src/pages/index.astro"
+---
+import MyComponent from "../components/MyComponent.astro"
+---
+<style is:global>
+  .red {
+    color: red;
+  }
+</style>
+<MyComponent class="red">This will be red!</MyComponent>
+```
+
+
+
 ## 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.

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** ||
 
 <Checklist>
 - [ ] 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.
 </Checklist>
 </Box>
 

src/pages/en/tutorial/2-pages/2.md

@@ -155,15 +155,16 @@ To create content for pages built with `.astro` files, I write text within stand
 ### Checklist for moving on
 
 <Checklist>
-- [ ] 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!
 </Checklist>
 </Box>
 
 ### Resources
 
 - [Markdown Cheat Sheet from The Markdown Guide](https://www.markdownguide.org/cheat-sheet/)  <Badge>external</Badge>
 
+- [What are browser developer tools? MDN](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools)  <Badge>external</Badge>
+
 - [YAML frontmatter](https://assemble.io/docs/YAML-front-matter.html)  <Badge>external</Badge>

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
 
 <Box icon="check-list">
 <Checklist>
-- [ ] 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.
 </Checklist>
 </Box>
 

src/pages/en/tutorial/2-pages/4.md

@@ -173,10 +173,8 @@ const bulletStyle = "'*'";
 ### Checklist for moving on
 
 <Checklist>
-
-- [ ] I can add CSS styles to HTML elements on a page using an Astro `<style>` tag.
-- [ ] I can use variables from my frontmatter script in my CSS to style elements on the page.
-
+- [ ] I can add CSS styles to an individual page using an Astro `<style>` tag.
+- [ ] I can use variables to style elements on the page.
 </Checklist>
 </Box>
 

src/pages/en/tutorial/2-pages/5.md

@@ -125,7 +125,7 @@ Your About page is now styled using *both* the imported `global.css` file *and*
 ### Checklist for moving on
 
 <Checklist>
-- [ ] I can define global CSS styles in a `.css` file located elsewhere in my project, and I understand how they work with local `<style>` tags.
+- [ ] I can add global CSS styles by importing a `.css` file.
 </Checklist>
 </Box>
 

src/pages/en/tutorial/3-components/1.md

@@ -107,8 +107,8 @@ These components should live in a folder outside of || **`src/pages`** || since
 ### Checklist for moving on
 
 <Checklist>
-- [ ] I can replace content that is duplicated on multiple pages by creating a single new component and including it on each page.
-- [ ] I can add content to a page by creating a new component, importing it and including it in the page template where I want it to appear.
+- [ ] I can refactor content into reusable components.
+- [ ] I can add a new component to an `.astro` page.
 </Checklist>
 
 </Box>

src/pages/en/tutorial/3-components/2.md

@@ -206,7 +206,7 @@ import '../styles/global.css';
 <Checklist>
 - [ ] I can create new `.astro` components in `src/components/`
 - [ ] I can import and use Astro components inside other Astro components.
-- [ ] I can send data (pass props) as component attributes to an Astro component so that it can use these values to dynamically generate HTML.
+- [ ] I can pass props to an Astro component.
 </Checklist>
 </Box>
 

src/pages/en/tutorial/3-components/3.md

@@ -185,9 +185,7 @@ Resize your window and look for different styles being applied at different scre
 ### Checklist for moving on
 
 <Checklist>
-
-- [ ] I can use CSS media queries to add responsive elements to my site
-
+- [ ] I can use CSS to add responsive elements to my site.
 </Checklist>
 </Box>
 

src/pages/en/tutorial/3-components/4.md

@@ -219,8 +219,8 @@ In Astro, JavaScript that is only meant to build your site is written between th
 ### Checklist for moving on
 
 <Checklist>
-- [ ] I can add client-side interactivity on my site by writing JavaScript within a `<script>` tag.
-- [ ] I can write JavaScript in a `.js` file elsewhere within my project `src`, and import it into a `<script>` tag.
+- [ ] I can add client-side interactivity with JavaScript in a `<script>` tag.
+- [ ] I can import a `.js` file into a `<script>` tag.
 </Checklist>
 
 </Box>

src/pages/en/tutorial/4-layouts/1.md

@@ -233,9 +233,8 @@ Don't forget to:
 ### Checklist for moving on
 
 <Checklist>
-- [ ] I can create an Astro component with a `<slot />` that serves as a page layout.
-- [ ] I can send page-specific properties to a layout using a component attribute.
-- [ ] I can render page content inside a layout by "wrapping" my entire page HTML template in opening and closing layout component tags.
+- [ ] I can create an Astro layout component with a `<slot />`.
+- [ ] I can send page-specific properties to a layout.
 </Checklist>
 </Box>
 

src/pages/en/tutorial/4-layouts/2.md

@@ -161,9 +161,9 @@ Fill in the blanks so that the following two components together produce working
 ### Checklist for moving on
 
 <Checklist>
-- [ ] I can add metadata to a blog post by creating a property in its YAML frontmatter.
-- [ ] I can create a separate layout for Markdown posts that renders the file's Markdown content in a `<slot />`.
-- [ ] I can use values from a blog post's frontmatter in its layout component.
+- [ ] I can add metadata to a blog post in its YAML frontmatter.
+- [ ] I can create a separate layout for Markdown posts.
+- [ ] I can use values from a blog post's frontmatter in a layout component.
 </Checklist>
 
 </Box>

src/pages/en/tutorial/4-layouts/3.md

@@ -94,8 +94,7 @@ Because Astro uses || **component-based design** ||, you can nest one layout ins
 ### Checklist for moving on
 
 <Checklist>
-- [ ] I can create multiple blog posts, and I can access them all through individual links on my Blog page.
-- [ ] I can nest layouts, and decide which layout will be responsible for which content.
+- [ ] I can nest layouts, checking for any duplicated elements.
 </Checklist>
 </Box>
 

src/pages/en/tutorial/5-astro-api/1.md

@@ -202,8 +202,8 @@ Write the syntax that represents:
 <Box icon="check-list">
 
 <Checklist>
-- [ ] I can use `Astro.glob()` to return an array of all `.md` files in a specified directory.
-- [ ] I can access the data returned by `Astro.glob()` to dynamically display values from my Markdown files.
+- [ ] I can query for data from my local files.
+- [ ] I can display a list of all my blog posts.
 </Checklist>
 </Box>
 

src/pages/en/tutorial/5-astro-api/2.md

@@ -302,8 +302,8 @@ Choose the term that matches the description.
 ### Checklist for moving on
 
 <Checklist>
-- [ ] I can generate pages dynamically, using one `[parameter].astro` file to generate several pages on my site.
-- [ ] I can pass `props` to each page route, and use these props in the common page template.
+- [ ] I can generate pages dynamically.
+- [ ] I can pass `props` to each page route.
 </Checklist>
 </Box>
 

src/pages/en/tutorial/5-astro-api/3.md

@@ -424,10 +424,7 @@ Match each file path with a second file path that will create a page at the same
 ### Checklist for moving on
 
 <Checklist>
-
-- [ ] I can use Astro's `/pages/folder/index.astro` routing feature to create a static page.
-- [ ] I can integrate a new page into my Astro site, using features I have previously built.
-
+- [ ] I can use Astro's `/pages/folder/index.astro` routing feature.
 </Checklist>
 </Box>
 

src/pages/en/tutorial/5-astro-api/4.md

@@ -76,7 +76,7 @@ npm run preview
 
 <Checklist>
 - [ ] I can install an Astro package using the command line.
-- [ ] I can create an RSS feed for my website that users can subscribe to using a feed reader.
+- [ ] I can create an RSS feed for my website.
 </Checklist>
 </Box>
 

src/pages/en/tutorial/6-islands/1.md

@@ -93,6 +93,21 @@ This component will take an array of greeting messages as a prop and randomly se
 
   5. Revisit your page and compare the two components. The second button works because the `client:load` directive tells Astro to send and rerun its JavaScript to the _client_ when the page _loads_, making the component interactive. We call this a **hydrated** component.
   
+  6. Once the difference is clear, remove the non-hydrated Greeting component.
+
+
+      ```astro title="src/pages/index.astro" del={8} "client:load"
+      ---
+      import BaseLayout from '../layouts/BaseLayout.astro';
+      import Greeting from '../components/Greeting';
+      const pageTitle = "Home Page";
+      ---
+      <BaseLayout pageTitle={pageTitle}>
+        <h2>My awesome blog subtitle</h2>
+        <Greeting messages={["Hi", "Hello", "Howdy", "Hey there"]} />
+        <Greeting client:load messages={["Hej", "Hallo", "Hola", "Habari"]} />
+      </BaseLayout>
+      ```
 
 <Box icon="question-mark">
 
@@ -167,9 +182,9 @@ For each of the following components, identify what will be sent to the browser:
 ### Checklist for moving on
 
 <Checklist>
-- [ ] I can install an Astro integration using the command `astro add` in the terminal.
-- [ ] I can write UI framework components in their own language, with their own native extention, then import and use them in `.astro` components alongside my Astro components.
-- [ ] I can choose whether to use a `client:` directive to control hydration on my UI framework component.
+- [ ] I can install an Astro integration.
+- [ ] I can write UI framework components in their own language.
+- [ ] I can use a `client:` directive for hydration on my UI framework component.
 </Checklist>
 </Box>
 

src/pages/en/tutorial/6-islands/2.md

@@ -211,9 +211,7 @@ Choose whether each of the following statements describes Astro `<script>` tags,
 ### Checklist for moving on
 
 <Checklist>
-
-- [ ] I can use a `<script>` tag to add interactivity to an Astro component
-
+- [ ] I can use JavaScript for interactivity when I don't want to add a framework.
 </Checklist>
 </Box>
 

src/pages/en/tutorial/6-islands/3.md

@@ -13,7 +13,7 @@ Now you have your very own Astro blog!
 
 ## Next Steps
 
-Read the Docs
+[Start a new Astro project](/en/getting-started/)
 
 [Join us on Discord](https://astro.build/chat)
 

src/pages/pt-br/guides/deploy/render.md

@@ -0,0 +1,18 @@
+---
+title: Faça o deploy do seu site Astro no Render
+description: Como fazer o deploy do seu site Astro usando Render.
+layout: ~/layouts/DeployGuideLayout.astro
+i18nReady: true
+---
+
+Você pode fazer deploy do seu projeto Astro no [Render](https://render.com/), um serviço para construir sites com certificados TLS gratuitos, uma CDN global, proteção contra DDoS, redes privadas e deploys automáticos do Git.
+
+## Como fazer o deploy
+
+1. Crie uma [conta no render.com](https://dashboard.render.com/) e faça login
+2. Clique no botão **New +** em seu dashboard e selecione **Static Site**
+3. Conecte seu repositório do [GitHub](https://github.com/) ou [GitLab](https://about.gitlab.com/) ou então insira a URL pública de um repositório público
+4. Dê um nome ao seu site, selecione a branch e especifique o comando de build e diretório de publicação
+   - **build command:** `npm run build`
+   - **publish directory:** `dist`
+5. Clique no botão **Create Static Site**