Runic Stars of Coding - BackLinks Code Dev Peace 🔮⭐

Eine VS Code Extension für Runic Stars of Coding – Das Dual-Anzeigesystem für Code mit mystischen Elder Futhark Runen. Bringe Frieden und Schönheit in deinen Entwicklungsprozess.

🎯 Projektübersicht & Motivation

Runic Stars of Coding - BackLinks Code Dev Peace (inspiriert von RuneLink) ist ein innovatives Projekt, das die kreative Überlagerung von Code-Darstellungsebenen demonstriert. Die Extension ermöglicht es, zwischen normalem Code und einer "Runen-Ansicht" umzuschalten und bringt eine meditative, friedvolle Atmosphäre in deinen Entwicklungsalltag.

Zwei Darstellungsebenen:

• Original-Version (Lesbarkeit): Normaler, klarer Code optimiert für schnelles Verständnis
• Runen-Version (Ästhetik): Mystische Darstellung mit Elder Futhark Runen-Symbolen

✨ Features

• Toggle Runic View: Schalte zwischen normalem Code und Runen-Symbolen um
• Keyboard Shortcut: Ctrl+Alt+R (Windows/Linux) oder Cmd+Alt+R (Mac)
• Dynamische Runen-Generierung: Automatische Konvertierung von Keywords zu Runen
• Anpassbare Rune Mappings: Konfiguriere deine eigenen Keyword-zu-Rune-Zuordnungen
• Zustandsspeicherung: Deine Einstellung bleibt über Sessions hinweg erhalten
• RuneLink Demo: Interaktive HTML-Demo mit Deep Linking und Local Storage

🚀 Verwendung

Im Editor:

1. Öffne eine Code-Datei in VS Code
2. Drücke Ctrl+Alt+R (oder Cmd+Alt+R auf Mac) um die Runen-Ansicht umzuschalten
3. Alternativ verwende die Command Palette (Ctrl+Shift+P):
   • Runic: Toggle Runic View
   • Runic: Enable Runic View
   • Runic: Disable Runic View
   • Runic: Show RuneLink Demo

RuneLink Demo:

Die Extension enthält eine vollständige HTML-Demo mit:

• Dual-Ansicht-System (Original ↔ Runen)
• Dynamischer Runen-Generierung
• Local Storage für Zustandsspeicherung
• Deep Linking mit URL-Hash (#runes / #original)

Öffne die Demo mit: Runic: Show RuneLink Demo

⚙️ Konfiguration

Du kannst die Rune-Mappings in deinen VS Code-Einstellungen anpassen:

{
  "codingRunicStyle.enabled": false,
  "codingRunicStyle.runeMapping": {
    "function": "ᚠ",
    "class": "ᚲ",
    "if": "ᛁ",
    "else": "ᛖ",
    "return": "ᚱ",
    "const": "ᚳ",
    "let": "ᛚ",
    "var": "ᚹ",
    "import": "ᛜ",
    "export": "ᛉ",
    "async": "ᚨ",
    "await": "ᚨᚹ",
    "true": "ᛏ",
    "false": "ᚠᛚ",
    "null": "ᚾ",
    "undefined": "ᚢ"
  }
}

🔮 Runen-Bedeutung

Die Standard-Runen basieren auf dem Elder Futhark Alphabet:

• ᚠ (Fehu) - function, F
• ᚲ (Kaunan) - class, C/K
• ᛁ (Isaz) - if, I
• ᛖ (Ehwaz) - else, E
• ᚱ (Raidho) - return, R
• ᚳ (Cen) - const
• ᛚ (Laguz) - let, L
• ᚹ (Wunjo) - var, W
• ᛜ (Ingwaz) - import
• ᛉ (Algiz) - export
• ᚨ (Ansuz) - async, A
• ᛏ (Tiwaz) - true, T
• ᚾ (Naudiz) - null, N
• ᚢ (Uruz) - undefined, U

Vollständiges Elder Futhark Alphabet:

A=ᚨ B=ᛒ C=ᚲ D=ᛞ E=ᛖ F=ᚠ G=ᚷ H=ᚺ I=ᛁ J=ᛃ
K=ᚲ L=ᛚ M=ᛗ N=ᚾ O=ᛟ P=ᛈ Q=ᚲ R=ᚱ S=ᛋ T=ᛏ
U=ᚢ V=ᚢ W=ᚹ X=ᚲᛋ Y=ᛁ Z=ᛋ
Ä=ᛖ Ö=ᛟ Ü=ᚢ

🏗️ Architektur & Technischer Aufbau

VS Code Extension:

• TypeScript: Typsichere Extension-Entwicklung
• Text Decorations API: Runen-Overlays ohne Code-Änderung
• GlobalState: Persistente Speicherung der Benutzereinstellung
• Webview API: Interaktive Demo-Seite

RuneLink Demo:

• HTML5: Dual-Container-Struktur für beide Ansichten
• CSS3: Sichtbarkeits-Kontrolle mit .versteckt Klasse
• Vanilla JavaScript:
  • Toggle-Mechanismus
  • Dynamische Runen-Generierung mit Lookup-Table
  • Local Storage Integration
  • URL-Hash Deep Linking

📦 Installation

Für Entwickler:

1. Node.js installieren:

   sudo pacman -S nodejs npm  # Arch/EndeavourOS
   

2. Dependencies installieren:

   ./setup.sh
   

3. Extension starten:

   • Drücke F5 in VS Code
   • Eine neue VS Code-Instanz öffnet sich mit der Extension

Aus VS Code Marketplace:

1. Öffne VS Code
2. Gehe zu Extensions (Ctrl+Shift+X)
3. Suche nach "Runic Stars of Coding"
4. Klicke auf Install

Aus VSIX:

code --install-extension runic-stars-of-coding-1.0.0.vsix

🔧 Development

Um die Extension zu entwickeln:

npm install
npm run compile
# oder für auto-recompilation:
npm run watch

Drücke F5 um die Extension in einer Extension Development Host Instanz zu starten.

Projektstruktur:

Runic/
├── src/
│   └── extension.ts          # Haupt-Extension-Logik
├── demo/
│   └── index.html            # RuneLink Demo-Seite
├── .vscode/
│   ├── launch.json           # Debug-Konfiguration
│   └── tasks.json            # Build-Tasks
├── package.json              # Extension Manifest
├── tsconfig.json             # TypeScript Config
└── README.md                 # Diese Datei

🔮 Erweiterungsmöglichkeiten (Roadmap)

• [ ] Verschiedene Runen-Alphabete: Younger Futhark, Anglo-Saxon Futhorc
• [ ] Eigene Symbolsets: Klingonisch, Tengwar, etc.
• [ ] Syntax-spezifische Mappings: Pro Programmiersprache
• [ ] Farb-Themes für Runen: Dark/Light Mode Anpassungen
• [ ] Export-Funktion: Code-Screenshots mit Runen
• [ ] Live-Collaboration Support: Runen-Ansicht im Team teilen

🤝 Contributing

Contributions sind willkommen! Bitte erstelle einen Pull Request oder öffne ein Issue.

📄 License

MIT

Erstellt mit 🔮 und Elder Futhark Runen