From f51952706b3c16b8924a6cb837d77da48b7e59be Mon Sep 17 00:00:00 2001 From: liruifengv Date: Tue, 26 Mar 2024 02:42:27 +0800 Subject: [PATCH] Use awesome `Steps` component in tutorial (#7496) Co-authored-by: casungo Co-authored-by: Sarah Rainsberger Co-authored-by: Luiz Ferraz Co-authored-by: Shinya Fujino Co-authored-by: voxel!() Co-authored-by: Ming-jun Lu <40516784+mingjunlu@users.noreply.github.com> Co-authored-by: Atharva <2021peb5208@mnit.ac.in> --- src/content/docs/en/tutorial/1-setup/1.mdx | 7 +- src/content/docs/en/tutorial/1-setup/2.mdx | 22 ++-- src/content/docs/en/tutorial/1-setup/3.mdx | 5 +- src/content/docs/en/tutorial/1-setup/4.mdx | 10 +- src/content/docs/en/tutorial/1-setup/5.mdx | 5 +- .../docs/en/tutorial/1-setup/index.mdx | 8 +- src/content/docs/en/tutorial/2-pages/1.mdx | 8 +- src/content/docs/en/tutorial/2-pages/2.mdx | 12 +- src/content/docs/en/tutorial/2-pages/3.mdx | 19 ++- src/content/docs/en/tutorial/2-pages/4.mdx | 9 +- src/content/docs/en/tutorial/2-pages/5.mdx | 4 +- .../docs/en/tutorial/3-components/1.mdx | 6 +- .../docs/en/tutorial/3-components/2.mdx | 13 +- .../docs/en/tutorial/3-components/3.mdx | 8 +- .../docs/en/tutorial/3-components/4.mdx | 9 +- src/content/docs/en/tutorial/4-layouts/1.mdx | 15 ++- src/content/docs/en/tutorial/4-layouts/2.mdx | 5 +- src/content/docs/en/tutorial/4-layouts/3.mdx | 7 +- .../docs/en/tutorial/5-astro-api/1.mdx | 7 +- .../docs/en/tutorial/5-astro-api/2.mdx | 111 ++++++++++-------- .../docs/en/tutorial/5-astro-api/3.mdx | 97 ++++++++------- .../docs/en/tutorial/5-astro-api/4.mdx | 9 +- src/content/docs/en/tutorial/6-islands/1.mdx | 8 +- src/content/docs/en/tutorial/6-islands/2.mdx | 12 +- 24 files changed, 254 insertions(+), 162 deletions(-) diff --git a/src/content/docs/en/tutorial/1-setup/1.mdx b/src/content/docs/en/tutorial/1-setup/1.mdx index daccc77628abb..7c41528a04865 100644 --- a/src/content/docs/en/tutorial/1-setup/1.mdx +++ b/src/content/docs/en/tutorial/1-setup/1.mdx @@ -12,8 +12,7 @@ import Box from '~/components/tutorial/Box.astro'; import MultipleChoice from '~/components/tutorial/MultipleChoice.astro'; import Option from '~/components/tutorial/Option.astro'; import PreCheck from '~/components/tutorial/PreCheck.astro'; - - +import { Steps } from '@astrojs/starlight/components'; - Install any tools that you will use to build your Astro website @@ -52,9 +51,9 @@ Additionally, you will need to download and install a **code editor** to write y This tutorial will use **VS Code**, but you can use any editor for your operating system. ::: + 1. [Download and install VS Code](https://code.visualstudio.com/#alt-downloads) or another code editor of your choice. - - + diff --git a/src/content/docs/en/tutorial/1-setup/2.mdx b/src/content/docs/en/tutorial/1-setup/2.mdx index 452911e4cc456..66ab90e5023f4 100644 --- a/src/content/docs/en/tutorial/1-setup/2.mdx +++ b/src/content/docs/en/tutorial/1-setup/2.mdx @@ -12,8 +12,7 @@ import Box from '~/components/tutorial/Box.astro'; import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import PreCheck from '~/components/tutorial/PreCheck.astro'; - - +import { Steps } from '@astrojs/starlight/components'; - Run the `create astro` setup wizard to create a new Astro project @@ -25,6 +24,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; The preferred way to create a new Astro site is through our `create astro` setup wizard. + 1. In the command line of your terminal, run the following command using your preferred package manager: @@ -63,16 +63,18 @@ The preferred way to create a new Astro site is through our `create astro` setup 6. When the prompt asks, "Would you like to install dependencies?" type `y`. 7. When the prompt asks, "Would you like to initialize a new git repository?" type `y`. + When the install wizard is complete, you no longer need this terminal. You can now open VS Code to continue. ## Open your project in VS Code -1. Open VS Code. You will be prompted to open a folder. Choose the folder that you created during the setup wizard. + +8. Open VS Code. You will be prompted to open a folder. Choose the folder that you created during the setup wizard. -2. If this is your first time opening an Astro project, you should see a notification asking if you would like to install recommended extensions. Click to see the recommended extensions, and choose the [Astro language support extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). This will provide syntax highlighting and autocompletions for your Astro code. +9. If this is your first time opening an Astro project, you should see a notification asking if you would like to install recommended extensions. Click to see the recommended extensions, and choose the [Astro language support extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). This will provide syntax highlighting and autocompletions for your Astro code. -3. Make sure the terminal is visible and that you can see the command prompt, such as: +10. Make sure the terminal is visible and that you can see the command prompt, such as: ```sh user@machine:~/tutorial$ @@ -81,6 +83,7 @@ When the install wizard is complete, you no longer need this terminal. You can n :::tip[Keyboard shortcut] To toggle the visibility of the terminal, use Ctrl + J (macOS: Cmd ⌘ + J). ::: + You can now use the terminal built right into this window, instead of your computer's Terminal app, for the rest of this tutorial. @@ -92,7 +95,8 @@ In order to preview your project files _as a website_ while you work, you will n ### Start the dev server -1. Run the command to start the Astro dev server by typing into VS Code's terminal: + +11. Run the command to start the Astro dev server by typing into VS Code's terminal: @@ -113,12 +117,14 @@ In order to preview your project files _as a website_ while you work, you will n Now you should see confirmation in the terminal that Astro is running in dev mode. 🚀 + ## View a preview of your website Your project files contain all the code necessary to display an Astro website, but the browser is responsible for displaying your code as web pages. -1. Click on the `localhost` link in your terminal window to see a live preview of your new Astro website! + +12. Click on the `localhost` link in your terminal window to see a live preview of your new Astro website! (Astro uses `http://localhost:4321` by default if port `4321` is available.) @@ -126,6 +132,8 @@ Your project files contain all the code necessary to display an Astro website, b ![A blank white page with the word Astro at the top.](/tutorial/minimal.png) + + :::tip[Using the Astro dev server] While the Astro server is running in dev mode, you will NOT be able to run commands in your terminal window. Instead, this pane will give you feedback as you preview your site. diff --git a/src/content/docs/en/tutorial/1-setup/3.mdx b/src/content/docs/en/tutorial/1-setup/3.mdx index 7241b2ff8f593..4d8e0f82cb5b6 100644 --- a/src/content/docs/en/tutorial/1-setup/3.mdx +++ b/src/content/docs/en/tutorial/1-setup/3.mdx @@ -12,8 +12,7 @@ import Box from '~/components/tutorial/Box.astro'; import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import PreCheck from '~/components/tutorial/PreCheck.astro'; - - +import { Steps } from '@astrojs/starlight/components'; - Make your first edit to your new website @@ -21,6 +20,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ## Edit your home page + 1. In your code editor, navigate in the Explorer file pane to `src/pages/index.astro` and click on it to open the file's contents in an editable tab. The contents of your `index.astro` file should look like this: @@ -55,6 +55,7 @@ import PreCheck from '~/components/tutorial/PreCheck.astro'; ``` 3. Check the browser preview and you should see your page content updated to the new text. + Congratulations! You are now an Astro developer! diff --git a/src/content/docs/en/tutorial/1-setup/4.mdx b/src/content/docs/en/tutorial/1-setup/4.mdx index c00930125918d..33b6bc4fdf823 100644 --- a/src/content/docs/en/tutorial/1-setup/4.mdx +++ b/src/content/docs/en/tutorial/1-setup/4.mdx @@ -10,8 +10,7 @@ import Badge from '~/components/Badge.astro'; import Checklist from '~/components/Checklist.astro'; import Box from '~/components/tutorial/Box.astro'; import PreCheck from '~/components/tutorial/PreCheck.astro'; - - +import { Steps } from '@astrojs/starlight/components'; - Put your project repository online @@ -27,6 +26,7 @@ If you are already familiar with git and have your own workflow, then create a n Although there are a few ways to get your local code stored in GitHub, this tutorial will guide you through a method that does not require using git in the command line. + 1. Log in to GitHub.com in a browser and click the + in the upper right of the screen to make a new repository. 2. Choose a name for your repository. This does not have to be the same name as your project folder. @@ -34,13 +34,13 @@ Although there are a few ways to get your local code stored in GitHub, this tuto 3. You will be presented with options, but you do not need to change any of the defaults. Scroll down and click the button to Create Repository. 4. You will be presented with various setup next steps, but you won't need to use any of them. Make a note of the URL of your repository. You can now exit this page without doing anything. - + ## Commit your local code to GitHub In the last section, you made a change to your page's content. This means that your project files have changed, and VS Code should show a number on top of the "Source" menu icon. This source tab is where you will regularly go to update your files on GitHub. - + 1. Click the Source Control tab in your VS Code to see a list of files that have changed. If you see a message that you need to install `git`, follow the instructions provided, then reload VS Code. 2. Click the ••• "3 dots" menu above the commit message and choose Remote > Add Remote. @@ -54,7 +54,7 @@ In the last section, you made a change to your page's content. This means that y 6. You may see a message telling you that you have no "staged" commits, and asking you if you want to stage them. Click Always and continue. 7. Lastly, the list of changed files should be replaced with a Publish button. Click this to send your committed changes to GitHub. - + ### See your project on GitHub diff --git a/src/content/docs/en/tutorial/1-setup/5.mdx b/src/content/docs/en/tutorial/1-setup/5.mdx index 954f9a5290558..7483f6b37e1f5 100644 --- a/src/content/docs/en/tutorial/1-setup/5.mdx +++ b/src/content/docs/en/tutorial/1-setup/5.mdx @@ -12,8 +12,7 @@ import Box from '~/components/tutorial/Box.astro'; import MultipleChoice from '~/components/tutorial/MultipleChoice.astro'; import Option from '~/components/tutorial/Option.astro'; import PreCheck from '~/components/tutorial/PreCheck.astro'; - - +import { Steps } from '@astrojs/starlight/components'; - Add your GitHub repository as a new Netlify app @@ -28,6 +27,7 @@ This tutorial will use **Netlify**, but you are welcome to use your preferred ho ## Create a new Netlify site + 1. Create a free account at [Netlify](https://netlify.com) if you do not already have one. Make a note of your username. You will view your dashboard and any sites you create at `https://app.netlify.com/teams/username` @@ -37,6 +37,7 @@ This tutorial will use **Netlify**, but you are welcome to use your preferred ho You will be asked to connect to a Git provider. Choose GitHub and follow the steps onscreen to authenticate your GitHub account. Then, choose your Astro project's GitHub repository from the list provided. 3. At the final step, Netlify will show you your app's site settings. The defaults should be correct for your Astro project, so you can scroll down and click Deploy site. + Congratulations, you have an Astro website! diff --git a/src/content/docs/en/tutorial/1-setup/index.mdx b/src/content/docs/en/tutorial/1-setup/index.mdx index df45a186ed77d..776812a680b33 100644 --- a/src/content/docs/en/tutorial/1-setup/index.mdx +++ b/src/content/docs/en/tutorial/1-setup/index.mdx @@ -12,8 +12,7 @@ i18nReady: true import Badge from '~/components/Badge.astro'; import Checklist from '~/components/Checklist.astro'; import Box from '~/components/tutorial/Box.astro'; - - +import { Steps } from '@astrojs/starlight/components'; Now that you know what you're going to build, it's time to set up all the tools you'll need! @@ -26,6 +25,8 @@ Want to complete this tutorial in an online code editor instead? Follow these instructions, then go directly to Unit 2! **Set up StackBlitz** + + 1. Visit [astro.new](https://astro.new) and click the button to open the "Empty Project" template in StackBlitz. 2. Click "Sign in" on the top right to log in using your GitHub credentials. @@ -33,6 +34,7 @@ Want to complete this tutorial in an online code editor instead? 3. In the upper left of the StackBlitz editor window, click to "fork" the template (save to your own account dashboard). 4. Wait for the project to load, and you will see a live preview of the "Empty Project" starter. + **Make a Change** @@ -40,9 +42,11 @@ In the file pane, you should see `src/pages/index.astro`. Click to open it, and **Create a GitHub Repository** + 1. Press the Connect Repository button at the top of your list of files, enter a new name for your repository, and click Create repo & push. 2. When you have changes to be committed back to GitHub, a "Commit" button will appear at the top left of your workspace. Clicking on this will allow you to enter a commit message, and update your repository. + **Deploy your Site** diff --git a/src/content/docs/en/tutorial/2-pages/1.mdx b/src/content/docs/en/tutorial/2-pages/1.mdx index f7ecf65c3e629..b7e1d973ce9f7 100644 --- a/src/content/docs/en/tutorial/2-pages/1.mdx +++ b/src/content/docs/en/tutorial/2-pages/1.mdx @@ -10,7 +10,7 @@ import Checklist from '~/components/Checklist.astro'; import Blanks from '~/components/tutorial/Blanks.astro'; import Box from '~/components/tutorial/Box.astro'; import PreCheck from '~/components/tutorial/PreCheck.astro'; - +import { Steps } from '@astrojs/starlight/components'; Now that you know that `.astro` files are responsible for pages on your website, it's time to create one! @@ -22,6 +22,7 @@ Now that you know that `.astro` files are responsible for pages on your website, ## Create a new `.astro` file + 1. In the files pane of your code editor, navigate to the folder `src/pages/` where you will see the existing file `index.astro` 2. In that same folder, create a new file named `about.astro`. @@ -33,6 +34,7 @@ Now that you know that `.astro` files are responsible for pages on your website, ::: 4. Add `/about` to the end of your website preview's URL in the address bar and check that you can see a page load there. (e.g. `http://localhost:4321/about`) + Right now, your "About" page should look exactly the same as the first page, but we're going to change that! @@ -83,9 +85,11 @@ Add a third page `blog.astro` to your site, following the [same steps as above](
Show me the steps. + 1. Create a new file at `src/pages/blog.astro`. 2. Copy the entire contents of `index.astro` and paste them into `blog.astro`. 3. [Add a third navigation link](#add-navigation-links) to the top of every page: + ```astro title="src/pages/index.astro" ins={4} @@ -124,6 +128,7 @@ If you've followed our setup in Unit 1, you can publish your changes to your liv When you are happy with the way your preview looks, **commit** your changes to your online repository at GitHub. + 1. In VS Code, preview the files that have changed since your last commit to GitHub. - Go to the **Source Control tab** in the left menu. It should have a small "3" displayed. @@ -135,6 +140,7 @@ When you are happy with the way your preview looks, **commit** your changes to y 3. Click the button to Sync Changes to GitHub. 4. After waiting a few minutes, visit your Netlify URL to verify that your changes are published live. + :::tip[Commit and deploy regularly] Follow these steps every time you pause working! Your changes will be updated in your GitHub repository. If you've deployed to a Netlify website, it will be rebuilt and republished. diff --git a/src/content/docs/en/tutorial/2-pages/2.mdx b/src/content/docs/en/tutorial/2-pages/2.mdx index afb64421a058a..d42dc2c4295c6 100644 --- a/src/content/docs/en/tutorial/2-pages/2.mdx +++ b/src/content/docs/en/tutorial/2-pages/2.mdx @@ -13,8 +13,7 @@ import Box from '~/components/tutorial/Box.astro'; import MultipleChoice from '~/components/tutorial/MultipleChoice.astro'; import Option from '~/components/tutorial/Option.astro' import PreCheck from '~/components/tutorial/PreCheck.astro'; - - +import { Steps } from '@astrojs/starlight/components'; Now that you have built pages using `.astro` files, it's time to make some blog posts using `.md` files! @@ -26,6 +25,7 @@ Now that you have built pages using `.astro` files, it's time to make some blog ## Create your first `.md` file + 1. Create a new directory at `src/pages/posts/`. 2. Add a new (empty) file `post-1.md` inside your new `/posts/` folder. @@ -35,9 +35,11 @@ Now that you have built pages using `.astro` files, it's time to make some blog 4. Change the browser preview URL to view `/posts/post-2` instead. (This is a page you have not yet created.) Note the different output when previewing an "empty" page, and one that doesn't exist. This will help you troubleshoot in the future. + ## Write Markdown content + 1. Copy or type the following code into `post-1.md` ```markdown title="src/pages/posts/post-1.md" @@ -73,6 +75,7 @@ Now that you have built pages using `.astro` files, it's time to make some blog 2. Check your browser preview again at `http://localhost:4321/posts/post-1`. You should now see content on this page. It may not yet be properly formatted, but don't worry, you will update this later in the tutorial! 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 you will access it later in the tutorial to enhance your site. @@ -80,6 +83,7 @@ The information at the top of the file, inside the code fences, is called frontm ## Link to your posts + 1. Link to your first post with an anchor tag in `src/pages/blog.astro`: ```astro title="src/pages/blog.astro" ins={16-18} --- @@ -163,8 +167,8 @@ The information at the top of the file, inside the code fences, is called frontm 4. Check your browser preview and make sure that: - - All your links for Post 1, Post 2, and Post 3 lead to a working page on your site. (If you find a mistake, check your links on `blog.astro` or your Markdown file names.) - + All your links for Post 1, Post 2, and Post 3 lead to a working page on your site. (If you find a mistake, check your links on `blog.astro` or your Markdown file names.) + diff --git a/src/content/docs/en/tutorial/2-pages/3.mdx b/src/content/docs/en/tutorial/2-pages/3.mdx index 074933feb9c43..5d77ab02a3e9f 100644 --- a/src/content/docs/en/tutorial/2-pages/3.mdx +++ b/src/content/docs/en/tutorial/2-pages/3.mdx @@ -13,8 +13,7 @@ import Box from '~/components/tutorial/Box.astro'; import MultipleChoice from '~/components/tutorial/MultipleChoice.astro'; import Option from '~/components/tutorial/Option.astro'; import PreCheck from '~/components/tutorial/PreCheck.astro'; - - +import { Steps } from '@astrojs/starlight/components'; Now that you have a multi-page website with HTML content, it's time to add some dynamic HTML! @@ -53,6 +52,7 @@ Open `about.astro`, which should look like this: ``` + 1. Add the following line of JavaScript in the frontmatter script, between the **code fences**: ```astro title="src/pages/about.astro" ins={2} @@ -93,14 +93,16 @@ Open `about.astro`, which should look like this: Instead of typing text directly into HTML tags, you just **defined and then used a variable** in the two sections of your `.astro` file, respectively. 4. Use the same pattern to create a `pageTitle` value to use in `index.astro` ("Home Page") and `blog.astro` ("My Astro Learning Blog"). Update the HTML of these pages in both places so that your page title matches the heading displayed on each page. + -:::note[Takeaway] -- **Define** variables in your Astro script using JavaScript or TypeScript expressions. -- **Use** these variables in your Astro template inside curly braces `{ }` to tell Astro you're using some JavaScript. +:::note[Takeaways] +1. **Define** variables in your Astro script using JavaScript or TypeScript expressions. +2. **Use** these variables in your Astro template inside curly braces `{ }` to tell Astro you're using some JavaScript. ::: ## Write JavaScript expressions in Astro + 1. Add the following JavaScript to your frontmatter, between the **code fences**: (You can customize the code for yourself, but this tutorial will use the following example.) @@ -136,6 +138,8 @@ Open `about.astro`, which should look like this: {skills.map((skill) =>
  • {skill}
    • )} ``` +     + :::note[Takeaways] 1. Writing an Astro template is very much like **writing HTML**, but you can include JavaScript expressions within it. 2. The Astro frontmatter script contains only JavaScript. @@ -180,6 +184,7 @@ Open `about.astro`, which should look like this: You can also use your script variables to choose **whether or not** to render individual elements of your HTML `` content. + 1. Add the following lines to your frontmatter script to **define variables**: ```astro title="src/pages/about.astro" ins={13-15} @@ -214,6 +219,7 @@ You can also use your script variables to choose **whether or not** to render in ``` 3. Commit your changes to GitHub before moving on. Do this any time you want to save your work and update your live website. + :::tip Astro's templating syntax is similar to JSX syntax. If you're ever wondering how to use your script in your HTML, then searching for how it is done in JSX is probably a good starting point! @@ -264,9 +270,10 @@ For each Astro template expression, can you predict the HTML (if any!) that will

    -## Checklist +## Checklist + - [ ] I can define values in and use values in `.astro` files. - [ ] I can conditionally render HTML elements. diff --git a/src/content/docs/en/tutorial/2-pages/4.mdx b/src/content/docs/en/tutorial/2-pages/4.mdx index ea511b9c10f32..6c3f083e9f32f 100644 --- a/src/content/docs/en/tutorial/2-pages/4.mdx +++ b/src/content/docs/en/tutorial/2-pages/4.mdx @@ -11,7 +11,7 @@ import Checklist from '~/components/Checklist.astro'; import Spoiler from '~/components/Spoiler.astro'; import Box from '~/components/tutorial/Box.astro'; import PreCheck from '~/components/tutorial/PreCheck.astro'; - +import { Steps } from '@astrojs/starlight/components'; Now that you have an About page with content about you, it's time to style it! @@ -25,6 +25,7 @@ Now that you have an About page with content about you, it's time to style it! Using Astro's own `` tags, you can style items on your page. Adding **attributes** and **directives** to these tags gives you even more ways to style. + 1. Copy the following code and paste it into `src/pages/about.astro`: ```astro title="src/pages/about.astro" ins={6-11} @@ -84,10 +85,12 @@ Using Astro's own `` tags, you can style items on your page. Addi 4. Visit your About page in your browser again, and verify, through visual inspection or dev tools, that each item in your list of skills is now green and bold. + ## Use your first CSS variable The Astro `` from `src/pages/tags/index.astro` and reuse it inside `MarkdownPostLayout.astro`: - ```astro title="src/layouts/MarkdownPostLayout.astro" ins={13-17, 21-40} - --- - import BaseLayout from './BaseLayout.astro'; - const { frontmatter } = Astro.props; - --- - -

    {frontmatter.description}

    -

    {frontmatter.pubDate.toString().slice(0,10)}

    + ```astro title="src/layouts/MarkdownPostLayout.astro" ins={13-17, 21-40} + --- + import BaseLayout from './BaseLayout.astro'; + const { frontmatter } = Astro.props; + --- + +

    {frontmatter.description}

    +

    {frontmatter.pubDate.toString().slice(0,10)}

    -

    Written by: {frontmatter.author}

    +

    Written by: {frontmatter.author}

    - {frontmatter.image.alt} + {frontmatter.image.alt} -
    - {tags.map((tag) => ( -

    {tag}

    - ))} -
    +
    + {tags.map((tag) => ( +

    {tag}

    + ))} +
    - -     - -``` + +     + + ``` + + Before this code will work, you need to make **one small edit** to the code you pasted into `MarkdownPostLayout.astro`. Can you figure out what it is? @@ -331,7 +341,6 @@ In order to use props (values passed) from a `.md` blog post in your layout, lik ```
    -     ### Code Check-in: MarkdownPostLayout diff --git a/src/content/docs/en/tutorial/5-astro-api/4.mdx b/src/content/docs/en/tutorial/5-astro-api/4.mdx index 487efa83b72f3..d0f9b313c337b 100644 --- a/src/content/docs/en/tutorial/5-astro-api/4.mdx +++ b/src/content/docs/en/tutorial/5-astro-api/4.mdx @@ -12,8 +12,7 @@ import Box from '~/components/tutorial/Box.astro'; import Checklist from '~/components/Checklist.astro'; import PreCheck from '~/components/tutorial/PreCheck.astro'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; - - +import { Steps } from '@astrojs/starlight/components'; - Install an Astro package for creating an RSS feed for your website @@ -28,6 +27,7 @@ This official package generates a non-HTML document with information about all o Individuals can subscribe to your feed in a feed reader, and receive a notification when you publish a new blog post on your site, making it a popular blog feature. + 1. Quit the Astro development server and run the following command in the terminal to install Astro's RSS package. @@ -67,9 +67,11 @@ Individuals can subscribe to your feed in a feed reader, and receive a notificat ``` + ## Create an `.xml` feed document + 1. Create a new file in `src/pages/` called `rss.xml.js` 2. Copy the following code into this new document. Customize the `title` and `description` properties, and if necessary, specify a different language in `customData`: @@ -132,8 +134,7 @@ Individuals can subscribe to your feed in a feed reader, and receive a notificat ::: 6. Be sure to quit the preview and restart the dev server when you want to view your site in development mode again. - - + diff --git a/src/content/docs/en/tutorial/6-islands/1.mdx b/src/content/docs/en/tutorial/6-islands/1.mdx index 77f519fcfa5d1..828ac15d48249 100644 --- a/src/content/docs/en/tutorial/6-islands/1.mdx +++ b/src/content/docs/en/tutorial/6-islands/1.mdx @@ -13,7 +13,7 @@ import MultipleChoice from '~/components/tutorial/MultipleChoice.astro'; import Option from '~/components/tutorial/Option.astro'; import PreCheck from '~/components/tutorial/PreCheck.astro'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; - +import { Steps } from '@astrojs/starlight/components'; Use a Preact component to greet your visitors with a randomly-selected welcome message! @@ -25,6 +25,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; ## Add Preact to your Astro project + 1. If it’s running, quit the dev server to have access to the terminal (keyboard shortcut: Ctrl + C). 2. Add the ability to use Preact components in your Astro project with a single command: @@ -47,13 +48,15 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; -2. Follow the command line instructions to confirm adding Preact to your project. +3. Follow the command line instructions to confirm adding Preact to your project. + ## Include a Preact greeting banner This component will take an array of greeting messages as a prop and randomly select one of them to show as a welcome message. The user can click a button to get a new random message. + 1. Create a new file in `src/components/` named `Greeting.jsx` Note the `.jsx` file extension. This file will be written in Preact, not Astro. @@ -129,6 +132,7 @@ This component will take an array of greeting messages as a prop and randomly se ``` + diff --git a/src/content/docs/en/tutorial/6-islands/2.mdx b/src/content/docs/en/tutorial/6-islands/2.mdx index fc8e60634044d..0cbc77a92966b 100644 --- a/src/content/docs/en/tutorial/6-islands/2.mdx +++ b/src/content/docs/en/tutorial/6-islands/2.mdx @@ -11,8 +11,7 @@ import Checklist from '~/components/Checklist.astro'; import MultipleChoice from '~/components/tutorial/MultipleChoice.astro'; import Option from '~/components/tutorial/Option.astro'; import PreCheck from '~/components/tutorial/PreCheck.astro'; - - +import { Steps } from '@astrojs/starlight/components'; Now that you can build Astro islands for interactive elements, don't forget that you can go pretty far with just vanilla JavaScript and CSS! @@ -25,6 +24,7 @@ Let's build a clickable icon to let your users toggle between light or dark mode ## Add and style a theme toggle icon + 1. Create a new file at `src/components/ThemeIcon.astro` and paste the following code into it: ```astro title="src/components/ThemeIcon.astro" @@ -68,11 +68,13 @@ Let's build a clickable icon to let your users toggle between light or dark mode ``` 3. Visit your browser preview at `http://localhost:4321` to see the icon now on all your pages. You can try clicking it, but you have not written a script to make it interactive yet. + ## Add CSS styling for a dark theme Choose some alternate colors to use in dark mode. + 1. In `global.css`, define some dark styles. You can choose your own, or copy and paste: ```css title="src/styles/global.css" @@ -85,11 +87,12 @@ Choose some alternate colors to use in dark mode. color: #fff; } ``` + ## Add client-side interactivity To add interactivity to an Astro component, you can use a `