Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Steps component to v1.mdx #8110

Merged
merged 1 commit into from
May 2, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 10 additions & 15 deletions src/content/docs/en/guides/upgrade-to/v1.mdx
Original file line number Diff line number Diff line change
@@ -3,9 +3,8 @@ title: Legacy v0.x Upgrade Guide
description: Archived guide documenting changes between pre-v1 versions of Astro
i18nReady: false
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'


import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

This guide will help you upgrade through breaking changes in pre-v1 versions of Astro.

@@ -37,7 +36,6 @@ You can update your project's version of Astro to the latest version using your
</Fragment>
</PackageManagerTabs>


Read the guide below for major highlights and instructions on how to handle breaking changes.

## Astro 1.0
@@ -100,6 +98,7 @@ To make migrating easier, a new `legacy.astroFlavoredMarkdown` flag (removed in

If you're not familiar with MDX, here are some steps you can follow to quickly convert an existing "Astro Flavored Markdown" file to MDX. As you learn more about MDX, feel free to explore other ways of writing your pages!

<Steps>
1. Install the [`@astrojs/mdx`](/en/guides/integrations-guide/mdx/) integration.

2. Change your existing `.md` file extensions to `.mdx`
@@ -150,6 +149,7 @@ If you're not familiar with MDX, here are some steps you can follow to quickly c

<About />
```
</Steps>

:::tip
While you are transitioning to MDX, you may wish to enable the `legacy.astroFlavoredMarkdown` flag (removed in v2.0) and include both **`.md` and `.mdx`** files, so that your site continues to function normally even before all your files have been converted. Here is one way you can do that:
@@ -228,7 +228,6 @@ This includes a few changes to be aware of:
- New `<style is:inline>` directive, to leave a style tag inline in the page template (similar to previous `<script>` behavior).
- New `<style is:global>` directive to replace `<style global>` in a future release.


```js del={2} ins={4}
// v0.25
<script hoist type="module">
@@ -242,7 +241,6 @@ Read [RFC0016](https://github.com/withastro/rfcs/blob/main/proposals/0016-style-

### Updated `Astro.request` API


`Astro.request` has been changed from our custom object to a standard `Request` object. This is part of a project to use more web standard APIs, especially where SSR is concerned.

This includes a few changes to be aware of:
@@ -253,7 +251,6 @@ This includes a few changes to be aware of:

Read [RFC0018](https://github.com/withastro/rfcs/blob/main/proposals/0018-astro-request.md) for more background on these changes.


### Other Changes

- Improve `Astro.slots` API to support passing arguments to function-based slots. This allows for more ergonomic utility components that accept a callback function as a child.
@@ -304,7 +301,6 @@ export default {
}
```


| Deprecated Renderers on npm | v0.25+ Integrations on npm |
| --------------------------- | -------------------------- |
| @astrojs/renderer-react | @astrojs/react |
@@ -390,7 +386,6 @@ Importing CSS files should work anywhere that ESM imports are supported, includi

When a CSS file is imported using this method, any `@import` statements are also resolved and inlined into the imported CSS file. All `url()` references are also resolved relative to the source file, and any `url()` referenced assets will be included in the final build.


**2. Absolute URL Path**

**Example:** `<link href="/style.css">`
@@ -402,7 +397,6 @@ We recommend using the `import` approach over the absolute URL approach since it

#### How to Resolve JavaScript Files


**1. Absolute URL Path**

**Example:** `<script src="/some-external-script.js" />`
@@ -469,7 +463,6 @@ Previously, all `<script>` elements were read from the final HTML output and pro
</script>
```


## Migrate to v0.23

### Missing Sass Error
@@ -584,7 +577,6 @@ To learn more about Vite plugins, please visit their [plugin guide](https://vite
In prior releases, these were configured with `snowpackPlugin` or `snowpackPluginOptions`.
:::


### Aliasing

In Astro v0.21+, import aliases can be added from `tsconfig.json` or `jsconfig.json`.
@@ -624,14 +616,15 @@ Previously, you could create mini Astro Components inside of the Astro Frontmatt

To migrate to v0.21+, please convert all JSX Astro components (that is, any Astro components created inside of another component’s frontmatter) to standalone components.


### Styling Changes

#### Autoprefixer

Autoprefixer is no longer run by default. To enable:

<Steps>
1. Install the latest version (`npm install autoprefixer`)

2. Create a `postcss.config.cjs` file at the root of your project with:
```js
module.exports = {
@@ -640,12 +633,15 @@ Autoprefixer is no longer run by default. To enable:
},
};
```
</Steps>

#### Tailwind CSS

Ensure you have PostCSS installed. This was optional in previous releases, but is required now:

<Steps>
1. Install the latest version of postcss (`npm install -D postcss`)

2. Create a `postcss.config.cjs` file at the root of your project with:
```js
module.exports = {
@@ -655,7 +651,7 @@ Ensure you have PostCSS installed. This was optional in previous releases, but i
};
```
For more information, read the [Tailwind CSS documentation](https://tailwindcss.com/docs/installation#add-tailwind-as-a-post-css-plugin)

</Steps>

### Known Issues

@@ -670,5 +666,4 @@ const whereShouldIPutMyImports = "on top!"
---
```


[vite]: https://vitejs.dev