Merge pull request #66 from edheltzel/dev

dev

.editorconfig

@@ -6,7 +6,7 @@ root = true
 charset = utf-8
 end_of_line = lf
 indent_size = 2
-indent_style = space
+indent_style = tab
 insert_final_newline = true
 trim_trailing_whitespace = true
 
@@ -15,13 +15,13 @@ trim_trailing_whitespace = false
 indent_size = 2
 
 [*.{njk,nunjucks,liquid,html}]
-indent_style = space
+indent_style = tab
 indent_size = 2
 
 [*.{css,scss}]
-indent_style = space
+indent_style = tab
 indent_size = 2
 
 [*.{json,yaml,yml}]
-indent_style = space
+indent_style = tab
 indent_size = 2

.env.example

@@ -0,0 +1 @@
+ENV=dev

README.md

@@ -121,7 +121,11 @@ We are assuming that you already have Node with NPM (or another package manger,
 
 We are using [Bun](https://bun.sh/) as our package manager.
 
-But, you can swap `bun` in favor of your preferences 👉 [NPM](https://www.npmjs.com/) , [Yarn](https://yarnpkg.com/), and and [Pnpm](https://pnpm.io). Use whatever you want 👍 just be sure to update the `preview` script in `package.json` with what ever flavor you choose to use.
+But, you can swap `bun` in favor of your preferences 👉 [NPM](https://www.npmjs.com/) , [Yarn](https://yarnpkg.com/), and and [Pnpm](https://pnpm.io). Use whatever you want 👍 just be sure to update the `package.json` with what ever flavor you choose to use:
+ - change `preview` with your preference
+ - change `upgrade` with your preference
+ - remove `preinstall` script
+ - remove `packageManager` from `package.json`
 
 It's highly recommended that you enable Node's [corepack](https://nodejs.org/api/corepack.html), this way Yarn and PNPM are included in your toolbox without the need to install them separately.
 
@@ -164,25 +168,24 @@ bun run  install
   <summary>see all dependencies</summary>
 
     bun pm ls
-    ~/Developer/flightdeck node_modules (581)
-    ├── @11ty/[email protected]
-    ├── @11ty/[email protected]
-    ├── @11ty/[email protected]
-    ├── @11ty/[email protected]
-    ├── @alpinejs/[email protected]
-    ├── @biomejs/[email protected]
-    ├── [email protected]
-    ├── [email protected]
-    ├── [email protected]
-    ├── [email protected]
-    ├── [email protected]
-    ├── [email protected]
-    ├── [email protected]
-    ├── [email protected]
-    ├── [email protected]
-    ├── [email protected]
-    ├── [email protected]
-    └── [email protected]
+		~/Developer/flightdeck node_modules (465)
+		├── @11ty/[email protected]
+		├── @11ty/[email protected]
+		├── @11ty/[email protected]
+		├── @11ty/[email protected]
+		├── @alpinejs/[email protected]
+		├── @biomejs/[email protected]
+		├── [email protected]
+		├── [email protected]
+		├── [email protected]
+		├── [email protected]
+		├── [email protected]
+		├── [email protected]
+		├── [email protected]
+		├── [email protected]
+		├── [email protected]
+		├── [email protected]
+		└── [email protected]
 
 </details>
 <p align="right">(<a href="#top">back to top</a>)</p>
@@ -201,65 +204,66 @@ bun run start
 <details>
   <summary>Available Run Commands</summary>
 
-    package.json scripts (14 found):
-      $ bun run start
-        eleventy --serve --incremental
+    package.json scripts (13 found):
+		$ bun run preinstall
+			npx only-allow bun
 
-      $ bun run restart
-        bun run clean && bun run start
+		$ bun run start
+			eleventy --serve
 
-      $ bun run build
-        bun run clean && bun run build:11ty
+		$ bun run build
+			ENV=prod eleventy
 
-      $ bun run build:11ty
-        ENV=production eleventy
+		$ bun run debug
+			DEBUG=Eleventy* eleventy
 
-      $ bun run debug
-        DEBUG=Eleventy* eleventy
+		$ bun run deploy
+			wrangler pages deploy dist --project-name my-flightdeck --commit-message \"local build & deploy\"
 
-      $ bun run preview
-        bunx http-server dist -p 4000
+		$ bun run preview
+			bun run clean && bun run build && bunx http-server dist -p 54321
 
-      $ bun run check
-        biome check
+		$ bun run check
+			biome check
 
-      $ bun run format
-        biome format --
+		$ bun run format
+			biome format --
 
-      $ bun run lint
-        biome lint --
+		$ bun run lint
+			biome lint --
 
-      $ bun run lint:css
-        stylelint \"src/**/*.css\" --fix
+		$ bun run clean
+			./.scrub.sh site
 
-      $ bun run clean
-        ./.scrub.sh site
+		$ bun run purge
+			./.scrub.sh purge
 
-      $ bun run purge
-        ./.scrub.sh purge
+		$ bun run upgrade
+			bunx npm-check-updates -ui
 
-      $ bun run upgrade
-        bunx npm-check-updates -ui
-
-      $ bun run release
-        gh release create v$npm_package_version --generate-notes --latest
+		$ bun run release
+			gh release create v$npm_package_version --generate-notes --latest
 
 </details>
 
+- `preinstall` command - runs `npx only-allow bun` to ensure that only Bun is installed.
+- `start` command - starts the development server with Eleventy.
 - `build` command - executes the production build of your site with Eleventy, includes HTML minification, compressed Sass, optimized images, and bundled javascript.
   - for our workflow, Cloudflare handles the DNS while Cloudflare Pages does the building and hosting - Cloudflare's Auto Minify minifies the HTML, CSS, and JS. You can easily add minification to the build process by adding a plugin to Eleventy.
+- `debug` command - runs the development server with Eleventy with debug logging enabled.
+- `deploy` command - deploys the "manual" production build to Cloudflare Pages.
 - `preview` command - spins up a local server to preview the production build.
-- `check` command - runs biome lint and format at the same time JS/TS, see `biome.json`.
+- `check` command - runs biome lint and format at the same time JS/TS/CSS, see `biome.json`.
   - ie: `bun run check ./src/assets/js/app.js`
-- `format` command - uses biome to format JS/TS, see `biome.json`.
+- `format` command - uses biome to format JS/TS/CSS, see `biome.json`.
   - ie: `bun run format ./src/assets/js/app.js`
-- `lint` command - uses biome to lint JS/TS, see `biome.json`.
+- `lint` command - uses biome to lint JS/TS/CSS, see `biome.json`.
   - ie: `bun run lint ./src/assets/js/app.js`
-- `lint:css` command - uses stylelint to find issues in your css.
 - `clean` command - scrubs/removes the `dist/` and `.cache` directories
 - `purge` command - scrubs/removes the `dist/`, `.cache`, `node_modules`, and any lock files from npm, yarn, pnpm or bun. - 🧼 A fresh install.
   - **👀 NOTE: Both `clean` and `purge` are executed from a bash script**
 - `upgrade` command - uses `bunx npm-check-updates -ui` to upgrade dependencies to their latest versions and updates the `package.json` - this is a work around for `bun run upgrade` not working as expected or how other package managers work.
+- `release` command - creates a new release on GitHub.
 
 <p align="right">(<a href="#top">back to top</a>)</p>
 

biome.json

@@ -7,7 +7,7 @@
   },
   "formatter": {
     "enabled": true,
-    "indentStyle": "space",
+    "indentStyle": "tab",
     "lineWidth": 120
   },
   "javascript": {
@@ -17,6 +17,15 @@
     },
     "globals": ["$", "_", "externalVariable"]
   },
+	"css":{
+		"formatter":{
+			"enabled": true,
+			"lineWidth": 120
+		},
+		"linter":{
+			"enabled": true
+		}
+	},
   "files": {
     "ignore": [
       "./node_modules",

package.json

@@ -10,7 +10,7 @@
     "@11ty/eleventy-navigation": "^0.3.5",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@biomejs/biome": "1.8.3",
-    "browserslist": "^4.23.2",
+    "browserslist": "^4.23.3",
     "eleventy-plugin-embed-everything": "^1.18.2",
     "esbuild": "^0.23.0",
     "fast-glob": "^3.3.2",
@@ -19,9 +19,7 @@
     "lightningcss-cli": "^1.25.1",
     "markdown-it": "^14.1.0",
     "markdown-it-attrs": "^4.1.6",
-    "markdown-it-bracketed-spans": "^1.0.1",
-    "stylelint": "^16.7.0",
-    "stylelint-config-standard": "^36.0.1"
+    "markdown-it-bracketed-spans": "^1.0.1"
   },
   "dependencies": {
     "@alpinejs/persist": "^3.14.1",
@@ -37,17 +35,17 @@
   "scripts": {
     "preinstall": "npx only-allow bun",
     "start": "eleventy --serve",
-    "build": "ENV=production eleventy",
+    "build": "ENV=prod eleventy",
     "debug": "DEBUG=Eleventy* eleventy",
-    "preview": "bun run clean && bun run build && bunx http-server dist -p 4000",
+    "deploy": "wrangler pages deploy dist --project-name my-flightdeck --commit-message \"local build & deploy\"",
+    "preview": "bun run clean && bun run build && bunx http-server dist -p 54321",
     "check": "biome check",
     "format": "biome format --",
     "lint": "biome lint --",
-    "lint:css": "stylelint \"src/**/*.css\" --fix",
     "clean": "./.scrub.sh site",
     "purge": "./.scrub.sh purge",
     "upgrade": "bunx npm-check-updates -ui",
     "release": "gh release create v$npm_package_version --generate-notes --latest"
   },
-  "packageManager": "[email protected].20"
+  "packageManager": "[email protected].21"
 }

src/_flightdeck/transforms.js

@@ -9,7 +9,7 @@
  *
  */
 
-const isProd = process.env.ENV === "production";
+const isProd = process.env.ENV === "prod";
 const { markdownIt } = require("./transforms/markdownIt"); // markdown-it plugins
 const { transformImages } = require("./transforms/allimages"); // optimize all images in src/assets/images
 const minifyHtml = require("./transforms/minifyHtml");

src/_flightdeck/transforms/_legacyEsBuild.js

@@ -6,7 +6,7 @@
  * @requires esbuild
  */
 
-const isProd = process.env.ENV === "production";
+const isProd = process.env.ENV === "prod";
 const esbuild = require("esbuild");
 
 /**

src/_flightdeck/transforms/_scss.js

@@ -42,7 +42,7 @@ const transformScss = (config) => {
         loadPaths: ["node_modules/@picocss/pico/scss", "node_modules/@picocss/pico/scss/themes/default"],
       },
       postcss: postcss([autoprefixer, cssDeclarationSorter({ order: "concentric-css" })]),
-      when: [{ ENV: "production" }],
+      when: [{ ENV: "prod" }],
     },
   ]);
 };

src/_flightdeck/transforms/esBuild.js

@@ -7,7 +7,7 @@
  * @requires path
  */
 
-const isProd = process.env.ENV === "production";
+const isProd = process.env.ENV === "prod";
 const esbuild = require("esbuild");
 const path = require("node:path");
 

src/_flightdeck/workflow.js

@@ -11,7 +11,7 @@
 module.exports = (config, options) => {
   config.setQuietMode(true); // reduce console
   config.setServerOptions({
-    port: 4321, // like Astro
+    port: 54321, // like Astro
     showVersion: true, // show the server version number on the command line
     showAllHosts: false, // show local network IP address for device testing
   });

src/_includes/layouts/base.njk

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en"
 x-data="theme"
-:data-theme="[darkMode ? 'dark' : 'light']"
+:data-theme="[isDarkMode ? 'dark' : 'light']"
 >
   <head>
     {%- include "partials/meta.njk" -%}

src/_includes/partials/meta.njk

@@ -19,6 +19,6 @@
 <meta rel="canonical" href="{{ page.url | baseUrl }}"/>
 <link rel="stylesheet" href="/assets/styles/app.css"/>
 <script type="module" src="/assets/js/app.js" defer></script>
-{% if site.env === "production" %}
+{% if site.env === "prod" %}
  {% include "utilities/analytics.njk" %}
 {% endif %}

src/assets/js/components/toggle-theme.js

@@ -6,15 +6,24 @@
  */
 export default function toggleTheme() {
   return {
-    /** @type {boolean} */
-    darkMode: localStorage.getItem("darkMode") === "true",
+    darkMode: localStorage.getItem("themeMode") || "auto",
 
-    /**
-     * Toggle dark mode
-     */
-    toggleDarkMode() {
-      this.darkMode = !this.darkMode;
-      localStorage.setItem("darkMode", String(this.darkMode));
+    get isDarkMode() {
+      if (this.darkMode === "auto") {
+        return window.matchMedia("(prefers-color-scheme: dark)").matches;
+      }
+      return this.darkMode === "dark";
     },
+
+    toggleDarkMode() {
+      // If it's auto, set it based on current system preference
+      if (this.darkMode === "auto") {
+        this.darkMode = this.isDarkMode ? "light" : "dark";
+      } else {
+        // Simply toggle between dark and light
+        this.darkMode = this.darkMode === "dark" ? "light" : "dark";
+      }
+      localStorage.setItem("themeMode", this.darkMode);
+    }
   };
 }