Zum Hauptinhalt springen

Intro: Setup

🛠️ Anleitung zur Bearbeitung des Sally Help Centers

Diese Anleitung richtet sich an Teammitglieder ohne technische Vorkenntnisse. Sie erklärt, wie du Inhalte im Sally Help Center (basierend auf Docusaurus) bearbeiten, hinzufügen und übersetzen kannst.

1️⃣ Voraussetzungen (nur einmalig erforderlich)​

Bevor du loslegen kannst, müssen ein paar Tools installiert sein:

✅ Node.js installieren​

  1. Gehe auf: https://nodejs.org
  2. Lade die LTS-Version herunter.
  3. Installiere die Datei wie ein normales Programm.
  4. Öffne das Terminal (PowerShell) und prüfe, ob alles geklappt hat: 
    node -v

✅ NPM prüfen (wird mit Node installiert)​

npm -v

✅ Yarn installieren​

npm install -g yarn

✅ Git - Installation unter Windows​

  1. Besuche die offizielle Git-Website:
    https://git-scm.com/download/win

  2. Wähle den Standalone Installer der für deinen Rechner geeignet ist (Normalerweise Windows/x64)

  3. Öffne die heruntergeladene .exe-Datei und folge dem Installationsassistenten. Die Standardeinstellungen sind für die meisten Nutzer geeignet.

✅ Visual Studio Code - Installation unter Windows​

  1. Gehe zur offiziellen Download-Seite:
    https://code.visualstudio.com/Download

  2. Wähle Windows aus und lade den Installer (.exe) herunter.

  3. Starte die Installationsdatei und folge dem Assistenten. Empfohlene Optionen:

    • „Open with Code“ im Kontextmenü aktivieren
    • „Add to PATH“ aktivieren

  4. Nach der Installation kann VS Code über das Startmenü geöffnet werden.

2️⃣ Projekt klonen und lokal starten​

📥 Repository klonen​

Stelle sicher, dass du Zugriff auf Azure DevOps hast. Öffne dabei den folgenden Link: https://dev.azure.com/companyaliru/Sally/_git/SallyHelpCenter

git clone https://companyaliru@dev.azure.com/companyaliru/Sally/_git/SallyHelpCenter
cd SallyHelpCenter

📦 Abhängigkeiten installieren​

yarn install

▶️ Lokale Vorschau starten​

yarn start

Die Webseite öffnet sich unter: http://localhost:3000

3️⃣ Artikel bearbeiten & Änderungen veröffentlichen​

🌿 Neuen Branch anlegen​

Öffne den Source Control Bereich in Visual Studio Code und klick auf "More Actions > Branch > Create Branch" unter Berücksichtigung der folgenden Kriterien für die Namensgebung:

  • Kürzel = Initialen von Vor- und Nachname
  • Datum = aktuelles Datum im Format YYYY-MM-DD
  • Slug = kurze Beschreibung des Inhalts in Kleinbuchstaben

Beispiel: JK/2025-07-31-update-in-privacy

Neuen Branch anlegen

Neuen Branch anlegen

✍️ Artikel bearbeiten​

Alle Inhalte befinden sich im Ordner /docs/. Dort findest du folgende Bereiche:

  • /docs/guides/ → Anleitungen
  • /docs/faqs/ → Häufig gestellte Fragen
  • /docs/news/ → Neuigkeiten und Produkupdates für z.B. Newsletter
  • /docs/privacy/ → Datenschutz/Sicherheit
  • /docs/api/ → Technische Schnittstellen

Bearbeite bestehende .mdx-Dateien oder füge neue hinzu.

👀 Änderungen lokal testen​

Öffne ein Terminal in Visual Studio Code und für den folgenden Befehl aus:

yarn start

Die Änderungen erscheinen unter der entsprechenden Kategorie im Browser unter der Url http://localhost:3000.

Lokal testen

💾 Änderungen speichern & hochladen​

Um die Änderungen auch in der Cloud zu speichern müssen die Änderungen auch committet und gesynct werden. Um die Änderungen zu committen muss in der Source Control eine Commit-Nachricht eingegeben werden:

Commit Branch

Um die Änderungen dann auch in die Cloud zu syncen, muss anschließend der Button "Sync" betätigt werden:

Sync Branch

🔁 Pull Request (PR) erstellen​

  1. Gehe zu Azure DevOps > Repos > Branches
  2. Wähle deinen Branch aus
  3. Klicke auf "Create Pull Request"
  4. Gib einen aussagekräftigen Titel und eine Beschreibung ein

🚀 Veröffentlichung​

Danach muss der Link zum PR (Einfach aus der Adresszeile herauskopieren) in den entsprechenden PR Channel (Aktuell Stand 01.08.2025: PR Channel Sally) posten. Nach Freigabe (Approval) durch das Team wird der PR automatisch in die Azure Web App gepusht und auf der Live-Seite veröffentlicht.

4️⃣ Markdown-Kurzanleitung​

Hier findest du eine Kurzanleitung zum Markdown: Markdown Anleitung

5️⃣ Übersetzungen: Englisch → Deutsch​

Das Sally Help Center ist mehrsprachig aufgebaut.

🌐 Standardsprache: Englisch​

➕ Zweitsprache: Deutsch (in /i18n/de/)​

🔁 So funktioniert die Übersetzung​

  • Jede englische Datei im Ordner /docs/ muss eine identische deutsche Version im jeweiligen Unterordner von /i18n/de/ haben.
  • Die Struktur muss exakt übereinstimmen (gleicher Dateiname und Pfad).

📁 Beispielstruktur:​

/docs/faqs/intro.mdx
/i18n/de/docusaurus-plugin-content-docs-faqs/current/intro.mdx

Beachte:

  • Nur den Inhalt übersetzen, nicht den Dateinamen.
  • Die Übersetzung liegt immer im Unterordner i18n/de/docusaurus-plugin-content-docs-[bereich]/current/.

📌 Tipp​

Wenn du dir nicht sicher bist, kopiere einfach die englische Datei, füge sie im passenden deutschen Ordner ein und übersetze sie dort Zeile für Zeile.