Contributing to Study Notes

Thanks for taking the time to contribute! These study notes are community-driven — corrections, new certifications, and better explanations are always welcome.

How Can I Contribute?

Fix Typos or Errors

The easiest way is to edit the page directly on GitHub:

Click the "Edit this page on GitHub" link at the bottom of any page on notes.gobinath.com.
Make your changes in the GitHub web editor.
Submit a Pull Request (PR) with a brief description of the fix.

Improve Existing Content

Add better explanations or real-world examples
Add comparison tables or decision trees
Fix outdated information
Add flashcards using the <FlashcardDeck> component

Add a New Certification

If you passed a certification and want to share your notes, follow the steps below.

Getting Started (Local Development)

Prerequisites

Node.js 18+
Git

Setup

git clone https://github.com/gobinathm/Notes.git
cd Notes
npm install
npm run docs:dev

Visit http://localhost:5173 to see the site locally.

Build for Production

npm run docs:build    # Build static files to .vitepress/dist
npm run docs:preview  # Preview the production build

AI Study Assistant (Worker Development)

The AI chatbot uses a Cloudflare Worker as a proxy to Google Gemini. The frontend at http://localhost:5173 calls the deployed production worker by default — you don't need to run the worker locally just to work on content or styling.

If you want to test AI features locally (against a local worker), follow these steps:

Prerequisites: Wrangler CLI (npm install -g wrangler) and a Google Gemini API key.

1. Create worker/.dev.vars (this file is gitignored — never commit it):

ENVIRONMENT=development
GEMINI_API_KEY=your-gemini-api-key-here

2. Run the worker locally:

cd worker
npm install
wrangler dev

The worker runs at http://localhost:8787 by default.

3. Point the frontend at your local worker:

In .vitepress/theme/components/AIChatBot.vue, temporarily change:

const WORKER_URL = 'http://localhost:8787'

Revert this change before submitting a PR.

Why .dev.vars?

The worker uses environment-gated CORS. In production (ENVIRONMENT=production, set in wrangler.toml), only notes.gobinath.com is allowed as a request origin. Setting ENVIRONMENT=development in .dev.vars tells the worker to also accept localhost origins when running via wrangler dev. The .dev.vars file is read automatically by wrangler dev and is gitignored to prevent secrets from being committed.

Project Structure

Notes/
├── .github/workflows/deploy.yml    # GitHub Actions deployment
├── .vitepress/
│   ├── config.mts                  # VitePress configuration (nav, sidebar)
│   └── theme/
│       ├── index.ts                # Theme entry
│       ├── custom.css              # Custom styles
│       └── components/
│           ├── ProgressTracker.vue  # Study progress tracker (localStorage)
│           ├── FlashcardDeck.vue   # Interactive flip cards
│           ├── AIAudioPlayer.vue   # Audio player with download link
│           ├── ImageModal.vue      # Lightbox for infographics
│           ├── AIChatBot.vue       # AI study assistant (Gemini API)
│           ├── ExportPDF.vue       # PDF export
│           └── ShareButtons.vue    # Social sharing
├── .templates/                     # Templates for new certifications
├── certifications/
│   ├── index.md                    # Certifications overview
│   ├── aws/clf-c02/                # AWS Cloud Practitioner
│   ├── aws/aif-c01/                # AWS AI Practitioner
│   ├── aws/mla-c01/                # AWS ML Engineer
│   ├── azure/ab-730/               # Microsoft AI Business Professional
│   ├── azure/ab-731/               # Microsoft AI Transformation Leader
│   ├── github/gh-actions/          # GitHub Actions cert
│   └── google-cloud/gen-ai-leader/ # GCP Generative AI Leader
├── resources/                      # General study resources
├── public/
│   ├── audio/certifications/       # Audio refreshers (M4A per cert)
│   ├── images/certifications/      # Infographics (PNG per cert)
│   └── ...                         # Favicon, logo, robots.txt
├── worker/                         # Cloudflare Worker (Gemini API proxy)
│   ├── src/index.js                # Worker entry point
│   └── wrangler.toml               # Wrangler config
├── scripts/new-cert.sh             # Scaffold a new certification
├── index.md                        # Home page
├── privacy.md                      # Privacy policy
├── ai-disclaimer.md                # AI study assistant disclaimer
└── README.md

