michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[ci] yarn format

Browse source
This commit is contained in:
FredKSchott 2021-07-14 17:43:06 +00:00 • committed by GitHub Actions
parent d40edb0b67
commit 1583ef173a
22 changed files with 62 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
docs/core-concepts/astro-components.md
View file

@ -36,7 +36,6 @@ CSS rules inside of a `<style>` tag are automatically scoped to that component.
For best results, you should only have one `<style>` tag per-Astro component. This isn’t necessarily a limitation, but it will often result in better-optimized CSS in your final build. When you're working with pages, the `<style>` tag can go nested inside of your page `<head>`. For standalone components, the `<style>` tag can go at the top-level of your template. For best results, you should only have one `<style>` tag per-Astro component. This isn’t necessarily a limitation, but it will often result in better-optimized CSS in your final build. When you're working with pages, the `<style>` tag can go nested inside of your page `<head>`. For standalone components, the `<style>` tag can go at the top-level of your template.
```html ```html
<!-- Astro Component CSS example --> <!-- Astro Component CSS example -->
<style> <style>
@ -53,9 +52,13 @@ For best results, you should only have one `<style>` tag per-Astro component. Th
<!-- Astro Page CSS example --> <!-- Astro Page CSS example -->
<html> <html>
<head> <head>
<style>...</style> <style>
...
</style>
</head> </head>
<body>...</body> <body>
...
</body>
</html> </html>
``` ```
@ -120,6 +123,7 @@ const name = "Your name here";
<h1>Hello {name}!</h1> <h1>Hello {name}!</h1>
</div> </div>
``` ```
#### Dynamic Attributes #### Dynamic Attributes
```astro ```astro
@ -145,7 +149,6 @@ const items = ["Dog", "Cat", "Platipus"];
</ul> </ul>
``` ```
### Component Props ### Component Props
An Astro component can define and accept props. Props are available on the `Astro.props` global in your frontmatter script. An Astro component can define and accept props. Props are available on the `Astro.props` global in your frontmatter script.
@ -295,7 +298,6 @@ Astro provides a `<slot />` component so that you can control where any children
<!-- TODO: https://github.com/snowpackjs/astro/issues/360 <!-- TODO: https://github.com/snowpackjs/astro/issues/360
Document Named Slots --> Document Named Slots -->
## Comparing `.astro` versus `.jsx` ## Comparing `.astro` versus `.jsx`
`.astro` files can end up looking very similar to `.jsx` files, but there are a few key differences. Here's a comparison between the two formats. `.astro` files can end up looking very similar to `.jsx` files, but there are a few key differences. Here's a comparison between the two formats.
@ -351,7 +353,4 @@ import thumbnailSrc from './thumbnail.png';
If you’d prefer to organize assets alongside Astro components, you may import the file in JavaScript inside the component script. This works as intended but this makes `thumbnail.png` harder to reference in other parts of your app, as its final URL isn’t easily-predictable (unlike assets in `public/*`, where the final URL is guaranteed to never change). If you’d prefer to organize assets alongside Astro components, you may import the file in JavaScript inside the component script. This works as intended but this makes `thumbnail.png` harder to reference in other parts of your app, as its final URL isn’t easily-predictable (unlike assets in `public/*`, where the final URL is guaranteed to never change).
[code-ext]: https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode [code-ext]: https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode

1
docs/core-concepts/collections.md
View file

