@anderson2405/dc-frontend-docs

Frontend Documentation & Standards für Dynamic Content Shopsoftware - BEM, Design Tokens, Accessibility, Mustache Templates.

Dieses NPM-Package stellt eine umfassende Frontend-Dokumentation zur Verfügung, die einfach in jedes Projekt kopiert werden kann.

📦 Installation

# Global installieren für CLI-Zugriff
npm install -g @anderson2405/dc-frontend-docs

# Oder als Dev-Dependency
npm install --save-dev @anderson2405/dc-frontend-docs

🚀 Quick Start

CLI Tool verwenden

# Dokumentation in dein Projekt kopieren
npx @anderson2405/dc-frontend-docs

# Mit Optionen
npx @anderson2405/dc-frontend-docs --force    # Überschreibt ohne Nachfrage
npx @anderson2405/dc-frontend-docs --dry-run  # Zeigt nur was kopiert würde
npx @anderson2405/dc-frontend-docs --quiet    # Minimale Ausgabe

Programmatisch verwenden

const frontendDocs = require('@anderson2405/dc-frontend-docs');

// Pfad zur Dokumentation
const docsPath = frontendDocs.getDocsPath();

// Alle verfügbaren Dateien
const files = frontendDocs.getDocFiles();

// Pfad zu einer spezifischen Datei
const bemDocsPath = frontendDocs.getDocFilePath('01-bem-conventions.md');

// Inhalt einer Datei lesen
const bemContent = frontendDocs.getDocContent('01-bem-conventions.md');

// Alle Dokumentationen auf einmal
const allDocs = frontendDocs.getAllDocs();

// Package-Version
const version = frontendDocs.getVersion();

📚 Dokumentations-Inhalte

Nach der Installation findest du folgende Dateien in deinem docs/ Verzeichnis:

Core Documentation

| Datei | Beschreibung | |-------|--------------| | README.md | Übersicht und Quick Start Guide | | 00-claude-code-instructions.md | Spezielle Anweisungen für AI-Assistenten | | 01-bem-conventions.md | BEM Namenskonventionen und Best Practices | | 02-design-tokens.md | Design System mit Farben, Spacing, Typography | | 03-responsive-system.md | 5-stufiges Breakpoint-System, Mobile First | | 04-components.md | UI-Komponenten mit HTML/SCSS Beispielen | | 05-architecture.md | SCSS-Architektur (7-1 Pattern) | | 06-accessibility.md | WCAG 2.1 AA Standards und ARIA Patterns | | 07-mustache-templates.md | Mustache Template Integration |

Standards & Conventions

• BEM Methodology: PascalCase Blöcke, camelCase Elemente, kebab-case Modifier
• Mobile First: Responsive Design mit min-width Media Queries
• Accessibility: WCAG 2.1 AA konforme Komponenten
• Design Tokens: Konsistente Werte für Farben, Spacing, Typography
• SCSS Architecture: 7-1 Pattern für skalierbare Stylesheets

🛠️ CLI Optionen

npx @anderson2405/dc-frontend-docs [Optionen]

Optionen:
  -f, --force      Überschreibt Dateien ohne Nachfrage
  -q, --quiet      Minimale Terminal-Ausgabe
  -d, --dry-run    Simulation - zeigt nur was kopiert würde
  -h, --help       Hilfe anzeigen

Beispiele:
  npx @anderson2405/dc-frontend-docs                # Interaktiv
  npx @anderson2405/dc-frontend-docs --force        # Ohne Nachfrage
  npx @anderson2405/dc-frontend-docs --dry-run      # Testen

💻 API Referenz

Methods

getDocsPath()

Gibt den absoluten Pfad zum docs/ Verzeichnis zurück.

const docsPath = frontendDocs.getDocsPath();
// "/node_modules/@anderson2405/dc-frontend-docs/docs"

getVersion()

Gibt die Package-Version zurück.

const version = frontendDocs.getVersion();
// "1.0.0"

getDocFiles()

Gibt Array aller verfügbaren .md Dateien zurück (sortiert).

const files = frontendDocs.getDocFiles();
// ["00-claude-code-instructions.md", "01-bem-conventions.md", ...]

getDocFilePath(fileName)

Gibt absoluten Pfad zu einer spezifischen Dokumentations-Datei zurück.

const path = frontendDocs.getDocFilePath('01-bem-conventions.md');
// "/node_modules/@anderson2405/dc-frontend-docs/docs/01-bem-conventions.md"

// .md Extension ist optional
const path2 = frontendDocs.getDocFilePath('01-bem-conventions');

getDocContent(fileName)

Liest und gibt Inhalt einer Dokumentations-Datei zurück.

const content = frontendDocs.getDocContent('01-bem-conventions.md');
// "# BEM Conventions\n\n> **⚠️ Quelle:** Diese Dokumentation..."

getAllDocs()

Gibt Object mit allen Dokumentationen zurück (Dateiname ohne .md als Key).