Adding a New Certification

Step 1: Scaffold using the script (recommended)

./scripts/new-cert.sh <provider> <exam-code> "Certification Name"
# Example:
./scripts/new-cert.sh aws saa-c03 "AWS Solutions Architect Associate"

Or manually:

mkdir -p certifications/[provider]/[exam-code]
cp .templates/index-template.md certifications/[provider]/[exam-code]/index.md
cp .templates/domain-template.md certifications/[provider]/[exam-code]/domain-1.md
cp .templates/exam-guide-template.md certifications/[provider]/[exam-code]/exam-guide.md
cp .templates/cheatsheet-template.md certifications/[provider]/[exam-code]/cheatsheet.md

Copy domain-template.md once per exam domain.

Step 2: Add static assets

mkdir -p public/audio/certifications/[exam-code]
mkdir -p public/images/certifications/[exam-code]
# Place: exam-tactics.m4a (audio) and infographic.png (image)

Step 3: Fill in the content

Each certification should include:

File	Purpose
`index.md`	Overview, exam info, `<ImageModal>`, `<AIAudioPlayer>`, `<ProgressTracker>`, resources
`domain-*.md`	Study notes per domain with `<FlashcardDeck>`
`exam-guide.md`	Keyword detection table, exam traps, decision rules
`cheatsheet.md`	One-page reference: mnemonics, lookup table, terminology

ProgressTracker children should be granular — one child per section heading in the domain notes, not just one per domain.

Step 4: Cross-check against the vendor's official study guide

Verify that domain notes, exam-guide keyword table, and cheatsheet terminology cover all skills listed in the vendor's published exam objectives.

Step 5: Update VitePress config

Edit .vitepress/config.mts:

Add to nav dropdown:

{ text: 'EXAM-CODE: Cert Name', link: '/certifications/provider/exam-code/' }

Add to sidebar:

{
  text: 'EXAM-CODE: Cert Name',
  collapsed: true,
  items: [
    { text: 'Overview', link: '/certifications/provider/exam-code/' },
    { text: 'Domain 1: Topic', link: '/certifications/provider/exam-code/domain-1' },
    { text: 'Exam Guide', link: '/certifications/provider/exam-code/exam-guide' },
    { text: 'Cheatsheet', link: '/certifications/provider/exam-code/cheatsheet' }
  ]
}

Step 6: Update certifications index

Add your certification to /certifications/index.md with status, difficulty, and prerequisites.

Special Considerations

GitHub Actions Syntax in Markdown

If your notes include ${{ }} syntax, wrap those sections in <div v-pre> to prevent Vue template compilation errors:

<div v-pre>

```yaml
steps:
  - name: Example
    run: echo "${{ github.repository }}"

```

VitePress Container Types

Use these for callouts — ::: important is NOT valid:

::: tip Exam Tip
Frequently tested concept.
:::

::: warning Common Pitfall
Many candidates get this wrong.
:::

::: danger Critical
Must-know for the exam.
:::

::: info Note
Additional context.
:::

Progress Tracker Component

Each cert index page should include a <ProgressTracker> with a unique storage-key:

<ProgressTracker
  title="EXAM Study Progress"
  storage-key="exam-code-progress"
  :items="[
    {
      id: 'domain-1',
      label: 'Domain 1: Topic (XX%)',
      children: [
        { id: 'd1-sub1', label: 'Subtopic 1' },
        { id: 'd1-sub2', label: 'Subtopic 2' }
      ]
    },
    { id: 'ready', label: 'Ready for exam' }
  ]"
