Anki on Ghafoor's Personal Blog

Anki Workflow Verification

noreply@example.com (AG Sayyed) — Mon, 01 Jan 0001 00:00:00 +0000

Anki Workflow Verification

Date: 2 May 2026
Status: ✅ Verified and Working

Current Working Workflow

1. Card Creation (Manual)

JSON files are manually created in: data/course/{course}/{unit}/{module}/{lesson}/anki/*.json
Each JSON contains metadata + flashcards array
Example: data/course/psychology-l2/01/01m/001/anki/01-counselling-skills.json

2. Card Generation (Automatic)

JSON File → apkg_generator.py → .apkg Package → Anki Desktop

Key Scripts:

✅ apkg_generator.py - Main generator (reads JSON, creates APKG)
✅ generate_unit_apkg.py - Creates unit-level APKG files
✅ rebuild_all_apkgs.py - Rebuilds all APKG files

NOT Used in Production:

SCSS Styling System - Implementation Complete

noreply@example.com (AG Sayyed) — Mon, 01 Jan 0001 00:00:00 +0000

SCSS Styling System - Implementation Complete ✅

Status: Production Ready
Date: May 1, 2024
Implementation Phase: Styling Foundation & Integration

Overview

Successfully implemented a modular, scalable SCSS styling system for Anki flashcards with:

80+ CSS variables for consistent design tokens across all courses
Reusable base components shared by all courses
Course-specific styling for Psychology and DevOps (foundation for 50+ courses)
Compiled CSS automatically injected into APKG files
Zero breaking changes to existing infrastructure

Architecture

File Structure

scripts/anki/styles/
├── _variables.scss # Global design tokens (colors, spacing, typography)
├── _base-components.scss # Reusable CSS classes for all card types
├── courses/
│ ├── psychology.scss # Psychology-specific color overrides
│ └── devops.scss # DevOps-specific styling
├── psychology.css # Compiled output (16 KB)
└── devops.css # Compiled output (17 KB)

Design Flow

User Card Data (JSON)
 ↓
metadata['course'] = 'psychology'
 ↓
APKGGenerator creates models
 ↓
_get_css('psychology')
 ↓
Load: scripts/anki/styles/psychology.css
 ↓
Inject CSS into Anki models
 ↓
Generate APKG with styled cards

Component Breakdown

1. Global Variables (`_variables.scss`)

Color Palette:

Testing Guide

noreply@example.com (AG Sayyed) — Mon, 01 Jan 0001 00:00:00 +0000

SCSS Styling System - Complete Testing Guide

This script shows you exactly how to test the styling integration

cat « ‘EOF’

╔═══════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ SCSS STYLING SYSTEM - COMPLETE TESTING GUIDE ║ ║ ║ ╚═══════════════════════════════════════════════════════════════════════════════╝

📋 TESTING LEVELS ═══════════════════════════════════════════════════════════════════════════════

Level 1: Unit Testing (Automated) ✓ Verify CSS files exist and compile ✓ Test CSS caching mechanism ✓ Test course detection from metadata ✓ Run: npm run test:anki

Level 2: Integration Testing (Automated + Manual) ✓ Generate test APKGs with CSS ✓ Verify CSS embedded in APKG ✓ Test course-specific vs default CSS ✓ Run: npm run test:anki:verbose

Testing Quick Reference

noreply@example.com (AG Sayyed) — Mon, 01 Jan 0001 00:00:00 +0000

SCSS Styling System - Quick Reference Guide

🚀 Quick Start Testing (5 minutes)

1. Verify Tests Pass

1npm run test:anki

✅ Expected: 52 tests passing

2. Verify CSS Files Exist

1npm run anki:styles:list

✅ Expected: psychology.css (16 KB), devops.css (17 KB)

3. Generate Test APKG from Real Data

 1conda activate ags-anki
 2
 3python3 << 'PYTHON'
 4import json
 5from pathlib import Path
 6from scripts.anki.apkg_generator import APKGGenerator
 7import tempfile, shutil
 8
 9# Load real psychology data
10with open("data/course/psychology-l2/01/01m/001/anki/01-counselling-skills.json") as f:
11 data = json.load(f)
12
13# Ensure course metadata exists
14if 'course' not in data['metadata']:
15 data['metadata']['course'] = 'psychology'
16
17# Generate APKG with styling
18with tempfile.TemporaryDirectory() as tmpdir:
19 gen = APKGGenerator(verbose=True)
20 apkg = gen.generate_from_data(data, tmpdir, data['metadata'].get('deck_name'))
21 
22 # Copy to Desktop
23 shutil.copy(apkg, Path.home() / "Desktop" / "psychology-real-data.apkg")
24 print(f\n✅ APKG copied to ~/Desktop/psychology-real-data.apkg")
25
26 print(f" Size: {apkg.stat().st_size / 1024:.1f} KB (includes psychology CSS)")
27PYTHON

✅ Expected:

Testing Verification

noreply@example.com (AG Sayyed) — Mon, 01 Jan 0001 00:00:00 +0000

testing verification placeholder

#!/bin/bash

Quick test to verify CSS is in APKG SQLite database

cat « ‘EOF’

╔═══════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ HOW TO VERIFY CSS IS EMBEDDED IN YOUR APKG FILES ║ ║ ║ ╚═══════════════════════════════════════════════════════════════════════════════╝

FILES TO TEST WITH ════════════════════════════════════════════════════════════════════════════════

Run this command to generate test APKGs:

python3 « ‘PYTHON’ import json import tempfile from pathlib import Path from scripts.anki.apkg_generator import APKGGenerator

Psychology APKG

psy_data = { “metadata”: {“course”: “psychology”, “deck_name”: “Psy-Test”, “unit”: “U1”, “module”: “M1”}, “flashcards”: [{“id”: “1”, “question”: “Q?”, “answer”: “A”, “tags”: [“test”], “difficulty”: 1}] }

Anki on Ghafoor's Personal Blog

Anki Workflow Verification

Anki Workflow Verification

Current Working Workflow

1. Card Creation (Manual)

2. Card Generation (Automatic)

SCSS Styling System - Implementation Complete

SCSS Styling System - Implementation Complete ✅

Overview

Architecture

File Structure

Design Flow

Component Breakdown

1. Global Variables (_variables.scss)

Testing Guide

SCSS Styling System - Complete Testing Guide

This script shows you exactly how to test the styling integration

Testing Quick Reference

SCSS Styling System - Quick Reference Guide

🚀 Quick Start Testing (5 minutes)

1. Verify Tests Pass

2. Verify CSS Files Exist

3. Generate Test APKG from Real Data

Testing Verification

testing verification placeholder

Quick test to verify CSS is in APKG SQLite database

Psychology APKG

1. Global Variables (`_variables.scss`)