{"id":20844442,"url":"https://github.com/codestitchofficial/intermediate-website-kit-sass","last_synced_at":"2025-06-25T05:04:33.023Z","repository":{"id":176292690,"uuid":"654691116","full_name":"CodeStitchOfficial/Intermediate-Website-Kit-SASS","owner":"CodeStitchOfficial","description":"The official CodeStitch Intermediate kit, featuring 11ty, Decap CMS and SASS - all set up for you! Perfect for websites of all sizes.","archived":false,"fork":false,"pushed_at":"2025-06-06T16:47:52.000Z","size":3377,"stargazers_count":924,"open_issues_count":3,"forks_count":257,"subscribers_count":16,"default_branch":"main","last_synced_at":"2025-06-06T17:36:32.877Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"SCSS","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":null,"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,"zenodo":null}},"created_at":"2023-06-16T17:50:09.000Z","updated_at":"2025-06-06T16:47:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"f3edbe7c-3a7b-478c-9ba2-0732af9a600b","html_url":"https://github.com/CodeStitchOfficial/Intermediate-Website-Kit-SASS","commit_stats":null,"previous_names":["codestitchofficial/intermediate-website-kit-sass"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/CodeStitchOfficial/Intermediate-Website-Kit-SASS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeStitchOfficial%2FIntermediate-Website-Kit-SASS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeStitchOfficial%2FIntermediate-Website-Kit-SASS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeStitchOfficial%2FIntermediate-Website-Kit-SASS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeStitchOfficial%2FIntermediate-Website-Kit-SASS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeStitchOfficial","download_url":"https://codeload.github.com/CodeStitchOfficial/Intermediate-Website-Kit-SASS/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeStitchOfficial%2FIntermediate-Website-Kit-SASS/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261808046,"owners_count":23212686,"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":[],"created_at":"2024-11-18T02:09:38.010Z","updated_at":"2025-06-25T05:04:33.005Z","avatar_url":"https://github.com/CodeStitchOfficial.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://codestitch.app/\"\u003e\n    \u003cimg src=\"https://codestitch.app/frontend/images/icon.png\" alt=\"Logo\" width=\"80\" height=\"80\"\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003eIntermediate Starter Kit (SASS)\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    Introducing the Intermediate Website Kit, presented by CodeStitch. This kit includes a pre-configured Eleventy environment with Nunjucks templating, along with seamless integration of Decap CMS. This setup allows you to quickly start a project while providing your client with a blog for content management. Everything is ready to go right from the start, offering a fantastic introduction to the advantages of a Static Site Generator, complete with SASS preprocessing.\n    \u003cbr/\u003e\n    \u003cbr/\u003e\n    \u003ca href=\"https://github.com/CodeStitchOfficial/Intermediate-Website-Kit-LESS\"\u003eLESS Starter Kit\u003c/a\u003e\n    .\n    \u003ca href=\"https://codestitch-intermediate.netlify.app/\"\u003eView Live Result\u003c/a\u003e\n    .\n    \u003ca href=\"https://www.youtube.com/watch?v=0BNCYM4InT0\u0026t\"\u003eWatch Video\u003c/a\u003e\n    .\n    \u003ca href=\"https://codestitch.app/contact\"\u003eReport Bug\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n## Table of Contents\n\n-   \u003ca href=\"#overview\"\u003eOverview\u003c/a\u003e\n-   \u003ca href=\"#prerequisites\"\u003ePrerequisites\u003c/a\u003e\n    -   \u003ca href=\"#must-knows\"\u003eMust Knows\u003c/a\u003e\n    -   \u003ca href=\"#good-to-knows\"\u003eGood-to-knows\u003c/a\u003e\n-   \u003ca href=\"#quick-start-guide\"\u003eQuick Start Guide\u003c/a\u003e\n-   \u003ca href=\"#explanation-of-file-structure\"\u003eExplanation of File Structure\u003c/a\u003e\n    -   \u003ca href=\"#root-files\"\u003eRoot Files\u003c/a\u003e\n        -   \u003ca href=\"#eleventyjs\"\u003e.eleventy.js\u003c/a\u003e\n        -   \u003ca href=\"#netlifytoml\"\u003enetlify.toml\u003c/a\u003e\n        -   \u003ca href=\"#packagejson-and-package-lockjson\"\u003epackage.json and package-lock.json\u003c/a\u003e\n    -   \u003ca href=\"#nodemodules\"\u003enode_modules/\u003c/a\u003e\n    -   \u003ca href=\"#public\"\u003epublic/\u003c/a\u003e\n    -   \u003ca href=\"#src\"\u003esrc/\u003c/a\u003e\n        -   \u003ca href=\"#_data\"\u003e\\_data/\u003c/a\u003e\n        -   \u003ca href=\"#_includes\"\u003e\\_includes\u003c/a\u003e\n            -   \u003ca href=\"#nav-auto\"\u003eNavigations \\- Rendering Automatically\u003c/a\u003e\n            -   \u003ca href=\"#nav-manual\"\u003eNavigations \\- Rendering Manually\u003c/a\u003e\n    -   \u003ca href=\"#admin\"\u003eadmin/\u003c/a\u003e\n    -   \u003ca href=\"#assets\"\u003eassets/\u003c/a\u003e\n    -   \u003ca href=\"#config\"\u003econfig/\u003c/a\u003e\n    -   \u003ca href=\"#content\"\u003econtent/\u003c/a\u003e\n    -   \u003ca href=\"#root-src-files\"\u003eRoot src/ Files\u003c/a\u003e\n        -   \u003ca href=\"#redirects\"\u003e\\_redirects\u003c/a\u003e\n        -   \u003ca href=\"#indexhtml\"\u003eindex.html\u003c/a\u003e\n        -   \u003ca href=\"#robotshtml\"\u003erobots.html\u003c/a\u003e\n        -   \u003ca href=\"#sitemaphtml\"\u003esitemap.html\u003c/a\u003e\n-   \u003ca href=\"#deployment\"\u003eDeployment\u003c/a\u003e\n\n\u003ca name=\"overview\"\u003e\u003c/a\u003e\n\n## Overview\n\nThe Intermediate Website Kit builds off the beginner kits, mainly by including a pre-configured [Eleventy](https://www.11ty.dev) environment. This setup allows for reusable components, centralized data, and greater scalability as your clients grow. Additionally, a blog has been provided through [Decap CMS](https://decapcms.org/), enabling your clients to manage their own content. This can easily be adapted to various use cases, such as menus, job listing boards, portfolios, and more. A few additional plugins have also been included to enhance the developer experience, offering HTML/CSS minification, JS bundling/minification, and automatic sitemap generation.\n\nAn example website is also provided, with easy substitution of website sections through the use of [CodeStitch's vanilla component library](https://codestitch.app/). This kit aims to get any project off the ground as quickly as possible, with deployment achievable in as little as two minutes, including CMS hosting.\n\n\u003ca name=\"prerequisites\"\u003e\u003c/a\u003e\n\n## Prerequisites\n\n\u003ca name=\"must-knows\"\u003e\u003c/a\u003e\n\n### Must Knows\n\n_Knowledge requirements before using the kit_\n\n-   HTML/CSS\n-   Beginner-level JS\n-   Familiarity with working in a NodeJS-powered project (handling dependencies with npm, source vs built files, etc)\n-   Familiarity with templating languages (this kit uses Nunjucks)\n\n\u003ca name=\"good-to-knows\"\u003e\u003c/a\u003e\n\n### Good-to-knows\n\n_Not required for light-medium kit usage, but helpful if you want to customise the kit beyond base functionality_\n\n-   Nunjucks ([Docs found here](https://mozilla.github.io/nunjucks/))\n    -   If you've never used Nunjucks before, [this excellent article by Hyunbin](https://hyunbinseo.medium.com/nunjucks-settings-for-vs-code-a0da0dc66b95) explains how to set up VSCode to best support Nunjucks, including formatting, syntax highlighting and Emmet.\n-   Eleventy ([Docs found here](https://www.11ty.dev/docs/)). Key topics include:\n    -   [The Data Cascade](https://www.11ty.dev/docs/data-cascade/)\n    -   [Layouts](https://www.11ty.dev/docs/layouts/)\n    -   [Permalinks](https://www.11ty.dev/docs/permalinks/)\n    -   [Passthroughs](https://www.11ty.dev/docs/copy/)\n-   Decap CMS ([Docs found here](https://decapcms.org/docs/intro/))\n\n\u003ca name=\"quick-start-guide\"\u003e\u003c/a\u003e\n\n## Quick Start Guide\n\n1.  At the top of this repository page, click the **Use This Template** button to create a new repository.\n2.  Follow the instructions to create a new repository from the starter kit.\n3.  Clone the repository locally to your computer and open it in VS Code.\n4.  Run `npm install` to install all dependencies.\n5.  After the installation is complete, run `npm start` to start the development server.\n6.  Fill out the `./src/_data/client.js` file with the appropriate information for your client.\n7.  Adjust the `:root` variables in `./src/assets/[sass or less]/root.[scss or less]`\n8.  Modify the website files (use `./src`, NOT `./public`) as needed. Use the template file in `content/pages/_template.txt` to get started, or modify the existing pages.\n9.  Deploy using your preferred hosting provider.\n\n\u003ca name=\"explanation-of-file-structure\"\u003e\u003c/a\u003e\n\n## Explaination of File Structure\n\nThis documentation will explain all the files and directories in the starter kit, from root inwards, top to bottom. By the end, you should have a full understanding of all files and directories, and be fully equipped to adapt the kit to your needs.\n\n```\n.\n├── public/\n├── src/\n│ ├── _data/\n│ │ └── client.js\n│ ├── _includes/\n│ │ ├── components/\n│ │ └── layouts/\n│ ├── admin/\n│ │ └── config.yml\n│ ├── assets/\n│ │ ├── css/\n│ │ ├── favicons/\n│ │ ├── fonts/\n│ │ ├── images/\n│ │ ├── js/\n│ │ ├── sass or less/\n│ │ └── svgs/\n| ├── config/\n│ ├── content/\n│ │ ├── blog/\n│ │ └── pages/\n│ ├── _redirects\n│ ├── index.html\n│ ├── robots.txt\n├── .eleventy.js\n└── netlify.toml\n└── package-lock.json\n└── package.json\n```\n\n\u003ca name=\"root-files\"\u003e\u003c/a\u003e\n\n### Root Files\n\n\u003ca name=\"eleventyjs\"\u003e\u003c/a\u003e\n\n#### .eleventy.js\n\nThe heart of the kit, the `.eleventy.js` file configures the Eleventy static site generator to work as needed. Here, we're able to define settings that control how files are processed, set up filters/shortcodes to modify data at build time, define which languages are used, and set up third-party plugins to add additional functionality to the kit.\n\nThe `.eleventy.js` file is well-documented, with all necessary extra documentation provided for extra reading if desired. A full list of functionalities added via `.eleventy.js` is given below:\n\n-   Sets up CSS and JS as template languages, allowing modification at build time by Eleventy. JS is bundled and minified by esbuild.\n-   Adds the following plugins:\n    -   [Eleventy Navigation](https://github.com/11ty/eleventy-navigation) - Allows the option to define navigation data within the template front matter.\n    -   [Eleventy Sitemap](https://www.npmjs.com/package/@quasibit/eleventy-plugin-sitemap) - Automatically generates a sitemap from all files in `./src/content`.\n    -   [Eleventy Minification](https://github.com/benjaminrancourt/eleventy-plugin-files-minifier) - Minifies HTML and CSS (only run in production - when `npm run build` is executed).\n-   Passes through all assets (in `./src/assets`) without modification by Eleventy.\n-   Adds date formatting filters and a year shortcode.\n-   Sets some basic server options.\n\n\u003ca name=\"netlifytoml\"\u003e\u003c/a\u003e\n\n#### netlify.toml\n\nThe kit is made to support deployment to Netlify out-of-the-box, enabled through this `netlify.toml` file. Here, some basic configuration is used to define the `public/` directory as serving the built website files, as well as adding a Google Lighthouse plugin to show Lighthouse scores in Netlify.\n\n\u003ca name=\"packagejson-and-package-lockjson\"\u003e\u003c/a\u003e\n\n#### package.json and package-lock.json\n\nStandard NodeJS package files, containing the dependencies needed for the project to work. The only things worth noting are the `watch:eleventy` and `build:eleventy` scripts in `package.json`. When `npm start` is used, the `watch:eleventy` script is run, which contains an environment variable (`ELEVENTY_ENV=DEV`). When `npm run build` is used, the `ELEVENTY_ENV` variable is set to `PROD`.\n\nYou may notice around the project (e.g., `./src/config/server.js` and `.eleventy.js`) that there is reference to an `isProduction` variable. This is used to control some functionality that is only run while the website is \"in production\". For example, when `npm run build` is used, we can assume the website is deployed to a live domain, so we can do things like minify the code. This allows comments to be shown in the dev tools while you're actively working on the site but have them removed, and the code minified, for the smallest file sizes and most efficiency when you deploy it.\n\nYou shouldn't have to worry about this, however, as all the initial setup has been done for you. It's still good to know if you wish to expand the kit to add production-only functionality.\n\n\u003ca name=\"nodemodules\"\u003e\u003c/a\u003e\n\n### node_modules/\n\nThis 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\u003ca name=\"public\"\u003e\u003c/a\u003e\n\n### public/\n\nAll files that have been processed and built by Eleventy are stored here. These are the files that your users will be served and see when they visit the website. It's helpful to look into this directory to debug any issues that may appear in your project, but take care not to actively work in this directory. Any changes you make here will be overwritten the next time the project is run with what's contained in `src/`.\n\nIt's also good to understand how it works when a user goes to a domain. If a user goes to [www.example.com](http://www.example.com), the server will look for an `index.html` file at the root of the directory. If they then navigate to [www.example.com/about](http://www.example.com/about), the server will serve the `index.html` file in the /about directory. This is why you'll see a number of directories, all with \"index.html\" files contained within. If you're expecting a file to be present but you're getting 404 errors when navigating to the appropriate path, check to see if the correct directory/file is being written.\n\n\u003ca name=\"src\"\u003e\u003c/a\u003e\n\n### src/\n\n\u003ca name=\"_data\"\u003e\u003c/a\u003e\n\n#### \\_data/\n\nThis directory contains data files that are accessible within any template throughout the project. Out of the box, the kit only contains a `client.js` file, which 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\nConsider adding the client's contact details, address, and social media information to this file. Examples have been provided in the kit. This way, you can access the client's information from a single source of truth. If a client changes their email address, you can update it in the `client.js` file and have it reflect across the website without needing to search through multiple files or use Find and Replace.\n\nAs an example, we have defined the client's email address under the `email` key. In the footer (`./src/_includes/components/footer.html`), we can use `{{ client.email }}` to access this value and output \"help@codestitch.app\". The format for outputting the data is `{{ [FILENAME].[KEY] }}`. If we wanted to add another file for pricing information, we could create a file (`_data/pricing.json`), then use `{{ pricing.price }}` to render the price.\n\nIn Eleventy, this is known as \"Global Data\". You can read more about Global Data [here](https://www.11ty.dev/docs/data-global/), with more information about how this works in the context of the Data Cascade [here](https://www.11ty.dev/docs/data-cascade/).\n\n\u003ca name=\"_includes\"\u003e\u003c/a\u003e\n\n#### \\_includes\n\nThe `_includes` directory contains pieces of HTML code that you want to share between multiple pages. This code could be small components (a button or a loading spinner), larger sections (header, footer, or a stitch from [CodeStitch](https://codestitch.app/)), or a layout containing a reusable `\u003chead\u003e` element with all necessary meta tags.\n\nBy default, the kit has two sub-directories in `_includes` - one for components and one for layouts.\n\nComponents can be used on one, none, or many pages. For example, we've set up a header and a footer that we load on all pages (through `_includes/layouts/base.html`). If you want to make a change to the header or footer, you can do so within `_includes/components`, and this change will be reflected across all pages. This is done by using `{% include \"components/header.html\" %}`. If you want to adjust some of the data within the component (e.g., a button that has the same structure/core styles but different CTA text), you should look into using a [Nunjucks Macro](https://mozilla.github.io/nunjucks/templating#macro), which you can [import](https://mozilla.github.io/nunjucks/templating#import) where needed.\n\nLayouts define the wider page structure. The main one used in this kit is `base.html`, which contains the document type declaration, `\u003chead\u003e` tag with associated `\u003cmeta\u003e` tags (using data in `_data/client.js` and the page front matter), a `\u003cbody\u003e` with a `\u003cmain\u003e` tag and skip-to-content link, and calls to the header and footer. All pages use `base.html`. This has been configured to work automatically, so you shouldn't need much additional work. For the blog, we have also created a `post.html` layout (which also uses the `base.html` file, through Nunjucks' `{% extends %}`) that we use to render the blog article pages.\n\n\u003ca name=\"nav-auto\"\u003e\u003c/a\u003e\n\n##### Navigations - Rendering Automatically\n\nOne thing you may notice in the `\\_includes/header.html` file is the vast amount of Nunjucks code in the `cs-ul-wrapper` element. This is code that makes use of the `eleventyNavigation` object and keys in the frontmatter of all pages that are, by default, added to the kit. This is part of the Eleventy Navigation plugin, which allows us to create scalable navigation menus without having to constantly add new list items and dropdowns to the header whenever a new page is made. If you make a new page using the `\\_template.txt` file in `content/pages`, you will be guided to add this information into the front matter, where the navigation will be remade with the new page data automatically.\n\nIf you wish to use this kit, and benefit from this way of doing navigations but want to swap out the navigation for another one in the CodeStitch template library, you can copy the `cs-ul-wrapper` `\u003cdiv\u003e` element that's found in the kit and replace the `cs-ul-wrapper` in the new stitch. As the class system is the same with all Stitches, the auto-rendering functionality, including the application of active-style classes and dropdowns (if a \"dropdown\" Stitch is used) will remain the same.\n\n\u003ca name=\"nav-manual\"\u003e\u003c/a\u003e\n\n##### Navigations - Rendering Manually\n\nSome developers may wish to continue with the \"old school\" way of rendering navigations and add the HTML for new navigation links to the header individually. This is fine to do too.\n\nOne issue that you may run into, however, is the addition of the `cs-active` class to the page that the user is currently on. As the same navigation element is being rendered on all pages, manually adding the `cs-active` class to one of the navigation items will cause that item to be \"activated\" between all pages.\n\nTo get around this, you will need to manually add some Nunjucks code to each of the navigation items to check the page the user is on and add `cs-active` if that particular page is being viewed. That code would look like this:\n\n```\n\u003ca href=\"/contact\" class=\"cs-li-link {% if page.url == '/contact/' %} cs-active {% endif %}\"\u003e\n    Contact\n\u003c/a\u003e\n```\n\nNote the if-check in the `class` attribute of the anchor element. Here, we're checking if `page.url` (the page we're currently on) matches the permalink of the navigation item. Make sure both leading and trailing slashes are used. If this were for the home page, we'd just check for \"/\", like so:\n\n```\n\u003ca href=\"/\" class=\"cs-li-link {% if page.url == '/' %} cs-active {% endif %}\"\u003e\n    Home\n\u003c/a\u003e\n```\n\n\u003ca name=\"admin\"\u003e\u003c/a\u003e\n\n#### admin/\n\nThe `admin/` directory sets up [Decap CMS](https://decapcms.org/) to be used within the project. It's configured as a blog that a client can access by navigating to the `/admin/` path on the deployed site, where they can create, update, and delete blog posts whenever they want. This modifies the markdown files in the source code, which will trigger a rebuild in Netlify, incorporating the new blog data. After about one minute, the client can see the new blog post on the website.\n\nDecap CMS has been chosen due to its open-source nature, good UX/DX, and stability. Very little training is required on the client's end to get it to work - the interface is clean and operates without trouble. It works through an `index.html` file in the `admin/`. This `index.html` file is processed as an Eleventy template, added to `/public/admin`, and the CMS is loaded when navigating to the `/admin` path. This kit uses DecapBridge for authentication as the Netlify Identity feature has been deprecated. Visit [Decapbridge Discord](\u003c(https://discord.com/channels/1257728522361901219/1257728681380417600)\u003e) and their [open-sources repos](https://github.com/decapbridge) for more information and support.\n\nThe CMS is configured through a `config.yml` file, as per the Decap documentation. If you wish to use the blog as-is, you shouldn't need to make any changes here. If you want to extend the kit and modify the CMS for your own needs, we recommend referring to the Decap documentation for guidance on how to do so.\n\nStyling the Decap preview pane This template includes custom styles for the Decap CMS preview pane, so that blog posts in the admin dashboard look similar to the live site.\n\n1. How it works:\n\nThe preview styles are defined in /admin/decap-preview-styles.css. The CMS preview script in /admin/index.html:\n\n-   pulls the props from the collection\n-   creates the DOM elements\n-   registers these elements and styles for the preview panel to use\n\n2. How to update or customize:\n\nEdit /admin/decap-preview-styles.css and the preview pane script in /admin/index.html to match your site's branding or layout changes. Use Decap's documentation on [customizing the preview pane](https://decapcms.org/docs/customization/)\n\n3.Notes\n\n-   The style sheet must be a CSS file\n-   The style sheet does not support nested CSS.\n\n\u003ca name=\"assets\"\u003e\u003c/a\u003e\n\n#### assets/\n\nAll other non-content files are stored in `assets/`, which is set up in `.eleventy.js` to be passed through to `public/`. A brief overview of each of the folders within `assets/`, and any relevant notes, is provided below:\n\n-   `css/` - SASS/LESS files from the `less/` or `sass/` directories are built into `css/`. From here, the CSS is processed as an Eleventy template, where we minify the code (production only), and pass it through to `public/`. **Do not** make CSS changes here - instead, use the SASS or LESS asset directory (depending on which kit you're using).\n-   `favicons/` - Any favicon files can be stored here. We recommend using [this tool](https://realfavicongenerator.net/) to generate favicons for all devices.\n-   `fonts/` - If you have any non-standard fonts you wish to locally host, you can put the files here. You can use [this tool](https://gwfh.mranftl.com/fonts) to download font files to be stored in `fonts/`, as well as generate the code to be put in your `root.scss` or `root.less` file.\n-   `images/` - Any images can go here. No processing will occur.\n-   `js/` - Put any JavaScript in this directory. It will be processed, bundled, and minified by esbuild.\n-   `sass/` or `less/` - Depending on whether you're using the SASS or LESS version of the kit, you'll find your preprocessor files in one of these directories. Make your changes to styling here, not in `assets/css`\n-   `svgs/` - A separate directory for SVGs. This makes it easier to bulk-compress SVGs separate from `images/` if you're using a tool like [compressor.io](https://compressor.io/).\n\n\u003ca name=\"config\"\u003e\u003c/a\u003e\n\n#### config/\n\nAll configurations for Eleventy are held in this directory. This includes settings for plugins, extensions, filters, and shortcodes, among other things.\n\nUnless you are confident in your Eleventy abilities, we recommend not making any changes to the files in this directory, as they have all been carefully configured to work without modification. If you are confident enough to make changes, you likely don't need a README to tell you what you're doing!\n\n\u003ca name=\"content\"\u003e\u003c/a\u003e\n\n#### content/\n\nAny files that are built into HTML pages are held in `content/`. This includes standalone informational pages (held in `pages/`) and the blog markdown posts, which use the `post.html` layout (that in turn uses `base.html` through [Eleventy layout chaining](https://www.11ty.dev/docs/layout-chaining/) and [Nunjucks template inheritance](https://mozilla.github.io/nunjucks/templating#block)) to form the blog posts controlled by the CMS.\n\nYou're welcome to modify any of these pages or create your own. If you wish to create your own pages, a template can be found in `pages/content/_template.txt`. Copy this file, paste it, rename it to an HTML file, and follow the structure shown in the template. This template contains some code at the top, wrapped between \"---\"s, which is called the front matter. This contains data specific to this page, which is used within the layout to set the `\u003ctitle\u003e` tag, `\u003cmeta\u003e` description tag, among other things. This data will overwrite any data contained elsewhere in the [Eleventy Data Cascade](https://www.11ty.dev/docs/data-cascade/).\n\nA copy of the default front matter can be found below:\n\n```\n---\ntitle: 'Page title for \u003ctitle\u003e and OG tags'\ndescription: 'Description for \u003cmeta\u003e description and OG tags'\npreloadImg: '/assets/images/imagename.format'\npermalink: 'page-path/'\neleventyNavigation:\n    key: Name to appear in navigation\n    order: 1000\n    parent: Optional - Put another page's \"key\" here to create a dropdown\n    hideOnMobile: Optional - set to \"true\" to hide on devices from, and below, 1023px\n    hideOnDesktop: Optional - set to \"true\" to hide on devices above, and including, 1024px\n---\n```\n\nUnder the front matter, there is some more code:\n\n```\n{% extends \"layouts/base.html\" %}\n\n{% block head %}\n    \u003c!-- Any page-specific tags that belong in the \u003chead\u003e, such as a page-specific stylesheet --\u003e\n{% endblock %}\n\n{% block body %}\n    \u003c!-- Page HTML goes here, without a \u003cmain\u003e wrapper --\u003e\n{% endblock %}\n```\n\nThe first line, `{% extends \"layouts/base.html\" %}`, denotes the layout we should use. In the case of this kit, we're using the layout in `_includes/layouts/base.html`. Any code between the `{% block head %} ... {% endblock %}` will be inserted in the `\u003chead\u003e` of the document. This can be useful to insert stylesheets and scripts which you only want to load on this particular page. The page HTML content can be provided within the `{% block body %} ... {% endblock %}`. This will be inserted in the `\u003cbody\u003e` of the HTML document, within a `\u003cmain\u003e` tag.\n\nBlocks are a Nunjucks feature, which you can read more about [here](https://mozilla.github.io/nunjucks/templating#block).\n\nAs mentioned, blog files are held in `content/blog`, with the CMS configured to add new posts as markdown files to this directory. As we can't define things like the layout, tags, permalink, or CSS preloads in the individual markdown files, a [directory data file](https://www.11ty.dev/docs/data-template-dir/) is used in `/blog/` to define this.\n\nA similar directory data file (`content.json`) is used in the `content/` directory to define a \"sitemap\" tag. This adds all pages in `content/` to the sitemap [collection](https://www.11ty.dev/docs/collections/), which renders our sitemap automatically for us.\n\n\u003ca name=\"root-src-files\"\u003e\u003c/a\u003e\n\n#### Root src/ Files\n\n\u003ca name=\"redirects\"\u003e\u003c/a\u003e\n\n##### \\_redirects\n\nSet up any redirect rules here. More information can be found in the [Netlify Docs](https://docs.netlify.com/routing/redirects/).\n\n\u003ca name=\"indexhtml\"\u003e\u003c/a\u003e\n\n##### index.html\n\nThe home page. Treat it as if it were any other page in `content/pages`.\n\n\u003ca name=\"robotshtml\"\u003e\u003c/a\u003e\n\n##### robots.html\n\nSet up as an HTML file so we can use the domain in `_data/client.js` to automatically create a `robots.txt` file in `/public`. We do this by setting the permalink to `/robots.txt`. Unless you need to block crawlers from other pages (we've already blocked `/admin` for you), you shouldn't need to touch this file.\n\n\u003ca name=\"sitemaphtml\"\u003e\u003c/a\u003e\n\n##### sitemap.html\n\nSimilar to `robots.html`, a `.html` file is used to generate a `sitemap.xml` file. It uses all HTML files that have a \"sitemap\" tag applied, which should be all pages in `content/`.\n\n\u003ca name=\"deployment\"\u003e\u003c/a\u003e\n\n## Deployment\n\nWhen you're happy with your website, you can deploy it to your hosting provider of choice. As this kit uses Netlify, we have outlined some instructions below:\n\n1.  Sign in to or create an account with [Netlify](https://www.netlify.com/).\n2.  Go to [https://app.netlify.com](https://app.netlify.com), click **Sites** on the left-hand navigation, then click **Add new site**, and choose **Import an existing project**.\n3.  Choose to deploy your project with GitHub. Follow the steps to link Netlify and GitHub.\n4.  Find your project in the list of repositories.\n5.  Everything should be already configured, thanks to the `netlify.toml` file. Click **Deploy [PROJECT NAME]**.\n6.  Check to see if your site deploys without error. The site should be live, but we still need to set up the CMS.\n\nWith slight modifications for usage with 11ty, this setup guide for DecapBridge was written by Geoffrey on the [Intermediate Astro Decap kit](https://github.com/CodeStitchOfficial/Intermediate-Astro-Decap-CMS/blob/main/README.md?plain=1#deployment)\n\n\u003e [!IMPORTANT] This kit now uses decapbridge.com for its authentication solution. If you still use Netlify Identity, please refer to [the Netlify Identity branch](https://github.com/CodeStitchOfficial/Intermediate-Website-Kit-LESS/tree/deprecated---using-Netlify-Identity)\n\n\u003e [!TIP] If you are updating your kit from Netlify Identity to decapbridge.com:\n\u003e\n\u003e 1. Login to your Netlify account\n\u003e 2. Navigate to Projects/Your-Site\n\u003e 3. Navigate to Project Configuration/Identity and delete the Netlify Identity instance. This will delete your users as well. They will have to be re-created in decapbridge later.\n\u003e 4. Delete the Netlify Identity script in src/index.html and in src/admin/index.html\n\n### On decapbridge.com:\n\n1. Make sure that your repo is on Github and your site is deployed (doesn’t have to be Netlify) before moving on to the next step.\n2. Navigate to https://decapbridge.com/ and create an account. It’s free.\n3. Navigate to the dashboard and Create New Site. You see this screen:\n\n![decapbridge.com dashboard](github/decapbridge-dashboard.png)\n\nFill in the 3 input fields:\n\n-   Github repository: it has to be in a `user-or-org/repository-name` format. e.g. `BuckyBuck135/testing-decapbridge`\n-   Github access token. To create a personal access token in GitHub, follow these steps:\n\n    1. Log into your Github account.\n    2. Click on your profile picture (top right) (not the repository profile), and click the “Settings” link.\n    3. Scroll down and click the “Developer Settings” link.\n    4. Click the GitHub “Personal access tokens” link and choose `fine-grained tokens`\n    5. Click the “Generate new token” button and provide your password again if required.\n    6. Provide a name for the GitHub personal access token in the “Note” field.\n    7. Set the access token’s “expiration” timeout to “No expiration.”\n    8. Set the “Repository access” to the desired repository only.\n    9. Set the “Permissions / Repository permissions” to **read-write access** for this repository's **Contents** and **Pull requests**. (This is needed by DecapCMS to read your markdown, and write new content via Pull Requests.)\n    10. Click “Generate token.”, double check the permissions and click the Generate Token button\n    11. **Make sure to copy your GitHub Personal Access Token now as you will not be able to see this again.**\n\n        ![The Permissions settings](github/github-permissions.png)\n\n    12. Double check your permissions before generating the token. It must have read and write access to Contents and Pull Requests.\n\n-   Decap CMS URL: provide the (deployed) URL of the Decap CMS dashboard. e.g [`https://testing-decapbridge.netlify.app/admin/#/`](https://testing-decapbridge.netlify.app/admin/#/)\n\n### On your CS Decap kit:\n\n1. In `/src/admin/config.yml`, edit the `backend` Decap config to paste in the snippet provided by the [DecapBridge.com](http://DecapBridge.com) dashboard. It should look something like this:\n\n```yaml\n# Use DecapBridge auth (required)\nbackend:\n    name: git-gateway\n    repo: BuckyBuck135/testing-decapbridge # provided by decapbridge\n    branch: main\n    identity_url: https://auth.decapbridge.com/sites/5605bbe7-08f2-4ce5-bce2-7d97def08bed # provided by decapbridge\n    gateway_url: https://gateway.decapbridge.com # provided by decapbridge\n\n    # Quickly see who did what (optional)\n    commit_messages:\n        create: Create {{collection}} “{{slug}}” - {{author-name}} \u003c{{author-login}}\u003e via DecapBridge\n        update: Update {{collection}} “{{slug}}” - {{author-name}} \u003c{{author-login}}\u003e via DecapBridge\n        delete: Delete {{collection}} “{{slug}}” - {{author-name}} \u003c{{author-login}}\u003e via DecapBridge\n        uploadMedia: Upload “{{path}}” - {{author-name}} \u003c{{author-login}}\u003e via DecapBridge\n        deleteMedia: Delete “{{path}}” - {{author-name}} \u003c{{author-login}}\u003e via DecapBridge\n        openAuthoring: Message {{message}} - {{author-name}} \u003c{{author-login}}\u003e via DecapBridge\n\n# Better Decap + Bridge logo (optional)\nlogo_url: https://decapbridge.com/decapcms-with-bridge.svg\n\n# Add site links in DecapCMS (optional)\nsite_url: https://testing-decapbridge.netlify.app\n```\n\n2. Push changes to the repo and test the authentication system. As the admin of the site, your login credentials to access the Decap dashboard are the same as your decapbridge.com credentials.\n3. Invite your client from your decapbridge dashboard. This will create a decapbridge collaborator account for them. From there, they will be able to access their Decap dashboard, reset their password etc.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodestitchofficial%2Fintermediate-website-kit-sass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodestitchofficial%2Fintermediate-website-kit-sass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodestitchofficial%2Fintermediate-website-kit-sass/lists"}