{"id":28003039,"url":"https://github.com/codestitchofficial/advanced-astro-i18n","last_synced_at":"2025-05-09T01:48:14.625Z","repository":{"id":242407657,"uuid":"809086699","full_name":"CodeStitchOfficial/Advanced-Astro-i18n","owner":"CodeStitchOfficial","description":"This Astro advanced kit includes a pre-configured multi-language setup, along with five pages filled with CodeStitch components. Everything is ready to go right from the start, complete with an i18n integration, LESS preprocessing and a blog powered by Astro’s content collections. ","archived":false,"fork":false,"pushed_at":"2025-03-19T14:39:19.000Z","size":3438,"stargazers_count":33,"open_issues_count":0,"forks_count":15,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-09T01:48:04.270Z","etag":null,"topics":["astrojs","i18n","starter-kit"],"latest_commit_sha":null,"homepage":"https://advanced-astro-kit-i18n.netlify.app/","language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodeStitchOfficial.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-01T16:41:35.000Z","updated_at":"2025-04-11T13:02:07.000Z","dependencies_parsed_at":"2024-07-16T15:28:14.268Z","dependency_job_id":"28629335-93bc-4ee0-adc1-74ab6f31165f","html_url":"https://github.com/CodeStitchOfficial/Advanced-Astro-i18n","commit_stats":null,"previous_names":["buckybuck135/advanced-astro-v4-i18n","codestitchofficial/advanced-astro-i18n"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeStitchOfficial%2FAdvanced-Astro-i18n","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeStitchOfficial%2FAdvanced-Astro-i18n/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeStitchOfficial%2FAdvanced-Astro-i18n/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeStitchOfficial%2FAdvanced-Astro-i18n/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeStitchOfficial","download_url":"https://codeload.github.com/CodeStitchOfficial/Advanced-Astro-i18n/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253176440,"owners_count":21866142,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astrojs","i18n","starter-kit"],"created_at":"2025-05-09T01:48:13.951Z","updated_at":"2025-05-09T01:48:14.603Z","avatar_url":"https://github.com/CodeStitchOfficial.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"  \u003ch3 align=\"center\"\u003eAdvanced Astro v4 - i18n\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    This Astro advanced kit includes a pre-configured multi-language setup, along with five pages filled with CodeStitch components. Everything is ready to go right from the start, offering a fantastic introduction to the advantages of a Static Site Generator, complete with LESS preprocessing and a blog powered by Astro’s content collections. \n    \u003cbr/\u003e\n    \u003cbr/\u003e\n    \u003ca href=\"https://advanced-astro-kit-i18n.netlify.app/\" target=\"_blank\"\u003eView Live Result\u003c/a\u003e\n  \u003c/p\u003e\n\n## Table of Contents\n\n- [Overview](#overview)\n- [Getting Started](#gettingStarted)\n- [Commands](#commands)\n- [Prerequisites](#prerequisites)\n- [Features](#features)\n- [Project Structure](#projectStructure)\n  - [Root Files and Folders](#rootFilesAndFolders)\n  - [Source Files and Folders](#sourceFilesAndFolders)\n- [Expanding the Project](#expandingTheProject)\n  - [i18n](#i18n)\n  - [Custom Picture component](#Custompicturecomponent)\n  - [Astro Content Collections](#AstroContentCollections)\n  - [Preloading images](#preloadingimages)\n- [Deployment](#deployment)\n- [Acknowledgments](#acknowledgments)\n- [Conclusion](#conclusion)\n\n\u003ca name=\"overview\"\u003e\u003c/a\u003e\n\n## Overview\n\nThis Advanced kit includes a pre-configured \u003ca href=\"https://www.astro.build\"\u003eAstro\u003c/a\u003e environment, which\nallows for repeated components, centralized data and greater room to scale as your clients grow. The kit runs the latest major Astro version, v4. On top of this, internationalization has been provided througha [the Astrolicious i18n integration](https://github.com/astrolicious/i18n) to create a multilingual website, scalable to as many languages as necessary. The blog is powered by Astro's Content Collections. This can easily be adapted to anything which requires changing content, such as menus, job listing boards, portfolios and much more. It could even be extended by a CMS to allow your clients to manage their content on their own.\n\nAn example website has also been provided, with easy substitution of website sections possible through the use of \u003ca href=\"https://codestitch.app/\"\u003eCodeStitch's\nvanilla component library\u003c/a\u003e. This kit aims to get any project off the ground in as little time as possible, with deployment being possible in as little as two minutes. \n\n\u003ca name=\"gettingStarted\"\u003e\u003c/a\u003e\n\n## Getting Started\n\n1. At the top right of the GitHub Repository, click the green _Use this template_ button,\n   then click _Create a new repository_.\n2. Follow the instructions to create a new repository, using this repo as a template.\n3. When created, clone the repository to your local machine.\n4. Run `npm install` to install all dependencies.\n5. Run `npm run dev` to start the project and spin up a development server on `localhost:4321`.\n\nRunning `npm run dev` will start a development server and begin LESS preprocessing.\n\nNext, it is recommended to update `data/client.json` with some new information about this project. Through the power of templating, the\nproject's `\u003chead\u003e` and contact information will automatically be filled out, providing a first peek into some of the benefits of SSGs.\n\nYou can find all of CodeStitches `:root` variables, as well as .cs-topper, .cs-title and .cs-text, within the `root` stylesheet. Feel free to adjust these, or use our Content Flair micro-stitches, to update site-wide styles quickly.\n\n\u003ca name=\"commands\"\u003e\u003c/a\u003e\n\n## Commands\n\nAll commands are run from the root of the project, from a terminal:\n\n| Command                   | Action                                           |\n| :------------------------ | :----------------------------------------------- |\n| `npm install`             | Installs dependencies                            |\n| `npm run dev`             | Starts local dev server at `localhost:4321`      |\n| `npm run build`           | Build your production site to `./dist/`          |\n| `npm run preview`         | Preview your build locally, before deploying     |\n| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |\n| `npm run astro -- --help` | Get help using the Astro CLI                     |\n\n\u003ca name=\"prerequisites\"\u003e\u003c/a\u003e\n\n## Prerequisites\n\nOnly the vanilla web technologies are _required_ before using this kit, with familiarity with Astro and React-style Components and props are recommended. A lot of the leg-work for the non-vanilla technologies has been done for you. If you would like to read up on some of these things, we recommend the following resources:\n\n1. [Astro's Documentation](https://docs.astro.build/en/getting-started/)\n2. [Astro Crash Course in 20 Minutes!](https://www.youtube.com/watch?v=zrPVTf761OI)\n3. [i18next Crash Course](https://www.youtube.com/watch?v=SA_9i4TtxLQ)\n\n\n\u003ca name=\"features\"\u003e\u003c/a\u003e\n\n## Features\n\n* Runs on Astro v4\n* i18n setup ready to go, complete with routing and LanguageSelect component\n* Dark mode\n* Astro's `\u003cViewTransitions /\u003e` integration\n* Astro's content collections to supercharge your Astro pages and content. \n* Accessible dropdown menus on desktop navigation and nested pages\n* Automatic sitemap generation at build time\n* [CodeStitch](https://codestitch.app/) HTML and CSS blocks to build the UI.\n* Perfect Lighthouse scores\n  \n\nThis kit ships the following packages:\n* [Astro Icon](https://www.astroicon.dev/) - Astro Icon is a straightforward icon system for the Astro framework.\n* [Autoprefixer](https://www.npmjs.com/package/autoprefixer) - PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba.\n* [LESS](https://www.npmjs.com/package/less) - Less makes a few convenient additions to the CSS language, but you can also simply write standard CSS if you wish.\n* [Astrolicious i18n](https://github.com/astrolicious/i18n) -  i18n integration for Astro with server and client utilities, type safety and translations built-in.\n* [Astro Sitemap](https://docs.astro.build/en/guides/integrations-guide/sitemap/#_top) - Automatically generates `sitemap-index.xml` and `sitemap-0.xml`. Make sure to replace `https://yourwebsite.com` with your actual site URL in `astro.config.mjs` and `robots.txt`.\n\n\u003ca name=\"projectStructure\"\u003e\u003c/a\u003e\n\n## Project Structure\n\nAstro leverages an opinionated folder layout for your project. Every Astro project root should include the following directories and files:\n* `src/*` - Your project source code (components, pages, styles, etc.)\n* `public/*` - Your non-code, unprocessed assets (fonts, icons, etc.)\n* `package.json` - A project manifest.\n* `astro.config.mjs` - An Astro configuration file. (recommended)\n* `tsconfig.json` - A TypeScript configuration file. (recommended)\n\n\n\u003ca name=\"projectTree\"\u003e\u003c/a\u003e\n\n### Project Tree\n\n```\n.\n├── public/\n|   |—— assets/\n|   |   |—— favicons/\n|   |   |—— fonts/\n|   |   |—— images/\n|   |   |—— js/\n|   |   └── svgs/\n|   |—— _redirects\n|   |—— robots.txt\n├── src/\n|   ├── assets/\n|   |   └── images/\n|   ├── components/\n│   │   └── TemplateComponents \n│   ├── content/ /\n│   │   ├── blog/ \n│   │   └── config.ts \n│   ├── data/\n│   │   ├── client.json \n│   │   └── navData.json \n│   ├── icons/ \n│   ├── locales/ \n│   │   ├── en \n│   │   └── fr\n│   ├── layouts/\n│   │   └── BaseLayout.astro\n│   ├── routes/ \n|   |   |── index.astro /* Accessible at / and /fr by default */\n|   |   |—— about.astro /* Accessible at /about and /fr/about by default etc. */\n|   |   |—— contact.astro\n│   │   └── blog/\n│   │   |   ├── [post].astro /* Dynamically generates individual blog pages */\n│   │   |   └── index.astro /* Blog landing page */\n│   │   └── projects/\n│   │       ├── project-1.astro\n│   │       └── project-2.astro\n|   |── styles/\n|   └── utils/\n|       |── global.d.ts /* used by the ThemeProvider component */\n|       └── utils.ts /* place any utility functions here */\n├── .astro.config.mjs\n├── .postcss.config.cjs\n└── tsconfig.json\n```\n\n\u003ca name=\"sourceFilesAndFolders\"\u003e\u003c/a\u003e\n\n### Source Files and Folders\n\n- public/ - All assets you don't want or need optimized by Astro. Include fonts and favicons in here. The \\_redirects and robots.txt files also live here.\n- src/ - Raw, source code. The folder you work in.\n- .astro.config.mjs - Astro config file, already set up for you.\n\n\n\u003ca name=\"sourceFilesAndFolders\"\u003e\u003c/a\u003e\n\n### Source Files and Folders\n\n#### `node_modules/*`\nCreated after you run `npm install`. This directory contains the code for all the dependencies that power this kit. It comes as standard with any NodeJS-powered project, much like the `package.json` and `package-lock.json` files. You can safely ignore this directory in your day-to-day work.\n\n#### `dist/`\nCreated after running `npm build`. This will hold the final build of your site.\n\n#### `public/*`\nThe `public/` directory is for files and assets in your project that do not need to be processed during Astro’s build process. The files in this folder will be copied into the build folder untouched, and then your site will be built.\n\n\n- \\_redirects - To configure redirects. Read more on \u003ca href=\"https://docs.netlify.com/routing/redirects/\"\u003eNetlify\u003c/a\u003e\n- content/ - Data to render pages from, such as the blog.\n- robots.txt - Instructions for site crawlers. Learn more, and generate your own, \u003ca href=\"https://en.ryte.com/free-tools/robots-txt-generator/\"\u003ehere\u003c/a\u003e\n\nYou can place CSS and JavaScript in your public/ directory, but be aware that those files will not be bundled or optimized in your final build.\n\n\n#### `src/*`\nThe `src/` folder is where most of your project source code lives. This includes:\n\n* Pages\n* Layouts\n* Astro components\n* UI framework components (React, etc.)\n* Styles (CSS, Sass)\n* Markdown\n\nAstro processes, optimizes, and bundles your src/ files to create the final website that is shipped to the browser. Unlike the static public/ directory, your src/ files are built and handled for you by Astro.\n\n##### `src/assets`\nContains all assets you want optimized by Astro (such as assets used in `\u003cPicture /\u003e` components for example) must be placed in `src`.\n\n`public/assets/images/blog` is where the images uploaded on the CMS will be stored.\n\n##### `src/components`\nComponents are reusable units of code for your HTML pages. These could be Astro components, or UI framework components like React or Vue. It is common to group and organize all of your project components together in this folder.\n\nThe `TemplateComponents` folder contains all non-CodeStitch related components such as ThemeProvider and Select etc.\n\n##### `src/content`\nThe src/content/ directory is reserved to store content collections organised in folders (e.g. `src/content/blog`) containing `.md` files, and an optional `config.ts` collections configuration file. No other files are allowed inside this folder.\n\n##### `src/data`\nThis directory contains data files that are accessible within any template throughout the project. \n* `client.js` holds some information you may wish to define for a client. It's important to fill this file out with the correct information for your client, as many HTML meta tags, the sitemap, and robots.txt all use data from this file.\n\n* `navData.json` holds data to create the navigation of your site. See more information in the [navigation via navData.json section](#navigationViaFrontMatter)\n\n##### `src/icons`\nSVGs used by the \u003cIcon /\u003e component **must** be placed in this folder.\n\n##### `src/layouts`\nLayouts are Astro components that define the UI structure shared by one or more pages. The `BaseLayout.astro` file acts as a giant wrapper for each individual page, where the content is injected through the `\u003cslot /\u003e `component.\n\n##### `src/locales`\nPlace your json files for translations in these sub-folders. See more information in the [i18n section](#i18n).\n\n##### `src/pages`\nUnlike a standard non-i18n Astro project, this `pages` folder ships empty. Use it for pages that you want handled by the i18n package. See more information in the [i18n section](#i18n).\n\n##### `src/routes`\nManaged by the i18n package; place your \"pages\" here. See more information in the [i18n section](#i18n). All `.astro` files placed in this directory will generate pages accessible from all locales.\n\n```\n├── routes/ \n|   |   |── index.astro /* Accessible at / and /fr by default */\n|   |   |—— about.astro /* Accessible at /about and /fr/about by default */\n```\n\n##### `src/styles`\nIt is a common convention to store your CSS, Less or Sass files in a `src/styles` directory.\n\n##### `src/utils`\nContains helper functions.\n\n#### `astro.config.mjs`\nAn Astro configuration file. It's already set up for you, but you can extend it with integrations to use, build options, server options, and more.\n\n#### `package.json` and `package-lock.json`\nThe project's manifest. Standard NodeJS package files, containing the dependencies needed for the project to work.\n\n\n#### `tsconfig.json`\nA TypeScript configuration file. Optional. Includes TypeScript configuration options for your Astro project. Some features (like npm package imports) aren’t fully supported in the editor without a tsconfig.json file.\n\nThis kit is configured to have the `strictest` TS config, which you can modify of course. The `paths` config object comes handy to create import shortcuts.\n\n\u003ca name=\"expandingTheProject\"\u003e\u003c/a\u003e\n\n## Expanding the Project\n\nAimed towards freelancers, this kit was made with scalability and flexibility in mind, suiting a range of websites and client needs. As such, it is your choice whether you'd rather make small tweaks to the existing site, or clear all the page content and build a site all over again. Outlined below are some best\npractices for when it comes to building on top of this kit:\n\n\n\n\u003ca name=\"i18n\"\u003e\u003c/a\u003e\n\n### i18n\n\nInternationalization is powered by the [I18n for Astro integration plugin](https://astro-i18n.netlify.app/). This project is set up to work with two languages out of the box, English (default language) and French. \n\nThis plugin brings 5 major changes to our project structure:\n\n1. in `astro.config.js`\n\n```JS\ni18n({\n    defaultLocale: \"en\",\n    locales: [\"fr\", \"en\"],\n    client: {\n      data: true,\n      paths: true\n    },\n  })\n```\n\nThis allows to configure the integration. This minimal set up here configures the languages in your project. You can check the [configuration documentation](https://astro-i18n.netlify.app/usage/configuration/#_top) for more options to pass to this configuration object.\n\n2. The `routes` directory\n\nUnlike a monolingual Astro project, the `routes` directory is where most of your `.astro` pages will live and what the integration uses to create routing. Any `.astro` file placed in this `routes` directory will be accessible from all locales. For example, `index.astro` will be accessible at `/blog` and `/fr/blog` by default.\n\n![alt text](/public/assets/images/docs/image.png)\n\nThe `pages` directory can still be used. It's useful when you want some urls to be unique, ie. not translated like API routes (eg. under pages/api)\nin 1 locale only (eg. /pages/fr/test won't be handled in a special way)\n\n3. The `locales` directory\nThe `locales` directory will have one sub-directory for each locale in your project. This is where the translations live, in `.json` files. You are free to organize your translations as you with, but you must provide at least a `src/locales/en/common.json` for each locale. These json files are also referred to as namespaces.\n\nThese json files must have the same name and the same organisation of key/values pairs. The only difference will obviously be the translated content.\n\nThe default (and mandatory) name space is `common.json`. In this kit, we also use extra name spaces so that `common.json` doesn't become too bloated. You can use `common.json` for translations of repeated components, and other name spaces for individual pages for example. \n\nFor example:\n`/locales/en/common.json`\n```\n{\n  \"home\": \"Home\",\n  \"about\": \"About\",\n  \"projects\": \"Projects\",\n  \"project-1\": \"Project 1\",\n  \"project-2\": \"Project 2\",\n}\n```\n\n`/locales/fr/common.json`\n```\n{\n  \"home\": \"Accueil\",\n  \"about\": \"A propos\",\n  \"projects\": \"Projets\",\n  \"project-1\": \"Projet 1\",\n  \"project-2\": \"Projet 2\",\n}\n```\n\n4. Accessing the namespaces' data and translating with the `t()` function.\n\nUnder the hood, [i18next](https://www.i18next.com/) is used to manage translations. We enforce the following conventions:\n\n* Locales must live in the src/locales/ directory (can be customized with localesDir)\n* A folder for the default locale is required, eg. `src/locales/en/`\n* Provide at least a `src/locales/en/common.json` file (can be customized with defaultNamespace)\n\nTo access data from a name space in an .`astro` file, we use the `t` function. Don't forget to import it first in your astro file with  `import { t } from \"i18n:astro\";`.\n\n  1. First, we create the json data. \n\n`src/locales/fr/common.json`\n```json\n\"ctaComponent\": {\n    \"title1\": \"Confiez votre projet\",\n    \"title2\": \"à nos experts\",\n    \"message\": \"Dites quelque chose d'accrocheur, d'informatif et d'encourageant à cliquer sur le bouton pour aller à la page de contact. J'aime ajouter cette bannière en bas de chaque page.\",\n    \"cta\":\"Obtenir un devis\"\n},\n```\n\n  2. Then, in our `.astro` file, we import the `t` function and use it in JSX:\n\n`src/components/CTA.astro`\n```JSX\n---\nimport { t, getLocalePath } from \"i18n:astro\";\n---\n\u003cdiv class=\"container\"\u003e\n  \u003ch2 class=\"title\"\u003e\n    {t(\"ctaComponent.title1\")}\n    \u003cbr /\u003e\n    {t(\"ctaComponent.title2\")}\n  \u003c/h2\u003e\n  \u003cp\u003e\n    {t(\"ctaComponent.message\")}\n  \u003c/p\u003e\n  \u003ca href={getLocalePath(\"/contact\")} class=\"cs-button-solid\"\u003e{t(\"ctaComponent.cta\")}\u003c/a\u003e\n\u003c/div\u003e\n```\n\nTo access data from a name space other than `common.json`, the syntax will be slightly different: we must prefix with the name of the name space.\n\n`home.json`\n```json\n\"layout\": {\n    \"title\": \"Pixel Perfect Websites\",\n    \"description\": \"Meta description for the page\"\n},\n```\nUse `{t(\"home:layout.title\")}` to access the `title` key from the `layout` object in the `home` namespace (=.json file)\n\n\n`home.json`\n```json\n\"services\": [\n    {\n        \"heading\": \"Service 1\",\n        \"p\": \"Talk about the service with keywords people will be searching for it by. Keep it 1-2 sentences.\"\n    },\n    {\n        \"heading\": \"Service 2\",\n        \"p\": \"Talk about the service with keywords people will be searching for it by. Keep it 1-2 sentences.\"\n    },\n    {\n        \"heading\": \"Service 3\",\n        \"p\": \"Talk about the service with keywords people will be searching for it by. Keep it 1-2 sentences.\"\n    }\n],\n```\n\nTo access data nested in arrays with the `t` function, you can use this syntax: `\u003ch2\u003e{t(\"home:services.0.heading\")}\u003c/h2\u003e`, where \n* `home:` is the name of the json namespace file\n* `0` here is the `[0]` index of the array.\n* `.heading` is tkey object key to access\n\nThe t function is re-exported from i18next and benefits from type-safety automatically. Have a look at [i18next docs](https://www.i18next.com/) to learn more.\n\n5. getLocalePath\nCreate hrefs using `getLocalePath` to allow you get the right url for the current locale.\n\n```jsx\n---\nimport { getLocalePath } from \"i18n:astro\"\n---\n// This link will take you to \"/contact\" or \"/fr/contact\" depending on the current locale\n\u003ca href={getLocalePath(\"/contact\")} class=\"cs-button-solid\"\u003eDynamic link\u003c/a\u003e\n```\n\n6. Localized slugs for routes and blog posts\nLocalizing slugs has benefits: it increases user experience by proving them with page names that are in their language, and it improves SEO.\n\n#### Localizing slugs for routes\nWe use the `pages` object in the i18n config.\n```diff\ni18n({\n      defaultLocale: \"en\",\n      locales: [\"fr\", \"en\"],\n      client: {\n        data: true,\n        paths: true,\n      },\n      + pages: {\n\t\t\t+ \t\"/about\": {\n\t\t\t+ \t\tfr: \"/a-propos\",\n\t\t\t+ \t}\n\t\t\t+ },\n    }),\n```\n\n#### Localizing slugs for blog posts\nThe process is a bit different here. \n * rename your blog markdown files to the desired localized slug (e.g. `deuxieme-article-en-francais.md`, `second-blog-in-english.md`)\n * create a `defaultLocaleVersion` front-matter entry in the blog posts that are not in the default locale. This entry will be used to match each blog post to its counterparts in other locales. For example, in the `deuxieme-article-en-francais.md` file, I add `defaultLocaleVersion: en/second-post-in-english` to the front-matter.\n\n\u003ca name=\"Custom Picture component\"\u003e\u003c/a\u003e\n\n### Custompicturecomponent\n\nAstro provides two built-in components that you can use to display and optimize your images. \n * The \u003cPicture\u003e component allows you to display responsive images and work with different formats and sizes. \n * The \u003cImage\u003e component will optimize your images and allow you to pass in different formats and quality properties.\n\nIf you want to replicate the `\u003cpicture\u003e` elements with multiple `srcset` found in many Stitches, you can use our custom `\u003cCSPicture /\u003e` component located in `/src/Components/TemplateComponents`.  \n\nIt uses \u003ca href=\"https://docs.astro.build/en/recipes/build-custom-img-component/\"\u003eAstro's `getImage()` function\u003c/a\u003e to create a custom image component that displays different source images based on media queries.\n\n\u003e Note: the component will automatically convert your .jpg files to .webp! \n\n```JSX\n\n---\n// Import the component and all the images you want to use with it\nimport CSPicture from \"@components/TemplateComponents/CSPicture.astro\";\nimport mobileImage from \"@assets/images/construction-m.jpg\"\nimport desktopImage from \"@assets/images/cabinets2.jpg\"\nimport fallbackImage from \"@assets/images/cabinets2.jpg\"\n---\n\n  \u003cCSPicture\n    mobileImgUrl={mobileImage}\n    mobileMediaWidth=\"600px\"\n    desktopImgUrl={desktopImage}\n    desktopMediaWidth=\"601px\"\n    fallbackImgUrl={fallbackImage}\n    alt=\"\"\n  /\u003e\n```\n\nIt is currently set up to \n1. accept 3 images (mobile, desktop and fallback) that can be not only different sizes, crops but also completely different assets, as demnnstrated here.\n2. accept mobile and desktop media width if you want to adjust these sizes on a case by case basis.\n\nYou can of course adjust the sizes of attributes baased on your customization's needs directly in the component.\n\n\n\u003ca name=\"astroContentCollections\"\u003e\u003c/a\u003e\n\n### Astro content collections\n\nIn `/src`, you will see a `content.config.ts` file. This is where you can configure [Astro Content Collections](https://docs.astro.build/en/guides/content-collections/). This step is **not necessary**, but it will supercharge your Astro pages and content. Collections help to \n  * organize your documents, \n  * validate your frontmatter, \n  * provide automatic TypeScript type-safety for all of your content,\n\nThis template already has Content Collections configured for immediate use of the blog content, but you could use them to power up the Portfolio or Gallery for example.\n\n\u003ca name=\"preloadingimages\"\u003e\u003c/a\u003e\n\n### Preloading images\nTHis kit takes advantage of the [preload attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload) to fetch images above the fold with higher priority, resulting in improved performances and reducing flashes of unstyled content. Preloaded images are used on the index page for the hero image as well as on all other pages in the Landing component.\n\nYou will notice this snippet at the top of every `.astro` page:\n\n```jsx\n---\n// Optimize our landing image and pass it as props to the BaseLayout (for preloading) and Landing (for rendering)\nimport {getOptimizedImage} from \"../js/utils\"\nimport landingImage from \"../assets/images/landing.jpg\" // \u003c-- THE PATH TO THE ASSET YOU WANT TO PRELOAD - The asset must live in src\nconst optimizedImage = await getOptimizedImage(landingImage)\n---\n```\n\nYou only need to change the path of the asset you want to preload. The rest is managed behind the scenes.\n\n\n\u003ca name=\"deployment\"\u003e\u003c/a\u003e\n\n## Deployment\n0. Before you deploy, it is recommended to test the build. Run `npm run build` to build the project. Once done, run `npm run preview` which you can access on http://localhost:4321/. This allows you to test your website as if it was deployed on your host.\n1. Ensure the astro.config.mjs, client.json, robots.txt and \\_redirects have been filled out and updated. \n2. Netlify is the recommended hosting provider. If you choose another one, make sure to modify the `_redirects` code to handle the 404 page. \nNavigate to your Netlify Admin Panel, click _Add new site | Import an existing project_\n3. Follow the instructions to connect your GitHub repository to Netlify and deploy.\n\n\n\u003ca name=\"acknowledgments\"\u003e\u003c/a\u003e\n\n## Acknowledgments\n\nThe author would like to acknowledge:\n* [Cedar Studios](https://github.com/cedar-studios) - Their [Intermediate-Astro-Kit-LESS](https://github.com/cedar-studios/Intermediate-Astro-Kit-LESS/tree/master) is the base of this template.\n* [CodeStitch](https://codestitch.app/) - The UI was built with their stitches.\n* [Starlight](https://starlight.astro.build/) - The ThemeProvider and Select components are derived from Starlight\n\n\n\n\u003ca name=\"Conclusion\"\u003e\u003c/a\u003e\n\n## Conclusion\nI hope that this kit will prove useful to you. If you have any questions or would like to connect, feel free to reach out on [Twitter](https://twitter.com/BuckyBuck135) or at `buckybuck` on Discord.\n\nHappy coding!\n***Geoffrey***\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodestitchofficial%2Fadvanced-astro-i18n","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodestitchofficial%2Fadvanced-astro-i18n","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodestitchofficial%2Fadvanced-astro-i18n/lists"}