{"_id":"@anderson2405/dc-frontend-docs","name":"@anderson2405/dc-frontend-docs","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@anderson2405/dc-frontend-docs","version":"1.0.0","description":"Frontend Documentation & Standards für Dynamic Content Shopsoftware - BEM, Design Tokens, Accessibility, Mustache Templates","main":"index.js","bin":{"init-frontend-docs":"bin/init.js"},"scripts":{"test":"node bin/init.js --dry-run","prepublishOnly":"npm test"},"keywords":["frontend","documentation","bem","design-tokens","accessibility","wcag","mustache","templates","responsive","scss","frontend-standards","dynamic-content","shopsoftware"],"author":{"name":"anderson2405"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/anderson2405/dc-frontend-docs.git"},"bugs":{"url":"https://github.com/anderson2405/dc-frontend-docs/issues"},"homepage":"https://github.com/anderson2405/dc-frontend-docs#readme","engines":{"node":">=14.0.0"},"publishConfig":{"access":"public"},"_id":"@anderson2405/dc-frontend-docs@1.0.0","gitHead":"4e48d45c28c1842ac2f2b00417f221d7229bb7ab","_nodeVersion":"24.5.0","_npmVersion":"11.5.1","dist":{"integrity":"sha512-aeBYR6lt3nE9CSqC1x2YDvBNz2dPD4CvbX7qAMxhU6tmutaiudOjsAfRUA7WYZSFc3ezB/v4++DomRAce0/7wg==","shasum":"742ee86fb64a3d27e8bd5519fc5b4f2c0b765edb","tarball":"https://registry.npmjs.org/@anderson2405/dc-frontend-docs/-/dc-frontend-docs-1.0.0.tgz","fileCount":15,"unpackedSize":187412,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDTylsxKmb6emOVT4P5/k6OjmOA6IsqOljskW11nZLoFQIhAL5gX2/x1MwUMMHvyUT+eLeLU95KzXNdVf/MYG4OCXUZ"}]},"_npmUser":{"name":"anderson2405","email":"andi.armstark@gmail.com"},"directories":{},"maintainers":[{"name":"anderson2405","email":"andi.armstark@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dc-frontend-docs_1.0.0_1763399098133_0.17970101381600445"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-17T17:04:58.023Z","1.0.0":"2025-11-17T17:04:58.323Z","modified":"2025-11-17T17:04:58.628Z"},"maintainers":[{"name":"anderson2405","email":"andi.armstark@gmail.com"}],"description":"Frontend Documentation & Standards für Dynamic Content Shopsoftware - BEM, Design Tokens, Accessibility, Mustache Templates","homepage":"https://github.com/anderson2405/dc-frontend-docs#readme","keywords":["frontend","documentation","bem","design-tokens","accessibility","wcag","mustache","templates","responsive","scss","frontend-standards","dynamic-content","shopsoftware"],"repository":{"type":"git","url":"git+https://github.com/anderson2405/dc-frontend-docs.git"},"author":{"name":"anderson2405"},"bugs":{"url":"https://github.com/anderson2405/dc-frontend-docs/issues"},"license":"MIT","readme":"# @anderson2405/dc-frontend-docs\n\n![NPM Version](https://img.shields.io/npm/v/@anderson2405/dc-frontend-docs)\n![License](https://img.shields.io/npm/l/@anderson2405/dc-frontend-docs)\n![Downloads](https://img.shields.io/npm/dt/@anderson2405/dc-frontend-docs)\n\nFrontend Documentation & Standards für Dynamic Content Shopsoftware - BEM, Design Tokens, Accessibility, Mustache Templates.\n\nDieses NPM-Package stellt eine umfassende Frontend-Dokumentation zur Verfügung, die einfach in jedes Projekt kopiert werden kann.\n\n## 📦 Installation\n\n```bash\n# Global installieren für CLI-Zugriff\nnpm install -g @anderson2405/dc-frontend-docs\n\n# Oder als Dev-Dependency\nnpm install --save-dev @anderson2405/dc-frontend-docs\n```\n\n## 🚀 Quick Start\n\n### CLI Tool verwenden\n\n```bash\n# Dokumentation in dein Projekt kopieren\nnpx @anderson2405/dc-frontend-docs\n\n# Mit Optionen\nnpx @anderson2405/dc-frontend-docs --force    # Überschreibt ohne Nachfrage\nnpx @anderson2405/dc-frontend-docs --dry-run  # Zeigt nur was kopiert würde\nnpx @anderson2405/dc-frontend-docs --quiet    # Minimale Ausgabe\n```\n\n### Programmatisch verwenden\n\n```javascript\nconst frontendDocs = require('@anderson2405/dc-frontend-docs');\n\n// Pfad zur Dokumentation\nconst docsPath = frontendDocs.getDocsPath();\n\n// Alle verfügbaren Dateien\nconst files = frontendDocs.getDocFiles();\n\n// Pfad zu einer spezifischen Datei\nconst bemDocsPath = frontendDocs.getDocFilePath('01-bem-conventions.md');\n\n// Inhalt einer Datei lesen\nconst bemContent = frontendDocs.getDocContent('01-bem-conventions.md');\n\n// Alle Dokumentationen auf einmal\nconst allDocs = frontendDocs.getAllDocs();\n\n// Package-Version\nconst version = frontendDocs.getVersion();\n```\n\n## 📚 Dokumentations-Inhalte\n\nNach der Installation findest du folgende Dateien in deinem `docs/` Verzeichnis:\n\n### Core Documentation\n\n| Datei | Beschreibung |\n|-------|--------------|\n| **README.md** | Übersicht und Quick Start Guide |\n| **00-claude-code-instructions.md** | Spezielle Anweisungen für AI-Assistenten |\n| **01-bem-conventions.md** | BEM Namenskonventionen und Best Practices |\n| **02-design-tokens.md** | Design System mit Farben, Spacing, Typography |\n| **03-responsive-system.md** | 5-stufiges Breakpoint-System, Mobile First |\n| **04-components.md** | UI-Komponenten mit HTML/SCSS Beispielen |\n| **05-architecture.md** | SCSS-Architektur (7-1 Pattern) |\n| **06-accessibility.md** | WCAG 2.1 AA Standards und ARIA Patterns |\n| **07-mustache-templates.md** | Mustache Template Integration |\n\n### Standards & Conventions\n\n- **BEM Methodology**: PascalCase Blöcke, camelCase Elemente, kebab-case Modifier\n- **Mobile First**: Responsive Design mit min-width Media Queries\n- **Accessibility**: WCAG 2.1 AA konforme Komponenten\n- **Design Tokens**: Konsistente Werte für Farben, Spacing, Typography\n- **SCSS Architecture**: 7-1 Pattern für skalierbare Stylesheets\n\n## 🛠️ CLI Optionen\n\n```bash\nnpx @anderson2405/dc-frontend-docs [Optionen]\n\nOptionen:\n  -f, --force      Überschreibt Dateien ohne Nachfrage\n  -q, --quiet      Minimale Terminal-Ausgabe\n  -d, --dry-run    Simulation - zeigt nur was kopiert würde\n  -h, --help       Hilfe anzeigen\n\nBeispiele:\n  npx @anderson2405/dc-frontend-docs                # Interaktiv\n  npx @anderson2405/dc-frontend-docs --force        # Ohne Nachfrage\n  npx @anderson2405/dc-frontend-docs --dry-run      # Testen\n```\n\n## 💻 API Referenz\n\n### Methods\n\n#### `getDocsPath()`\nGibt den absoluten Pfad zum docs/ Verzeichnis zurück.\n\n```javascript\nconst docsPath = frontendDocs.getDocsPath();\n// \"/node_modules/@anderson2405/dc-frontend-docs/docs\"\n```\n\n#### `getVersion()`\nGibt die Package-Version zurück.\n\n```javascript\nconst version = frontendDocs.getVersion();\n// \"1.0.0\"\n```\n\n#### `getDocFiles()`\nGibt Array aller verfügbaren .md Dateien zurück (sortiert).\n\n```javascript\nconst files = frontendDocs.getDocFiles();\n// [\"00-claude-code-instructions.md\", \"01-bem-conventions.md\", ...]\n```\n\n#### `getDocFilePath(fileName)`\nGibt absoluten Pfad zu einer spezifischen Dokumentations-Datei zurück.\n\n```javascript\nconst path = frontendDocs.getDocFilePath('01-bem-conventions.md');\n// \"/node_modules/@anderson2405/dc-frontend-docs/docs/01-bem-conventions.md\"\n\n// .md Extension ist optional\nconst path2 = frontendDocs.getDocFilePath('01-bem-conventions');\n```\n\n#### `getDocContent(fileName)`\nLiest und gibt Inhalt einer Dokumentations-Datei zurück.\n\n```javascript\nconst content = frontendDocs.getDocContent('01-bem-conventions.md');\n// \"# BEM Conventions\\n\\n> **⚠️ Quelle:** Diese Dokumentation...\"\n```\n\n#### `getAllDocs()`\nGibt Object mit allen Dokumentationen zurück (Dateiname ohne .md als Key).\n\n```javascript\nconst allDocs = frontendDocs.getAllDocs();\n// {\n//   \"README\": \"# Frontend Documentation...\",\n//   \"00-claude-code-instructions\": \"# Claude Code Instructions...\",\n//   \"01-bem-conventions\": \"# BEM Conventions...\",\n//   ...\n// }\n```\n\n#### `validateDocsStructure()`\nÜberprüft ob alle erforderlichen Dokumentations-Dateien vorhanden sind.\n\n```javascript\ntry {\n  frontendDocs.validateDocsStructure();\n  console.log('✅ Alle Dokumentations-Dateien vorhanden');\n} catch (error) {\n  console.error('❌ Fehlende Dateien:', error.message);\n}\n```\n\n## 🎯 Use Cases\n\n### 1. Neue Projekte initialisieren\n```bash\nmkdir mein-projekt && cd mein-projekt\nnpx @anderson2405/dc-frontend-docs\n# Dokumentation ist jetzt in docs/ verfügbar\n```\n\n### 2. Bestehende Projekte aktualisieren\n```bash\ncd bestehendes-projekt\nnpx @anderson2405/dc-frontend-docs --force\n# Überschreibt veraltete Dokumentation\n```\n\n### 3. Build-Scripts integrieren\n```javascript\n// build-docs.js\nconst frontendDocs = require('@anderson2405/dc-frontend-docs');\nconst fs = require('fs');\n\n// Alle Docs in build/ kopieren\nconst allDocs = frontendDocs.getAllDocs();\nObject.entries(allDocs).forEach(([name, content]) => {\n  fs.writeFileSync(`build/docs/${name}.md`, content);\n});\n```\n\n### 4. Linting/Validation\n```javascript\n// validate-project.js\nconst frontendDocs = require('@anderson2405/dc-frontend-docs');\n\ntry {\n  frontendDocs.validateDocsStructure();\n  console.log('✅ Dokumentation vollständig');\n} catch (error) {\n  console.error('❌ Dokumentation unvollständig:', error.message);\n  process.exit(1);\n}\n```\n\n## 📁 Verzeichnis-Struktur nach Installation\n\n```\ndein-projekt/\n├── docs/\n│   ├── README.md\n│   ├── 00-claude-code-instructions.md\n│   ├── 01-bem-conventions.md\n│   ├── 02-design-tokens.md\n│   ├── 03-responsive-system.md\n│   ├── 04-components.md\n│   ├── 05-architecture.md\n│   ├── 06-accessibility.md\n│   └── 07-mustache-templates.md\n└── docs.backup-[timestamp]/  # Automatisches Backup falls docs/ existierte\n```\n\n## 🔄 Workflow Integration\n\n### 1. Git Hooks\n```bash\n# .git/hooks/pre-commit\nnpx @anderson2405/dc-frontend-docs --dry-run > /dev/null || {\n  echo \"❌ Frontend docs validation failed\"\n  exit 1\n}\n```\n\n### 2. Package.json Scripts\n```json\n{\n  \"scripts\": {\n    \"docs:install\": \"npx @anderson2405/dc-frontend-docs\",\n    \"docs:update\": \"npx @anderson2405/dc-frontend-docs --force\",\n    \"docs:check\": \"node -e \\\"require('@anderson2405/dc-frontend-docs').validateDocsStructure()\\\"\"\n  }\n}\n```\n\n### 3. CI/CD Integration\n```yaml\n# .github/workflows/validate-docs.yml\n- name: Validate Frontend Documentation\n  run: |\n    npm install @anderson2405/dc-frontend-docs\n    node -e \"require('@anderson2405/dc-frontend-docs').validateDocsStructure()\"\n```\n\n## 🔧 Entwicklung\n\n### Package lokal testen\n\n```bash\n# Repository klonen\ngit clone https://github.com/anderson2405/dc-frontend-docs.git\ncd dc-frontend-docs/frontend-docs-package\n\n# Lokal verlinken\nnpm link\n\n# In anderem Projekt testen\ncd ../test-project\nnpm link @anderson2405/dc-frontend-docs\nnpx init-frontend-docs\n```\n\n### Neue Dokumentation hinzufügen\n\n1. Neue .md Datei in `docs/` erstellen\n2. `validateDocsStructure()` updaten falls erforderlich\n3. Diese README aktualisieren\n4. Version bumpen und publizieren\n\n## 📋 Requirements\n\n- **Node.js**: >= 12.0.0\n- **NPM**: >= 6.0.0\n\n## 🤝 Contributing\n\n1. Fork das Repository\n2. Feature Branch erstellen: `git checkout -b feature/neue-funktion`\n3. Änderungen committen: `git commit -m \"Füge neue Funktion hinzu\"`\n4. Branch pushen: `git push origin feature/neue-funktion`\n5. Pull Request erstellen\n\n## 📄 License\n\nMIT License - siehe [LICENSE](LICENSE) Datei für Details.\n\n## 🔗 Links\n\n- **Repository**: https://github.com/anderson2405/dc-frontend-docs\n- **NPM Package**: https://www.npmjs.com/package/@anderson2405/dc-frontend-docs\n- **Issues**: https://github.com/anderson2405/dc-frontend-docs/issues\n\n## 📞 Support\n\nBei Fragen oder Problemen:\n\n1. Schaue in die [Issues](https://github.com/anderson2405/dc-frontend-docs/issues)\n2. Erstelle ein neues Issue mit detaillierter Beschreibung\n3. Füge Beispiel-Code oder Screenshots hinzu\n\n---\n\n**⚡ Quick Commands:**\n\n```bash\n# Installation & Setup\nnpx @anderson2405/dc-frontend-docs\n\n# Dokumentation aktualisieren\nnpx @anderson2405/dc-frontend-docs --force\n\n# Testen was passiert\nnpx @anderson2405/dc-frontend-docs --dry-run\n\n# Hilfe anzeigen\nnpx @anderson2405/dc-frontend-docs --help\n```","readmeFilename":"README.md","_rev":"1-dd33d8365c34bf800f943580f94042dc"}