Create basic dashboard syntax highlighter

hydephp · Oct 25, 2023 · 62db608 · 62db608
1 parent f45bbde
commit 62db608
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 1 deletion.
diff --git a/packages/realtime-compiler/resources/dashboard.blade.php b/packages/realtime-compiler/resources/dashboard.blade.php
@@ -236,7 +236,13 @@
                                     @if(in_array($mediaFile->getExtension(), ['svg', 'png', 'jpg', 'jpeg', 'gif']))
                                         <img src="media/{{ $mediaFile->getIdentifier() }}" alt="{{ $mediaFile->getName() }}" class="object-fit-cover w-100 rounded-2" style="height: 240px;">
                                     @else
-                                        <code style="height: 240px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, white 60%, transparent);"><pre style="{{ $dashboard::isMediaFileProbablyMinified($mediaFile->getContents()) ? 'white-space: normal;' : '' }}">{{ substr($mediaFile->getContents(), 0, 400) }}</pre></code>
+                                        <code style="height: 240px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, white 60%, transparent);" role="presentation">
+                                            @if($dashboard::isMediaFileProbablyMinified($mediaFile->getContents()))
+                                                <pre style="white-space: normal;">{{ $dashboard::highlightMediaLibraryCode($mediaFile->getContents()) }}</pre>
+                                            @else
+                                                <pre class="overflow-hidden">{{ $dashboard::highlightMediaLibraryCode($mediaFile->getContents()) }}</pre>
+                                            @endif
+                                        </code>
                                     @endif
                                     <figcaption class="container mt-3">
                                         <div class="row flex-nowrap">

diff --git a/packages/realtime-compiler/src/Http/DashboardController.php b/packages/realtime-compiler/src/Http/DashboardController.php
@@ -28,10 +28,14 @@
 use Hyde\Framework\Actions\CreatesNewMarkdownPostFile;
 use Symfony\Component\HttpKernel\Exception\HttpException;
 
+use function e;
+use function str;
 use function time;
 use function trim;
 use function round;
+use function rtrim;
 use function strlen;
+use function substr;
 use function basename;
 use function in_array;
 use function json_decode;
@@ -169,6 +173,51 @@ public static function isMediaFileProbablyMinified(string $contents): bool
         return substr_count(trim($contents), "\n") < 3 && strlen($contents) > 200;
     }
 
+    /** @internal */
+    public static function highlightMediaLibraryCode(string $contents): HtmlString
+    {
+        $contents = e($contents);
+
+        if (static::isMediaFileProbablyMinified($contents)) {
+            return new HtmlString(substr($contents, 0, 800));
+        }
+
+        $highlighted = str($contents)->explode("\n")->slice(0, 25)->map(function (string $line): string {
+            $line = rtrim($line);
+
+            if (str_starts_with($line, '//')) {
+                return "<span style='font-size: 80%; color: gray'>$line</span>";
+            }
+
+            if (str_starts_with($line, '/*') && str_ends_with($line, '*/')) {
+                // Commented code should not be additionally formatted, though we always want to comment multiline blocks
+                $quickReturn = true;
+            }
+
+            $line = str_replace('/*', "<span style='font-size: 80%; color: gray'>/*", $line);
+            $line = str_replace('*/', '*/</span>', $line);
+
+            if ($quickReturn ?? false) {
+                return rtrim($line);
+            }
+
+            $line = strtr($line, [
+                '{' => "<span style='color: #0f6674'>{</span>",
+                '}' => "<span style='color: #0f6674'>}</span>",
+                '(' => "<span style='color: #0f6674'>(</span><span style=\"color: #f77243;\">",
+                ')' => "</span><span style='color: #0f6674'>)</span>",
+                ':' => "<span style='color: #0f6674'>:</span>",
+                ';' => "<span style='color: #0f6674'>;</span>",
+                'return' => "<span style='color: #8e44ad'>return</span>",
+                'function' => "<span style='color: #8e44ad'>function</span>",
+            ]);
+
+            return rtrim($line);
+        })->implode("\n");
+
+        return new HtmlString($highlighted);
+    }
+
     public function showTips(): bool
     {
         return config('hyde.server.tips', true);