0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-30 22:03:56 -05:00

chore: update docs to new defaults (#133)

This commit is contained in:
Nate Moore 2021-04-27 13:42:03 -05:00 committed by GitHub
parent 41c64b30af
commit 73b7827b40
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 26 additions and 26 deletions

View file

@ -69,10 +69,10 @@ export default {
### 🚀 Basic Usage ### 🚀 Basic Usage
Even though nearly-everything [is configurable][config], we recommend starting out by creating an `astro/` folder in your project with the following structure: Even though nearly-everything [is configurable][config], we recommend starting out by creating an `src/` folder in your project with the following structure:
``` ```
├── astro/ ├── src/
│ ├── components/ │ ├── components/
│ └── pages/ │ └── pages/
│ └── index.astro │ └── index.astro
@ -80,17 +80,17 @@ Even though nearly-everything [is configurable][config], we recommend starting o
└── package.json └── package.json
``` ```
- `astro/components/*`: where your reusable components go. You can place these anywhere, but we recommend a single folder to keep them organized. - `src/components/*`: where your reusable components go. You can place these anywhere, but we recommend a single folder to keep them organized.
- `astro/pages/*`: this is a special folder where your [routing][routing] lives. - `src/pages/*`: this is a special folder where your [routing][routing] lives.
#### 🚦 Routing #### 🚦 Routing
Routing happens in `astro/pages/*`. Every `.astro` or `.md.astro` file in this folder corresponds with a public URL. For example: Routing happens in `src/pages/*`. Every `.astro` or `.md.astro` file in this folder corresponds with a public URL. For example:
| Local file | Public URL | | Local file | Public URL |
| :--------------------------------------- | :------------------------------ | | :--------------------------------------- | :------------------------------ |
| `astro/pages/index.astro` | `/index.html` | | `src/pages/index.astro` | `/index.html` |
| `astro/pages/post/my-blog-post.md.astro` | `/post/my-blog-post/index.html` | | `src/pages/post/my-blog-post.md.astro` | `/post/my-blog-post/index.html` |
#### 🗂 Static Assets #### 🗂 Static Assets
@ -153,7 +153,7 @@ Fetching data is what Astro is all about! Whether your data lives remotely in an
For fetching from a remote API, use a native JavaScript `fetch()` ([docs][fetch-js]) as you are used to. For fetching local content, use `Astro.fetchContent()` ([docs][fetch-content]). For fetching from a remote API, use a native JavaScript `fetch()` ([docs][fetch-js]) as you are used to. For fetching local content, use `Astro.fetchContent()` ([docs][fetch-content]).
```js ```js
// astro/components/MyComponent.Astro // src/components/MyComponent.Astro
--- ---
// Example 1: fetch remote data from your own API // Example 1: fetch remote data from your own API

View file

@ -139,7 +139,7 @@ export async function createCollection() {
} }
``` ```
Astro will generate an RSS 2.0 feed at `/feed/[collection].xml` (for example, `/astro/pages/$podcast.xml` would generate `/feed/podcast.xml`). Astro will generate an RSS 2.0 feed at `/feed/[collection].xml` (for example, `/src/pages/$podcast.xml` would generate `/feed/podcast.xml`).
⚠️ Even though Astro will create the RSS feed for you, youll still need to add `<link>` tags manually in your `<head>` HTML: ⚠️ Even though Astro will create the RSS feed for you, youll still need to add `<link>` tags manually in your `<head>` HTML:

View file

@ -32,7 +32,7 @@ Print the help message and exit.
#### `astro dev` #### `astro dev`
Runs the Astro development server. This starts an HTTP server that responds to requests for pages stored in `astro/pages` (or which folder is specified in your [configuration](../README.md##%EF%B8%8F-configuration)). Runs the Astro development server. This starts an HTTP server that responds to requests for pages stored in `src/pages` (or which folder is specified in your [configuration](../README.md##%EF%B8%8F-configuration)).
See the [dev server](./dev.md) docs for more information on how the dev server works. See the [dev server](./dev.md) docs for more information on how the dev server works.
@ -40,4 +40,4 @@ __Flags__
##### `--port` ##### `--port`
Specifies should port to run on. Defaults to `3000`. Specifies should port to run on. Defaults to `3000`.

View file

@ -13,7 +13,7 @@ By default, any Astro component can fetch data from any API or local `*.md` file
Lets pretend we have some blog posts written already. This is our starting project structure: Lets pretend we have some blog posts written already. This is our starting project structure:
``` ```
└── astro/ └── src/
└── pages/ └── pages/
└── post/ └── post/
└── (blog content) └── (blog content)
@ -25,10 +25,10 @@ The first step in adding some dynamic collections is deciding on a URL schema. F
- `/posts/:page`: A list page of all blog posts, paginated, and sorted most recent first - `/posts/:page`: A list page of all blog posts, paginated, and sorted most recent first
- `/tag/:tag`: All blog posts, filtered by a specific tag - `/tag/:tag`: All blog posts, filtered by a specific tag
Because `/post/:post` references the static files we have already, that doesnt need to be a collection. But we will need collections for `/posts/:page` and `/tag/:tag` because those will be dynamically generated. For both collections well create a `/astro/pages/$[collection].astro` file. This is our new structure: Because `/post/:post` references the static files we have already, that doesnt need to be a collection. But we will need collections for `/posts/:page` and `/tag/:tag` because those will be dynamically generated. For both collections well create a `/src/pages/$[collection].astro` file. This is our new structure:
```diff ```diff
└── astro/ └── src/
└── pages/ └── pages/
├── post/ ├── post/
│ └── (blog content) │ └── (blog content)
@ -76,7 +76,7 @@ published_at: 2021-03-01 09:34:00
Theres nothing special or reserved about any of these names; youre free to name everything whatever youd like, or have as much or little frontmatter as you need. Theres nothing special or reserved about any of these names; youre free to name everything whatever youd like, or have as much or little frontmatter as you need.
```jsx ```jsx
// /astro/pages/$posts.astro // /src/pages/$posts.astro
--- ---
export let collection: any; export let collection: any;
@ -136,10 +136,10 @@ Lets walk through some of the key parts:
#### Example 2: Advanced filtering & pagination #### Example 2: Advanced filtering & pagination
In our earlier example, we covered simple pagination for `/posts/1`, but wed still like to make `/tag/:tag/1` and `/year/:year/1`. To do that, well create 2 more collections: `/astro/pages/$tag.astro` and `astro/pages/$year.astro`. Assume that the markup is the same, but weve expanded the `createCollection()` function with more data. In our earlier example, we covered simple pagination for `/posts/1`, but wed still like to make `/tag/:tag/1` and `/year/:year/1`. To do that, well create 2 more collections: `/src/pages/$tag.astro` and `src/pages/$year.astro`. Assume that the markup is the same, but weve expanded the `createCollection()` function with more data.
```diff ```diff
// /astro/pages/$tag.astro // /src/pages/$tag.astro
--- ---
import Pagination from '../components/Pagination.astro'; import Pagination from '../components/Pagination.astro';
import PostPreview from '../components/PostPreview.astro'; import PostPreview from '../components/PostPreview.astro';

View file

@ -14,10 +14,10 @@ The dev server will serve the following special routes:
### /400 ### /400
This is a custom __400__ status code page. You can add this route by adding a page component to your `astro/pages` folder: This is a custom __400__ status code page. You can add this route by adding a page component to your `src/pages` folder:
``` ```
├── astro/ ├── src/
│ ├── components/ │ ├── components/
│ └── pages/ │ └── pages/
│ └── 400.astro │ └── 400.astro
@ -27,10 +27,10 @@ For any URL you visit that doesn't have a corresponding page, the `400.astro` fi
### /500 ### /500
This is a custom __500__ status code page. You can add this route by adding a page component to your `astro/pages` folder: This is a custom __500__ status code page. You can add this route by adding a page component to your `src/pages` folder:
```astro ```astro
├── astro/ ├── src/
│ ├── components/ │ ├── components/
│ └── pages/ │ └── pages/
│ └── 500.astro │ └── 500.astro
@ -48,4 +48,4 @@ const error = Astro.request.url.searchParams.get('error');
<strong>{error}</strong> <strong>{error}</strong>
``` ```
A default error page is included with Astro so you will get pretty error messages even without adding a custom 500 page. A default error page is included with Astro so you will get pretty error messages even without adding a custom 500 page.

View file

@ -18,7 +18,7 @@ Styling in Astro is meant to be as flexible as youd like it to be! The follow
Styling in an Astro component is done by adding a `<style>` tag anywhere. By default, all styles are **scoped**, meaning they only apply to the current component. To create global styles, add a `:global()` wrapper around a selector (the same as if you were using [CSS Modules][css-modules]). Styling in an Astro component is done by adding a `<style>` tag anywhere. By default, all styles are **scoped**, meaning they only apply to the current component. To create global styles, add a `:global()` wrapper around a selector (the same as if you were using [CSS Modules][css-modules]).
```html ```html
<!-- astro/components/MyComponent.astro --> <!-- src/components/MyComponent.astro -->
<style> <style>
/* Scoped class selector within the component */ /* Scoped class selector within the component */

View file

@ -40,7 +40,7 @@ const logging: LogOptions = {
dest: defaultLogDestination, dest: defaultLogDestination,
}; };
/** Return contents of astro/pages */ /** Return contents of src/pages */
async function allPages(root: URL) { async function allPages(root: URL) {
const api = new fdir() const api = new fdir()
.filter((p) => /\.(astro|md)$/.test(p)) .filter((p) => /\.(astro|md)$/.test(p))

View file

@ -23,8 +23,8 @@ const crawler = new fdir();
function globSearch(spec: string, { filename }: { filename: string }): string[] { function globSearch(spec: string, { filename }: { filename: string }): string[] {
try { try {
// Note: fdirs glob requires you to do some work finding the closest non-glob folder. // Note: fdirs glob requires you to do some work finding the closest non-glob folder.
// For example, this fails: .glob("./post/*.md").crawl("/…/astro/pages") ❌ // For example, this fails: .glob("./post/*.md").crawl("/…/src/pages") ❌
// …but this doesnt: .glob("*.md").crawl("/…/astro/pages/post") ✅ // …but this doesnt: .glob("*.md").crawl("/…/src/pages/post") ✅
let globDir = ''; let globDir = '';
let glob = spec; let glob = spec;
for (const part of spec.split('/')) { for (const part of spec.split('/')) {