Add hlphp & codeblock component

8 files changed, 338 insertions, 1 deletions

diff --git a/composer.json b/composer.json
index bc3e8f5..787b44e 100644
--- a/composer.json
+++ b/composer.json
@@ -11,6 +11,7 @@
         "laravel/framework": "^10.10",
         "laravel/sanctum": "^3.2",
         "laravel/tinker": "^2.8",
+        "scrivo/highlight.php": "v9.18.1.10",
         "spatie/laravel-honeypot": "^4.3"
     },
     "require-dev": {
diff --git a/composer.lock b/composer.lock
index 47dcb86..6ff2ba4 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "b946004dacc886bc1ef1ae8e1e9644ac",
+    "content-hash": "b9fa52d6299a2643f49a5191cf7b6cc8",
     "packages": [
         {
             "name": "auth0/auth0-php",
@@ -4064,6 +4064,84 @@
             "time": "2023-04-15T23:01:58+00:00"
         },
         {
+            "name": "scrivo/highlight.php",
+            "version": "v9.18.1.10",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/scrivo/highlight.php.git",
+                "reference": "850f4b44697a2552e892ffe71490ba2733c2fc6e"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/scrivo/highlight.php/zipball/850f4b44697a2552e892ffe71490ba2733c2fc6e",
+                "reference": "850f4b44697a2552e892ffe71490ba2733c2fc6e",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "php": ">=5.4"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^4.8|^5.7",
+                "sabberworm/php-css-parser": "^8.3",
+                "symfony/finder": "^2.8|^3.4|^5.4",
+                "symfony/var-dumper": "^2.8|^3.4|^5.4"
+            },
+            "suggest": {
+                "ext-mbstring": "Allows highlighting code with unicode characters and supports language with unicode keywords"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "HighlightUtilities/functions.php"
+                ],
+                "psr-0": {
+                    "Highlight\\": "",
+                    "HighlightUtilities\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Geert Bergman",
+                    "homepage": "http://www.scrivo.org/",
+                    "role": "Project Author"
+                },
+                {
+                    "name": "Vladimir Jimenez",
+                    "homepage": "https://allejo.io",
+                    "role": "Maintainer"
+                },
+                {
+                    "name": "Martin Folkers",
+                    "homepage": "https://twobrain.io",
+                    "role": "Contributor"
+                }
+            ],
+            "description": "Server side syntax highlighter that supports 185 languages. It's a PHP port of highlight.js",
+            "keywords": [
+                "code",
+                "highlight",
+                "highlight.js",
+                "highlight.php",
+                "syntax"
+            ],
+            "support": {
+                "issues": "https://github.com/scrivo/highlight.php/issues",
+                "source": "https://github.com/scrivo/highlight.php"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/allejo",
+                    "type": "github"
+                }
+            ],
+            "time": "2022-12-17T21:53:22+00:00"
+        },
+        {
             "name": "spatie/laravel-honeypot",
             "version": "4.3.2",
             "source": {
diff --git a/public/css/highlight.js/github-dark.min.css b/public/css/highlight.js/github-dark.min.css
new file mode 100644
index 0000000..03b6da8
--- /dev/null
+++ b/public/css/highlight.js/github-dark.min.css
@@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}
\ No newline at end of file
diff --git a/public/css/highlight.js/stackoverflow-dark.css b/public/css/highlight.js/stackoverflow-dark.css
new file mode 100644
index 0000000..0eabaf2
--- /dev/null
+++ b/public/css/highlight.js/stackoverflow-dark.css
@@ -0,0 +1,126 @@
+/*!
+  Theme: StackOverflow Dark
+  Description: Dark theme as used on stackoverflow.com
+  Author: stackoverflow.com
+  Maintainer: @Hirse
+  Website: https://github.com/StackExchange/Stacks
+  License: MIT
+  Updated: 2021-05-15
+
+  Updated for @stackoverflow/stacks v0.64.0
+  Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less
+  Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less
+*/
+
+.hljs {
+  /* var(--highlight-color) */
+  color: #ffffff;
+  /* var(--highlight-bg) */
+  background: #1c1b1b;
+}
+
+.hljs-subst {
+  /* var(--highlight-color) */
+  color: #ffffff;
+}
+
+.hljs-comment {
+  /* var(--highlight-comment) */
+  color: #999999;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-meta .hljs-keyword,
+.hljs-doctag,
+.hljs-section {
+  /* var(--highlight-keyword) */
+  color: #88aece;
+}
+
+.hljs-attr {
+  /* var(--highlight-attribute); */
+  color: #88aece;
+}
+
+.hljs-attribute {
+  /* var(--highlight-symbol) */
+  color: #c59bc1;
+}
+
+.hljs-name,
+.hljs-type,
+.hljs-number,
+.hljs-selector-id,
+.hljs-quote,
+.hljs-template-tag {
+  /* var(--highlight-namespace) */
+  color: #f08d49;
+}
+
+.hljs-selector-class {
+  /* var(--highlight-keyword) */
+  color: #88aece;
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr {
+  /* var(--highlight-variable) */
+  color: #b5bd68;
+}
+
+.hljs-meta,
+.hljs-selector-pseudo {
+  /* var(--highlight-keyword) */
+  color: #88aece;
+}
+
+.hljs-built_in,
+.hljs-title,
+.hljs-literal {
+  /* var(--highlight-literal) */
+  color: #f08d49;
+}
+
+.hljs-bullet,
+.hljs-code {
+  /* var(--highlight-punctuation) */
+  color: #cccccc;
+}
+
+.hljs-meta .hljs-string {
+  /* var(--highlight-variable) */
+  color: #b5bd68;
+}
+
+.hljs-deletion {
+  /* var(--highlight-deletion) */
+  color: #de7176;
+}
+
+.hljs-addition {
+  /* var(--highlight-addition) */
+  color: #76c490;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-formula,
+.hljs-operator,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+  /* purposely ignored */
+}
diff --git a/public/css/highlight.js/tomorrow-night-bright.css b/public/css/highlight.js/tomorrow-night-bright.css
new file mode 100644
index 0000000..f909618
--- /dev/null
+++ b/public/css/highlight.js/tomorrow-night-bright.css
@@ -0,0 +1,70 @@
+/* Tomorrow Night Bright Theme */
+/* Original theme - https://github.com/chriskempson/tomorrow-theme */
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+
+/* Tomorrow Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #969896;
+}
+
+/* Tomorrow Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+  color: #d54e53;
+}
+
+/* Tomorrow Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-meta,
+.hljs-link {
+  color: #e78c45;
+}
+
+/* Tomorrow Yellow */
+.hljs-attribute {
+  color: #e7c547;
+}
+
+/* Tomorrow Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #b9ca4a;
+}
+
+/* Tomorrow Blue */
+.hljs-title,
+.hljs-section {
+  color: #7aa6da;
+}
+
+/* Tomorrow Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #c397d8;
+}
+
+.hljs {
+  background: black;
+  color: #eaeaea;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/resources/views/components/codeblock.blade.php b/resources/views/components/codeblock.blade.php
new file mode 100644
index 0000000..8dcebda
--- /dev/null
+++ b/resources/views/components/codeblock.blade.php
@@ -0,0 +1,14 @@
+@php
+$file_path = "code/".$file;
+$file_name = basename($file_path);
+
+$hl = new \Highlight\Highlighter();
+
+$highlighted = $hl->highlight($lang, Storage::disk('local')->get($file_path));
+$file_size = Storage::disk('local')->size($file_path);
+@endphp
+<div class="codeblock"><pre>
+    <h1>{{ $file_name }} <small>{{ $file_size}} bytes</small></h1>
+    <hr>
+    <code class="hljs {{$highlighted->language}}">{!! $highlighted->value !!}</code>
+</pre></div>
diff --git a/resources/views/includes/head-hljs.blade.php b/resources/views/includes/head-hljs.blade.php
new file mode 100644
index 0000000..5011b6e
--- /dev/null
+++ b/resources/views/includes/head-hljs.blade.php
@@ -0,0 +1,15 @@
+    <!-- Global -->
+    <meta charset="utf-8">
+    <meta property="og:type" content="website">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#333333">
+    <link rel="stylesheet" href="{{ URL::asset ('css/master.css') }}"/>
+    <link rel="stylesheet" href="{{ URL::asset ('css/highlight.js/tomorrow-night-bright.css') }}"/>
+    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"/>
+    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"/>
+
+    <!-- Page-specific -->
+    <title>~floppydisk / @yield('title')</title>
+    <meta property="og:title" content="~floppydisk / @yield('title')">
+    <meta property="og:description" content="@yield('description')">
+    <meta property="og:image" content="/favicon.png">
diff --git a/resources/views/layouts/default-hljs.blade.php b/resources/views/layouts/default-hljs.blade.php
new file mode 100644
index 0000000..a9380b0
--- /dev/null
+++ b/resources/views/layouts/default-hljs.blade.php
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html lang="en">
+<head>
+    @include('includes.head-hljs')
+</head>
+
+<body>
+<div class="page">
+<div class="header">
+    @include('includes.header')
+</div> <!-- header -->
+
+<div id="pagebody">
+    <div id="content">
+@yield('content')
+    </div> <!-- content -->
+    <div id="footer" class="pagefooter">
+        @include('includes.footer')
+    </div> <!-- footer -->
+</div> <!-- pagebody -->
+</div> <!-- page -->
+</body>
+</html>