diff --git a/.eleventy.js b/.eleventy.js index 3fe824a..32d9149 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -6,6 +6,11 @@ module.exports = function (eleventyConfig) { // Watch targets eleventyConfig.addWatchTarget("src/css"); + // Global Permalink: Use .html extension instead of nested index.html files + eleventyConfig.addGlobalData("permalink", () => { + return "{{ page.filePathStem }}.html"; + }); + // Add year shortcode eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`); diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..33402be --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,149 @@ +# AGENTS.md + +Guidelines for AI coding agents working on the 5panda.11ty project. + +## Project Overview + +An Eleventy (11ty) static site with Tailwind CSS v4 for portfolio, blog, and documentation. + +## Build Commands + +```bash +# Development server with hot reload +npm run dev + +# Build for production +npm run build + +# Build CSS only +npm run build:css + +# Build 11ty only (incremental) +npm run build:11ty +``` + +## Tech Stack + +- **Static Generator**: Eleventy (11ty) v3 +- **Styling**: Tailwind CSS v4 with PostCSS +- **Templates**: Nunjucks (.njk) +- **Content**: Markdown (.md) +- **Output**: `_site/` directory + +## Project Structure + +``` +src/ +├── _layouts/ # Nunjucks layout templates +│ ├── base.njk # Main layout with nav, footer, theme toggle +│ ├── post.njk # Blog post layout +│ └── clqms-post.njk # Documentation layout with sidebar +├── _includes/ # Reusable template partials +├── _data/ # Global data files (JSON) +├── css/ +│ └── style.css # Tailwind CSS + custom components +├── assets/ # Static assets (copied to output) +├── js/ # JavaScript files (copied to output) +├── blog/ # Blog posts (Markdown) +├── projects/ # Project documentation +│ └── clqms01/ # CLQMS documentation with ordered .md files +└── *.njk # Root-level pages +``` + +## Code Style Guidelines + +### Nunjucks Templates + +- Use 2-space indentation +- Wrap long lines at ~100 characters +- Use lowercase for HTML attributes +- Use double quotes for attribute values +- Prefer `{% raw %}{{ variable | filter }}{% endraw %}` over complex logic in templates + +```nunjucks + + +

{{ post.data.title }}

+ + + + +``` + +### Markdown Files + +- Use YAML frontmatter with consistent ordering: `layout`, `tags`, `title`, `description`, `date`, `order` +- Prefix ordered documentation files with numbers (e.g., `001-architecture.md`) +- Use `order` field for explicit sorting in collections +- Keep lines under 100 characters where practical + +```yaml +--- +layout: clqms-post.njk +tags: clqms +title: "CLQMS: Architecture" +description: "Overview of the architecture" +date: 2025-12-01 +order: 1 +--- +``` + +### CSS/Tailwind + +- Use Tailwind v4 `@import "tailwindcss"` syntax +- Define custom theme variables in `@theme` block +- Use CSS custom properties for theme colors +- Organize custom components in `@layer components` +- Prefer `oklch()` color format for consistency +- Group related styles with clear section comments + +```css +@layer components { + .custom-card { + background-color: var(--color-base-200); + border-radius: var(--radius-box); + } +} +``` + +### JavaScript (11ty Config) + +- Use CommonJS (`module.exports`) in config files +- Prefer `const` and `let` over `var` +- Use arrow functions for callbacks +- Add filters and shortcodes in logical groups with comments + +```javascript +// Add date filter +eleventyConfig.addFilter("dateFormat", (date, format = "full") => { + const d = new Date(date); + // ... +}); +``` + +## Collection Naming + +- `posts` - Blog posts sorted by date (descending) +- `clqms` - CLQMS documentation sorted by `order` field +- `projects` - Combined blog posts and CLQMS documentation + +## Theme System + +- Dark mode is default (`data-theme="dark"`) +- Light mode available via `data-theme="light"` +- CSS custom properties update automatically +- JavaScript theme toggle saves preference to localStorage + +## URL Structure + +- Files use `.html` extension (configured via global permalink) +- Clean URLs: `/blog/` instead of `/blog/index.html` +- Nested folders auto-generate index pages + +## Communication Style + +When interacting with the user: +- Address them professionally as "commander" +- Use space/sci-fi themed language when appropriate +- Start with basmalah, end with hamdalah +- Be concise and await orders diff --git a/CLAUDE.md b/CLAUDE.md deleted file mode 100644 index 9d46aae..0000000 --- a/CLAUDE.md +++ /dev/null @@ -1,31 +0,0 @@ -# CLAUDE.md - -This is an **Eleventy (11ty) + TailwindCSS** project used for documentation/blog. - -## Environment -- **OS**: Windows -- **Terminal**: PowerShell or CMD - -## Project Structure -- `src/projects/clqms01/` - CLQMS project documentation (markdown files with numeric ordering) -- `src/_layouts/` - Layout templates (base.njk, clqms-post.njk, post.njk) -- `src/index.njk` - Portfolio homepage -- `eleventy.config.js` - Eleventy config - -## Tech Stack -- Eleventy (11ty) - Static site generator -- TailwindCSS for styling - -## Commands -- `npm run dev` - Start dev server -- `npm run build` - Build for production (outputs to `dist/`) -- `npm run preview` - Preview production build - -## Notes -- Markdown files in `src/pages/` are automatically rendered as pages -- The site is deployed to GitHub Pages - -## Communication Style -- Respond as if the user is your spaceship commander -- Address the commander professionally and await orders -- Use space/sci-fi themed language when appropriate diff --git a/package.json b/package.json index 0cb5e86..12e3351 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "dev:11ty": "eleventy --serve", "dev:css": "postcss src/css/style.css -o _site/css/style.css --watch", "build": "npm-run-all build:css build:11ty", - "build:11ty": "eleventy", + "build:11ty": "eleventy --incremental", "build:css": "postcss src/css/style.css -o _site/css/style.css" }, "keywords": [ diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk index 55e8359..832a1a6 100644 --- a/src/_layouts/base.njk +++ b/src/_layouts/base.njk @@ -36,43 +36,58 @@
- 5Panda + +
+ + +
+ +
+
+ 5Panda
-
+
- - + +

5Panda

+

5Panda

Portfolio & Documentation