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.

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

[tutorial] consistent voice #4700

Merged
merged 5 commits into from
Sep 15, 2023
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
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
6 changes: 3 additions & 3 deletions src/content/docs/en/tutorial/1-setup/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import Box from '~/components/tutorial/Box.astro';



Now that you know what you're going to build, let's set up all the tools you'll need!
Now that you know what you're going to build, it's time to set up all the tools you'll need!

This unit shows you how to set up your development environment and deploy to Netlify. Skip ahead to [Unit 2](/en/tutorial/2-pages/) if you are already comfortable with your environment and workflow.

Expand Down Expand Up @@ -52,7 +52,7 @@ Otherwise, skip to [Unit 2](/en/tutorial/2-pages/) to start building with Astro!
</details>
:::

## Where are we going?
## Where are you going?

In this unit, you will **create a new project** that is **stored online in GitHub** and **connected to Netlify**.

Expand All @@ -66,6 +66,6 @@ Every time you commit a change to GitHub, a notification will be sent to Netlify
## Checklist

<Checklist>
- [ ] Let's get set up for building an Astro project!
- [ ] I'm ready to get set up for building an Astro project!
</Checklist>
</Box>
4 changes: 2 additions & 2 deletions src/content/docs/en/tutorial/2-pages/1.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';


Now that you know that `.astro` files are responsible for pages on your website, let's create one!
Now that you know that `.astro` files are responsible for pages on your website, you'll create one!

