Retour à tous les articles
Guides

Prise en main de ScreenLaps

ScreenLaps TeamScreenLaps Team2 min de lecture

Bienvenue sur le blog ScreenLaps ! Ce premier article sert aussi de visite guidée du moteur du blog lui-même — chaque titre, liste, bloc de code et image ci-dessous est là pour illustrer une fonctionnalité réelle du pipeline Markdown qui alimente cette page, pas seulement pour remplir l'espace.

#Pourquoi ScreenLaps

ScreenLaps associe une extension de navigateur légère à un tableau de bord cloud construit sur Laravel, afin que chaque capture d'écran et enregistrement que vous réalisez soit organisé, consultable et partageable depuis un seul endroit. Si vous avez des questions en cours de route, notre page de contact est le moyen le plus rapide de joindre l'équipe.

« Le meilleur outil de capture est celui dont on oublie qu'il tourne encore en arrière-plan. » — tout utilisateur de ScreenLaps, tôt ou tard.

#Réaliser votre première capture d'écran

Il existe deux façons d'ajouter du contenu à votre bibliothèque :

#Avec l'extension de navigateur

  1. Installez l'extension depuis le store de votre navigateur.
  2. Cliquez sur l'icône ScreenLaps et choisissez capturer une zone, page entière ou enregistrer l'écran.
  3. Votre capture est envoyée automatiquement et apparaît dans la bibliothèque de votre tableau de bord en quelques secondes.

#Avec le glisser-déposer

  • Ouvrez la page Bibliothèque de votre tableau de bord.
  • Glissez-déposez un fichier .png, .jpg ou .webm sur la page.
  • Rangez-le dans un dossier une fois l'envoi terminé.
Le tableau de bord ScreenLaps, prêt pour votre première capture
Le tableau de bord ScreenLaps, prêt pour votre première capture

#Blocs de code et coloration syntaxique

Chaque bloc de code de ce blog est mis en couleur côté serveur — aucun JavaScript côté client n'est nécessaire. Voici, en gros, comment sont structurées les actions du backend de ce site :

 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}

#Composants Blade dans du Markdown

Ce paragraphe est suivi d'un véritable composant Blade, rendu côté serveur depuis l'intérieur de ce fichier Markdown :

Cette alerte n'est pas une citation stylisée — c'est un vrai composant Blade <x-blog.alert>, compilé côté serveur à partir d'un bloc de code marqué +parse.

Voilà pour la visite complète — du frontmatter et des tags aux images, à la coloration syntaxique et à Blade dans du Markdown. Bonne écriture !

ScreenLaps Team

ScreenLaps Team

The people building ScreenLaps.