const allDocs = frontendDocs.getAllDocs();
// {
//   "README": "# Frontend Documentation...",
//   "00-claude-code-instructions": "# Claude Code Instructions...",
//   "01-bem-conventions": "# BEM Conventions...",
//   ...
// }

validateDocsStructure()

Überprüft ob alle erforderlichen Dokumentations-Dateien vorhanden sind.

try {
  frontendDocs.validateDocsStructure();
  console.log('✅ Alle Dokumentations-Dateien vorhanden');
} catch (error) {
  console.error('❌ Fehlende Dateien:', error.message);
}

🎯 Use Cases

1. Neue Projekte initialisieren

mkdir mein-projekt && cd mein-projekt
npx @anderson2405/dc-frontend-docs
# Dokumentation ist jetzt in docs/ verfügbar

2. Bestehende Projekte aktualisieren

cd bestehendes-projekt
npx @anderson2405/dc-frontend-docs --force
# Überschreibt veraltete Dokumentation

3. Build-Scripts integrieren

// build-docs.js
const frontendDocs = require('@anderson2405/dc-frontend-docs');
const fs = require('fs');

// Alle Docs in build/ kopieren
const allDocs = frontendDocs.getAllDocs();
Object.entries(allDocs).forEach(([name, content]) => {
  fs.writeFileSync(`build/docs/${name}.md`, content);
});

4. Linting/Validation

// validate-project.js
const frontendDocs = require('@anderson2405/dc-frontend-docs');

try {
  frontendDocs.validateDocsStructure();
  console.log('✅ Dokumentation vollständig');
} catch (error) {
  console.error('❌ Dokumentation unvollständig:', error.message);
  process.exit(1);
}

📁 Verzeichnis-Struktur nach Installation

dein-projekt/
├── docs/
│   ├── README.md
│   ├── 00-claude-code-instructions.md
│   ├── 01-bem-conventions.md
│   ├── 02-design-tokens.md
│   ├── 03-responsive-system.md
│   ├── 04-components.md
│   ├── 05-architecture.md
│   ├── 06-accessibility.md
│   └── 07-mustache-templates.md
└── docs.backup-[timestamp]/  # Automatisches Backup falls docs/ existierte

🔄 Workflow Integration

1. Git Hooks

# .git/hooks/pre-commit
npx @anderson2405/dc-frontend-docs --dry-run > /dev/null || {
  echo "❌ Frontend docs validation failed"
  exit 1
}

2. Package.json Scripts

{
  "scripts": {
    "docs:install": "npx @anderson2405/dc-frontend-docs",
    "docs:update": "npx @anderson2405/dc-frontend-docs --force",
    "docs:check": "node -e \"require('@anderson2405/dc-frontend-docs').validateDocsStructure()\""
  }
}

3. CI/CD Integration

# .github/workflows/validate-docs.yml
- name: Validate Frontend Documentation
  run: |
    npm install @anderson2405/dc-frontend-docs
    node -e "require('@anderson2405/dc-frontend-docs').validateDocsStructure()"

🔧 Entwicklung

Package lokal testen

# Repository klonen
git clone https://github.com/anderson2405/dc-frontend-docs.git
cd dc-frontend-docs/frontend-docs-package

# Lokal verlinken
npm link

# In anderem Projekt testen
cd ../test-project
npm link @anderson2405/dc-frontend-docs
npx init-frontend-docs

Neue Dokumentation hinzufügen

1. Neue .md Datei in docs/ erstellen
2. validateDocsStructure() updaten falls erforderlich
3. Diese README aktualisieren
4. Version bumpen und publizieren

📋 Requirements

• Node.js: >= 12.0.0
• NPM: >= 6.0.0

🤝 Contributing

1. Fork das Repository
2. Feature Branch erstellen: git checkout -b feature/neue-funktion
3. Änderungen committen: git commit -m "Füge neue Funktion hinzu"
4. Branch pushen: git push origin feature/neue-funktion
5. Pull Request erstellen

📄 License

MIT License - siehe LICENSE Datei für Details.

🔗 Links

• Repository: https://github.com/anderson2405/dc-frontend-docs
• NPM Package: https://www.npmjs.com/package/@anderson2405/dc-frontend-docs
• Issues: https://github.com/anderson2405/dc-frontend-docs/issues

📞 Support

Bei Fragen oder Problemen:

1. Schaue in die Issues
2. Erstelle ein neues Issue mit detaillierter Beschreibung
3. Füge Beispiel-Code oder Screenshots hinzu

⚡ Quick Commands:

# Installation & Setup
npx @anderson2405/dc-frontend-docs

# Dokumentation aktualisieren
npx @anderson2405/dc-frontend-docs --force

# Testen was passiert
npx @anderson2405/dc-frontend-docs --dry-run

# Hilfe anzeigen
npx @anderson2405/dc-frontend-docs --help