AdsCalculator.xyz — Project Wiki

Live URL: https://adscalculator.xyz/
Repository: https://github.com/SlickFreekDesign/adscalculator-xyz
Local Path: D:\GitHub\adscalculator-xyz
Last Updated: 2026-06-18

1. Project Overview

AdsCalculator.xyz is a Jamstack static site built with Eleventy (11ty) that provides free digital marketing calculators and ROI tools. All calculations run client-side in the browser — no server processing.

Mission

Help marketers calculate ROI, ROAS, CPA, and other key metrics with free, fast, privacy-first tools.

Key Differentiators

• 100% client-side — no data sent to servers
• Privacy-first — no tracking of inputs
• Free — no registration required
• Dark theme with yellow accents (#FFD700), Bento Grid navigation
• Mobile-first responsive design

Current Stats

• 30 blog posts (all with featuredImage)
• 10+ calculators
• 26 CSS modules in style/ → concatenated to single dist/style.css
• ESLint 9 flat config (0 errors)
• Jest tests

2. Tech Stack

CSS Design System

• Background: #353535 (main), #363636 (elements)
• Accent: #FFD700 (yellow)
• Text: #e7e3e3 (primary), #a1a1a1 (secondary)
• Font: Inter (Google Fonts)
• Light mode supported via localStorage toggle

3. Project Structure

D:\GitHub\adscalculator-xyz\
├── .eleventy.js              # Eleventy config
├── package.json
├── wiki/                     # Project knowledge base
│   └── adscalculator-xyz.md  # This file
├── src/
│   ├── _data/
│   ├── _includes/
│   │   ├── layouts/
│   │   ├── sidebar.njk
│   │   └── footer.njk
│   ├── blog/                 # Blog posts (Markdown + PNG images)
│   │   ├── blog.json         # Shared frontmatter
│   │   └── <post-name>/
│   │       ├── index.md
│   │       └── <image>.png
│   ├── index.html            # Homepage (Bento Grid)
│   ├── *.html                # Calculator pages
│   └── glossary.html, faq.html, about.html, etc.
├── assets/
│   ├── main.js
│   ├── style.css             # Concatenated from style/ at build
│   ├── js/                   # Calculator JS files
│   └── ...
├── tests/
└── dist/                     # Build output

4. Calculators & Tools

5. Blog

Published Posts (30)

Blog Post Format

• Layout: layouts/post.html → post.njk
• Frontmatter: layout, title, description, date, tags: "post", ogImage, featuredImage
• Content: Markdown with MathJax support
• Images: SVG source → sharp → PNG for ogImage/featuredImage. SVG for inline images.
• Style: Educational, professional, accessible, English

Blog Content Style Guide

• Language: English (always)
• Tone: Educational but not condescending
• Structure: Hook → Concept → Formula → Example → Conclusion → CTA
• Features: MathJax formulas, blockquotes, numbered lists, bold key terms
• CTA: Links to relevant calculator or related post
• Internal links: Every post links to 2-3 related posts + calculators

6. Conventions

CSS

• NEVER use @import for local CSS — unreliable in production (Cloudflare Pages, CDNs)
• 26 modular files in style/ → Eleventy .after transform concatenates into single dist/style.css

Commits

• Incremental, focused (one feature per commit)
• Bulgarian commit messages OK for private, English for public

Build

npx @11ty/eleventy          # Build
npx @11ty/eleventy --serve  # Dev server
npx jest                     # Tests

Testing after every change:

npx @11ty/eleventy && npx jest

Image Generation

# SVG → PNG via sharp (in project dir)
node -e "require('sharp')(Buffer.from(require('fs').readFileSync('blog/dir/name.svg'))).png().toFile('blog/dir/name.png').then(()=>console.log('done'))"

Tool Quirks

• patch tool fails with "Escape-drift" on HTML with quotes — use write_file instead
• Python: python not found, use node for scripts
• Sharp: installed locally in node_modules

7. SEO & Monetization

Goals

• Traffic growth
• Revenue target: $100+/month (display ads + affiliate)
• SEO team available as resource

Cross-links

• oddscalculator.xyz (footer → "Other Tools")
• Internal: every calculator links to blog, every blog post links to calculators

GTM

• Google Tag Manager ID configured in base.njk

8. Relationship to OddsCalculator.xyz

• Same developer (SlickFreekDesign GitHub)
• Cross-linked in footer
• Shared design language (dark theme, Bento Grid, sidebar)
• Separate wiki files but shared conventions

9. Lessons Learned

10. TODOs & Future Ideas

• [ ] Add more blog posts (see wiki/content-strategy.md)
• [ ] Add schema markup to more calculator pages
• [ ] Improve internal linking between posts
• [ ] Add search functionality to blog
• [ ] Affiliate link integration