Technology Stack¶

<!-- Beispiel: Drag & Drop -->
<div class="upload-zone" 
     ondragover="event.preventDefault()" 
     ondrop="handleDrop(event)">
    Ziehe JSON-Dateien hierher
</div>

/* Beispiel: CSS Variables für Theming */
:root {
    --primary: #667eea;
    --secondary: #764ba2;
    --bg-gradient: linear-gradient(135deg, var(--primary), var(--secondary));
}

.header {
    background: var(--bg-gradient);
}

// Classes
class MatrixDecisionEngine {
    constructor() {
        this.settings = new Map();
    }
}

// Async/Await
async loadSettings(file) {
    const text = await file.text();
    return JSON.parse(text);
}

// Arrow Functions
const merge = (a, b) => ({ ...a, ...b });

// Destructuring
const { urgency, relationship } = selection;

// Template Literals
const html = `<div>${channel}</div>`;

class LocalCache {
    save(key, data) {
        localStorage.setItem(key, JSON.stringify(data));
    }

    load(key) {
        const data = localStorage.getItem(key);
        return data ? JSON.parse(data) : null;
    }
}

class IndexedDBStorage {
    async open() {
        return new Promise((resolve, reject) => {
            const request = indexedDB.open('CommunicationFinder', 1);

            request.onupgradeneeded = (e) => {
                const db = e.target.result;
                db.createObjectStore('settings', { keyPath: 'uuid' });
            };

            request.onsuccess = () => resolve(request.result);
            request.onerror = () => reject(request.error);
        });
    }

    async saveSettings(settings) {
        const db = await this.open();
        const tx = db.transaction('settings', 'readwrite');
        await tx.objectStore('settings').put(settings);
    }
}

<script src="https://cdn.jsdelivr.net/npm/ipfs-http-client/dist/index.min.js"></script>
<script>
    const ipfs = IpfsHttpClient.create({
        host: 'ipfs.infura.io',
        port: 5001,
        protocol: 'https'
    });

    async function upload(data) {
        const { cid } = await ipfs.add(JSON.stringify(data));
        return cid.toString();
    }
</script>

<script src="https://cdn.jsdelivr.net/npm/arweave/bundles/web.bundle.min.js"></script>
<script>
    const arweave = Arweave.init({
        host: 'arweave.net',
        port: 443,
        protocol: 'https'
    });
</script>

import { EthrDID } from 'ethr-did';
import { Resolver } from 'did-resolver';
import { getResolver } from 'ethr-did-resolver';

const providerConfig = {
    rpcUrl: 'https://mainnet.infura.io/v3/YOUR_KEY',
    registry: '0xdCa7EF03e98e0DC2B855bE647C39ABe984fcF21B'
};

const ethrDidResolver = getResolver(providerConfig);
const didResolver = new Resolver(ethrDidResolver);

const did = new EthrDID({
    identifier: '0x...',
    privateKey: '0x...'
});

class Web3Auth {
    async connect() {
        if (typeof window.ethereum !== 'undefined') {
            const accounts = await window.ethereum.request({ 
                method: 'eth_requestAccounts' 
            });
            return accounts[0];
        }
        throw new Error('No Web3 wallet found');
    }

    async signMessage(message) {
        const account = await this.connect();
        const signature = await window.ethereum.request({
            method: 'personal_sign',
            params: [message, account]
        });
        return signature;
    }
}

// worker.js
export default {
    async fetch(request) {
        const url = new URL(request.url);

        // CORS headers
        if (request.method === 'OPTIONS') {
            return new Response(null, {
                headers: {
                    'Access-Control-Allow-Origin': '*',
                    'Access-Control-Allow-Methods': 'GET, POST',
                }
            });
        }

        // Proxy zu IPFS
        if (url.pathname.startsWith('/ipfs/')) {
            const cid = url.pathname.split('/')[2];
            return fetch(`https://ipfs.io/ipfs/${cid}`);
        }

        return new Response('Not found', { status: 404 });
    }
};

// Beispiel: Gewichts-Berechnung in Rust → WASM
const wasmModule = await WebAssembly.instantiateStreaming(
    fetch('calculate_weights.wasm')
);

const weights = wasmModule.instance.exports.calculate(
    new Uint8Array([/* answers */])
);

<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<script>
    const gun = Gun(['https://relay1.yourdomain.com/gun']);

    // Schreiben
    gun.get('user').get('alice').put({ status: 'online' });

    // Lesen (Echtzeit)
    gun.get('user').get('alice').on(data => {
        console.log('Alice:', data);
    });
</script>

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./

# wrangler.toml
name = "communicationfinder"
type = "webpack"
account_id = "YOUR_ACCOUNT_ID"
workers_dev = true
route = "communicationfinder.org/*"
zone_id = "YOUR_ZONE_ID"

# IPFS Node starten
ipfs daemon

# Gateway läuft auf http://127.0.0.1:8080

{
  "dependencies": {
    // KEINE! Alles inline oder CDN
  }
}

{
  "devDependencies": {
    "mkdocs": "^1.5.0",
    "mkdocs-material": "^9.0.0",
    "prettier": "^3.0.0",
    "http-server": "^14.1.0"
  }
}

# Entwicklung: Einfach HTML öffnen
open kommunikation-matrix.html

# Oder mit lokalem Server
python3 -m http.server 8000
# → http://localhost:8000

# GitHub Pages
git push origin main
# → Automatisch deployed via Actions

# IPFS
ipfs add -r .
# → ipfs://QmXxx...

# Arweave (einmalig)
arweave deploy .
# → Permanent gespeichert

kommunikation-konfigurator.html: 45 KB
kommunikation-matrix.html: 52 KB
Total: 97 KB (ungzipped)

Total: ~28 KB

First Contentful Paint: <0.5s
Time to Interactive: <1s
Total Blocking Time: <100ms
Lighthouse Score: 98/100

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; 
               script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; 
               style-src 'self' 'unsafe-inline'; 
               connect-src 'self' https://ipfs.io https://arweave.net;">

<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"
        integrity="sha384-..."
        crossorigin="anonymous"></script>