Merge branch 'main' into layoutpl

src/components/DeployGuidesNav.astro

@@ -29,6 +29,7 @@ const services: Service[] = [
  { title: 'AWS', slug: 'aws', supports: ['static'] },
  { title: 'AWS via Flightcontrol', slug: 'flightcontrol', supports: ['ssr', 'static'] },
  { title: 'AWS via SST', slug: 'sst', supports: ['ssr', 'static'] },
+ { title: 'Clever Cloud', slug: 'clever-cloud', supports: ['ssr', 'static'] },
  { title: 'Azion', slug: 'azion', supports: ['ssr', 'static'] },
  { title: 'Google Cloud', slug: 'google-cloud', supports: ['ssr', 'static'] },
  { title: 'Firebase Hosting', slug: 'google-firebase', supports: ['ssr', 'static'] },

src/content/docs/en/guides/cms/tina-cms.mdx

@@ -162,5 +162,5 @@ To get started, you'll need an existing Astro project.
 ## Themes
 
 <Grid>
- <Card title="Resume01" href="https://astro.build/themes/details/resume-01/" thumbnail="resume01.png"/>
+ <Card title="Resume01" href="https://astro.build/themes/details/resume01/" thumbnail="resume01.png"/>
 </Grid>

src/content/docs/en/guides/content-collections.mdx

@@ -412,7 +412,7 @@ const englishDocsEntries = await getCollection('docs', ({ id }) => {
 
 ### Using content in Astro templates
 
-Once you have queried your collection entries, you can access each entry directly inside of your Astro component template. This lets you to render HTML for things like links to your content (using the content `slug`) or information about your content (using the `data` property).
+Once you have queried your collection entries, you can access each entry directly inside of your Astro component template. This lets you render HTML for things like links to your content (using the content `slug`) or information about your content (using the `data` property).
 
 For information about rendering your content to HTML, see [Rendering Content to HTML](#rendering-content-to-html) below.
 

src/content/docs/en/guides/deploy/clever-cloud.mdx

@@ -0,0 +1,126 @@
+---
+title: Deploy your Astro Site to Clever Cloud
+description: How to deploy your Astro site to the web on Clever Cloud.
+type: deploy
+i18nReady: true
+---
+import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
+
+[Clever Cloud](https://clever-cloud.com) is a European cloud platform that provides automated, scalable services.
+
+## Project Configuration
+
+You can deploy both fully static and on-demand rendered Astro projects on Clever Cloud. Regardless of your `output` mode ([pre-rendered or on-demand](/en/basics/rendering-modes/)), you can choose to deploy as a **static application** which runs using a post-build hook, or as a **Node.js** application, which works out-of-the-box with your `package.json`.
+
+### Port and host
+
+Applications on Clever Cloud listen on port **8080**. If your project requires this configuration, set your port and host in Astro in one of two locations:
+
+1. In `package.json` scripts:
+
+ ```json title="package.json" "astro preview --host 0.0.0.0 --port 8080"
+ "scripts": {
+ "dev": "astro dev",
+ "start": "astro dev",
+ "build": "astro check && astro build",
+ "preview": "astro preview --host 0.0.0.0 --port 8080",
+ "astro": "astro"
+ } 
+ ```
+
+2. In `astro.config.mjs`:
+
+ ```javascript title="astro.config.mjs"
+ import { defineConfig } from 'astro/config';
+
+ export default defineConfig({
+ server: {
+ port: 8080,
+ host: true
+ }
+ });
+ ```
+
+
+## Deploy Astro from the Console
+
+To deploy your Astro project to Clever Cloud, you will need to **create a new application**. The application wizard will walk you through the necessary configuration steps.
+
+<Steps>
+
+1. From the lateral menubar, click **Create** > **An application**
+2. Choose how to deploy:
+
+ - **Create a brand new app**: to deploy from a local repository with Git
+
+ or
+
+ - **Select a GitHub repository**: to deploy from GitHub
+
+3. Select a **Node.js** application, or a **static** one.
+4. Set up the minimal size for your instance and scalability options. Astro sites can typically be deployed using the **Nano** instance. Depending on your project's specifications and dependencies, you may need to adjust accordingly as you watch the metrics from the **Overview** page.
+5. Select a **region** to deploy your instance.
+6. Skip [connecting **Add-ons** to your Clever application](https://developers.clever-cloud.com/doc/addons/) unless you're using a database or Keycloak.
+7. Inject **environment variables**:
+
+ - For **Node.js**, no specific environment variable is needed to deploy Astro if you're using **npm**. If you're using **yarn** or **pnpm**, set the following environment variables:
+
+ <Tabs>
+ <TabItem label="pnpm">
+ ```shell
+ CC_NODE_BUILD_TOOL="custom"
+ CC_PRE_BUILD_HOOK="npm install -g pnpm && pnpm install"
+ CC_CUSTOM_BUILD_TOOL="pnpm run astro telemetry disable && pnpm build"
+ CC_RUN_COMMAND="pnpm run preview"
+ ```
+ </TabItem>
+ <TabItem label="yarn">
+ ```shell
+ CC_NODE_BUILD_TOOL="yarn"
+ CC_PRE_BUILD_HOOK="yarn && yarn run astro telemetry disable && yarn build"
+ CC_RUN_COMMAND="yarn run preview"
+ ```
+ </TabItem>
+ </Tabs>
+
+ - For a **static** application, add these variables:
+
+ <Tabs>
+ <TabItem label="npm">
+ ```shell
+ CC_POST_BUILD_HOOK="npm run build"
+ CC_PRE_BUILD_HOOK="npm install && npm run astro telemetry disable"
+ CC_WEBROOT="/dist"
+ ```
+ </TabItem>
+ <TabItem label="pnpm">
+ ```shell
+ CC_POST_BUILD_HOOK="pnpm build"
+ CC_PRE_BUILD_HOOK="npm install -g pnpm && pnpm install && pnpm run astro telemetry disable"
+ CC_WEBROOT="/dist"
+ ```
+ </TabItem>
+ <TabItem label="yarn">
+ ```shell
+ CC_POST_BUILD_HOOK="yarn build"
+ CC_PRE_BUILD_HOOK="yarn && yarn run astro telemetry disable"
+ CC_WEBROOT="/dist"
+ ```
+ </TabItem>
+ </Tabs>
+
+
+8. **Deploy!** If you're deploying from **GitHub**, your deployment should start automatically. If you're using **Git**, copy the remote and push on the **master** branch. 
+
+</Steps>
+
+:::tip[Other Branches]
+To deploy from branches other than `master`, use `git push clever <branch>:master`.
+
+For example, if you want to deploy your local `main` branch without renaming it, use `git push clever main:master`.
+:::
+
+
+## Official Resources
+- [Clever Cloud documentation for deploying a Node.js application](https://developers.clever-cloud.com/doc/applications/javascript/nodejs/)
+- [Clever Cloud documentation for deploying Astro as a static application](https://developers.clever-cloud.com/guides/astro/)

src/content/docs/en/guides/deploy/sst.mdx

@@ -28,7 +28,7 @@ You can also read [the full Astro on AWS with SST tutorial](https://sst.dev/docs
 
 To use any [additional SST components](https://sst.dev/docs/), add them to `sst.config.ts`. 
 
-```ts {2} {4} title="sst.config.ts"
+```ts {1} {5} title="sst.config.ts"
 const bucket = new sst.aws.Bucket("MyBucket", {
  access: "public",
 });

src/content/docs/en/reference/configuration-reference.mdx

@@ -362,7 +362,7 @@ Using `'attribute'` is useful when you are manipulating the `class` attribute of
 
 <p>
 
-**Type:** `boolean`<br />
+**Type:** `object`<br />
 **Default:** `{}`<br />
 <Since v="4.9.0" />
 </p>
@@ -386,7 +386,7 @@ export default defineConfig({
 <p>
 
 **Type:** `boolean`<br />
-**Default:** 'false'<br />
+**Default:** `false`<br />
 <Since v="4.9.0" />
 </p>
 
@@ -637,7 +637,7 @@ Control whether project styles are sent to the browser in a separate css file or
 ```js
 {
  build: {
- inlineStylesheets: `never`,
+ inlineStylesheets: 'never',
  },
 }
 ```
@@ -648,7 +648,7 @@ Customize the Astro dev server, used by both `astro dev` and `astro preview`.
 
 ```js
 {
- server: { port: 1234, host: true}
+ server: { port: 1234, host: true }
 }
 ```
 
@@ -874,7 +874,7 @@ Set `false` to bypass the default image size limit for the Sharp image service a
 <p>
 
 **Type:** `Array.<string>`<br />
-**Default:** `{domains: []}`<br />
+**Default:** `[]`<br />
 <Since v="2.10.10" />
 </p>
 
@@ -922,6 +922,7 @@ Defines a list of permitted image source URL patterns for remote image optimizat
 ```
 
 You can use wildcards to define the permitted `hostname` and `pathname` values as described below. Otherwise, only the exact values provided will be configured:
+
 `hostname`:
  - Start with '**.' to allow all subdomains ('endsWith').
  - Start with '*.' to allow only one level of subdomain.
@@ -977,7 +978,7 @@ Pass [remark plugins](https://github.com/remarkjs/remark) to customize how your
 import remarkToc from 'remark-toc';
 {
  markdown: {
- remarkPlugins: [ [remarkToc, { heading: "contents"} ] ]
+ remarkPlugins: [ [remarkToc, { heading: "contents" }] ]
  }
 }
 ```
@@ -1051,7 +1052,7 @@ Pass options to [remark-rehype](https://github.com/remarkjs/remark-rehype#api).
 {
  markdown: {
  // Example: Translate the footnotes text to another language, here are the default English values
- remarkRehype: { footnoteLabel: "Footnotes", footnoteBackLabel: "Back to reference 1"},
+ remarkRehype: { footnoteLabel: "Footnotes", footnoteBackLabel: "Back to reference 1" },
  },
 };
 ```

src/content/docs/en/reference/container-reference.mdx

@@ -166,7 +166,7 @@ If your Astro component renders one default slot, pass an object with `default`
 import Card from "../src/components/Card.astro";
 
 const result = await container.renderToString(Card, { 
- slots: { default: "Some value"}
+ slots: { default: "Some value" }
 });
 ```
 
@@ -185,7 +185,10 @@ If your component renders named slots, use the slot names as the object keys:
 import Card from "../src/components/Card.astro";
 
 const result = await container.renderToString(Card, { 
- slots: { "header": "Header content", "footer": "Footer" }
+ slots: {
+ header: "Header content",
+ footer: "Footer"
+ }
 });
 ```
 
@@ -207,8 +210,8 @@ import CardFooter from "../src/components/CardFooter.astro";
 
 const result = await container.renderToString(Card, { 
  slots: { 
- "header": await container.renderToString(CardHeader), 
- "footer": await container.renderToString(CardFooter),
+ header: await container.renderToString(CardHeader), 
+ footer: await container.renderToString(CardFooter)
  }
 });
 ```
@@ -223,7 +226,7 @@ An option to pass [properties](/en/basics/astro-components/#component-props) for
 import Card from "../src/components/Card.astro";
 
 const result = await container.renderToString(Card, { 
- props: { name: "Hello, world!" },
+ props: { name: "Hello, world!" }
 });
 ```
 
@@ -257,7 +260,7 @@ import Card from "../src/components/Card.astro";
 const result = await container.renderToString(Card, { 
  request: new Request("https://example.com/blog", {
  headers: {
- "X-some-secret-header": "test-value"
+ "x-some-secret-header": "test-value"
  }
  })
 });
@@ -311,23 +314,23 @@ import Card from "../src/components/Card.astro";
 test("User is in", async () => {
  const result = await container.renderToString(Card, { 
  locals: {
- checkAuth() { return true }
+ checkAuth() { return true; }
  }
  });
 
  // assert result contains "You're in"
-})
+});
 
 
 test("User is out", async () => {
  const result = await container.renderToString(Card, { 
  locals: {
- checkAuth() { return false }
+ checkAuth() { return false; }
  }
  });
 
  // assert result contains "You're out"
-})
+});
 ```
 
 ### `routeType` option
@@ -364,7 +367,7 @@ import * as Endpoint from "../src/pages/api/endpoint.js";
 const response = await container.renderToResponse(Endpoint, { 
  routeType: "endpoint",
  request: new Request("https://example.com", {
- method: "POST" //
+ method: "POST" // Specify POST method for testing
  })
 });
 const json = await response.json();

src/content/docs/en/reference/image-service-reference.mdx

@@ -116,12 +116,13 @@ const service: LocalImageService = {
  loading: attributes.loading ?? 'lazy',
  decoding: attributes.decoding ?? 'async',
  };
- }
+ },
+ propertiesToHash: ['src', 'width', 'height', 'format', 'quality'], 
 };
 export default service;
 ```
 
-At build time for static sites and pre-rendered routes, both `<Image />` and `getImage(options)` call the `transform()` function. They pass options either through component attributes or an `options` argument, respectively. The transformed images will be built to a `dist/_astro` folder.
+At build time for static sites and pre-rendered routes, both `<Image />` and `getImage(options)` call the `transform()` function. They pass options either through component attributes or an `options` argument, respectively. The transformed images will be built to a `dist/_astro` folder. Their file names will contain a hash of the properties passed to `propertiesToHash`. This property is optional and will default to `['src', 'width', 'height', 'format', 'quality']`. If your custom image service has more options that change the generated images, add these to the array.
 
 In dev mode and SSR mode, Astro doesn't know ahead of time which images need to be optimized. Astro uses a GET endpoint (by default, `/_image`) to process the images at runtime. `<Image />` and `getImage()` pass their options to `getURL()`, which will return the endpoint URL. Then, the endpoint calls `parseURL()` and passes the resulting properties to `transform()`.
 

src/content/docs/es/guides/cms/tina-cms.mdx

@@ -162,5 +162,5 @@ Para empezar, necesitarás un proyecto Astro existente.
 ## Temas
 
 <Grid>
- <Card title="Resume01" href="https://astro.build/themes/details/resume-01/" thumbnail="resume01.png"/>
-</Grid>
+ <Card title="Resume01" href="https://astro.build/themes/details/resume01/" thumbnail="resume01.png"/>
+</Grid>

src/content/docs/fr/guides/cms/tina-cms.mdx

@@ -162,5 +162,5 @@ Pour commencer, vous aurez besoin d'un projet Astro existant.
 ## Thèmes
 
 <Grid>
- <Card title="Resume01" href="https://astro.build/themes/details/resume-01/" thumbnail="resume01.png"/>
-</Grid>
+ <Card title="Resume01" href="https://astro.build/themes/details/resume01/" thumbnail="resume01.png"/>
+</Grid>