Erste Schritte mit ScreenLaps

Willkommen im ScreenLaps-Blog! Dieser erste Beitrag dient gleichzeitig als Rundgang durch die Blog-Engine selbst — jede Überschrift, Liste, jeder Codeblock und jedes Bild unten soll eine echte Funktion der Markdown-Pipeline zeigen, die diese Seite antreibt, und nicht nur Platz füllen.

#Warum ScreenLaps

ScreenLaps verbindet eine schlanke Browser-Erweiterung mit einem Cloud-Dashboard, das auf Laravel aufbaut, sodass jeder Screenshot und jede Aufnahme, die du machst, an einem Ort organisiert, durchsuchbar und teilbar ist. Falls unterwegs Fragen auftauchen, ist unsere Kontaktseite der schnellste Weg, das Team zu erreichen.

„Das beste Screenshot-Tool ist das, von dem man vergisst, dass es im Hintergrund noch läuft." — jeder ScreenLaps-Nutzer, früher oder später.

#Deinen ersten Screenshot aufnehmen

Es gibt zwei Wege, Medien in deine Bibliothek zu bringen:

#Über die Browser-Erweiterung

1. Installiere die Erweiterung aus dem Store deines Browsers.
2. Klicke auf das ScreenLaps-Symbol und wähle Bereich erfassen, ganze Seite oder Bildschirm aufnehmen.
3. Deine Aufnahme wird automatisch hochgeladen und erscheint innerhalb von Sekunden in deiner Dashboard-Bibliothek.

#Per Drag-and-Drop-Upload

• Öffne die Seite Bibliothek in deinem Dashboard.
• Ziehe eine .png-, .jpg- oder .webm-Datei auf die Seite.
• Ordne sie nach Abschluss des Uploads einem Ordner zu.

#Codeblöcke und Syntax-Hervorhebung

Jeder Codeblock in diesem Blog wird serverseitig hervorgehoben — kein JavaScript auf der Client-Seite nötig. So sind die eigenen Backend-Actions dieser Website ungefähr aufgebaut:

 1final class ShowBlogPostAction
 2{
 3    public function execute(string $locale, string $slug): array
 4    {
 5        $document = Prezet::getDocumentModelFromSlug("{$locale}/{$slug}");
 6
 7        return [
 8            'document' => Prezet::getDocumentDataFromFile($document->filepath),
 9            'body' => Prezet::parseMarkdown(
10                Prezet::getMarkdown($document->filepath)
11            )->getContent(),
12        ];
13    }
14}

#Blade-Komponenten innerhalb von Markdown

Auf diesen Absatz folgt eine echte Blade-Komponente, die serverseitig aus dieser Markdown-Datei heraus gerendert wird:

Das war der komplette Rundgang — von Frontmatter und Tags über Bilder und Syntax-Hervorhebung bis hin zu Blade in Markdown. Viel Spaß beim Schreiben!