Skip to content

Commit

Permalink
Merge branch 'main' into i18n/fr-update-guides/server-side-rendering.mdx
Browse files Browse the repository at this point in the history
  • Loading branch information
yanthomasdev authored Oct 18, 2024
2 parents a7a8f4a + b9b592c commit 5dff275
Show file tree
Hide file tree
Showing 31 changed files with 1,785 additions and 417 deletions.
1 change: 1 addition & 0 deletions src/content/docs/en/community-resources/content.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ Have you published a recipe or guide for working with Astro? [Edit this page](ht
- [Add an RSS feed to Astro using Storyblok's stories](https://straffesites.com/en/blog/rss-feed-astro-storyblok)
- [How to Send Any Data to Your RSS Feed? A Guide with Astro + RSS](https://aritraroy.live/tutorial/blogs/2023/how-to-send-any-data-to-rss-feed/)
- [Adding RSS Feed Content and Fixing Markdown Image Paths in Astro](https://billyle.dev/posts/adding-rss-feed-content-and-fixing-markdown-image-paths-in-astro)
- [Create a full-content RSS feed using MDX and the Container API](https://blog.damato.design/posts/astro-rss-mdx/)
### Images
- [Add blog post images to your Astro RSS Feed](https://webreaper.dev/posts/astro-rss-feed-blog-post-images/)
- [Generate Open Graph images for an Astro blog](https://techsquidtv.com/blog/generating-open-graph-images-for-astro/)
Expand Down
22 changes: 11 additions & 11 deletions src/content/docs/en/guides/cms/drupal.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -105,12 +105,12 @@ Your content is fetched from a JSON:API URL.

The basic URL structure is: `/jsonapi/{entity_type_id}/{bundle_id}`

The URL is always prefixed by `jsonapi`
The URL is always prefixed by `jsonapi`.
- The `entity_type_id` refers to the Entity Type, such as node, block, user, etc.
- The `bundle_id` refers to the Entity Bundles. In the case of a Node entity type, the bundle could be article
- The `bundle_id` refers to the Entity Bundles. In the case of a Node entity type, the bundle could be article.
- In this case, to get the list of all articles, the URL will be `[DRUPAL_BASE_URL]/jsonapi/node/article`.

To retrieve an individual entity, the URL structure will be `/jsonapi/{entity_type_id}/{bundle_id}/{uuid}`, where the uuid is the UUID of the entity.For example the URL to get a specific article will be of the form `/jsonapi/node/article/2ee9f0ef-1b25-4bbe-a00f-8649c68b1f7e`.
To retrieve an individual entity, the URL structure will be `/jsonapi/{entity_type_id}/{bundle_id}/{uuid}`, where the uuid is the UUID of the entity. For example the URL to get a specific article will be of the form `/jsonapi/node/article/2ee9f0ef-1b25-4bbe-a00f-8649c68b1f7e`.

#### Retrieving only certain fields

Expand All @@ -127,14 +127,14 @@ Examples:
Add a filter to your request by adding the filter Query String.

The simplest, most common filter is a key-value filter:
GET: `/jsonapi/{entity_type_id}/{bundle_id}?filter[field_name]=value&filter[field_other]=value`

GET: `/jsonapi/{entity_type_id}/{bundle_id}?filter[field_name]=value&filter[field_other]=value`

Examples:
- `/jsonapi/node/article?filter[title]=Testing JSON:API&filter[status]=1`
- `/jsonapi/node/article/2ee9f0ef-1b25-4bbe-a00f-8649c68b1f7e?fields[node--article]=title&filter[title]=Testing JSON:API`

You can find more query options in the [JSON:API Documentation](https://www.drupal.org/docs/core-modules-and-themes/core-modules/jsonapi-module)
You can find more query options in the [JSON:API Documentation](https://www.drupal.org/docs/core-modules-and-themes/core-modules/jsonapi-module).

### Building a Drupal query

Expand Down Expand Up @@ -292,7 +292,7 @@ With the setup above, you are now able to create a blog that uses Drupal as the
}
```

3. Create the `getArticles()` function to get all published articles.
4. Create the `getArticles()` function to get all published articles.

```ts title="src/api/drupal.ts" ins={23-40}
import {Jsona} from "jsona";
Expand Down Expand Up @@ -339,7 +339,7 @@ With the setup above, you are now able to create a blog that uses Drupal as the

Now you can use the function `getArticles()` in an `.astro` component to get all published articles with data for each title, body, path and creation date.

4. Go to the Astro page where you will fetch data from Drupal. The following example creates an articles landing page at `src/pages/articles/index.astro`.
5. Go to the Astro page where you will fetch data from Drupal. The following example creates an articles landing page at `src/pages/articles/index.astro`.

Import the necessary dependencies and fetch all the entries from Drupal with a content type of `article` using `getArticles()` while passing the `DrupalNode` interface to type your response.

Expand Down Expand Up @@ -373,9 +373,9 @@ With the setup above, you are now able to create a blog that uses Drupal as the
- types.ts
</FileTree>

5. Add content to your page, such as a title. Use `articles.map()` to show your Drupal entries as line items in a list.
6. Add content to your page, such as a title. Use `articles.map()` to show your Drupal entries as line items in a list.

```astro title="src/pages/articles/index.astro" ins={12-28}
```astro title="src/pages/articles/index.astro" ins={12-29}
---
import {Jsona} from "jsona";
import {DrupalJsonApiParams} from "drupal-jsonapi-params";
Expand Down Expand Up @@ -492,7 +492,7 @@ This example uses Astro's default static mode, and creates [a dynamic routing pa
- `body`: a string, representing the content of your entry.
- `created`: a timestamp, based on your file creation date.

4. Use the page `props` to display your blog post.
3. Use the page `props` to display your blog post.

```astro title="src/pages/articles/[path].astro" ins={30, 32-42}
---
Expand Down Expand Up @@ -538,7 +538,7 @@ This example uses Astro's default static mode, and creates [a dynamic routing pa
</html>
```

5. Navigate to your dev server preview and click on one of your posts to make sure your dynamic route is working.
4. Navigate to your dev server preview and click on one of your posts to make sure your dynamic route is working.

</Steps>

Expand Down
4 changes: 4 additions & 0 deletions src/content/docs/en/guides/imports.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,8 @@ import './style.css';

Astro supports importing CSS files directly into your application. Imported styles expose no exports, but importing one will automatically add those styles to the page. This works for all CSS files by default, and can support compile-to-CSS languages like Sass & Less via plugins.

<ReadMore>Read more about advanced CSS import use cases such as a direct URL reference for a CSS file, or importing CSS as a string in the [Styling guide](/en/guides/styling/#advanced).</ReadMore>

### CSS Modules

```jsx
Expand Down Expand Up @@ -134,6 +136,8 @@ All other assets not explicitly mentioned above can be imported via ESM `import`

It can also be useful to place images in the `public/` folder as explained on the [project-structure page](/en/basics/project-structure/#public).

<ReadMore>Read more about appending Vite import parameters (e.g. `?url`, `?raw`) in [Vite's static asset handling guide](https://vite.dev/guide/assets.html).</ReadMore>

:::note
Adding **alt text** to `<img>` tags is encouraged for accessibility! Don't forget to add an `alt="a helpful description"` attribute to your image elements. You can just leave the attribute empty if the image is purely decorative.
:::
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/guides/media.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ This can be useful particularly when using a single source of truth for your ass

## Which hosted media systems or DAMs work well with Astro?

Much like a CMS, because Astro manages the _presentation_ of your content, you'll want to use a headless DAM, that allows you to fetch and interact with your assets via an API or SDK.
Much like when using a CMS, as Astro handles the _presentation_ of your content, you'll want to use a headless DAM that allows you to fetch and interact with your assets via an API or SDK.

Some headless DAMs, like Cloudinary, provide an Astro [integration](/en/guides/integrations-guide/) that allows you to easily fetch your assets as well as display them on your website or app.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ To convert other types of sites, such as a portfolio or documentation site, see
- [Building an E-commerce Website with Headless WordPress and Astro](https://shaxadd.medium.com/building-an-e-commerce-website-with-headless-wordpress-and-astro-2712d8c8b735)
- [Astro WordPress Starter Theme](https://astro.build/themes/details/astro-wordpress-starter/)
- [Kubric Astro Theme](https://astro.build/themes/details/kubrick-astro/)
- [Migrate WordPress to Astro](https://delucis.github.io/dewp/)
- 📺 [Make a Headless WordPress Site with Astro](https://www.youtube.com/watch?v=54U7dVmhyxE)
- 📺 [Astro Headless WordPress Starter Demo](https://www.youtube.com/watch?v=BcoxZZIfESI)
- 📺 [Astro + WPGraphQL for more secure WordPress sites](https://www.youtube.com/watch?v=fWxn-r83ygQ)
Expand Down
22 changes: 22 additions & 0 deletions src/content/docs/en/reference/container-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -376,3 +376,25 @@ const response = await container.renderToResponse(Endpoint, {
});
const json = await response.json();
```

### `partial` option

<p>

**Type:** `boolean`<br />
**Default:** `true`<br/>
<Since v="4.16.6" />
</p>

Whether or not the Container API renders components as if they were [page partials](/en/basics/astro-pages/#page-partials). This is usually the behavior you want when rendering `components.boolean` so you can render components without a full page shell.

To render a component as a full Astro page, including `<!DOCTYPE html>`, you can opt-out of this behavior by setting `partial` to `false`:

```js name="Card.test.js" ins={4}
import Blog from "../src/pages/Blog.astro";

const result = await container.renderToString(Card, {
partial: false
});
console.log(result) // includes `<!DOCTYPE html>` at the beginning of the HTML
```
Loading

0 comments on commit 5dff275

Please sign in to comment.