{"id":28003063,"url":"https://github.com/codestitchofficial/intermediate-astro-decap-cms","last_synced_at":"2025-05-09T01:49:06.877Z","repository":{"id":240242158,"uuid":"801715780","full_name":"CodeStitchOfficial/Intermediate-Astro-Decap-CMS","owner":"CodeStitchOfficial","description":"This intermediate kit includes a pre-configured setup for Astro v5, including a blog powered by DecapCMS and Astro's Content Collections. Also features Dark Mode, ViewTransitions and Components, complete with CodeStitch UI.","archived":false,"fork":false,"pushed_at":"2025-03-10T16:36:51.000Z","size":5528,"stargazers_count":58,"open_issues_count":1,"forks_count":20,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-09T01:49:00.540Z","etag":null,"topics":["astro","decapcms"],"latest_commit_sha":null,"homepage":"https://intermediate-astro-kit-decap-cms.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","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,"zenodo":null}},"created_at":"2024-05-16T19:19:26.000Z","updated_at":"2025-05-03T18:15:28.000Z","dependencies_parsed_at":"2024-07-16T18:30:14.765Z","dependency_job_id":"3653cc0f-58f2-4b98-873f-886d0c9210b2","html_url":"https://github.com/CodeStitchOfficial/Intermediate-Astro-Decap-CMS","commit_stats":null,"previous_names":["buckybuck135/intermediate-astro-v4-decap-cms","codestitchofficial/intermediate-astro-decap-cms","codestitchofficial/intermediate-astro-v4-decap-cms"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeStitchOfficial%2FIntermediate-Astro-Decap-CMS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeStitchOfficial%2FIntermediate-Astro-Decap-CMS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeStitchOfficial%2FIntermediate-Astro-Decap-CMS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeStitchOfficial%2FIntermediate-Astro-Decap-CMS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeStitchOfficial","download_url":"https://codeload.github.com/CodeStitchOfficial/Intermediate-Astro-Decap-CMS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253176439,"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":["astro","decapcms"],"created_at":"2025-05-09T01:49:06.053Z","updated_at":"2025-05-09T01:49:06.861Z","avatar_url":"https://github.com/CodeStitchOfficial.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"  \u003ch3 align=\"center\"\u003eIntermediate Astro v5 - Decap CMS\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    This intermediate kit includes a pre-configured Astro 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 Decap CMS. This kit also leverages the power of a few Astro tools such as, but not limited to, Content Collections, View Transitions, Astro components, scoped styling and scripting etc.\n    \u003cbr/\u003e\n    \u003cbr/\u003e\n    \u003ca href=\"https://intermediate-astro-kit-decap-cms.netlify.app\" target=\"_blank\"\u003eView Live Result\u003c/a\u003e\n  \u003c/p\u003e\n\n  \u003cp align=\"center\"\u003e\n    Created and maintained by \u003ca href=\"https://github.com/BuckyBuck135\" target=\"_blank\"\u003eBuckyBuck135\u003c/a\u003e\n  \u003c/p\u003e\n\n## Table of Contents\n\n- [Overview](#overview)\n- [Getting Started](#gettingStarted)\n- [Prerequisites](#prerequisites)\n- [Features](#features)\n- [Project Structure](#projectStructure)\n  - [Project Tree](#projectTree)\n  - [Root Files and Folders](#rootFilesAndFolders)\n- [Expanding the Project](#expandingTheProject)\n  - [Reusing Code](#reusingCode)\n  - [Scripts and Event Handling](#scripts)\n  - [Adding More Pages](#addingMorePages)\n  - [Navigation via navData.json](#navigationViaFrontMatter)\n  - [Built-in Astro components](#builtinastrocomponents)\n  - [Custom Picture component](#Custompicturecomponent)\n  - [Configuring the CMS](#configuringTheCms)\n  - [Astro Content Collections](#AstroContentCollections)\n  - [Preloading images](#preloadingimages)\n  - [Sitemap Configuration](#sitemapConfiguration)\n- [Deployment](#deployment)\n- [Acknowledgments](#acknowledgments)\n- [Conclusion](#conclusion)\n\n\u003ca name=\"overview\"\u003e\u003c/a\u003e\n\n## Overview\n\nThis intermediate 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, a blog has been provided through [Decap CMS](https://decapcms.org/) to allow your clients to manage their content on their own. This can easily be adapted to anything which requires changing content, such as menus, job listing boards, portfolios and much more.\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. We recommend Netlify as a host to take advantage of Netlify Identity and client authentication to the CMS dashboard.\n\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` and a Decap admin server. Access the admin dashboard at the `/admin` path.\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\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 some familiarity with Astro and React-style Components and props also recommended, but not essential. 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. [Decap CMS' docs](https://decapcms.org/docs/intro/) can also be found should you wish to extend the CMS beyond what's in this kit\n\n\n\n\u003ca name=\"features\"\u003e\u003c/a\u003e\n\n## Features\n\n* Runs on Astro v5\n* Decap CMS integration with a blog ready to go. Give access to your client via Netlify Identity to allow them to write blog posts. Their edits will be pushed to the repository, triggering a re-build automatically.\n* Astro's View Transitions integration\n* Components, props and scoped styles, as demonstrated in `/src/components/Landing.astro` for example\n* Astro's built-in components such as `\u003cPicture /\u003e`, as demonstrated in `/src/components/Landing.astro` for example\n* Astro's content collections, leveraging image validation. This allows the use of Astro components on user-uploaded images via the CMS, automatically converting your images to modern `.webp` or `.avif` format.\n* Accessible dropdown menus on desktop navigation and nested pages\n* [CodeStitch](https://codestitch.app/) HTML and CSS blocks to build the UI.\n* Perfect Lighthouse scores\n  \n![Lighthouse perfect score](public/assets/lighthouse/100-score.png)\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\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\u003ca name=\"projectTree\"\u003e\u003c/a\u003e\n\n### Project Tree\n\n```\n.\n├── public/\n│   ├── admin/\n|   |   └── config.yml\n|   |—— assets/\n|   |   |—— favicons/\n|   |   |—— fonts/\n|   |   |—— images/\n|   |   └── svgs/\n|   |—— _redirects\n|   |—— robots.txt\n├── src/\n|   ├── assets/\n|   |   └—— images/\n|   |       └── blog/\n|   ├── components/\n|   ├── content/\n|   |   |—— config.ts\n|   |   └── blog/\n│   ├── _data/\n│   │   ├── client.json\n│   │   └── navData.json\n│   ├── icons/\n│   ├── layouts/\n│   │   └── BaseLayout.astro\n|   ├── js/\n│   │   ├── nav.js\n|   |   └── utils.js\n│   ├── pages/\n|   |   └── blog/\n|   |   └── projects/\n|   └── styles/\n├── astro.config.mjs\n├── postcss.config.cjs\n├── package-lock.json\n├── package.json\n└── tsconfig.json\n```\n\n\u003ca name=\"rootFilesAndFolders\"\u003e\u003c/a\u003e\n\n### Root Files and Folders\n\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\nThis behavior makes `public/` ideal for common assets like images and fonts, or special files such as`_redirects` and `robots.txt`.\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##### `public/admin`\nThis folder contains `config/yml`, which is where Decap CMS configuration options lives. [More information about options in Decap docs](https://decapcms.org/docs/configuration-options/)\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\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/js`\nContains helper functions.\n\n##### `src/pages`\nPages are a special kind of component used to create new pages on your site. A page can be an Astro component, or a Markdown file that represents some page of content for your site.\n\n##### `src/styles`\nIt is a common convention to store your CSS, Less or Sass files in a `src/styles` directory.\n\n\n\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#### `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#### `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#### `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\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\u003ca name=\"reusingCode\"\u003e\u003c/a\u003e\n\n### Reusing Code\n\nThe main advantage to using an SSG is it brings components, popularized by JavaScript-heavy frameworks like React or Vue, to vanilla HTML. As Astro is being\nused, componentization can be achieved through JSX-like syntax within .astro files.\n\nFor example, there is a call to action at the bottom of most pages. As the text content or styles don't need to change, `\u003cCTA /\u003e` was\nused. If this wasn't the case, and we wanted the CTA text to change, we'd start to think about passing props to `\u003cCTA /\u003e`.\n\nAn example of passing props to components is `Landing /\u003e`.\n\nIn `about.astro`:\n\n```JS\n---\n// import the component\nimport Landing from \"@components/Landing.astro\";\n---\n\n\u003cBaseLayout\n  title=\"About\"\n  description=\"Meta description for the page\"\n  preloadImg=\"/assets/images/cabinets2.jpg\"\n\u003e\n  // Use the \u003cLanding /\u003e component\n  \u003cLanding \n    title=\"About Us\" // pass a `title` prop to the component\n  /\u003e\n```\n\nIn `Landing.astro`\n```JS\n---\nconst { title } = Astro.props // Destructure the incoming props. Note the `Astrop.props` syntax\n---\n\n\u003ch1 id=\"home-h\"\u003e{title}\u003c/h1\u003e // Consumme the title prop in the JSX markup\n\n```\n\n\u003ca name=\"scripts\"\u003e\u003c/a\u003e\n\n### Scripts and Event Handling\nYou can add interactivity to your Astro components using standard HTML `\u003cscript\u003e` tags. This allows you to send JavaScript to run in the browser and add functionality to your Astro components.\n\n#### Using `\u003cscript\u003e` in Astro\n\nThis kit uses scripts in two different ways:\n1. Imported from `src/`\n\nAstro will build, optimize, and add these scripts to the page for you.\n\u003e `async` and `defer` attributes are unnecessary. Indeed, the processed script will be injected into your page’s \u003chead\u003e with `type=\"module\"` and module scripts are always deferred automatically.\n\nFor example, `nav.js` lives in `src/` and is used in `Baselayout.astro` like so: \n\n`\u003cscript src=\"@js/nav.js\"\u003e\u003c/script\u003e`\n\n\n2. Scoped to the component\n\nAnother way to use scripts in Astro is to use them directly in the component. For example, the `FAQ.astro` component uses a `\u003cscript\u003e` tag to toggle the FAQ elements on and off. This script doesn't need to be executed on every page, so it is best scoped to its component.\n\nThis being said, this particular script could also well be imported from `src/` as seen above, and it would work too.\n\n#### Using scripts with `\u003cViewTransitions /\u003e` enabled\nWhen you add view transitions to an existing Astro project, some of your scripts may no longer re-run after page navigation like they did with full-page browser refreshes. \n\nThe \u003cViewTransition /\u003e router fires a number of events on the document during navigation. These events provide hooks into the lifecycle of navigation, allowing you to do things like show indicators that a new page is loading, override default behavior, and restore state as navigation is completing.\n\nIn this kit, both the nav and FAQ scripts use the `astro:page-load` wrapper. You can use this event to run code on every page navigation, for example to set up event listeners that would otherwise be lost during navigation.\n\n```js\n\u003cscript\u003e\n  document.addEventListener('astro:page-load', () =\u003e {\n    // This runs on first page load and after every navigation.\n    setupStuff(); // e.g. add event listeners\n  });\n\u003c/script\u003e\n```\n\nFor an in-depth explanation, please refer \u003ca href=\"https://docs.astro.build/en/guides/view-transitions/#script-behavior-with-view-transitions\"\u003eto the documentation.\n\n\u003ca name=\"addingMorePages\"\u003e\u003c/a\u003e\n\n### Adding More Pages\n\nThanks to Astro Navigation, adding new pages is as simple as adding a file to src/pages/ and including it in the `data/navData.json` file:\n\n```JSX\n---\n// optional JavaScript frontmatter\n---\n\n\u003cBaseLayout\n  title=\"Page title for \u003ctitle\u003e and OG tags\"\n  description=\"Description for \u003cmeta\u003e and OG tags\"\n\u003e\n    \u003c!-- Page HTML goes here, without a \u003cmain\u003e wrapper --\u003e\n\u003c/BaseLayout\u003e\n```\n\nStarting from the top, you can see some data enclosed in --- tags. This is known as the page's front matter, which provides additional data to when it comes to\nrendering your pages.\n\nTo add sub-pages, you will first need to create a new folder under `src/pages/` and populate it with `.astro` pages. Look at the `src/pages/projects` forlder for an example. Don't forget to edit `navData.json` to handle the navigation. The navigation bar is already set up to create drop-down menus.\n\n\u003ca name=\"navigationViaFrontMatter\"\u003e\u003c/a\u003e\n\n### Navigation via navData.json\n\nThe header navigation in the project is powered by the `navData.json` file. Each page in the navigation should be included as an item with a `key` property (page title to be displayed) and a `url` property (include a trailing slash). \n\nTo add subpages, populate the `children` array with page objects (i.e., object containing a `key` and `url` property.) If a page has a populated `children` array, a dropdown will be created, provided that a Navigation + Dropdown Stitch is being used (see below). Navigation links will render in the order they're declared.\n\nIf you wish to use an alternative Navigation stitch, you are welcome to swap out the `.cs-ul-wrapper` div in the Stitch for the one used in this starter kit. \nThis will allow you to continue to reap the benefits of navigation vi navData.json. If you want to include dropdown menus in your navigation, you can use the `.cs-ul-wrapper` div below\n\n\u003e Note: we have customised this navigation wrapper to include better accessibility features, which you will not find in navigation stitches.\n\n``` JSX\n\u003cdiv class=\"cs-ul-wrapper\"\u003e\n  \u003cul id=\"cs-expanded-ul\" class=\"cs-ul\"\u003e\n    {navData.map((entry) =\u003e (\n      \u003cli\n        class:list={[\n          \"cs-li\",\n          { \"cs-dropdown\": entry.children?.length \u003e 0 },\n        ]}\n        \n      \u003e\n        {entry.children?.length \u003e 0 ? (\n          // If entry has children in navData.json, create a button and a dropdown icon\n          \u003cbutton\n          aria-expanded=\"false\"\n          aria-controls={`submenu-${entry.key}`}\n          aria-label=\"dropdown-label\"\n            class:list={[\n              \"cs-li-link cs-dropdown-button\",\n              { \"cs-active\": Astro.url.pathname.includes(entry.url)},\n            ]}\n          \u003e\n            {entry.key}\n            \u003cIcon name=\"mdi--caret\" class=\"cs-drop-icon\" /\u003e\n          \u003c/button\u003e\n        ) : (\n          // If entry does not have children in navData.json, create an anchor\n          \u003ca\n            href={entry.url}\n            class:list={[\n              \"cs-li-link\",\n              { \"cs-active\": Astro.url.pathname === entry.url },\n            ]}\n            aria-current={Astro.url.pathname === entry.url ? \"page\" : undefined}\n          \u003e\n            {entry.key}\n          \u003c/a\u003e\n        )}\n        \n        {entry.children?.length \u003e 0 \u0026\u0026 (\n          // If entry has children in navData.json, create a drop down menu\n          \u003cul id={`submenu-${entry.key}`} class=\"cs-drop-ul\"\u003e\n            {entry.children.map((child) =\u003e (\n              \u003cli class=\"cs-drop-li\"\u003e\n                \u003ca \n                  href={child.url} \n                  class=\"cs-li-link cs-drop-link\"\n                  aria-current={Astro.url.pathname === child.url ? \"page\" : undefined}\n                  aria-label={child.key}\n                \u003e\n                  {child.key}\n                \u003c/a\u003e\n              \u003c/li\u003e\n            ))}\n          \u003c/ul\u003e\n        )}\n      \u003c/li\u003e\n    ))}\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n\u003e Should you wish to use your own method of rendering the navigation, you can still take advantage of applying the \"active\" class styles by using a smaller amount of code within the class attribute of the link:\n\n```JSX\n\u003cli class=\"cs-li\"\u003e\n  \u003ca href=\"/about\" class:list={[\"cs-li-link, {\"cs-active\": \"/about/\" === Astro.url.pathname }]}\u003eAbout\u003c/a\u003e\n\u003c/li\u003e\n```\n\n\u003e In this case, if the page slug is \"about\", the .cs-active class will be applied. You're welcome to adjust the page slug value to whatever you require (\"blog\", \"/\", \"services\", etc)\n\u003e For dropdowns, you can use a similar philosophy on the parent dropdown's class attribute, checking to see if any of the child pages are active before applying the styles. An example of this is shown below:\n\n```JSX\n\u003cli class=\"nav-link cs-li cs-dropdown\"\u003e\n  \u003cspan class:list={[\"cs-li-link nav-link\",\n    { 'cs-active': '/annapolis-custom-closets/' === Astro.url.pathname },\n    { 'cs-active': '/bowie-custom-closets/' === Astro.url.pathname },\n    { 'cs-active': '/severna-park-custom-closets/' === Astro.url.pathname },\n    { 'cs-active': '/odenton-custom-closets/' === Astro.url.pathname },\n  ]}\u003e\n    Areas Served\n    \u003cimg class=\"cs-drop-icon\" src=\"/assets/images/down.svg\" alt=\"dropdown icon\" width=\"15\" height=\"15\" decoding=\"async\" aria-hidden=\"true\"\u003e\n  \u003c/span\u003e\n  \u003cul class=\"cs-drop-ul\"\u003e\n    \u003cli class=\"cs-drop-li\"\u003e\n      \u003ca href=\"/annapolis-custom-closets\" class=\"cs-drop-link\"\u003eAnnapolis\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"cs-drop-li\"\u003e\n      \u003ca href=\"/bowie-custom-closets\" class=\"cs-drop-link\"\u003eBowie\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"cs-drop-li\"\u003e\n      \u003ca href=\"/severna-park-custom-closets\" class=\"cs-drop-link\"\u003eSeverna Park\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli class=\"cs-drop-li\"\u003e\n      \u003ca href=\"/odenton-custom-closets\" class=\"cs-drop-link\"\u003eOdenton\u003c/a\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/li\u003e\n```\n\n\u003e In the above example, we're checking to see if the active page slug matches any of the four that are listed (annapolis, bowie, severna or odenton) and applying the .cs-active style to the parent if it does.\n\nBelow the front matter is the page content. Any code that should be sent to a layout should be enclosed in the layout's component:\n\n```JSX\n\u003cBaseLayout\u003e\n  \u003c!-- Your html/jsx code here --\u003e\n\u003c/BaseLayout\u003e\n```\n\nThis code will be inserted into the `\u003cslot /\u003e` component in BaseLayout.astro.\n\n\u003ca name=\"builtinastrocomponents\"\u003e\u003c/a\u003e\n\n### Built-in Astro components: `\u003cImage /\u003e` and `\u003cPicture /\u003e`\nThis kit demonstrates the use of the built-in `\u003cPicture /\u003e` component, [for which you can read the documentation here](https://docs.astro.build/en/guides/images/#picture-). However, not all native HTML `\u003cpicture\u003e` elements from CodeStitch blocks have been replaced with Astro's `\u003cPicture /\u003e` components. CodeStich users will have to decide which one they want to use:\n * CodeStich blocks already have fully-functionning `\u003cpicture\u003e` elements that perform very well. However, the developper will have to do a time-consumming job with resizing and reformatting assets.\n * Astro's `\u003cPicture /\u003e` components must be manually written to replace stitches. On the other hand, they automatically process and optimize assets, which allows the developper to skip the resizing and reformatting preparation work.\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=\"configuringTheCms\"\u003e\u003c/a\u003e\n\n### Configuring the CMS\n\nIn `public/admin/`, you'll find a `config.yml` file which contains the configuration for the blog. While this project is set up to work with a blog out of the box, you are welcome to make changes using\n\u003ca href=\"https://decapcms.org/docs/add-to-your-site/#configuration\"\u003eDecap CMS'\u003c/a\u003e documentation.\n\nBlog content lives in `/src/content/blog` in the form of markdown files, with a front matter similar to that of the pages. MDX files can also be used if you want to include JSX components. The title, description, and tags are defined in the frontmatter of the markdown. The permalink will be the same as the file name.\n\nFiles uploaded through the dashboard's media library will be stored in `src/assets/images/blog` so that they can be accessed and optimised by Astro components if you wish.\n\nWhen `npm run dev` is run, a proxy server for the CMS is spun up on `localhost:8081`. That can often mean you run into errors if `localhost:8080` is already taken, so look out for that. You can locally access the blog via navigating to the `/admin` path (e.g. `http://localhost:4321/admin`). While running the local dev server, you won't need to login to access the admin dashboard. All blog content can be easily created, updated and deleted via this admin panel, and is the very system that your clients can use to manage their website without your involvement. \n\nEverything on the blog should be fairly intuitive, but feel free to experiment with using this panel first. With this kit, you can add _featured_ to the comma-separated list of tags to have them show up as so in the frontend.\n\n\u003ca name=\"astroContentCollections\"\u003e\u003c/a\u003e\n\n### Astro content collections\n\nIn `/src/content`, you will see a `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** to run the blog with Decap CMS, 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  * use Astro's `\u003cImage /\u003e` and `\u003cPicture /\u003e` components with user-uplaoded images via the CMS. \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\nContent Collections can also be used on content that is not created via the CMS.\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 landingImage from \"@assets/images/landing.jpg\" // \u003c-- THE PATH TO THE ASSET YOU WANT TO PRELOAD - The asset must live in src\nimport { getImage } from \"astro:assets\";\nconst optimizedImage = await getImage({src: landingImage, format: 'avif'})\n---\n```\n\nYou only need to change the path of the asset you want to preload. The rest is managed behind the scenes when the `optimizedImage` ispassed to `BaseLayout` as a prop\n\n```diff\n\u003cBaseLayout\n  title=\"Projects\"\n  description=\"Meta description for the page\"\n+ preloadedImage = {optimizedImage}\n\u003e\n```\n\n\u003e [!TIP]\n\u003e This image, if passed to BaseLayout as a prop, will also be used by the `\u003cmeta property=\"og:image\"` tags for social sharing.\n\n\u003ca name=\"sitemapConfiguration\"\u003e\u003c/a\u003e\n\n## Sitemap Configuration\n\nThis template includes automatic sitemap generation using \u003ca href=\"https://docs.astro.build/en/guides/integrations-guide/sitemap/\"\u003e`@astrojs/sitemap`\u003c/a\u003e. The sitemap helps search engines better crawl and index your site.\n\n### Features\n- Automatically generates `sitemap-index.xml` and `sitemap-0.xml`\n- Excludes admin routes from indexing\n- No manual XML creation needed\n\n### Configuration\nThe sitemap is pre-configured in `astro.config.mjs`. Here's what's included:\n\n```js\nimport sitemap from '@astrojs/sitemap';\n\nexport default defineConfig({\n  site: 'https://yourwebsite.com',  // Replace with your site URL\n  integrations: [\n    sitemap({\n      filter: (page) =\u003e !page.includes('/admin'),\n      changefreq: 'weekly',\n      priority: 0.7\n    })\n  ]\n});\n```\n\n\u003e Note: Make sure to replace `https://yourwebsite.com` with your actual site URL in `astro.config.mjs` and `robots.txt`.\n\nFore more configuration options, read the [full Astro Sitemap documentation](https://docs.astro.build/en/guides/integrations-guide/sitemap/)\n\n\u003ca name=\"deployment\"\u003e\u003c/a\u003e\n\n## Deployment\n\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. \n\n1. Ensure the astro.config.mjs, client.json, robots.txt and \\_redirects have been filled out. \n2. Navigate to your Netlify Admin Panel, click _Add new site | Import an existing project_\n3. Follow the instructions to connect your GitHub repository to Netlify.\n4. Once deployed, go to the project's page, click on `Site configuration` then `Identity` in the navigation, then click `Enable Identity`\n5. Invite yourself, and the client, to the site\n6. While in the Identity tab, click the \"Settings and usage\" button to open the settings options. Then, do the following:\n    * Go to `Registration / Registration Preferences`, and set registration from Public to Invite Only\n    * Go to `Registration / External Providers` and add a provider. We recommend Google, so the client can login with Google in 1 click.\n    * Go to `Services / Git Gateway` and enable it.\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, which aims to improve on a few issues such as a breaking update to Astro v.4 due to outdated `astro-netlify-cms` integration.\n* [CodeStitch](https://codestitch.app/) - Some of their free stitches were used in this template.\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%2Fintermediate-astro-decap-cms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodestitchofficial%2Fintermediate-astro-decap-cms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodestitchofficial%2Fintermediate-astro-decap-cms/lists"}