From 174040785453850a1c87a2f90f151963185acd6b Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:30:32 -0300 Subject: [PATCH 01/66] Add Steps component to `add-yaml-support.mdx` (#8126) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- src/content/docs/en/recipes/add-yaml-support.mdx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/content/docs/en/recipes/add-yaml-support.mdx b/src/content/docs/en/recipes/add-yaml-support.mdx index d18ea5fae1534..14be1864bf2c0 100644 --- a/src/content/docs/en/recipes/add-yaml-support.mdx +++ b/src/content/docs/en/recipes/add-yaml-support.mdx @@ -4,13 +4,14 @@ description: Learn how you can import YAML data by adding a Rollup plugin to you i18nReady: true type: recipe --- - -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import { Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; Astro builds on top of Vite, and supports both Vite and Rollup plugins. This recipe uses a Rollup plugin to add the ability to import a YAML (`.yml`) file in Astro. ## Recipe + 1. Install `@rollup/plugin-yaml`: @@ -44,7 +45,6 @@ Astro builds on top of Vite, and supports both Vite and Rollup plugins. This rec }); ``` - 3. Finally, you can import YAML data using an `import` statement: ```js @@ -62,3 +62,4 @@ Astro builds on top of Vite, and supports both Vite and Rollup plugins. This rec ``` This will allow your editor to provide type hints for your YAML data. ::: + From 4f769f8de4fff10c1013eb5ec6e82356e515c7a8 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:32:06 -0300 Subject: [PATCH 02/66] Add Steps component to `zeabur.mdx` (#8115) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/deploy/zeabur.mdx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/deploy/zeabur.mdx b/src/content/docs/en/guides/deploy/zeabur.mdx index 264818eae93c2..7df923509a8c9 100644 --- a/src/content/docs/en/guides/deploy/zeabur.mdx +++ b/src/content/docs/en/guides/deploy/zeabur.mdx @@ -4,6 +4,8 @@ description: How to deploy your Astro site to the web on Zeabur. type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; + [Zeabur](https://zeabur.com) offers hosting for full-stack web applications. Astro sites can be hosted as both SSR or static output. This guide includes instructions for deploying to Zeabur through the website UI. @@ -18,6 +20,7 @@ Astro outputs a static site by default. There is no need for any extra configura To enable SSR in your Astro project and deploy on Zeabur: + 1. Install [the `@zeabur/astro-adapter` adapter](https://www.npmjs.com/package/@zeabur/astro-adapter) to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal: ```bash @@ -35,12 +38,13 @@ To enable SSR in your Astro project and deploy on Zeabur: adapter: zeabur(), }); ``` - + ## How to deploy You can deploy your Astro site to Zeabur if the project is stored in GitHub. + 1. Click Create new project in the [Zeabur dashboard](https://dash.zeabur.com). 2. Configure GitHub installation and import the repository. @@ -48,6 +52,7 @@ You can deploy your Astro site to Zeabur if the project is stored in GitHub. 3. Zeabur will automatically detect that your project is an Astro project and will build it using the `astro build` command. 4. Once the build is complete, you can bind a domain to your site and visit it. + After your project has been imported and deployed, all subsequent pushes to branches will generate new builds. From 285035e0e13418f04730b59651aa545b1c1f0533 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:32:38 -0300 Subject: [PATCH 03/66] Add Steps component to `stormkit.mdx` (#8108) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/deploy/stormkit.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/deploy/stormkit.mdx b/src/content/docs/en/guides/deploy/stormkit.mdx index a4bb8bed7ebbd..d73095b307fb0 100644 --- a/src/content/docs/en/guides/deploy/stormkit.mdx +++ b/src/content/docs/en/guides/deploy/stormkit.mdx @@ -4,13 +4,14 @@ description: Deploy your Astro site to Stormkit type: deploy i18nReady: true --- - import ReadMore from '~/components/ReadMore.astro'; +import { Steps } from '@astrojs/starlight/components'; You can deploy your Astro project to [Stormkit](https://stormkit.io/), a deployment platform for static websites, single-page applications (SPAs), and serverless functions. ## How to deploy + 1. [Log in to Stormkit](https://app.stormkit.io/auth). 2. Using the user interface, import your Astro project from one of the three supported Git providers (GitHub, GitLab, or Bitbucket). @@ -20,5 +21,6 @@ You can deploy your Astro project to [Stormkit](https://stormkit.io/), a deploym 4. Verify the build command in your [Stormkit configuration](https://stormkit.io/docs/deployments/configuration). By default, Stormkit CI will run `npm run build` but you can specify a custom build command on this page. 5. Click the "Deploy Now" button to deploy your site. + Read more in the [Stormkit Documentation](https://stormkit.io/docs). From a46c79e3a1ef06d78fb243210de6097c3f913946 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:32:47 -0300 Subject: [PATCH 04/66] Add Steps component to `sst.mdx` (#8107) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/deploy/sst.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/content/docs/en/guides/deploy/sst.mdx b/src/content/docs/en/guides/deploy/sst.mdx index 38cdd59d9185b..f9e900866952b 100644 --- a/src/content/docs/en/guides/deploy/sst.mdx +++ b/src/content/docs/en/guides/deploy/sst.mdx @@ -4,6 +4,7 @@ description: How to deploy your Astro site to AWS with SST type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; You can deploy an Astro site using [SST](https://sst.dev), an open-source framework for deploying fully serverless applications to AWS with SSG and SSR support. @@ -11,6 +12,7 @@ You can also use any additional SST constructs like Cron Jobs, Buckets, Queues, ## Quickstart + 1. Create an astro project. 2. Run `npx create-sst`. @@ -18,10 +20,12 @@ You can also use any additional SST constructs like Cron Jobs, Buckets, Queues, 3. It should detect that you are using Astro and ask you to confirm. 4. Once you're ready for deployment you can run `npx sst deploy --stage=production`. + You can also watch [a video walkthrough of this process](https://www.youtube.com/watch?v=AFP3ZHxO7Gg) that will guide you through the steps. ### SST constructs + To use any [additional SST constructs](https://docs.sst.dev/), add them to `sst.config.ts`. ```ts {2} {4} title="sst.config.ts" From d4b080fd9f99dcd23ef5affec93830e1a6da315e Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:33:49 -0300 Subject: [PATCH 05/66] Add Steps component to `space.mdx` (#8099) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/deploy/space.mdx | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/content/docs/en/guides/deploy/space.mdx b/src/content/docs/en/guides/deploy/space.mdx index 91730663f2b3c..961283f469a84 100644 --- a/src/content/docs/en/guides/deploy/space.mdx +++ b/src/content/docs/en/guides/deploy/space.mdx @@ -5,7 +5,8 @@ type: deploy i18nReady: true --- import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro'; -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import { Steps } from '@astrojs/starlight/components'; [Deta Space](https://deta.space/developers) is a personal computer that lives in the cloud — a ‘personal cloud’. You can build and run apps for yourself in your own "Space". You can publish the apps you've built, and they'll run for people all around the world. @@ -32,16 +33,19 @@ space new The Space CLI will try to auto-detect the configuration for your app. Accept the suggested configuration and then follow the instructions below, depending on the type of Astro app you want to deploy. ::: - ## Project Configuration ### Static site Make the following changes to the `Spacefile` file at the root of your project generated by the Space CLI. - + + 1. Change the engine to `static`. + 2. Add Astro's build command to the list of `commands`. -3. Serve the `dist` directory generated by Astro. + +3. Serve the `dist` directory generated by Astro. + ```yaml title="Spacefile" {6,8,9} # Spacefile Docs: https://deta.space/docs/en/build/reference/spacefile @@ -57,13 +61,17 @@ micros: ### Server-side rendered site - Make the following changes to the `Spacefile` file at the root of your project generated by the Space CLI: + 1. Configure the `nodejs16` engine. + 2. Add the `build` command. -3. Include the `dist` directory generated by Astro. + +3. Include the `dist` directory generated by Astro. + 4. Run the node command. + ```yaml title="Spacefile" {6,8,10,11} # Spacefile Docs: https://deta.space/docs/en/build/reference/spacefile From 76e43a789bf19dc6dec50af2d7601164931426c8 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:34:12 -0300 Subject: [PATCH 06/66] Add Steps component to `build-forms.mdx` (#8124) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- src/content/docs/en/recipes/build-forms.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/docs/en/recipes/build-forms.mdx b/src/content/docs/en/recipes/build-forms.mdx index 408df1244bf39..e5f58523bc1c6 100644 --- a/src/content/docs/en/recipes/build-forms.mdx +++ b/src/content/docs/en/recipes/build-forms.mdx @@ -4,15 +4,16 @@ description: Learn how to build HTML forms and handle submissions in your frontm i18nReady: true type: recipe --- +import { Steps } from '@astrojs/starlight/components'; In SSR mode, Astro pages can both display and handle forms. In this recipe, you'll use a standard HTML form to submit data to the server. Your frontmatter script will handle the data on the server, sending no JavaScript to the client. - ## Prerequisites - A project with [SSR](/en/guides/server-side-rendering/) (`output: 'server'`) enabled ## Recipe + 1. Create or identify a `.astro` page which will contain your form and your handling code. For example, you could add a registration page: ```astro title="src/pages/register.astro" @@ -139,7 +140,7 @@ In SSR mode, Astro pages can both display and handle forms. In this recipe, you' ``` -5. Validate the form data on the server. This should include the same validation done on the client to prevent malicious submissions to your endpoint and to support the rare legacy browser that doesn't have form validation. +6. Validate the form data on the server. This should include the same validation done on the client to prevent malicious submissions to your endpoint and to support the rare legacy browser that doesn't have form validation. It can also include validation that can't be done on the client. For example, this example checks if the email is already in the database. @@ -201,5 +202,4 @@ In SSR mode, Astro pages can both display and handle forms. In this recipe, you' ``` - - + From 76a48579fa882d9cc5e10a65c7b68f9f0f6e255b Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:35:12 -0300 Subject: [PATCH 07/66] Add Steps component to `middleware.mdx` (#8065) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/middleware.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/content/docs/en/guides/middleware.mdx b/src/content/docs/en/guides/middleware.mdx index dbee71d647f1b..39900199e662f 100644 --- a/src/content/docs/en/guides/middleware.mdx +++ b/src/content/docs/en/guides/middleware.mdx @@ -4,6 +4,7 @@ description: Learn how to use middleware in Astro. i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import { Steps } from '@astrojs/starlight/components'; **Middleware** allows you to intercept requests and responses and inject behaviors dynamically every time a page or endpoint is about to be rendered. This rendering occurs at build time for all prerendered pages, but occurs when the route is requested for pages rendered on demand. @@ -11,6 +12,7 @@ Middleware also allows you to set and share request-specific information across ## Basic Usage + 1. Create `src/middleware.js|ts` (Alternatively, you can create `src/middleware/index.js|ts`.) 2. Inside this file, export an [`onRequest()`](/en/reference/api-reference/#onrequest) function that can be passed a [`context` object](#the-context-object) and `next()` function. This must not be a default export. @@ -35,6 +37,7 @@ Middleware also allows you to set and share request-specific information across

{data.title}

This {data.property} is from middleware.

``` + ### The `context` object From 8a39b1e7a9f1723a5f5a3354f8c14b1ba55edcae Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:35:41 -0300 Subject: [PATCH 08/66] Add Steps component to `deno.mdx` (#8091) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/deploy/deno.mdx | 28 ++++++++++++---------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/src/content/docs/en/guides/deploy/deno.mdx b/src/content/docs/en/guides/deploy/deno.mdx index 17403c48461cc..d34c2ddb42c0f 100644 --- a/src/content/docs/en/guides/deploy/deno.mdx +++ b/src/content/docs/en/guides/deploy/deno.mdx @@ -4,7 +4,8 @@ description: How to deploy your Astro site to the web using Deno. type: deploy i18nReady: true --- -import ReadMore from '~/components/ReadMore.astro' +import ReadMore from '~/components/ReadMore.astro'; +import { Steps } from '@astrojs/starlight/components'; You can deploy a server-side rendered Astro site to [Deno Deploy](https://deno.com/deploy), a distributed system that runs JavaScript, TypeScript, and WebAssembly at the edge, worldwide. @@ -32,13 +33,14 @@ npx astro add deno If you prefer to install the adapter manually instead, complete the following two steps: + 1. Install [the `@astrojs/deno` adapter][Deno adapter] to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal: ```bash npm install @astrojs/deno ``` -1. Update your `astro.config.mjs` project configuration file with the changes below. +2. Update your `astro.config.mjs` project configuration file with the changes below. ```js ins={3,6-7} // astro.config.mjs @@ -72,6 +74,7 @@ If you prefer to install the adapter manually instead, complete the following tw ```bash npm run preview ``` + ## How to deploy an SSR Astro site @@ -81,13 +84,14 @@ You can deploy to Deno Deploy through GitHub Actions or using Deno Deploy’s CL If your project is stored on GitHub, the [Deno Deploy website](https://dash.deno.com/) will guide you through setting up GitHub Actions to deploy your Astro site. + 1. Push your code to a public or private GitHub repository. -1. Sign in on [Deno Deploy](https://dash.deno.com/) with your GitHub account, and click on [New Project](https://dash.deno.com). +2. Sign in on [Deno Deploy](https://dash.deno.com/) with your GitHub account, and click on [New Project](https://dash.deno.com). -1. Select your repository, the branch you want to deploy from, and select **GitHub Action** mode. (Your Astro site requires a build step, and cannot use Automatic mode.) +3. Select your repository, the branch you want to deploy from, and select **GitHub Action** mode. (Your Astro site requires a build step, and cannot use Automatic mode.) -1. In your Astro project, create a new file at `.github/workflows/deploy.yml` and paste in the YAML below. This is similar to the YAML given by Deno Deploy, with the additional steps needed for your Astro site. +4. In your Astro project, create a new file at `.github/workflows/deploy.yml` and paste in the YAML below. This is similar to the YAML given by Deno Deploy, with the additional steps needed for your Astro site. ```yaml name: Deploy @@ -121,26 +125,27 @@ If your project is stored on GitHub, the [Deno Deploy website](https://dash.deno root: dist ``` -1. After committing this YAML file, and pushing to GitHub on your configured deploy branch, the deploy should begin automatically! +5. After committing this YAML file, and pushing to GitHub on your configured deploy branch, the deploy should begin automatically! You can track the progress using the "Actions" tab on your GitHub repository page, or on [Deno Deploy](https://dash.deno.com). - + ### CLI Deployment + 1. Install the [Deno Deploy CLI](https://docs.deno.com/deploy/manual/deployctl). ```bash deno install --allow-read --allow-write --allow-env --allow-net --allow-run --no-check -r -f https://deno.land/x/deploy/deployctl.ts ``` -1. Run your Astro build step. +2. Run your Astro build step. ```bash npm run build ``` -1. Run `deployctl` to deploy! +3. Run `deployctl` to deploy! In the command below, replace `` with your [Personal Access Token](https://dash.deno.com/account#access-tokens) and `` with your Deno Deploy project name. @@ -150,7 +155,7 @@ If your project is stored on GitHub, the [Deno Deploy website](https://dash.deno You can track all your deploys on [Deno Deploy](https://dash.deno.com). -1. (Optional) To simplify the build and deploy into one command, add a `deploy-deno` script in `package.json`. +4. (Optional) To simplify the build and deploy into one command, add a `deploy-deno` script in `package.json`. ```json ins={9} // package.json @@ -171,9 +176,8 @@ If your project is stored on GitHub, the [Deno Deploy website](https://dash.deno ```bash DENO_DEPLOY_TOKEN= npm run deno-deploy ``` - + Read more about [SSR in Astro](/en/guides/server-side-rendering/). - [Deno adapter]: https://github.com/denoland/deno-astro-adapter From b473fe6cf9f42be7741fbb853b1c73d65c406c8f Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:36:07 -0300 Subject: [PATCH 09/66] Add Steps component to `microsoft-azure.mdx` (#8102) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria --- src/content/docs/en/guides/deploy/microsoft-azure.mdx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/content/docs/en/guides/deploy/microsoft-azure.mdx b/src/content/docs/en/guides/deploy/microsoft-azure.mdx index 167531c72aafe..545c39021cc24 100644 --- a/src/content/docs/en/guides/deploy/microsoft-azure.mdx +++ b/src/content/docs/en/guides/deploy/microsoft-azure.mdx @@ -4,12 +4,14 @@ description: How to deploy your Astro site to the web using Microsoft Azure. type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; [Azure](https://azure.microsoft.com/) is a cloud platform from Microsoft. You can deploy your Astro site with Microsoft Azure’s [Static Web Apps](https://aka.ms/staticwebapps) service. This guide takes you through deploying your Astro site stored in GitHub using Visual Studio Code. Please see Microsoft guides for using an [Azure Pipelines Task](https://learn.microsoft.com/en-us/azure/devops/pipelines/tasks/reference/azure-static-web-app-v0?view=azure-pipelines) for other setups. ## Prerequisites + To follow this guide, you will need: - An Azure account and a subscription key. You can create a [free Azure account here](https://azure.microsoft.com/free). @@ -18,15 +20,18 @@ To follow this guide, you will need: ## How to deploy + 1. Open your project in VS Code. 2. Open the Static Web Apps extension, sign in to Azure, and click the **+** button to create a new Static Web App. You will be prompted to designate which subscription key to use. 3. Follow the wizard started by the extension to give your app a name, choose a framework preset, and designate the app root (usually `/`) and built file location (use `/dist`). Astro is not listed in the built-in templates in Azure so you will need to select `custom`. The wizard will run and will create a [GitHub Action](https://github.com/features/actions) in the `.github` folder of your repo. (This folder will be automatically created if it does not already exist.) + The GitHub Action will deploy your app (you can see its progress in your repo’s Actions tab on GitHub). When successfully completed, you can view your app at the address shown in the SWA Extension’s progress window by clicking the **Browse Website** button (this will appear after the GitHub Action has run). ## Known Issues + The GitHub action yaml that is created for you assumes the use of node 14. This means the Astro build fails. To resolve this update your projects package.json file with this snippet. ``` From 2c5821e195a95daa9198d4266dfd971ec9c460b0 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:36:27 -0300 Subject: [PATCH 10/66] Add Steps component to `builderio.mdx` (#8067) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com> Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/cms/builderio.mdx | 24 +++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/cms/builderio.mdx b/src/content/docs/en/guides/cms/builderio.mdx index 9fee1778745ba..eef6bb078f866 100644 --- a/src/content/docs/en/guides/cms/builderio.mdx +++ b/src/content/docs/en/guides/cms/builderio.mdx @@ -8,6 +8,7 @@ i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' import { FileTree } from '@astrojs/starlight/components'; +import { Steps } from '@astrojs/starlight/components'; [Builder.io](https://www.builder.io/) is a visual CMS that supports drag-and-drop content editing for building websites. @@ -140,11 +141,13 @@ In the above example, `` tells Builder where to insert the co #### Setting the new route as the preview URL + 1. Copy the full URL of your preview, including the protocol, to your clipboard (e.g. `https://{your host}/builder-preview`). 2. Go to the **Models** tab in your Builder space, pick the model you've created and paste the URL from step 1 into the **Preview URL** field. Make sure the URL is complete and includes the protocol, for example `https://`. 3. Click the **Save** button in the upper right. + :::tip When you deploy your site, change the preview URL to match your production URL, for example `https://myAwesomeAstroBlog.com/builder-preview`. @@ -152,11 +155,13 @@ When you deploy your site, change the preview URL to match your production URL, #### Testing the preview URL setup + 1. Make sure your site is live (e.g. your dev server is running) and the `/builder-preview` route is working. 2. In your Builder space under the **Content** tab, click on **New** to create a new content entry for your `blogpost` model. 3. In the Builder editor that just opened, you should be able to see the `builder-preview.astro` page with a big **Add Block** in the middle. + :::tip[Troubleshooting] @@ -172,13 +177,19 @@ For more ideas, read [Builder's troubleshooting guide](https://www.builder.io/c/ ### Creating a blog post + 1. In Builder's visual editor, create a new content entry with the following values: - **title:** 'First post, woohoo!' - **slug:** 'first-post-woohoo' + 2. Complete your post using the **Add Block** button and add a text field with some post content. + 3. In the text field above the editor, give your entry a name. This is how it will be listed in the Builder app. + 4. When you're ready click the **Publish** button in the upper right corner. + 5. Create as many posts as you like, ensuring that all content entries contain a `title` and a `slug` as well as some post content. + ### Displaying a list of blog posts @@ -328,15 +339,23 @@ If your project is using Astro's default static mode, you will need to set up a ##### Netlify + 1. Go to your site dashboard, then **Site Settings** and click on **Build & deploy**. + 2. Under the **Continuous Deployment** tab, find the **Build hooks** section and click on **Add build hook**. + 3. Provide a name for your webhook and select the branch you want to trigger the build on. Click on **Save** and copy the generated URL. + ##### Vercel + 1. Go to your project dashboard and click on **Settings**. + 2. Under the **Git** tab, find the **Deploy Hooks** section. + 3. Provide a name for your webhook and the branch you want to trigger the build on. Click **Add** and copy the generated URL. + ##### Adding a webhook to Builder @@ -344,9 +363,13 @@ If your project is using Astro's default static mode, you will need to set up a See [Builder's guide on adding webhooks](https://www.builder.io/c/docs/webhooks) for more information. ::: + 1. In your Builder dashboard, go into your **`blogpost`** model. Under **Show More Options**, select **Edit Webhooks** at the bottom. + 2. Add a new webhook by clicking on **Webhook**. Paste the URL generated by your hosting provider into the **Url** field. + 3. Click on **Show Advanced** under the URL field and toggle the option to select **Disable Payload**. With the payload disabled, Builder sends a simpler POST request to your hosting provider, which can be helpful as your site grows. Click **Done** to save this selection. + With this webhook in place, whenever you click the **Publish** button in the Builder editor, your hosting provider rebuilds your site - and Astro fetches the newly published data for you. Nothing to do but lean back and pump out that sweet sweet content! @@ -360,4 +383,3 @@ With this webhook in place, whenever you click the **Publish** button in the Bui ## Community resources - Read [Connecting Builder.io's Visual CMS to Astro](https://www.hamatoyogi.dev/blog/astro-log/connecting-builderio-to-astro) by Yoav Ganbar. - From fba6ebfcc0044fe989d23cb176e1da6ab45c5cf6 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:36:46 -0300 Subject: [PATCH 11/66] Add Steps component to `vercel.mdx` (#8116) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sarah Rainsberger Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> --- src/content/docs/en/guides/deploy/vercel.mdx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/content/docs/en/guides/deploy/vercel.mdx b/src/content/docs/en/guides/deploy/vercel.mdx index 98b9ed8d8fde2..9bc3f82b38b6a 100644 --- a/src/content/docs/en/guides/deploy/vercel.mdx +++ b/src/content/docs/en/guides/deploy/vercel.mdx @@ -4,7 +4,8 @@ description: How to deploy your Astro site to the web on Vercel. type: deploy i18nReady: true --- -import ReadMore from '~/components/ReadMore.astro' +import ReadMore from '~/components/ReadMore.astro'; +import { Steps } from '@astrojs/starlight/components'; You can use [Vercel](http://vercel.com/) to deploy an Astro site to their global edge network with zero configuration. @@ -30,6 +31,7 @@ npx astro add vercel If you prefer to install the adapter manually instead, complete the following two steps: + 1. Install [the `@astrojs/vercel` adapter](/en/guides/integrations-guide/vercel/) to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal: ```bash @@ -47,6 +49,7 @@ If you prefer to install the adapter manually instead, complete the following tw adapter: vercel(), }); ``` + ## How to deploy @@ -54,18 +57,23 @@ You can deploy to Vercel through the website UI or using Vercel’s CLI (command ### Website UI Deployment + 1. Push your code to your online Git repository (GitHub, GitLab, BitBucket). + 2. [Import your project](https://vercel.com/new) into Vercel. + 3. Vercel will automatically detect Astro and configure the right settings. + 4. Your application is deployed! (e.g. [astro.vercel.app](https://astro.vercel.app/)) + After your project has been imported and deployed, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/concepts/deployments/preview-deployments), and all changes made to the Production Branch (commonly “main”) will result in a [Production Deployment](https://vercel.com/docs/concepts/deployments/environments#production). Learn more about Vercel’s [Git Integration](https://vercel.com/docs/concepts/git). - ### CLI Deployment + 1. Install the [Vercel CLI](https://vercel.com/cli) and run `vercel` to deploy. ```bash @@ -74,9 +82,11 @@ After your project has been imported and deployed, all subsequent pushes to bran ``` 2. Vercel will automatically detect Astro and configure the right settings. + 3. When asked `Want to override the settings? [y/N]`, choose `N`. -4. Your application is deployed! (e.g. [astro.vercel.app](https://astro.vercel.app/)) +4. Your application is deployed! (e.g. [astro.vercel.app](https://astro.vercel.app/)) + ### Project config with vercel.json From 2d02c0a8bcfc960575d655c939a7b8a996616282 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:37:10 -0300 Subject: [PATCH 12/66] Add Steps component to `reading-times.mdx` (#8069) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: Atharva Co-authored-by: Sarah Rainsberger --- src/content/docs/en/recipes/reading-time.mdx | 186 ++++++++++--------- 1 file changed, 94 insertions(+), 92 deletions(-) diff --git a/src/content/docs/en/recipes/reading-time.mdx b/src/content/docs/en/recipes/reading-time.mdx index 6bda4d396c9b6..004af5fb9a2d6 100644 --- a/src/content/docs/en/recipes/reading-time.mdx +++ b/src/content/docs/en/recipes/reading-time.mdx @@ -4,113 +4,115 @@ description: Build a remark plugin to add reading time to your Markdown or MDX f i18nReady: true type: recipe --- - -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import { Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; Create a [remark plugin](https://github.com/remarkjs/remark) which adds a reading time property to the frontmatter of your Markdown or MDX files. Use this property to display the reading time for each page. ## Recipe + 1. Install Helper Packages - Install these two helper packages: - - [`reading-time`](https://www.npmjs.com/package/reading-time) to calculate minutes read - - [`mdast-util-to-string`](https://www.npmjs.com/package/mdast-util-to-string) to extract all text from your markdown - - - - ```shell - npm install reading-time mdast-util-to-string - ``` - - - ```shell - pnpm add reading-time mdast-util-to-string - ``` - - - ```shell - yarn add reading-time mdast-util-to-string - ``` - - + Install these two helper packages: + - [`reading-time`](https://www.npmjs.com/package/reading-time) to calculate minutes read + - [`mdast-util-to-string`](https://www.npmjs.com/package/mdast-util-to-string) to extract all text from your markdown + + + + ```shell + npm install reading-time mdast-util-to-string + ``` + + + ```shell + pnpm add reading-time mdast-util-to-string + ``` + + + ```shell + yarn add reading-time mdast-util-to-string + ``` + + 2. Create a remark plugin. - This plugin uses the `mdast-util-to-string` package to get the Markdown file's text. This text is then passed to the `reading-time` package to calculate the reading time in minutes. - - ```js title="remark-reading-time.mjs" - import getReadingTime from 'reading-time'; - import { toString } from 'mdast-util-to-string'; - - export function remarkReadingTime() { - return function (tree, { data }) { - const textOnPage = toString(tree); - const readingTime = getReadingTime(textOnPage); - // readingTime.text will give us minutes read as a friendly string, - // i.e. "3 min read" - data.astro.frontmatter.minutesRead = readingTime.text; - }; - } - ``` + This plugin uses the `mdast-util-to-string` package to get the Markdown file's text. This text is then passed to the `reading-time` package to calculate the reading time in minutes. + + ```js title="remark-reading-time.mjs" + import getReadingTime from 'reading-time'; + import { toString } from 'mdast-util-to-string'; + + export function remarkReadingTime() { + return function (tree, { data }) { + const textOnPage = toString(tree); + const readingTime = getReadingTime(textOnPage); + // readingTime.text will give us minutes read as a friendly string, + // i.e. "3 min read" + data.astro.frontmatter.minutesRead = readingTime.text; + }; + } + ``` 3. Add the plugin to your config: - ```js title="astro.config.mjs" "import { remarkReadingTime } from './remark-reading-time.mjs';" "remarkPlugins: [remarkReadingTime]," - import { defineConfig } from 'astro/config'; - import { remarkReadingTime } from './remark-reading-time.mjs'; + ```js title="astro.config.mjs" "import { remarkReadingTime } from './remark-reading-time.mjs';" "remarkPlugins: [remarkReadingTime]," + import { defineConfig } from 'astro/config'; + import { remarkReadingTime } from './remark-reading-time.mjs'; - export default defineConfig({ - markdown: { - remarkPlugins: [remarkReadingTime], - }, - }); - ``` + export default defineConfig({ + markdown: { + remarkPlugins: [remarkReadingTime], + }, + }); + ``` - Now all Markdown documents will have a calculated `minutesRead` property in their frontmatter. + Now all Markdown documents will have a calculated `minutesRead` property in their frontmatter. 4. Display Reading Time - If your blog posts are stored in a [content collection](/en/guides/content-collections/), access the `remarkPluginFrontmatter` from the `entry.render()` function. Then, render `minutesRead` in your template wherever you would like it to appear. - - ```astro title="src/pages/posts/[slug].astro" "const { Content, remarkPluginFrontmatter } = await entry.render();" "

{remarkPluginFrontmatter.minutesRead}

" - --- - import { CollectionEntry, getCollection } from 'astro:content'; - - export async function getStaticPaths() { - const blog = await getCollection('blog'); - return blog.map(entry => ({ - params: { slug: entry.slug }, - props: { entry }, - })); - } - - const { entry } = Astro.props; - const { Content, remarkPluginFrontmatter } = await entry.render(); - --- - - - ... - - ... -

{remarkPluginFrontmatter.minutesRead}

- ... - - - ``` - - If you're using a [Markdown layout](/en/guides/markdown-content/#markdown-and-mdx-pages), use the `minutesRead` frontmatter property from `Astro.props` in your layout template. - - ```astro title="src/layouts/BlogLayout.astro" "const { minutesRead } = Astro.props.frontmatter;" "

{minutesRead}

" - --- - const { minutesRead } = Astro.props.frontmatter; - --- - - - ... - -

{minutesRead}

- - - - ``` + If your blog posts are stored in a [content collection](/en/guides/content-collections/), access the `remarkPluginFrontmatter` from the `entry.render()` function. Then, render `minutesRead` in your template wherever you would like it to appear. + + ```astro title="src/pages/posts/[slug].astro" "const { Content, remarkPluginFrontmatter } = await entry.render();" "

{remarkPluginFrontmatter.minutesRead}

" + --- + import { CollectionEntry, getCollection } from 'astro:content'; + + export async function getStaticPaths() { + const blog = await getCollection('blog'); + return blog.map(entry => ({ + params: { slug: entry.slug }, + props: { entry }, + })); + } + + const { entry } = Astro.props; + const { Content, remarkPluginFrontmatter } = await entry.render(); + --- + + + ... + + ... +

{remarkPluginFrontmatter.minutesRead}

+ ... + + + ``` + + If you're using a [Markdown layout](/en/guides/markdown-content/#markdown-and-mdx-pages), use the `minutesRead` frontmatter property from `Astro.props` in your layout template. + + ```astro title="src/layouts/BlogLayout.astro" "const { minutesRead } = Astro.props.frontmatter;" "

{minutesRead}

" + --- + const { minutesRead } = Astro.props.frontmatter; + --- + + + ... + +

{minutesRead}

+ + + + ``` + From 66e13538b379cd80b9484c4d759ade5414e48c4c Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:37:32 -0300 Subject: [PATCH 13/66] Add Steps component to `sharing-state.mdx` (#8068) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: Atharva Co-authored-by: Sarah Rainsberger --- src/content/docs/en/recipes/sharing-state.mdx | 108 +++++++++--------- 1 file changed, 55 insertions(+), 53 deletions(-) diff --git a/src/content/docs/en/recipes/sharing-state.mdx b/src/content/docs/en/recipes/sharing-state.mdx index f3e1aa881307d..7654fbeeee96a 100644 --- a/src/content/docs/en/recipes/sharing-state.mdx +++ b/src/content/docs/en/recipes/sharing-state.mdx @@ -4,8 +4,8 @@ description: Learn how to share state across Astro components with Nano Stores. i18nReady: true type: recipe --- - -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import { Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; :::tip Using framework components? See [how to share state between Islands](/en/recipes/sharing-state-islands/)! @@ -15,70 +15,72 @@ When building an Astro website, you may need to share state across components. A ## Recipe + 1. Install Nano Stores: - - - ```shell - npm install nanostores - ``` - - - ```shell - pnpm add nanostores - ``` - - - ```shell - yarn add nanostores - ``` - - + + + ```shell + npm install nanostores + ``` + + + ```shell + pnpm add nanostores + ``` + + + ```shell + yarn add nanostores + ``` + + 2. Create a store. In this example, the store tracks whether a dialog is open or not: - ```ts title="src/store.js" - import { atom } from 'nanostores'; + ```ts title="src/store.js" + import { atom } from 'nanostores'; - export const isOpen = atom(false); - ``` + export const isOpen = atom(false); + ``` 3. Import and use the store in a ` - ``` - - ```astro title="src/components/Dialog.astro" - + + ``` - // Listen to changes in the store, and show/hide the dialog accordingly - isOpen.subscribe(open => { - if (open) { - document.getElementById('dialog').style.display = 'block'; - } else { - document.getElementById('dialog').style.display = 'none'; - } - }) - - ``` + ```astro title="src/components/Dialog.astro" + + + + ``` + ## Resources From b24909a7139fed8b9aa6c3abf402013e7f58ce39 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:38:04 -0300 Subject: [PATCH 14/66] Add Steps component to `heroku.mdx` (#8104) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Chirag Co-authored-by: Atharva Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> --- src/content/docs/en/guides/deploy/heroku.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/content/docs/en/guides/deploy/heroku.mdx b/src/content/docs/en/guides/deploy/heroku.mdx index 9dafb557013ef..1bc705d7cbcc9 100644 --- a/src/content/docs/en/guides/deploy/heroku.mdx +++ b/src/content/docs/en/guides/deploy/heroku.mdx @@ -4,6 +4,8 @@ description: How to deploy your Astro site to the web using Heroku. type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; + [Heroku](https://www.heroku.com/) is a platform-as-a-service for building, running, and managing modern apps in the cloud. You can deploy an Astro site to Heroku using this guide. :::danger @@ -12,6 +14,7 @@ The following instructions use [the deprecated `heroku-static-buildpack`](https: ## How to deploy + 1. Install the [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli). 2. Create a Heroku account by [signing up](https://signup.heroku.com/). @@ -56,3 +59,4 @@ The following instructions use [the deprecated `heroku-static-buildpack`](https: # opens a browser to view the Dashboard version of Heroku CI $ heroku open ``` + From 1fdcf7fe74acf11da29d1b956320a0233564759c Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:38:17 -0300 Subject: [PATCH 15/66] Add Steps component to `preprcms.mdx` (#8075) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com> Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/cms/preprcms.mdx | 27 ++++++++++++--------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/src/content/docs/en/guides/cms/preprcms.mdx b/src/content/docs/en/guides/cms/preprcms.mdx index db3e6876aead6..351a8d33bf30f 100644 --- a/src/content/docs/en/guides/cms/preprcms.mdx +++ b/src/content/docs/en/guides/cms/preprcms.mdx @@ -6,8 +6,9 @@ service: Prepr CMS stub: true i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; [Prepr CMS](https://www.prepr.io/) is a headless CMS with built-in personalization. @@ -32,8 +33,12 @@ PREPR_ENDPOINT=YOUR_PREPR_API_URL ``` You will find your `YOUR_PREPR_API_URL` value from your Prepr account settings: + + 1. Go to  **Settings > Access tokens** to view both your Preview and Production access tokens. + 2. Use the **API URL** value from the **GraphQL Production** access token to only retrieve published content items for your Astro site. + ### Configuring the Prepr endpoint @@ -70,9 +75,11 @@ Your root directory should now include these files: You will fetch your data from Prepr by writing queries to interact with its GraphQL API. #### Create a GraphQL query to retrieve your blog articles: + + 1. Create a new folder `src/queries/` and add a file named `get-articles.js`. -2. Add the following query to this file to retrieve all articles: +2. Add the following query to this file to retrieve all articles: ```js title="src/queries/get-articles.js" const GetArticles = ` @@ -90,7 +97,6 @@ You will fetch your data from Prepr by writing queries to interact with its Grap ``` 3. To display a linked list of your blog posts on a page, import and execute your query, including the necessary Prepr endpoint. You will then have access to all your posts titles and their slugs to render to the page. (In the next step, you will [create individual pages for your blog posts](#creating-individual-blog-post-pages).) - ```astro title="src/pages/index.astro" ins={3-4, 6-8, 15-23} --- import Layout from '../layouts/Layout.astro'; @@ -117,7 +123,7 @@ You will fetch your data from Prepr by writing queries to interact with its Grap ``` - + Your root directory should include these new files: @@ -136,10 +142,9 @@ Your root directory should include these new files: To create a page for each blog post, you will execute a new GraphQL query on a [dynamic routing](/en/guides/routing/#server-ssr-mode) `.astro` page. This query will fetch a specific article by its slug and a new page will be created for each individual blog post. + 1. Create a file called `get-article-by-slug.js` in the `queries` folder and add the following to query a specific article by its slug and return data such as the article `title` and `content`: - ```js title="src/lib/queries/get-article-by-slug.js" - const GetArticleBySlug = ` query ($slug: String) {    Article (slug: $slug) { @@ -163,13 +168,12 @@ To create a page for each blog post, you will execute a new GraphQL query on a [ export default GetArticleBySlug ``` -:::tip -You can create and [test GraphQL queries](https://docs.prepr.io/reference/graphql/v1/test-queries) using the [Apollo explorer](https://studio.apollographql.com/sandbox/explorer) in Prepr. Open the API Explorer from the *Article* content item page in Prepr. -The Article content is stored in a *Dynamic content field*. Check out the GraphQL docs for more details on [how to fetch the data within this field](https://docs.prepr.io/reference/graphql/v1/schema-field-types-dynamic-content-field). -::: + :::tip + You can create and [test GraphQL queries](https://docs.prepr.io/reference/graphql/v1/test-queries) using the [Apollo explorer](https://studio.apollographql.com/sandbox/explorer) in Prepr. Open the API Explorer from the *Article* content item page in Prepr. + The Article content is stored in a *Dynamic content field*. Check out the GraphQL docs for more details on [how to fetch the data within this field](https://docs.prepr.io/reference/graphql/v1/schema-field-types-dynamic-content-field). + ::: 2. Inside the `src/pages` folder, create a file called `[…slug].astro`. Add the following code to import and execute the query from the previous step and display the retrieved article: - ```astro title="src/pages/[...slug].astro" --- import Layout from '../layouts/Layout.astro'; @@ -202,6 +206,7 @@ The Article content is stored in a *Dynamic content field*. Check out the GraphQ ``` + Your root directory should now include these new files: From 75d28eccf7b093b5d6ffbc77fb5df125b1682d49 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:38:33 -0300 Subject: [PATCH 16/66] Add Steps component to `docker.mdx` (#8121) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> --- src/content/docs/en/recipes/docker.mdx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/content/docs/en/recipes/docker.mdx b/src/content/docs/en/recipes/docker.mdx index 66bfe62492078..26ba8b844faf9 100644 --- a/src/content/docs/en/recipes/docker.mdx +++ b/src/content/docs/en/recipes/docker.mdx @@ -4,6 +4,7 @@ description: Learn how to build your Astro site using Docker. type: recipe i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; [Docker](https://docker.com) is a tool to build, deploy, and run applications using containers. @@ -168,23 +169,24 @@ CMD node ./dist/server/entry.mjs ## Recipe + 1. Build your container by running the following command in your project's root directory. Use any name for ``: -```bash -docker build -t . -``` + ```bash + docker build -t . + ``` -This will output an image, which you can run locally or deploy to a platform of your choice. + This will output an image, which you can run locally or deploy to a platform of your choice. 2. To run your image as a local container, use the following command. -Replace `` with an open port on your machine. Replace `` with the port exposed by your Docker container (`4321`, `80`, or `8080` in the above examples.) + Replace `` with an open port on your machine. Replace `` with the port exposed by your Docker container (`4321`, `80`, or `8080` in the above examples.) -```bash -docker run -p : -``` + ```bash + docker run -p : + ``` -You should be able to access your site at `http://localhost:`. + You should be able to access your site at `http://localhost:`. 3. Now that your website is successfully built and packaged in a container, you can deploy it to a cloud provider. See the [Google Cloud](/en/guides/deploy/google-cloud/#cloud-run-ssr-and-static) deployment guide for one example, and the [Deploy your app](https://docs.docker.com/language/nodejs/deploy/) page in the Docker docs. - + From 3aa66260dd0a6003916f4e124cd646b3042a0cf1 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:38:52 -0300 Subject: [PATCH 17/66] Add Steps component to `from-nextjs.mdx` (#8117) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> --- .../guides/migrate-to-astro/from-nextjs.mdx | 65 ++++++++++--------- 1 file changed, 35 insertions(+), 30 deletions(-) diff --git a/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx b/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx index 82632aa88d9aa..86d3612704ad1 100644 --- a/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx +++ b/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx @@ -6,8 +6,9 @@ stub: false framework: Next.js i18nReady: true --- -import AstroJSXTabs from '~/components/tabs/AstroJSXTabs.astro' -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import { Steps } from '@astrojs/starlight/components'; +import AstroJSXTabs from '~/components/tabs/AstroJSXTabs.astro'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; Here are some key concepts and migration strategies to help you get started. Use the rest of our docs and our [Discord community](https://astro.build/chat) to keep going! @@ -37,6 +38,7 @@ When you rebuild your Next.js site in Astro, you will notice some important diff Each project migration will look different, but there are some common actions you will perform when converting from Next.js to Astro. ### Create a new Astro project + Use the `create astro` command for your package manager to launch Astro's CLI wizard or choose a community theme from the [Astro Theme Showcase](https://astro.build/themes). You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters (e.g. `docs`, `blog`, `portfolio`). Or, you can [start a new project from any existing Astro repository on GitHub](/en/install/auto/#starter-templates). @@ -89,6 +91,7 @@ You may find it useful to install some of [Astro's optional integrations](/en/gu Following [Astro's project structure](/en/basics/project-structure/): + 1. **Keep** Next's `public/` folder untouched. Astro uses the `public/` directory for static assets, just like Next. There is no change needed to this folder, nor its contents. @@ -96,7 +99,7 @@ Following [Astro's project structure](/en/basics/project-structure/): 2. **Copy or Move** Next's other files and folders (e.g. `pages`, `styles` etc.) into Astro's `src/` folder as you rebuild your site, following [Astro's project structure](/en/basics/project-structure/). Like Next, Astro's `src/pages/` folder is a special folder used for file-based routing. All other folders are optional, and you can organize the contents of your `src/` folder any way you like. Other common folders in Astro projects include `src/layouts/`, `src/components`, `src/styles`, `src/scripts`. - + ### The Astro config file @@ -110,13 +113,13 @@ Here are some tips for converting a Next `.js` component into a `.astro` compone 2. Change any [Next or JSX syntax to Astro](#reference-convert-nextjs-syntax-to-astro) or to HTML web standards. This includes ``, ` ``` + 2. Create an anchor tag on the page linking to your product URL. Include the class `lemonsqueezy-button` to open a checkout overlay when clicked. ```html title="src/pages/my-product-page.astro" @@ -34,6 +37,7 @@ The following is an example of adding a Lemon Squeezy "Buy now" element to an As Buy Now ``` + #### Lemon.js @@ -53,6 +57,7 @@ The following is an example of adding a Paddle "Buy Now" element to an Astro pag After your default payment link domain (your own website) is approved by Paddle, you can turn any element on your page into a trigger for a checkout overlay using HTML data attributes. + 1. Add the following two ` ``` + 2. Turn any element on your page into a Paddle Checkout button by adding the `paddle_button` class: ```html title="src/pages/my-product-page.astro" Buy Now ``` + 3. Add a `data-items` attribute to specify your product's Paddle `priceId` and `quantity`. You can also optionally pass additional [supported HTML data attributes](https://developer.paddle.com/paddlejs/html-data-attributes) to prefill data, handle checkout success, or style your button and checkout overlay: ```html title="src/pages/my-product-page.astro" @@ -88,6 +95,7 @@ After your default payment link domain (your own website) is approved by Paddle, Buy now ``` + #### Paddle.js @@ -116,6 +124,7 @@ The following is an example of configuring a Snipcart checkout and adding button For complete instructions, including setting up your Snipcart store, please see [the Snipcart installation documentation](https://docs.snipcart.com/v3/setup/installation). + 1. Add the script [as shown in the Snipcart installation instructions](https://docs.snipcart.com/v3/setup/installation) on your page after the `` element. ```html title="src/pages/my-product-page.astro" @@ -169,6 +178,7 @@ The following is an example of configuring a Snipcart checkout and adding button ```html title="src/pages/my-product-page.astro" ``` + #### Snipcart JavaScript SDK From d10450d3fb1d0849bd80eca041c4867545fca439 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:44:43 -0300 Subject: [PATCH 27/66] Add Steps component to `build-forms-api.mdx` (#8125) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- src/content/docs/en/recipes/build-forms-api.mdx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/content/docs/en/recipes/build-forms-api.mdx b/src/content/docs/en/recipes/build-forms-api.mdx index 6e798ce02d6fa..a788f425942ae 100644 --- a/src/content/docs/en/recipes/build-forms-api.mdx +++ b/src/content/docs/en/recipes/build-forms-api.mdx @@ -4,8 +4,9 @@ description: Learn how to use JavaScript to send form submissions to an API Rout i18nReady: true type: recipe --- +import { Steps } from '@astrojs/starlight/components'; import UIFrameworkTabs from "~/components/tabs/UIFrameworkTabs.astro"; -import PackageManagerTabs from "~/components/tabs/PackageManagerTabs.astro" +import PackageManagerTabs from "~/components/tabs/PackageManagerTabs.astro"; An HTML form causes the browser to refresh the page or navigate to a new one. To send form data to an API endpoint instead, you must intercept the form submission using JavaScript. @@ -17,6 +18,7 @@ This recipe shows you how to send form data to an API endpoint and handle that d ## Recipe + 1. Create a `POST` API endpoint at `/api/feedback` that will receive the form data. Use `request.formData()` to process it. Be sure to validate the form values before you use them. This example sends a JSON object with a message back to the client. @@ -165,7 +167,6 @@ This recipe shows you how to send form data to an API endpoint and handle that d - 3. Create a function that accepts a submit event, then pass it as a `submit` handler to your form. In the function: @@ -424,6 +425,7 @@ This recipe shows you how to send form data to an API endpoint and handle that d ``` + {/* ## Extension: Use Zod to validate your form From ca12bb040537e44ca414c3d682eb0525a5b4db7d Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:45:22 -0300 Subject: [PATCH 28/66] Add Steps component to `markdoc.mdx` (#8114) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: Christine Belzie <105683440+CBID2@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/integrations-guide/markdoc.mdx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/integrations-guide/markdoc.mdx b/src/content/docs/en/guides/integrations-guide/markdoc.mdx index f2eb87a976cdc..cf7e74f8de3d7 100644 --- a/src/content/docs/en/guides/integrations-guide/markdoc.mdx +++ b/src/content/docs/en/guides/integrations-guide/markdoc.mdx @@ -8,6 +8,7 @@ i18nReady: true --- import { FileTree } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import { Steps } from '@astrojs/starlight/components'; import ReadMore from '~/components/ReadMore.astro'; This **[Astro integration][astro-integration]** enables the usage of [Markdoc](https://markdoc.dev/) to create components, pages, and content collection entries. @@ -411,6 +412,7 @@ Astro's `` component cannot be used directly in Markdoc. However, you c To override the default image node, you can configure an `.astro` component to be rendered in place of a standard ``. + 1. Build a custom `MarkdocImage.astro` component to pass the required `src` and `alt` properties from your image to the `` component: ```astro title="src/components/MarkdocImage.astro" @@ -467,6 +469,7 @@ To override the default image node, you can configure an `.astro` component to b ![A picture of a dog](https://example.com/dog.jpg) ``` + #### Create a custom Markdoc image tag @@ -474,6 +477,7 @@ A Markdoc `image` tag allows you to set additional attributes on your image that The following steps will create a custom Markdoc image tag to display a `
` element with a caption, using the Astro `` component to optimize the image. + 1. Create a `MarkdocFigure.astro` component to receive the necessary props and render an image with a caption: ```astro title="src/components/MarkdocFigure.astro" @@ -517,7 +521,7 @@ The following steps will create a custom Markdoc image tag to display a `
## Advanced Markdoc configuration From afd05ac1eb291261157ff6ee5c25e8b3a22bcc71 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:47:19 -0300 Subject: [PATCH 29/66] Add Steps component to `buddy.mdx` (#8094) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/deploy/buddy.mdx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/content/docs/en/guides/deploy/buddy.mdx b/src/content/docs/en/guides/deploy/buddy.mdx index 90409aeea00e9..14c6a6777b59d 100644 --- a/src/content/docs/en/guides/deploy/buddy.mdx +++ b/src/content/docs/en/guides/deploy/buddy.mdx @@ -4,6 +4,7 @@ description: How to deploy your Astro site to the web using Buddy. type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; You can deploy your Astro project using [Buddy](https://buddy.works/), a CI/CD solution that can build your site and push it to many different deploy targets including FTP servers and cloud hosting providers. @@ -13,10 +14,15 @@ Buddy itself will not host your site. Instead, it helps you manage the build pro ## How to deploy + 1. [Create a **Buddy** account](https://buddy.works/sign-up). + 2. Create a new project and connect it with a git repository (GitHub, GitLab, BitBucket, any private Git Repository or you can use Buddy Git Hosting). + 3. Add a new pipeline. + 4. In the newly created pipeline add a **[Node.js](https://buddy.works/actions/node-js)** action. + 5. In this action add: ```bash @@ -25,4 +31,6 @@ Buddy itself will not host your site. Instead, it helps you manage the build pro ``` 6. Add a deployment action — there are many to choose from, you can browse them in [Buddy’s actions catalog](https://buddy.works/actions). Although their settings can differ, remember to set the **Source path** to `dist`. + 7. Press the **Run** button. + From e80119db89ea8cd3de6bb4353a64d1e91eff494c Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:48:54 -0300 Subject: [PATCH 30/66] Add Steps component to `cloudfare.mdx` (#8092) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- .../docs/en/guides/deploy/cloudflare.mdx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/content/docs/en/guides/deploy/cloudflare.mdx b/src/content/docs/en/guides/deploy/cloudflare.mdx index 176149921ea3f..181b814700d10 100644 --- a/src/content/docs/en/guides/deploy/cloudflare.mdx +++ b/src/content/docs/en/guides/deploy/cloudflare.mdx @@ -4,7 +4,8 @@ description: How to deploy your Astro site to the web using Cloudflare Pages. type: deploy i18nReady: true --- -import ReadMore from '~/components/ReadMore.astro' +import ReadMore from '~/components/ReadMore.astro'; +import { Steps } from '@astrojs/starlight/components'; You can deploy your Astro project on [Cloudflare Pages](https://pages.cloudflare.com/), a platform for frontend developers to collaborate and deploy static (JAMstack) and SSR websites. @@ -23,11 +24,17 @@ To get started, you will need: ## How to deploy a site with Git + 1. Set up a new project on Cloudflare Pages. + 2. Push your code to your git repository (GitHub, GitLab). + 3. Log in to the Cloudflare dashboard and select your account in **Account Home** > **Pages**. + 4. Select **Create a new Project** and the **Connect Git** option. + 5. Select the git project you want to deploy and click **Begin setup** + 6. Use the following build settings: - **Framework preset**: `Astro` @@ -35,13 +42,19 @@ To get started, you will need: - **Build output directory:** `dist` 7. Click the **Save and Deploy** button. + ## How to deploy a site using Wrangler + 1. Install [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/get-started/). + 2. Authenticate Wrangler with your Cloudflare account using `wrangler login`. + 3. Run your build command. + 4. Deploy using `npx wrangler pages deploy dist`. + ```bash # Install Wrangler CLI @@ -66,7 +79,6 @@ pnpm add wrangler --save-dev It's then possible to update the preview script to run `wrangler` instead of Astro’s built-in preview command: - ```json title="package.json" "preview": "wrangler pages dev ./dist" ``` @@ -89,6 +101,7 @@ npx astro add cloudflare If you prefer to install the adapter manually instead, complete the following two steps: + 1. Add the `@astrojs/cloudflare` adapter to your project's dependencies using your preferred package manager. If you're using npm or aren't sure, run this in the terminal: ```bash @@ -106,6 +119,7 @@ If you prefer to install the adapter manually instead, complete the following tw adapter: cloudflare() }); ``` + Read more about [SSR in Astro](/en/guides/server-side-rendering/). From 0c1586baefd2bcf8c281d410d7c069e25e1a8df7 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:49:09 -0300 Subject: [PATCH 31/66] Add Steps component to `flightcontrol.mdx` (#8089) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/deploy/flightcontrol.mdx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/deploy/flightcontrol.mdx b/src/content/docs/en/guides/deploy/flightcontrol.mdx index b588063250c1c..a94f6ee4c0678 100644 --- a/src/content/docs/en/guides/deploy/flightcontrol.mdx +++ b/src/content/docs/en/guides/deploy/flightcontrol.mdx @@ -4,6 +4,7 @@ description: How to deploy your Astro site to AWS with Flightcontrol type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; You can deploy an Astro site using [Flightcontrol](https://www.flightcontrol.dev?ref=astro), which provides fully-automated deployments to your AWS account. @@ -11,15 +12,21 @@ Supports both static and SSR Astro sites. ## How to Deploy + 1. Create a Flightcontrol account at [app.flightcontrol.dev/signup](https://app.flightcontrol.dev/signup?ref=astro) + 2. Go to [app.flightcontrol.dev/projects/new/1](https://app.flightcontrol.dev/projects/new/1) + 3. Connect your GitHub account and select your repo + 4. Select your desired "Config Type": - `GUI` (all config managed through flightcontrol dashboard) where you will select the `Astro Static` or `Astro SSR` preset - `flightcontrol.json` ("infrastructure as code" option where all config is in your repo) where you will select an Astro example config, then add it to your codebase as `flightcontrol.json` + 5. Adjust any configuration as needed -6. Click "Create Project" and complete any required steps (like linking your AWS account). +6. Click "Create Project" and complete any required steps (like linking your AWS account). + ### SSR Setup From 586e743872b3806dea6e4d8ae32acc813a2fa707 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:49:45 -0300 Subject: [PATCH 32/66] Add Steps component to `rss.mdx` (#8059) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/rss.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/docs/en/guides/rss.mdx b/src/content/docs/en/guides/rss.mdx index 385fe9fd51ce9..6f3bec6b1e2da 100644 --- a/src/content/docs/en/guides/rss.mdx +++ b/src/content/docs/en/guides/rss.mdx @@ -4,9 +4,9 @@ description: Add an RSS feed to your Astro site to let users subscribe to your c i18nReady: true type: recipe --- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -import Since from '~/components/Since.astro' - +import Since from '~/components/Since.astro'; +import { Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; Astro supports fast, automatic RSS feed generation for blogs and other content websites. RSS feeds provide an easy way for users to subscribe to your content. @@ -14,6 +14,7 @@ Astro supports fast, automatic RSS feed generation for blogs and other content w The package [`@astrojs/rss`](https://github.com/withastro/astro/tree/main/packages/astro-rss) provides helpers for generating RSS feeds using [API endpoints](/en/guides/endpoints/#static-file-endpoints). This unlocks both static builds _and_ on-demand generation when using an [SSR adapter](/en/guides/server-side-rendering/). + 1. Install `@astrojs/rss` using your preferred package manager: @@ -64,6 +65,7 @@ The package [`@astrojs/rss`](https://github.com/withastro/astro/tree/main/packag }); } ``` + ## Generating `items` @@ -82,7 +84,6 @@ The RSS feed standard format includes the following values for each published it To create an RSS feed of pages managed in [content collections](/en/guides/content-collections/), use the `getCollection()` function to retrieve the data required for your `items` array. You will need to specify the values for each desired property (e.g. `title`, `description`) from the returned data. - ```js title="src/pages/rss.xml.js" "items:" "const blog = await getCollection('blog');" import rss from '@astrojs/rss'; import { getCollection } from 'astro:content'; @@ -277,7 +278,6 @@ With this tag, readers of your blog can enter your site's base URL into their RS After visiting your feed in the browser at `your-domain.com/rss.xml` and confirming that you can see data for each of your posts, you can now [promote your feed on your website](https://medium.com/samsung-internet-dev/add-rss-feeds-to-your-website-to-keep-your-core-readers-engaged-3179dca9c91e#:~:text=com/~deno%2Drss-,Advertising%20your%20RSS%20feed,-Now%20you%20have). Adding the standard RSS icon to your site lets your readers know that they can subscribe to your posts in their own feed reader. - ## Resources - [RSS Feeds](https://aboutfeeds.com/) From 645523f26a3cd5373cacf960c25b57c3224aa8b7 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:50:13 -0300 Subject: [PATCH 33/66] Add Steps component to `tina-cms.mdx` (#8071) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/cms/tina-cms.mdx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/content/docs/en/guides/cms/tina-cms.mdx b/src/content/docs/en/guides/cms/tina-cms.mdx index 2f0aea68878ff..9133ee5ce05c1 100644 --- a/src/content/docs/en/guides/cms/tina-cms.mdx +++ b/src/content/docs/en/guides/cms/tina-cms.mdx @@ -6,9 +6,10 @@ stub: false service: Tina CMS i18nReady: true --- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -import Grid from '~/components/FluidGrid.astro' -import Card from '~/components/ShowcaseCard.astro' +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import Grid from '~/components/FluidGrid.astro'; +import Card from '~/components/ShowcaseCard.astro'; +import { Steps } from '@astrojs/starlight/components'; [Tina CMS](https://tina.io/) is a Git-backed headless content management system. @@ -16,6 +17,7 @@ import Card from '~/components/ShowcaseCard.astro' To get started, you'll need an existing Astro project. + 1. Run the following command to install Tina into your Astro project. @@ -145,6 +147,7 @@ To get started, you'll need an existing Astro project. Learn more about Tina collections [in the Tina docs](https://tina.io/docs/reference/collections/). 5. In production, TinaCMS can commit changes directly to your GitHub repository. To set up TinaCMS for production, you can choose to use [Tina Cloud](https://tina.io/docs/tina-cloud/) or self-host the [Tina Data Layer](https://tina.io/docs/self-hosted/overview/). You can [read more about registering for Tina Cloud](https://app.tina.io/register) in the Tina Docs. + ## Official Resources @@ -160,4 +163,4 @@ To get started, you'll need an existing Astro project. - \ No newline at end of file + From 09bd14ef866e4921ba104e2b2b4d2f0ca38facaa Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:50:41 -0300 Subject: [PATCH 34/66] Add Steps component to `dynamically-importing-images.mdx` (#8120) Co-authored-by: Sarah Rainsberger Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> --- src/content/docs/en/recipes/dynamically-importing-images.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/content/docs/en/recipes/dynamically-importing-images.mdx b/src/content/docs/en/recipes/dynamically-importing-images.mdx index e703557e87bcb..c08d179f8fef3 100644 --- a/src/content/docs/en/recipes/dynamically-importing-images.mdx +++ b/src/content/docs/en/recipes/dynamically-importing-images.mdx @@ -4,6 +4,7 @@ description: Learn how to dynamically import images using Vite's import.meta.glo i18nReady: true type: recipe --- +import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; Local [images](/en/guides/images/) must be imported into `.astro` files in order to display them. There will be times where you will want or need to dynamically import the image paths of your images instead of explicitly importing each individual image. @@ -12,6 +13,7 @@ In this recipe, you will learn how to dynamically import your images using Vite' ## Recipe + 1. Create a new `assets` folder under the `src` directory and add your images inside that new folder. @@ -150,5 +152,4 @@ In this recipe, you will learn how to dynamically import your images using Vite' age={25} /> ``` - - + From 1d7126e7ec4640e282d957cc911a5a7940608f57 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:50:53 -0300 Subject: [PATCH 35/66] Add Steps component to `edgio.mdx` (#8090) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/deploy/edgio.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/content/docs/en/guides/deploy/edgio.mdx b/src/content/docs/en/guides/deploy/edgio.mdx index de2ea4992db25..24b8ff4b9deea 100644 --- a/src/content/docs/en/guides/deploy/edgio.mdx +++ b/src/content/docs/en/guides/deploy/edgio.mdx @@ -4,6 +4,7 @@ description: How to deploy your Astro site to the web using Edgio. type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; You can deploy your Astro project to [Edgio](https://www.edg.io/), an edge and CDN platform to deploy, protect and accelerate websites and APIs. @@ -13,6 +14,7 @@ Check out [the Astro guide in Edgio’s docs](https://docs.edg.io/guides/astro)! ## How to deploy + 1. Install [the Edgio CLI](https://docs.edg.io/guides/cli) globally from the Terminal, if you haven’t already. ```bash @@ -47,3 +49,4 @@ Check out [the Astro guide in Edgio’s docs](https://docs.edg.io/guides/astro)! ```bash edgio deploy ``` + From 2e00962406c44130bf038eb13b1e3ad11c97b805 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:51:17 -0300 Subject: [PATCH 36/66] Add Steps component to `captcha.mdx` (#8122) Co-authored-by: Sarah Rainsberger Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> --- src/content/docs/en/recipes/captcha.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/content/docs/en/recipes/captcha.mdx b/src/content/docs/en/recipes/captcha.mdx index 5e910e75d2d12..e5ce38aa00b2f 100644 --- a/src/content/docs/en/recipes/captcha.mdx +++ b/src/content/docs/en/recipes/captcha.mdx @@ -4,16 +4,19 @@ description: Learn how to create an API route and fetch it from the client. i18nReady: true type: recipe --- +import { Steps } from '@astrojs/starlight/components'; [Server endpoints](/en/guides/endpoints/#server-endpoints-api-routes) can be used as REST API endpoints to run functions such as authentications, database access, and verifications without exposing sensitive data to the client. In this recipe, an API route is used to verify Google reCAPTCHA v3 without exposing the secret to clients. ## Prerequisites + - A project with [SSR](/en/guides/server-side-rendering/) (`output: 'server'`) enabled ## Recipe + 1. Create a `POST` endpoint that accepts recaptcha data, then verifies it with reCAPTCHA's API. Here, you can safely define secret values or read environment variables. ```js title="src/pages/recaptcha.js" @@ -74,3 +77,4 @@ In this recipe, an API route is used to verify Google reCAPTCHA v3 without expos ``` + From 95f4e777564733b57a7cfd508f8f4469f6ce1b6c Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:51:42 -0300 Subject: [PATCH 37/66] Add Steps component to `flyio.mdx` (#8088) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/deploy/flyio.mdx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/content/docs/en/guides/deploy/flyio.mdx b/src/content/docs/en/guides/deploy/flyio.mdx index 5feb86fb8562d..4b9afb6fbc793 100644 --- a/src/content/docs/en/guides/deploy/flyio.mdx +++ b/src/content/docs/en/guides/deploy/flyio.mdx @@ -5,6 +5,7 @@ type: deploy i18nReady: true stub: true --- +import { Steps } from '@astrojs/starlight/components'; You can deploy your Astro project to [Fly.io](https://fly.io/), a platform for running full stack apps and databases close to your users. @@ -22,8 +23,11 @@ To enable on-demand rendering in your Astro project and deploy on Fly.io, add [t ## How to deploy + 1. [Sign up for Fly.io](https://fly.io/docs/getting-started/log-in-to-fly/#first-time-or-no-fly-account-sign-up-for-fly) if you haven't already. + 2. [Install `flyctl`](https://fly.io/docs/hands-on/install-flyctl/), your Fly.io app command center. + 3. Run the following command in your terminal. ```bash @@ -31,6 +35,7 @@ To enable on-demand rendering in your Astro project and deploy on Fly.io, add [t ``` `flyctl` will automatically detect Astro, configure the correct settings, build your image, and deploy it to the Fly.io platform. + ## Generating your Astro Dockerfile From a67b103c36b438e23d4cbfbe0d3c9bbbf5a626fd Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:52:01 -0300 Subject: [PATCH 38/66] Add Steps component to `call-endpoint.mdx` (#8123) Co-authored-by: Sarah Rainsberger Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> --- src/content/docs/en/recipes/call-endpoints.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/content/docs/en/recipes/call-endpoints.mdx b/src/content/docs/en/recipes/call-endpoints.mdx index cbd498869139a..d7d689b04cc96 100644 --- a/src/content/docs/en/recipes/call-endpoints.mdx +++ b/src/content/docs/en/recipes/call-endpoints.mdx @@ -4,6 +4,7 @@ description: Learn how to call endpoints from the server in Astro. i18nReady: true type: recipe --- +import { Steps } from '@astrojs/starlight/components'; Endpoints can be used to serve many kinds of data. This recipe calls a server endpoint from a page's component script to display a greeting, without requiring an additional fetch request. @@ -13,6 +14,7 @@ Endpoints can be used to serve many kinds of data. This recipe calls a server en ## Recipe + 1. Create an endpoint in a new file `src/pages/api/hello.ts` that returns some data: ```ts title="src/pages/api/hello.ts" @@ -39,3 +41,4 @@ Endpoints can be used to serve many kinds of data. This recipe calls a server en

{data.greeting} world!

``` + From 68f43647514c6e417ab97a5ea9a075b3f1f753e4 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:52:29 -0300 Subject: [PATCH 39/66] Add Steps component to `tailwind-rendered-markdown.mdx` (#8085) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: Atharva Co-authored-by: Sarah Rainsberger --- src/content/docs/en/recipes/tailwind-rendered-markdown.mdx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/content/docs/en/recipes/tailwind-rendered-markdown.mdx b/src/content/docs/en/recipes/tailwind-rendered-markdown.mdx index f4eda932ed568..ff1049bf4a240 100644 --- a/src/content/docs/en/recipes/tailwind-rendered-markdown.mdx +++ b/src/content/docs/en/recipes/tailwind-rendered-markdown.mdx @@ -4,7 +4,7 @@ description: Learn how to use @tailwind/typography to style your rendered Markdo i18nReady: true type: recipe --- - +import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; You can use [Tailwind](https://tailwindcss.com)'s Typography plugin to style rendered Markdown from sources such as Astro's [**content collections**](/en/guides/content-collections/). @@ -58,7 +58,8 @@ export default { ## Recipe -1. Create a ` ` component to provide a wrapping `
` with a `` for your rendered Markdown. Add the style class `prose` alongside any desired [Tailwind element modifiers](https://tailwindcss.com/docs/typography-plugin#element-modifiers) in the parent element. + +1. Create a `` component to provide a wrapping `
` with a `` for your rendered Markdown. Add the style class `prose` alongside any desired [Tailwind element modifiers](https://tailwindcss.com/docs/typography-plugin#element-modifiers) in the parent element. ```astro title="src/components/Prose.astro" --- @@ -100,6 +101,7 @@ export default { ``` + ## Resources From d9d9d62305861a643af301eac2e1e4922fad4ad6 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:53:10 -0300 Subject: [PATCH 40/66] Add Steps component to `i18n.mdx` (#8127) Co-authored-by: Sarah Rainsberger Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> --- src/content/docs/en/recipes/i18n.mdx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/content/docs/en/recipes/i18n.mdx b/src/content/docs/en/recipes/i18n.mdx index a62bda51b2a74..c143440b14fa6 100644 --- a/src/content/docs/en/recipes/i18n.mdx +++ b/src/content/docs/en/recipes/i18n.mdx @@ -5,8 +5,9 @@ type: recipe i18nReady: true --- import { FileTree } from '@astrojs/starlight/components'; -import ReadMore from '~/components/ReadMore.astro' -import StaticSsrTabs from '~/components/tabs/StaticSsrTabs.astro' +import ReadMore from '~/components/ReadMore.astro'; +import { Steps } from '@astrojs/starlight/components'; +import StaticSsrTabs from '~/components/tabs/StaticSsrTabs.astro'; In this recipe, you will learn how to use content collections and dynamic routing to build your own internationalization (i18n) solution and serve your content in different languages. @@ -21,6 +22,7 @@ If you prefer the default language to not be visible in the URL unlike other lan ### Set up pages for each language + 1. Create a directory for each language you want to support. For example, `en/` and `fr/` if you are supporting English and French: @@ -34,7 +36,6 @@ If you prefer the default language to not be visible in the URL unlike other lan - index.astro - index.astro - 2. Set up `src/pages/index.astro` to redirect to your default language. @@ -61,9 +62,11 @@ If you prefer the default language to not be visible in the URL unlike other lan ``` + ### Use collections for translated content + 1. Create a folder in `src/content/` for each type of content you want to include and add subdirectories for each supported language. For example, to support English and French blog posts: @@ -165,11 +168,13 @@ If you prefer the default language to not be visible in the URL unlike other lan The example above uses the built-in [`toLocaleString()` date-formatting method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) to create a human-readable string from the frontmatter date. This ensures the date and time are formatted to match the user’s language. ::: + ### Translate UI strings Create dictionaries of terms to translate the labels for UI elements around your site. This allows your visitors to experience your site fully in their language. + 1. Create a `src/i18n/ui.ts` file to store your translation strings: ```ts @@ -281,11 +286,13 @@ Create dictionaries of terms to translate the labels for UI elements around your ... ``` + ### Let users switch between languages Create links to the different languages you support so users can choose the language they want to read your site in. + 1. Create a component to show a link for each language: ```astro @@ -327,9 +334,11 @@ Create links to the different languages you support so users can choose the lang ``` + ### Hide default language in the URL + 1. Create a directory for each language except the default language. For example, store your default language pages directly in `pages/`, and your translated pages in `fr/`: @@ -349,7 +358,6 @@ Create links to the different languages you support so users can choose the lang export const showDefaultLang = false; ``` - 3. Add a helper function to `src/i18n/utils.ts`, to translate paths based on the current language: ```js @@ -408,11 +416,13 @@ Create links to the different languages you support so users can choose the lang ))} ``` + ### Translate Routes Translate the routes of your pages for each language. + 1. Add route mappings to `src/i18n/ui.ts`: ```ts @@ -498,6 +508,7 @@ Translate the routes of your pages for each language. ))} ``` + ## Resources - [Choosing a Language Tag](https://www.w3.org/International/questions/qa-choosing-language-tags) From 9ea2e7b2796543d7cd1cccac85869f0d8ef33928 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:54:53 -0300 Subject: [PATCH 41/66] Add Steps component to `external-links.mdx` (#8128) Co-authored-by: Sarah Rainsberger Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> --- src/content/docs/en/recipes/external-links.mdx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/content/docs/en/recipes/external-links.mdx b/src/content/docs/en/recipes/external-links.mdx index 77369e197fb21..678869369b3d5 100644 --- a/src/content/docs/en/recipes/external-links.mdx +++ b/src/content/docs/en/recipes/external-links.mdx @@ -4,16 +4,18 @@ description: Learn how to install a rehype plugin to add icons to external links i18nReady: true type: recipe --- - -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import { Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; Using a rehype plugin, you can identify and modify links in your Markdown files that point to external sites. This example adds icons to the end of each external link, so that visitors will know they are leaving your site. ## Prerequisites + - An Astro project using Markdown for content pages. ## Recipe + 1. Install the `rehype-external-links` plugin. @@ -56,10 +58,12 @@ Using a rehype plugin, you can identify and modify links in your Markdown files }, }); ``` + + :::note + The value of the `content` property is [not represented in the accessibility tree](https://developer.mozilla.org/en-US/docs/Web/CSS/content#accessibility_concerns). As such, it's best to make clear that the link is external in the surrounding content, rather than relying on the icon alone. + ::: + -:::note - The value of the `content` property is [not represented in the accessibility tree](https://developer.mozilla.org/en-US/docs/Web/CSS/content#accessibility_concerns). As such, it's best to make clear that the link is external in the surrounding content, rather than relying on the icon alone. -::: ## Resources - [rehype-external-links](https://www.npmjs.com/package/rehype-external-links) From b132694f5f3016f1fbc2c1ef382fd4fa69467842 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:56:02 -0300 Subject: [PATCH 42/66] Add Steps component to `storyblok.mdx` (#8072) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: Atharva Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/cms/storyblok.mdx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/content/docs/en/guides/cms/storyblok.mdx b/src/content/docs/en/guides/cms/storyblok.mdx index d59215169cf33..e022153ba0862 100644 --- a/src/content/docs/en/guides/cms/storyblok.mdx +++ b/src/content/docs/en/guides/cms/storyblok.mdx @@ -6,6 +6,7 @@ service: Storyblok stub: false i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' @@ -508,21 +509,25 @@ If your project is using Astro's default static mode, you will need to set up a To set up a webhook in Netlify: + 1. Go to your site dashboard and click on **Build & deploy**. 2. Under the **Continuous Deployment** tab, find the **Build hooks** section and click on **Add build hook**. 3. Provide a name for your webhook and select the branch you want to trigger the build on. Click on **Save** and copy the generated URL. + ##### Vercel To set up a webhook in Vercel: + 1. Go to your project dashboard and click on **Settings**. 2. Under the **Git** tab, find the **Deploy Hooks** section. 3. Provide a name for your webhook and the branch you want to trigger the build on. Click **Add** and copy the generated URL. + ##### Adding a webhook to Storyblok From 3f15a02558bed9a6bccdeee16760bdee925b9a15 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:56:43 -0300 Subject: [PATCH 43/66] Add Steps component to `strapi.mdx` (#8087) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> Co-authored-by: Atharva Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/cms/strapi.mdx | 141 +++++++++++----------- 1 file changed, 72 insertions(+), 69 deletions(-) diff --git a/src/content/docs/en/guides/cms/strapi.mdx b/src/content/docs/en/guides/cms/strapi.mdx index 1f3d83995cb51..bc79d661c71c8 100644 --- a/src/content/docs/en/guides/cms/strapi.mdx +++ b/src/content/docs/en/guides/cms/strapi.mdx @@ -6,7 +6,7 @@ service: Strapi stub: false i18nReady: true --- - +import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; @@ -146,78 +146,78 @@ You can modify this interface, or create multiple interfaces, to correspond to y ### Displaying a list of articles + 1. Update your home page `src/pages/index.astro` to display a list of blog posts, each with a description and a link to its own page. 2. Import the wrapper function and the interface. Add the following API call to fetch your articles and return a list: - - ```astro title="src/pages/index.astro" - --- - import fetchApi from '../lib/strapi'; - import type Article from '../interfaces/article'; - - const articles = await fetchApi({ - endpoint: 'articles', // the content type to fetch - wrappedByKey: 'data', // the key to unwrap the response - }); - --- - ``` - - The API call requests data from `http://localhost:1337/api/articles` and returns `articles`: an array of json objects representing your data: - - ```json - [ - { - id: 1, - attributes: { - title: "What's inside a Black Hole", - description: "Maybe the answer is in this article, or not...", - content: "Well, we don't know yet...", - slug: "what-s-inside-a-black-hole", - createdAt: "2023-05-28T13:19:46.421Z", - updatedAt: "2023-05-28T13:19:46.421Z", - publishedAt: "2023-05-28T13:19:45.826Z" - } - }, - // ... - ] - ``` + ```astro title="src/pages/index.astro" + --- + import fetchApi from '../lib/strapi'; + import type Article from '../interfaces/article'; + + const articles = await fetchApi({ + endpoint: 'articles', // the content type to fetch + wrappedByKey: 'data', // the key to unwrap the response + }); + --- + ``` + + The API call requests data from `http://localhost:1337/api/articles` and returns `articles`: an array of json objects representing your data: + + ```json + [ + { + id: 1, + attributes: { + title: "What's inside a Black Hole", + description: "Maybe the answer is in this article, or not...", + content: "Well, we don't know yet...", + slug: "what-s-inside-a-black-hole", + createdAt: "2023-05-28T13:19:46.421Z", + updatedAt: "2023-05-28T13:19:46.421Z", + publishedAt: "2023-05-28T13:19:45.826Z" + } + }, + // ... + ] + ``` 3. Using data from the `articles` array returned by the API, display your Strapi blog posts in a list. These posts will link to their own individual pages, which you will create in the next step. - - ```astro title="src/pages/index.astro" - --- - import fetchApi from '../lib/strapi'; - import type Article from '../interfaces/article'; - - const articles = await fetchApi({ - endpoint: 'articles?populate=image', - wrappedByKey: 'data', - }); - --- - - - - - Strapi & Astro - - - -
- -
- - - ``` + ```astro title="src/pages/index.astro" + --- + import fetchApi from '../lib/strapi'; + import type Article from '../interfaces/article'; + + const articles = await fetchApi({ + endpoint: 'articles?populate=image', + wrappedByKey: 'data', + }); + --- + + + + + Strapi & Astro + + + +
+ +
+ + + ``` + ### Generating article pages @@ -267,7 +267,6 @@ const article = Astro.props; Create the template for each page using the properties of each post object. - ```astro title="src/pages/blog/[slug].astro ins={21-43} --- import fetchApi from '../../lib/strapi'; @@ -401,21 +400,25 @@ If your project is using Astro's default static mode, you will need to set up a To set up a webhook in Netlify: + 1. Go to your site dashboard and click on **Build & deploy**. 2. Under the **Continuous Deployment** tab, find the **Build hooks** section and click on **Add build hook**. 3. Provide a name for your webhook and select the branch you want to trigger the build on. Click on **Save** and copy the generated URL. + ##### Vercel To set up a webhook in Vercel: + 1. Go to your project dashboard and click on **Settings**. 2. Under the **Git** tab, find the **Deploy Hooks** section. 3. Provide a name for your webhook and the branch you want to trigger the build on. Click **Add** and copy the generated URL. + ##### Adding a webhook to Strapi From 385ed6056298d6017bc58604b924781ef98c2c7f Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:57:20 -0300 Subject: [PATCH 44/66] Add Steps component to `spinal.mdx` (#8073) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> Co-authored-by: Atharva Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/cms/spinal.mdx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/content/docs/en/guides/cms/spinal.mdx b/src/content/docs/en/guides/cms/spinal.mdx index 0567f2cb71636..65ff12e24b4fb 100644 --- a/src/content/docs/en/guides/cms/spinal.mdx +++ b/src/content/docs/en/guides/cms/spinal.mdx @@ -6,14 +6,19 @@ stub: true service: Spinal i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; [Spinal](https://spinalcms.com/cms-for-astro/) is a commercial, SaaS-focused, Git-based CMS. ## Getting started + 1. [Create a Spinal account](https://spinalcms.com/signup/). + 2. Connect your GitHub account to Spinal. + 3. Select your Astro repository when prompted. + All Markdown content from the selected folder will be imported into your Spinal account and is ready to be edited. From 2cc641534d3ce3c05cc794c287af3898f4f0a411 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:57:40 -0300 Subject: [PATCH 45/66] Add Steps component to `build-custom-img-component.mdx` (#8119) Co-authored-by: Sarah Rainsberger Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> --- src/content/docs/en/recipes/build-custom-img-component.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/content/docs/en/recipes/build-custom-img-component.mdx b/src/content/docs/en/recipes/build-custom-img-component.mdx index 21dd28e8bc32c..8f7a01e317c17 100644 --- a/src/content/docs/en/recipes/build-custom-img-component.mdx +++ b/src/content/docs/en/recipes/build-custom-img-component.mdx @@ -4,6 +4,7 @@ description: Learn how to build a custom image component that supports media que i18nReady: true type: recipe --- +import { Steps } from '@astrojs/starlight/components'; Astro provides two built-in components that you can use to display and optimize your images. The `` component allows you to display responsive images and work with different formats and sizes. The `` component will optimize your images and allow you to pass in different formats and quality properties. @@ -13,6 +14,7 @@ In this recipe, you will use the [`getImage()` function](/en/guides/images/#gene ## Recipe + 1. Create a new Astro component and import the `getImage()` function ```astro title="src/components/MyCustomImageComponent.astro" @@ -126,3 +128,4 @@ In this recipe, you will use the [`getImage()` function](/en/guides/images/#gene /> ``` + From a925b008787d08201c87de87d85ad108fe72c1f6 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:58:01 -0300 Subject: [PATCH 46/66] Add Steps component to `keystatic.mdx` (#8078) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/cms/keystatic.mdx | 41 ++++++++++---------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/src/content/docs/en/guides/cms/keystatic.mdx b/src/content/docs/en/guides/cms/keystatic.mdx index 06fbe24b05ec0..50bd7590a1d0d 100644 --- a/src/content/docs/en/guides/cms/keystatic.mdx +++ b/src/content/docs/en/guides/cms/keystatic.mdx @@ -5,8 +5,9 @@ type: cms service: Keystatic i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; [Keystatic](https://keystatic.com/) is an open source, headless content-management system that allows you to structure your content and sync it with GitHub. @@ -157,30 +158,30 @@ Visit `http://127.0.0.1:4321/keystatic` in the browser to see the Keystatic Admi ## Creating a new post + 1. In the Keystatic Admin UI dashboard, click on the “Posts” collection. - 2. Use the button to create a new post. Add the title "My First Post" and some content, then save the post. - - 3. This post should now be visible from your "Posts" collection. You can view and edit your individual posts from this dashboard page. - - 4. Return to view your Astro project files. You will now find a new `.mdoc` file inside the `src/content/posts` directory for this new post: +2. Use the button to create a new post. Add the title "My First Post" and some content, then save the post. - - - src/ - - content/ - - posts/ - - **my-first-post.mdoc** - +3. This post should now be visible from your "Posts" collection. You can view and edit your individual posts from this dashboard page. -5. Navigate to that file in your code editor and verify that you can see the Markdown content you entered. For example: +4. Return to view your Astro project files. You will now find a new `.mdoc` file inside the `src/content/posts` directory for this new post: + + - src/ + - content/ + - posts/ + - **my-first-post.mdoc** + - ```markdown - --- - title: My First Post - --- - - This is my very first post. I am **super** excited! - ``` +5. Navigate to that file in your code editor and verify that you can see the Markdown content you entered. For example: + ```markdown + --- + title: My First Post + --- + + This is my very first post. I am **super** excited! + ``` + ## Rendering Keystatic content From fb84ed80e57d0a959a3b37f6ec4e4aeb85262863 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:58:33 -0300 Subject: [PATCH 47/66] Add Steps component to `github.mdx` (#8097) Co-authored-by: Houston (Bot) <108291165+astrobot-houston@users.noreply.github.com> Co-authored-by: Sergio A. Arevalo Soria Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> --- src/content/docs/en/guides/deploy/github.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/content/docs/en/guides/deploy/github.mdx b/src/content/docs/en/guides/deploy/github.mdx index 148bd42d3f090..c39a8fe875068 100644 --- a/src/content/docs/en/guides/deploy/github.mdx +++ b/src/content/docs/en/guides/deploy/github.mdx @@ -4,6 +4,7 @@ description: How to deploy your Astro site to the web using GitHub Pages. type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; You can use [GitHub Pages](https://pages.github.com/) to host an Astro website directly from a repository on [GitHub.com](https://github.com/). @@ -35,7 +36,6 @@ The value for `site` must be one of the following: - The following URL based on your username: `https://.github.io` - The random URL autogenerated for a [GitHub Organization's private page](https://docs.github.com/en/enterprise-cloud@latest/pages/getting-started-with-github-pages/changing-the-visibility-of-your-github-pages-site): `https://.pages.github.io/` - #### `base` A value for `base` may be required so that Astro will treat your repository name (e.g. `/my-repo`) as the root of your website. @@ -83,6 +83,7 @@ export default defineConfig({ ## Configure a GitHub Action + 1. Create a new file in your project at `.github/workflows/deploy.yml` and paste in the YAML below. ```yaml title="deploy.yml" @@ -140,6 +141,6 @@ export default defineConfig({ 3. Choose **GitHub Actions** as the **Source** of your site. 4. Commit the new workflow file and push it to GitHub. - + Your site should now be published! When you push changes to your Astro project’s repository, the GitHub Action will automatically deploy them for you. From 12bc52161dfc72f71adf80ea72b6ae7a9349f5b6 Mon Sep 17 00:00:00 2001 From: Eduardo Pereira Date: Thu, 2 May 2024 13:58:52 -0300 Subject: [PATCH 48/66] Add Steps component to `from-nuxtjs.mdx` (#8118) Co-authored-by: Sarah Rainsberger Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com> Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com> --- .../docs/en/guides/migrate-to-astro/from-nuxtjs.mdx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/content/docs/en/guides/migrate-to-astro/from-nuxtjs.mdx b/src/content/docs/en/guides/migrate-to-astro/from-nuxtjs.mdx index acb0379fda797..06441f92d22ff 100644 --- a/src/content/docs/en/guides/migrate-to-astro/from-nuxtjs.mdx +++ b/src/content/docs/en/guides/migrate-to-astro/from-nuxtjs.mdx @@ -6,8 +6,9 @@ stub: false framework: NuxtJS i18nReady: true --- -import AstroVueTabs from '~/components/tabs/AstroVueTabs.astro' -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import { Steps } from '@astrojs/starlight/components'; +import AstroVueTabs from '~/components/tabs/AstroVueTabs.astro'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import { FileTree } from '@astrojs/starlight/components'; Here are some key concepts and migration strategies to help you get started. Use the rest of our docs and our [Discord community](https://astro.build/chat) to keep going! @@ -89,6 +90,7 @@ You may find it useful to install some of [Astro's optional integrations](/en/gu ### Put your source code in `src` + 1. **Move** the contents of Nuxt's `static/` folder into `public/`. Astro uses the `public/` directory for static assets, similar to Nuxt's `static/` folder. @@ -96,6 +98,7 @@ You may find it useful to install some of [Astro's optional integrations](/en/gu 2. **Copy or Move** Nuxt's other files and folders (e.g. `pages`, `layouts` etc.) into Astro's `src/` folder. Like Nuxt, Astro's `src/pages/` folder is a special folder used for file-based routing. All other folders are optional, and you can organize the contents of your `src/` folder any way you like. Other common folders in Astro projects include `src/layouts/`, `src/components`, `src/styles`, `src/scripts`. + ### Convert Vue SFC pages to `.astro` files @@ -251,7 +254,6 @@ To convert to Astro, change this underscored dynamic path property (e.g. `_name. - astro.config.mjs - #### Markdown and MDX pages Astro has built-in support for Markdown and an optional integration for MDX files. You can reuse any existing Markdown and MDX pages, but they may require some adjustments to their frontmatter, such as adding [Astro's special `layout` frontmatter property](/en/basics/layouts/#markdownmdx-layouts). @@ -458,8 +460,6 @@ Nuxt utilizes Vue's component styling to generate a page's style. ``` - - #### Pre-processor support [Astro supports the most popular CSS preprocessors](/en/guides/styling/#css-preprocessors) by installing them as a dev dependency. For example, to use SCSS: @@ -512,6 +512,7 @@ Here is an example of Nuxt Pokédex data fetch converted to Astro. Here's how to recreate that in `src/pages/index.astro`, replacing `asyncData()` with `fetch()`. + 1. Identify the `