/>

FlashcardDeck Component

Use flashcards in domain pages for key terms and quick-fire revision:

<FlashcardDeck
  title="Key Terms"
  :cards="[
    {
      question: 'What is X?',
      answer: '<strong>X</strong>: Definition here.'
    }
  ]"
/>

AIAudioPlayer Component

Add to index.md for NotebookLM audio refreshers:

<AIAudioPlayer ai-label="AI Audio Synthesis • NotebookLM" download-url="/audio/certifications/[cert-code]/exam-tactics.m4a">
  <source src="/audio/certifications/[cert-code]/exam-tactics.m4a" type="audio/mp4">
</AIAudioPlayer>

ImageModal Component

Add to index.md for exam infographics:

<ImageModal
  src="/images/certifications/[cert-code]/infographic.png"
  alt="[CERT-CODE] Exam Overview Infographic"
  ai-label="Generated by NotebookLM"
/>

Pull Request Process

Fork the repo and create your branch from main
Ensure the site builds locally (npm run docs:build)
Follow the existing style (headers, tables, callouts)
Submit the PR with a brief description

Style Guide

Tone: Professional but accessible. Use "you" over "we".
Key terms: Use bold on first mention.
Comparisons: Use tables, not paragraphs.
Callouts: Use ::: tip, ::: warning, ::: danger, ::: info for exam-relevant notes.
No emojis in study content (keep it clean and scannable).

Privacy & Analytics

The site uses Umami for privacy-first analytics:

No cookies, no personal data, no IP tracking
GDPR compliant — no consent banner needed
Tracks: page views, referrer, country, device type
Does NOT track: personal info, cross-site activity

See Privacy Policy for details.

Deployment

Site: Every push to main triggers automatic deployment to GitHub Pages via GitHub Actions. The site is available at notes.gobinath.com.
Worker: Changes to worker/ trigger a separate GitHub Actions workflow that deploys the Cloudflare Worker via wrangler-action.

Built With

VitePress — Static site generator
Vue.js — Component framework
Google Gemini — AI study assistant
Cloudflare Workers — API proxy
Umami — Privacy-first analytics
GitHub Pages — Hosting

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Contributing to Study Notes

How Can I Contribute?

Fix Typos or Errors

Improve Existing Content

Add a New Certification

Getting Started (Local Development)

Prerequisites

Setup

Build for Production

AI Study Assistant (Worker Development)

Project Structure

Adding a New Certification

Step 1: Scaffold using the script (recommended)

Step 2: Add static assets

Step 3: Fill in the content

Step 4: Cross-check against the vendor's official study guide

Step 5: Update VitePress config

Step 6: Update certifications index

Special Considerations

GitHub Actions Syntax in Markdown

VitePress Container Types

Progress Tracker Component

FlashcardDeck Component

AIAudioPlayer Component

ImageModal Component

Pull Request Process

Style Guide

Privacy & Analytics

Deployment

Built With

FilesExpand file tree

CONTRIBUTING.md

Latest commit

History

CONTRIBUTING.md

File metadata and controls

Contributing to Study Notes

How Can I Contribute?

Fix Typos or Errors

Improve Existing Content

Add a New Certification

Getting Started (Local Development)

Prerequisites

Setup

Build for Production

AI Study Assistant (Worker Development)

Project Structure

Adding a New Certification

Step 1: Scaffold using the script (recommended)

Step 2: Add static assets

Step 3: Fill in the content

Step 4: Cross-check against the vendor's official study guide

Step 5: Update VitePress config

Step 6: Update certifications index

Special Considerations

GitHub Actions Syntax in Markdown

VitePress Container Types

Progress Tracker Component

FlashcardDeck Component

AIAudioPlayer Component

ImageModal Component

Pull Request Process

Style Guide

Privacy & Analytics

Deployment

Built With