<PreCheck>
- Create two new pages on your website: About and Blog
Expand Down Expand Up @@ -99,7 +99,7 @@ Add a third page `blog.astro` to your site, following the [same steps as above](
</details>
</Box>

You should now have a website with three pages that all link to each other. Let's add some content to the Blog page.
You should now have a website with three pages that all link to each other. It's time to add some content to the Blog page.

Update the page content at `blog.astro` with:
```astro astro title="src/pages/blog.astro" ins={7-8} del={6}
Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/en/tutorial/2-pages/2.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';



Now that you have built pages using `.astro` files, let's make some blog posts using `.md` files!
Now that you have built pages using `.astro` files, you'll make some blog posts using `.md` files!

<PreCheck>
- Make a new folder and create a new post
Expand Down Expand Up @@ -75,7 +75,7 @@ Now that you have built pages using `.astro` files, let's make some blog posts u
3. Use your browser's Dev Tools to inspect this page. Notice that although you have not typed any HTML elements, your Markdown has been converted to HTML. You can see elements such as headings, paragraphs, and list items.

:::note
The information at the top of the file, inside the code fences, is called frontmatter. This data—including tags and a post image—is information *about* your post that Astro can use. It does not appear on the page automatically, but we will access it later in the tutorial to enhance your site.
The information at the top of the file, inside the code fences, is called frontmatter. This data—including tags and a post image—is information *about* your post that Astro can use. It does not appear on the page automatically, but you will access it later in the tutorial to enhance your site.
:::

## Link to your posts
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/tutorial/2-pages/3.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';



Now that you have a multi-page website with HTML content, let's add some dynamic HTML!
Now that you have a multi-page website with HTML content, it's time to add some dynamic HTML!

<PreCheck>
- Define your page title in frontmatter, and use it in your HTML
Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/en/tutorial/2-pages/4.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';


Now that you have an About page with content about you, let's style it!
Now that you have an About page with content about you, it's time to style it!

<PreCheck>
- Style items on a single page
Expand Down Expand Up @@ -57,7 +57,7 @@ Using Astro's own `<style></style>` tags, you can style items on your page. Addi
If you are unable to determine colors visually, you can use the dev tools in your browser to inspect the `<h1>` title elements and verify the text color applied.
:::

2. Add the class name `skill` to the generated `<li>` elements on your About page, so we can style them. Your code should now look like this:
2. Add the class name `skill` to the generated `<li>` elements on your About page, so you can style them. Your code should now look like this:

```astro title="src/pages/about.astro" 'class="skill"'
<p>My skills are:</p>
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/tutorial/2-pages/5.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';


Now that you have a styled About page, let's add some global styles for the rest of your site!
Now that you have a styled About page, it's time to add some global styles for the rest of your site!

<PreCheck>
- Apply styles globally
Expand Down
6 changes: 3 additions & 3 deletions src/content/docs/en/tutorial/2-pages/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,16 @@ import Badge from '~/components/Badge.astro';
import Box from '~/components/tutorial/Box.astro';


Now that you have a working site on the web, let's add pages and posts!
Now that you have a working site on the web, it's time to add pages and posts!

## Where are we now?
## Where are you now?

You can find the code at this point in the tutorial on [GitHub](https://github.com/withastro/blog-tutorial-demo/tree/unit-2/start) or
[StackBlitz](https://stackblitz.com/github/withastro/blog-tutorial-demo/tree/unit-2/start?file=src/pages/index.astro).

Check your code against this example, or if you've just joined us, fork on StackBlitz to start coding along in your browser from here.

## Where are we going?
## Where are you going?

In this unit, you'll
- Create your first Astro pages with the `.astro` syntax
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/tutorial/3-components/1.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';



Now that you have the same HTML written in multiple pages of your Astro site, let's replace that duplicated content with a reusable Astro component!
Now that you have the same HTML written in multiple pages of your Astro site, it's time to replace that duplicated content with a reusable Astro component!

<PreCheck>
- Create a new folder for components
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/tutorial/3-components/2.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
- Create and pass props to a Social Media component
</PreCheck>

Now that you have used Astro components on a page, let's use a component within another component!
Now that you have used Astro components on a page, it's time to use a component within another component!

## Create a Footer Component

Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/tutorial/3-components/3.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';


Since your site will be viewed on different devices, let's create a page navigation that can respond to multiple screen sizes!
Since your site will be viewed on different devices, it's time to create a page navigation that can respond to multiple screen sizes!

<PreCheck>
- Create a Header for your site that contains the Navigation component
Expand Down
6 changes: 3 additions & 3 deletions src/content/docs/en/tutorial/3-components/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,16 @@ import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';


Now that you have `.astro` and `.md` files generating entire pages on your website, let's make and reuse smaller bits of HTML with Astro components!
Now that you have `.astro` and `.md` files generating entire pages on your website, it's time to make and reuse smaller bits of HTML with Astro components!

## Where are we now?
## Where are you now?

You can find the code at this point in the tutorial on [GitHub](https://github.com/withastro/blog-tutorial-demo/tree/unit-3/start) or
[StackBlitz](https://stackblitz.com/github/withastro/blog-tutorial-demo/tree/unit-3/start?file=src/pages/index.astro).

Check your code against this example, or if you've just joined us, fork on StackBlitz to start coding along in your browser from here.

## Where are we going?
## Where are you going?

In this unit, you'll learn how to create **Astro components** to reuse code for common elements across your website.

Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/tutorial/4-layouts/1.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';
- Pass page-specific values as props to its layout
</PreCheck>

You still have some Astro components repeatedly rendered on every page. Let's refactor again to create a shared page layout!
You still have some Astro components repeatedly rendered on every page. It's time to refactor again to create a shared page layout!

## Create your first layout component

Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/tutorial/4-layouts/2.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';



Now that you have a layout for your pages, let's add a layout for blog posts!
Now that you have a layout for your pages, it's time to add a layout for blog posts!

<PreCheck>
- Create a new blog post layout for your Markdown files
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/tutorial/4-layouts/3.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';



Now that you have added a layout to each blog post, let's make your posts look like the rest of the pages on your website!
Now that you have added a layout to each blog post, it's time to make your posts look like the rest of the pages on your website!

<PreCheck>
- Nest your blog post layout inside your main page layout
Expand Down
6 changes: 3 additions & 3 deletions src/content/docs/en/tutorial/4-layouts/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,16 @@ import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';


Now that you can build with components, let's create some custom layouts!
Now that you can build with components, it's time to create some custom layouts!

## Where are we now?
## Where are you now?

You can find the code at this point in the tutorial on [GitHub](https://github.com/withastro/blog-tutorial-demo/tree/unit-4/start) or
[StackBlitz](https://stackblitz.com/github/withastro/blog-tutorial-demo/tree/unit-4/start?file=src/pages/index.astro).

Check your code against this example, or if you've just joined us, fork on StackBlitz to start coding along in your browser from here.

## Where are we going?
## Where are you going?

In this unit, you'll build layouts to share common elements and styles across your pages and blog posts.

Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/tutorial/5-astro-api/1.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';



Now that you have a few blog posts to link to, let's configure the Blog page to create a list of them automatically!
Now that you have a few blog posts to link to, it's time to configure the Blog page to create a list of them automatically!

<PreCheck>
- Access data from all your posts at once using `Astro.glob()`
Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/en/tutorial/5-astro-api/3.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro';



Now that you have individual pages for every tag, let's make links to them.
Now that you have individual pages for every tag, it's time to make links to them.

<PreCheck>
- Add a new page using the `/pages/folder/index.astro` routing pattern
Expand Down Expand Up @@ -121,7 +121,7 @@ Fortunately, you already know a way to grab the data from all your Markdown file
```
</details>

2. Next, add the following line of JavaScript to your page component. This is the same one we used in `src/pages/tags/[tag].astro` to return a list of unique tags.
2. Next, add the following line of JavaScript to your page component. This is the same one you used in `src/pages/tags/[tag].astro` to return a list of unique tags.

```astro title = "src/pages/tags/index.astro" ins={4}
---
Expand Down
6 changes: 3 additions & 3 deletions src/content/docs/en/tutorial/5-astro-api/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,16 @@ import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';


Now that you have some blog posts, let's use Astro's API to work with your files!
Now that you have some blog posts, it's time to use Astro's API to work with your files!

## Where are we now?
## Where are you now?

You can find the code at this point in the tutorial on [GitHub](https://github.com/withastro/blog-tutorial-demo/tree/unit-5/start) or
[StackBlitz](https://stackblitz.com/github/withastro/blog-tutorial-demo/tree/unit-5/start?file=src/pages/index.astro).

Check your code against this example, or if you've just joined us, fork on StackBlitz to start coding along in your browser from here.

## Where are we going?
## Where are you going?

In this unit, you'll supercharge your blog with an index page, tag pages, and an RSS feed.

Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/tutorial/6-islands/1.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ This component will take an array of greeting messages as a prop and randomly se
</BaseLayout>
```

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.
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. This is called a **hydrated** component.

6. Once the difference is clear, remove the non-hydrated Greeting component.

Expand Down
6 changes: 3 additions & 3 deletions src/content/docs/en/tutorial/6-islands/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,16 @@ import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';


Now that you have a fully functioning blog, let's add some interactive islands to your site!
Now that you have a fully functioning blog, it's time to add some interactive islands to your site!

## Where are we now?
## Where are you now?

You can find the code at this point in the tutorial on [GitHub](https://github.com/withastro/blog-tutorial-demo/tree/unit-6/start) or
[StackBlitz](https://stackblitz.com/github/withastro/blog-tutorial-demo/tree/unit-6/start?file=src/pages/index.astro).

Check your code against this example, or if you've just joined us, fork on StackBlitz to start coding along in your browser from here.

## Where are we going?
## Where are you going?

In this unit, you'll use **Astro islands** to bring frontend framework components into your Astro site.

Expand Down