From c7a03cbfded31e656db75515b18fa13fb8c7a13f Mon Sep 17 00:00:00 2001 From: Geoffrey Le Meur Date: Thu, 5 Feb 2026 15:35:04 +0100 Subject: [PATCH 1/4] Init scripts --- README.md | 145 ++++++++------- package.json | 84 ++++----- scripts/remove-dark-mode.js | 210 +++++++++++++++++++++ scripts/remove-decap.js | 289 +++++++++++++++++++++++++++++ scripts/remove-demo.js | 356 ++++++++++++++++++++++++++++++++++++ 5 files changed, 980 insertions(+), 104 deletions(-) create mode 100644 scripts/remove-dark-mode.js create mode 100644 scripts/remove-decap.js create mode 100644 scripts/remove-demo.js diff --git a/README.md b/README.md index 2b198b3e..321ee62b 100644 --- a/README.md +++ b/README.md @@ -22,33 +22,35 @@ ## Table of Contents -- Overview -- Prerequisites - - Must Knows - - Good-to-knows -- Quick Start Guide -- Explanation of File Structure - - Root Files - - .eleventy.js - - netlify.toml - - package.json and package-lock.json - - node_modules/ - - public/ - - src/ - - \_data/ - - \_includes - - Navigations \- Rendering Automatically - - Navigations \- Rendering Manually - - admin/ - - assets/ - - config/ - - content/ - - Root src/ Files - - \_redirects - - index.html - - robots.html - - sitemap.html -- Deployment +- Overview +- Prerequisites + - Must Knows + - Good-to-knows +- Quick Start Guide +- Customisation Scripts + +- Explanation of File Structure + - Root Files + - .eleventy.js + - netlify.toml + - package.json and package-lock.json + - node_modules/ + - public/ + - src/ + - \_data/ + - \_includes + - Navigations \- Rendering Automatically + - Navigations \- Rendering Manually + - admin/ + - assets/ + - config/ + - content/ + - Root src/ Files + - \_redirects + - index.html + - robots.html + - sitemap.html +- Deployment @@ -68,10 +70,10 @@ An example website is also provided, with easy substitution of website sections _Knowledge requirements before using the kit_ -- HTML/CSS -- Beginner-level JS -- Familiarity with working in a NodeJS-powered project (handling dependencies with npm, source vs built files, etc) -- Familiarity with templating languages (this kit uses Nunjucks) +- HTML/CSS +- Beginner-level JS +- Familiarity with working in a NodeJS-powered project (handling dependencies with npm, source vs built files, etc) +- Familiarity with templating languages (this kit uses Nunjucks) @@ -79,14 +81,14 @@ _Knowledge requirements before using the kit_ _Not required for light-medium kit usage, but helpful if you want to customise the kit beyond base functionality_ -- Nunjucks ([Docs found here](https://mozilla.github.io/nunjucks/)) - - 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. -- Eleventy ([Docs found here](https://www.11ty.dev/docs/)). Key topics include: - - [The Data Cascade](https://www.11ty.dev/docs/data-cascade/) - - [Layouts](https://www.11ty.dev/docs/layouts/) - - [Permalinks](https://www.11ty.dev/docs/permalinks/) - - [Passthroughs](https://www.11ty.dev/docs/copy/) -- Decap CMS ([Docs found here](https://decapcms.org/docs/intro/)) +- Nunjucks ([Docs found here](https://mozilla.github.io/nunjucks/)) + - 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. +- Eleventy ([Docs found here](https://www.11ty.dev/docs/)). Key topics include: + - [The Data Cascade](https://www.11ty.dev/docs/data-cascade/) + - [Layouts](https://www.11ty.dev/docs/layouts/) + - [Permalinks](https://www.11ty.dev/docs/permalinks/) + - [Passthroughs](https://www.11ty.dev/docs/copy/) +- Decap CMS ([Docs found here](https://decapcms.org/docs/intro/)) @@ -102,6 +104,24 @@ _Not required for light-medium kit usage, but helpful if you want to customise t 8. 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. 9. Deploy using your preferred hosting provider. + + +## Customization Scripts + +Scripts to quickly strip features you don't need. + +### Remove Dark Mode + +Run `npm run remove-dark-mode` to remove all dark mode code. + +### Remove Decap CMS + +Run `npm run remove-decap` to remove Decap CMS and optionally all blog content. + +### Remove Demo Content + +Run `npm run remove-demo` to strip the template to its bare minimum. + ## Explaination of File Structure @@ -152,14 +172,14 @@ The heart of the kit, the `.eleventy.js` file configures the Eleventy static sit The `.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: -- Sets up CSS and JS as template languages, allowing modification at build time by Eleventy. JS is bundled and minified by esbuild. -- Adds the following plugins: - - [Eleventy Navigation](https://github.com/11ty/eleventy-navigation) - Allows the option to define navigation data within the template front matter. - - [Eleventy Sitemap](https://www.npmjs.com/package/@quasibit/eleventy-plugin-sitemap) - Automatically generates a sitemap from all files in `./src/content`. - - [Eleventy Minification](https://github.com/benjaminrancourt/eleventy-plugin-files-minifier) - Minifies HTML and CSS (only run in production - when `npm run build` is executed). -- Passes through all assets (in `./src/assets`) without modification by Eleventy. -- Adds date formatting filters and a year shortcode. -- Sets some basic server options. +- Sets up CSS and JS as template languages, allowing modification at build time by Eleventy. JS is bundled and minified by esbuild. +- Adds the following plugins: + - [Eleventy Navigation](https://github.com/11ty/eleventy-navigation) - Allows the option to define navigation data within the template front matter. + - [Eleventy Sitemap](https://www.npmjs.com/package/@quasibit/eleventy-plugin-sitemap) - Automatically generates a sitemap from all files in `./src/content`. + - [Eleventy Minification](https://github.com/benjaminrancourt/eleventy-plugin-files-minifier) - Minifies HTML and CSS (only run in production - when `npm run build` is executed). +- Passes through all assets (in `./src/assets`) without modification by Eleventy. +- Adds date formatting filters and a year shortcode. +- Sets some basic server options. @@ -267,9 +287,9 @@ Styling the Decap preview pane This template includes custom styles for the Deca The preview styles are defined in /admin/decap-preview-styles.css. The CMS preview script in /admin/index.html: -- pulls the props from the collection -- creates the DOM elements -- registers these elements and styles for the preview panel to use +- pulls the props from the collection +- creates the DOM elements +- registers these elements and styles for the preview panel to use 2. How to update or customize: @@ -277,8 +297,8 @@ Edit /admin/decap-preview-styles.css and the preview pane script in /admin/index 3.Notes -- The style sheet must be a CSS file -- The style sheet does not support nested CSS. +- The style sheet must be a CSS file +- The style sheet does not support nested CSS. @@ -286,13 +306,13 @@ Edit /admin/decap-preview-styles.css and the preview pane script in /admin/index All 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: -- `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). -- `favicons/` - Any favicon files can be stored here. We recommend using [this tool](https://realfavicongenerator.net/) to generate favicons for all devices. -- `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. -- `images/` - Any images can go here. No processing will occur. -- `js/` - Put any JavaScript in this directory. It will be processed, bundled, and minified by esbuild. -- `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` -- `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/). +- `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). +- `favicons/` - Any favicon files can be stored here. We recommend using [this tool](https://realfavicongenerator.net/) to generate favicons for all devices. +- `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. +- `images/` - Any images can go here. No processing will occur. +- `js/` - Put any JavaScript in this directory. It will be processed, bundled, and minified by esbuild. +- `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` +- `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/). @@ -411,9 +431,8 @@ With slight modifications for usage with 11ty, this setup guide for DecapBridge Fill in the 3 input fields: -- Github repository: it has to be in a `user-or-org/repository-name` format. e.g. `BuckyBuck135/testing-decapbridge` -- Github access token. To create a personal access token in GitHub, follow these steps: - +- Github repository: it has to be in a `user-or-org/repository-name` format. e.g. `BuckyBuck135/testing-decapbridge` +- Github access token. To create a personal access token in GitHub, follow these steps: 1. Log into your Github account. 2. Click on your profile picture (top right) (not the repository profile), and click the “Settings” link. 3. Scroll down and click the “Developer Settings” link. @@ -430,7 +449,7 @@ Fill in the 3 input fields: 12. Double check your permissions before generating the token. It must have read and write access to Contents and Pull Requests. -- 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/#/) +- 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/#/) ### On your CS Decap kit: diff --git a/package.json b/package.json index e597bfd3..184e635f 100644 --- a/package.json +++ b/package.json @@ -1,42 +1,44 @@ { - "name": "intermediate-website-kit-less", - "version": "2.0.1", - "description": "The official CodeStitch Intermediate kit, featuring 11ty, Decap CMS and LESS - all set up for you! Perfect for websites of all sizes.", - "main": "index.js", - "scripts": { - "watch:cms": "npx decap-server", - "watch:eleventy": "cross-env ELEVENTY_ENV=DEV eleventy --serve", - "build:eleventy": "cross-env ELEVENTY_ENV=PROD eleventy", - "start": "run-p watch:*", - "build": "run-s build:*", - "preview": "cross-env ELEVENTY_ENV=PROD eleventy --serve" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/CodeStitchOfficial/Intermediate-Website-Kit-LESS.git" - }, - "keywords": [], - "author": "", - "license": "ISC", - "bugs": { - "url": "https://github.com/CodeStitchOfficial/Intermediate-Website-Kit-LESS/issues" - }, - "homepage": "https://github.com/CodeStitchOfficial/Intermediate-Website-Kit-LESS#readme", - "dependencies": { - "@11ty/eleventy": "^3.1.2", - "@codestitchofficial/eleventy-plugin-minify": "^1.1.3", - "@codestitchofficial/eleventy-plugin-sharp-images": "^2.2.0", - "@quasibit/eleventy-plugin-sitemap": "^2.2.0", - "autoprefixer": "^10.4.23", - "codestitch-sharp-image-automation": "^0.4.0", - "cross-env": "^10.1.0", - "cssnano": "^7.1.2", - "decap-server": "^3.5.0", - "esbuild": "^0.27.2", - "glob": "^11.1.0", - "less": "^4.5.1", - "netlify-plugin-cache": "^1.0.3", - "npm-run-all2": "^5.0.2", - "postcss": "^8.5.6" - } -} + "name": "intermediate-website-kit-less", + "version": "2.0.1", + "description": "The official CodeStitch Intermediate kit, featuring 11ty, Decap CMS and LESS - all set up for you! Perfect for websites of all sizes.", + "main": "index.js", + "scripts": { + "watch:cms": "npx decap-server", + "watch:eleventy": "cross-env ELEVENTY_ENV=DEV eleventy --serve", + "build:eleventy": "cross-env ELEVENTY_ENV=PROD eleventy", + "start": "run-p watch:*", + "build": "run-s build:*", + "preview": "cross-env ELEVENTY_ENV=PROD eleventy --serve", + "remove-dark-mode": "node scripts/remove-dark-mode.js", + "remove-decap": "node scripts/remove-decap.js", + "remove-demo": "node scripts/remove-demo.js" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/CodeStitchOfficial/Intermediate-Website-Kit-LESS.git" + }, + "keywords": [], + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/CodeStitchOfficial/Intermediate-Website-Kit-LESS/issues" + }, + "homepage": "https://github.com/CodeStitchOfficial/Intermediate-Website-Kit-LESS#readme", + "dependencies": { + "@11ty/eleventy": "^3.1.2", + "@codestitchofficial/eleventy-plugin-minify": "^1.1.3", + "@codestitchofficial/eleventy-plugin-sharp-images": "^2.2.0", + "@quasibit/eleventy-plugin-sitemap": "^2.2.0", + "autoprefixer": "^10.4.23", + "codestitch-sharp-image-automation": "^0.4.0", + "cross-env": "^10.1.0", + "cssnano": "^7.1.2", + "esbuild": "^0.27.2", + "glob": "^11.1.0", + "less": "^4.5.1", + "netlify-plugin-cache": "^1.0.3", + "npm-run-all2": "^5.0.2", + "postcss": "^8.5.6" + } +} \ No newline at end of file diff --git a/scripts/remove-dark-mode.js b/scripts/remove-dark-mode.js new file mode 100644 index 00000000..dfb02382 --- /dev/null +++ b/scripts/remove-dark-mode.js @@ -0,0 +1,210 @@ +const fs = require("fs"); +const path = require("path"); + +const paths = { + baseHtml: "src/_includes/layouts/base.html", + headerHtml: "src/_includes/sections/header.html", + rootLess: "src/assets/less/root.less", + darkJs: "src/assets/js/dark.js", + navJs: "src/assets/js/nav.js", +}; + +function resolvePath(p) { + return path.join(process.cwd(), p); +} + +function removeFile(filePath) { + const fullPath = resolvePath(filePath); + if (fs.existsSync(fullPath)) { + fs.unlinkSync(fullPath); + console.log(`Deleted ${filePath}`); + } else { + console.log(`File not found: ${filePath}`); + } +} + +function updateFile(filePath, replacements) { + const fullPath = resolvePath(filePath); + if (!fs.existsSync(fullPath)) { + console.log(`File not found: ${filePath}`); + return; + } + + let content = fs.readFileSync(fullPath, "utf8"); + let originalContent = content; + + replacements.forEach(({ pattern, replacement, name }) => { + content = content.replace(pattern, replacement); + }); + + if (content !== originalContent) { + fs.writeFileSync(fullPath, content, "utf8"); + console.log(`Updated ${filePath}`); + } else { + console.log(`No changes needed for ${filePath}`); + } +} + +// Helper to remove a CSS block by selector, handling balanced braces +function removeCssBlock(content, selector) { + let result = content; + + // Escaping selector for use in new RegExp + const escapedSelector = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); + // Match selector followed by anything until { + const selectorRegex = new RegExp( + `\\s*${escapedSelector}(?:\\s+[^{,]+)?\\s*\\{`, + "g", + ); + + let match; + while ((match = selectorRegex.exec(result)) !== null) { + const startIndex = match.index; + const openBraceIndex = result.indexOf("{", startIndex); + + let braceCount = 1; + let i = openBraceIndex + 1; + while (braceCount > 0 && i < result.length) { + if (result[i] === "{") braceCount++; + else if (result[i] === "}") braceCount--; + i++; + } + + if (braceCount === 0) { + // Remove from match start to end brace + result = result.substring(0, startIndex) + result.substring(i); + // Reset regex to search from beginning since string changed + selectorRegex.lastIndex = 0; + } else { + // Unbalanced, skip + selectorRegex.lastIndex = startIndex + 1; + } + } + return result; +} + +// Custom LESS cleaner +function cleanLess(filePath) { + const fullPath = resolvePath(filePath); + if (!fs.existsSync(fullPath)) { + console.log(`File not found: ${filePath}`); + return; + } + + let content = fs.readFileSync(fullPath, "utf8"); + const originalContent = content; + + // 1. Remove Dark Mode variables in :root + content = content.replace(/--dark:\s*#[0-9a-fA-F]+;\s*/g, ""); + content = content.replace(/--medium:\s*#[0-9a-fA-F]+;\s*/g, ""); + content = content.replace(/--accent:\s*#[0-9a-fA-F]+;\s*/g, ""); + + // 2. Remove "Dark Mode" comments (single-line and multi-line CodeStitch section headers) + // Uses [\s\S] instead of a character range so newlines inside multi-line comments are matched + content = content.replace( + /\/\*(?:(?!\*\/)[\s\S])*?[Dd]ark [Mm]ode(?:(?!\*\/)[\s\S])*?\*\/\s*/g, + "", + ); + + // 3. Remove dark mode specific blocks + content = removeCssBlock(content, "body.dark-mode"); + content = removeCssBlock(content, "#dark-mode-toggle"); + + // 4. Remove .cs-dark/.dark utility classes (only useful with dark mode) + content = removeCssBlock(content, ".cs-dark"); + + // 5. Remove .cs-dark, .dark comma-separated block (removeCssBlock can't handle comma-separated selectors) + content = content.replace( + /\n?\s*\.cs-dark,\s*\n?\s*\.dark\s*\{[^}]*\}/g, + "", + ); + + // 6. Remove nested &.dark blocks (e.g. inside .cs-logo-img) + content = content.replace(/\n?\s*&\.dark\s*\{[^}]*\}/g, ""); + + // 7. Remove the dark mode background-color transition on html/body + content = content.replace( + /\s*transition:\s*background-color\s+0\.3s;\s*/g, + "\n", + ); + + // 8. Remove Empty Media Queries (generic) + // We run this multiple times to catch media queries that become empty after their content is removed + const emptyMediaRegex = /@media[^{]+\{\s*\}/g; + let loopCount = 0; + while (emptyMediaRegex.test(content) && loopCount < 5) { + content = content.replace(emptyMediaRegex, ""); + loopCount++; + } + + // 9. Clean up multiple empty lines + content = content.replace(/\n{3,}/g, "\n\n"); + + if (content !== originalContent) { + fs.writeFileSync(fullPath, content, "utf8"); + console.log(`Deep cleaned ${filePath}`); + } else { + console.log(`No deeper changes needed for ${filePath}`); + } +} + +// --- EXECUTION --- + +// 1. Remove dark.js +removeFile(paths.darkJs); + +// 2. Update base.html +updateFile(paths.baseHtml, [ + { + name: "Remove dark.js script tag", + pattern: /\s*