@ -208,4 +208,3 @@ export async function createCollection() {
- API Reference: [collection](/reference/api-reference#collections-api) - API Reference: [collection](/reference/api-reference#collections-api)
- API Reference: [createCollection()](/reference/api-reference#createcollection) - API Reference: [createCollection()](/reference/api-reference#createcollection)
- API Reference: [Creating an RSS feed](/reference/api-reference#rss-feed) - API Reference: [Creating an RSS feed](/reference/api-reference#rss-feed)

6
docs/core-concepts/component-hydration.md
View file

@ -51,8 +51,6 @@ Besides the obvious performance benefits of sending less JavaScript down to the
![diagram](https://res.cloudinary.com/wedding-website/image/upload/v1596766231/islands-architecture-1.png) ![diagram](https://res.cloudinary.com/wedding-website/image/upload/v1596766231/islands-architecture-1.png)
## Hydrate Interactive Components ## Hydrate Interactive Components
Astro renders every component on the server **at build time**. To hydrate components on the client **at runtime**, you may use any of the following `client:*` directives. A directive is a component attribute (always with a `:`) which tells Astro how your component should be rendered. Astro renders every component on the server **at build time**. To hydrate components on the client **at runtime**, you may use any of the following `client:*` directives. A directive is a component attribute (always with a `:`) which tells Astro how your component should be rendered.
@ -68,15 +66,19 @@ import MyReactComponent from '../components/MyReactComponent.jsx';
``` ```
### `<MyComponent client:load />` ### `<MyComponent client:load />`
Hydrate the component on page load. Hydrate the component on page load.
### `<MyComponent client:idle />` ### `<MyComponent client:idle />`
Hydrate the component as soon as main thread is free (uses [requestIdleCallback()][mdn-ric]). Hydrate the component as soon as main thread is free (uses [requestIdleCallback()][mdn-ric]).
### `<MyComponent client:visible />` ### `<MyComponent client:visible />`
Hydrate the component as soon as the element enters the viewport (uses [IntersectionObserver][mdn-io]). Useful for content lower down on the page. Hydrate the component as soon as the element enters the viewport (uses [IntersectionObserver][mdn-io]). Useful for content lower down on the page.
### `<MyComponent client:media={QUERY} />` ### `<MyComponent client:media={QUERY} />`
Hydrate the component as soon as the browser matches the given media query (uses [matchMedia][mdn-mm]). Useful for sidebar toggles, or other elements that should only display on mobile or desktop devices. Hydrate the component as soon as the browser matches the given media query (uses [matchMedia][mdn-mm]). Useful for sidebar toggles, or other elements that should only display on mobile or desktop devices.
## Can I Hydrate Astro Components? ## Can I Hydrate Astro Components?

3
docs/core-concepts/layouts.md
View file

@ -54,12 +54,10 @@ import BaseLayout from '../layouts/BaseLayout.astro'
</BaseLayout> </BaseLayout>
``` ```
## Nesting Layouts ## Nesting Layouts
You can nest layouts when you want to create more specific page types without copy-pasting. It is common in Astro to have one generic `BaseLayout` and then many more specific layouts (`PostLayout`, `ProductLayout`, etc.) that reuse and build on top of it. You can nest layouts when you want to create more specific page types without copy-pasting. It is common in Astro to have one generic `BaseLayout` and then many more specific layouts (`PostLayout`, `ProductLayout`, etc.) that reuse and build on top of it.
```astro ```astro
--- ---
// src/layouts/PostLayout.astro // src/layouts/PostLayout.astro
@ -126,6 +124,7 @@ Layouts are essential for Markdown files. Markdown files can declare a layout in
title: Blog Post title: Blog Post
layout: ../layouts/PostLayout.astro layout: ../layouts/PostLayout.astro
--- ---
This blog post will be **rendered** inside of the `<PostLayout />` layout. This blog post will be **rendered** inside of the `<PostLayout />` layout.
``` ```

1
docs/core-concepts/project-structure.md
View file

@ -10,6 +10,7 @@ Astro includes an opinionated folder layout for your project. Every Astro projec
- `package.json` - A project manifest. - `package.json` - A project manifest.
The easiest way to set up your new project is with `npm init astro`. Check out our [Installation Guide](/quick-start) for a walkthrough of how to set up your project automatically (with `npm init astro`) or manually. The easiest way to set up your new project is with `npm init astro`. Check out our [Installation Guide](/quick-start) for a walkthrough of how to set up your project automatically (with `npm init astro`) or manually.
## Project Structure ## Project Structure
``` ```

2
docs/guides/data-fetching.md
View file

@ -11,7 +11,6 @@ Astro pages have access to the global `fetch()` function in their setup script.
Even though Astro component scripts run inside of Node.js (and not in the browser) Astro provides this native API so that you can fetch data at page build time. Even though Astro component scripts run inside of Node.js (and not in the browser) Astro provides this native API so that you can fetch data at page build time.
```astro ```astro
--- ---
const response = await fetch('http://example.com/movies.json'); const response = await fetch('http://example.com/movies.json');
@ -22,6 +21,7 @@ console.log(data);
<!-- Output the result to the page --> <!-- Output the result to the page -->
<div>{JSON.stringify(data)}</div> <div>{JSON.stringify(data)}</div>
``` ```
### Top-level await ### Top-level await
`await` is another native JavaScript feature that lets you await the response of some asynchronous promise ([MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)). Astro supports `await` in the top-level of your component script. `await` is another native JavaScript feature that lets you await the response of some asynchronous promise ([MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)). Astro supports `await` in the top-level of your component script.

9
docs/guides/deploy.md
View file

@ -20,8 +20,6 @@ The following guides are based on some shared assumptions:
} }
``` ```
## Building The App ## Building The App
You may run `npm run build` command to build the app. You may run `npm run build` command to build the app.
@ -65,7 +63,8 @@ By default, the build output will be placed at `dist/`. You may deploy this `dis
cd - cd -
``` ```
> You can also run the above script in your CI setup to enable automatic deployment on each push.
> You can also run the above script in your CI setup to enable automatic deployment on each push.
### GitHub Actions ### GitHub Actions
@ -138,8 +137,8 @@ Then, set up a new project on [Netlify](https://netlify.com) from your chosen Gi
If you don't want to use the `netlify.toml`, when you go to [Netlify](https://netlify.com) and set up up a new project from Git, input the following settings: If you don't want to use the `netlify.toml`, when you go to [Netlify](https://netlify.com) and set up up a new project from Git, input the following settings:
- **Build Command:** `astro build` or `npm run build` - **Build Command:** `astro build` or `npm run build`
- **Publish directory:** `dist` - **Publish directory:** `dist`
Then hit the deploy button. Then hit the deploy button.

2
docs/guides/imports.md
View file

@ -29,7 +29,7 @@ export function getUser() {
} }
// src/index.js // src/index.js
import {getUser} from './user.js'; import { getUser } from './user.js';
``` ```
All browsers now support ESM, so Astro is able to ship this code directly to the browser during development. All browsers now support ESM, so Astro is able to ship this code directly to the browser during development.

2
docs/guides/styling.md
View file

@ -32,7 +32,6 @@ To create global styles, add a `:global()` wrapper around a selector (the same a
📚 Read our full guide on [Astro component syntax](/core-concepts/astro-components#css-styles) to learn more about using the `<style>` tag. 📚 Read our full guide on [Astro component syntax](/core-concepts/astro-components#css-styles) to learn more about using the `<style>` tag.
## Cross-Browser Compatibility ## Cross-Browser Compatibility
We also automatically add browser prefixes using [Autoprefixer][autoprefixer]. By default, Astro loads the [Browserslist defaults][browserslist-defaults], but you may also specify your own by placing a [Browserslist][browserslist] file in your project root. We also automatically add browser prefixes using [Autoprefixer][autoprefixer]. By default, Astro loads the [Browserslist defaults][browserslist-defaults], but you may also specify your own by placing a [Browserslist][browserslist] file in your project root.
@ -57,6 +56,7 @@ All styles in Astro are automatically [**autoprefixed**](#cross-browser-compatib
--- ---
## Frameworks and Libraries ## Frameworks and Libraries
### 📘 React / Preact ### 📘 React / Preact
`.jsx` files support both global CSS and CSS Modules. To enable the latter, use the `.module.css` extension (or `.module.scss`/`.module.sass` if using Sass). `.jsx` files support both global CSS and CSS Modules. To enable the latter, use the `.module.css` extension (or `.module.scss`/`.module.sass` if using Sass).

1
docs/installation.md
View file

@ -90,4 +90,3 @@ Success! You're now ready to start developing! Jump over to our [Quickstart Guid
📚 Learn more about Astro's project structure in our [Project Structure guide](/core-concepts/project-structure). 📚 Learn more about Astro's project structure in our [Project Structure guide](/core-concepts/project-structure).
📚 Learn more about Astro's component syntax in our [Astro Components guide](/core-concepts/astro-components). 📚 Learn more about Astro's component syntax in our [Astro Components guide](/core-concepts/astro-components).
📚 Learn more about Astro's file-based routing in our [Routing guide](core-concepts/astro-pages). 📚 Learn more about Astro's file-based routing in our [Routing guide](core-concepts/astro-pages).

2
docs/reference/api-reference.md
View file

@ -65,6 +65,7 @@ const data = Astro.fetchContent('../pages/post/*.md'); // returns an array of po
`Astro.site` returns a `URL` made from `buildOptions.site` in your Astro config. If undefined, this will return a URL generated from `localhost`. `Astro.site` returns a `URL` made from `buildOptions.site` in your Astro config. If undefined, this will return a URL generated from `localhost`.
## Collections API ## Collections API
### `collection` prop ### `collection` prop
```jsx ```jsx
@ -176,4 +177,3 @@ export default function () {
``` ```
[canonical]: https://en.wikipedia.org/wiki/Canonical_link_element [canonical]: https://en.wikipedia.org/wiki/Canonical_link_element

2
docs/reference/builtin-components.md
View file

@ -17,8 +17,8 @@ import { Markdown } from 'astro/components';
``` ```
See our [Markdown Guide](/guides/markdown-content) for more info. See our [Markdown Guide](/guides/markdown-content) for more info.
<!-- TODO: We should move some of the specific component info here. -->
<!-- TODO: We should move some of the specific component info here. -->
## `<Prism />` ## `<Prism />`

1
docs/reference/cli-reference.md
View file

@ -21,7 +21,6 @@ Specifies should port to run on. Defaults to `3000`.
Builds your site for production. Builds your site for production.
## Global Flags ## Global Flags
### `--config path` ### `--config path`