Merge pull request #72 from Moros1138/screenshots-for-embed-sharing

Screenshots for embed sharing
Moros1138 · May 23, 2024 · 4931746 · 4931746
2 parents 23c0cb0 + 2945f90
commit 4931746
Show file tree

Hide file tree

Showing 12 changed files with 214 additions and 192 deletions.
diff --git a/app/Console/Commands/GetShareThumbnails.php b/app/Console/Commands/GetShareThumbnails.php
@@ -0,0 +1,53 @@
+<?php
+
+namespace App\Console\Commands;
+
+use Exception;
+use Illuminate\Console\Command;
+use Illuminate\Support\Facades\Log;
+
+use function PGEtinker\Utils\takeScreenshotOfHtml;
+use function PGEtinker\Utils\uploadFileToPit;
+use App\Http\Controllers\CodeController;
+use App\Models\Code;
+
+class GetShareThumbnails extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'app:share-thumbnails';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Grab share thumbnails for any share that lacks one';
+
+    /**
+     * Execute the console command.
+     */
+    public function handle()
+    {
+        $codes = Code::where("thumb_url", "")->get();
+
+        if(count($codes) == 0)
+        {
+            echo "Finished. Nothing to do.\n";
+            return;
+        }
+
+        $controller = new CodeController();
+
+        foreach($codes as $code)
+        {
+            $result = $controller->compileCode($code->code);
+            $code->thumb_url = uploadFileToPit($code->slug . ".png", takeScreenshotOfHtml($result["html"]));
+            $code->save();
+        }
+
+    }        
+}
diff --git a/app/Console/Commands/MoveDatabase.php b/app/Console/Commands/MoveDatabase.php
@@ -27,6 +27,9 @@ class MoveDatabase extends Command
      */
     public function handle()
     {
+        echo "might wanna revamp this first\n\n";
+        return;
+
         //
         $codes = DB::connection('development')->select("SELECT * FROM codes;");
         for($i = 0; $i < count($codes); $i++)

diff --git a/app/Http/Controllers/CodeController.php b/app/Http/Controllers/CodeController.php
@@ -3,16 +3,22 @@
 namespace App\Http\Controllers;
 
 use App\Models\Code;
-
+use Exception;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Facades\Redis;
 use Illuminate\Support\Facades\Storage;
 use Illuminate\Support\Str;
 
 use PGEtinker\Compiler;
+
+
 use function PGEtinker\Utils\hashCode;
 
+use function PGEtinker\Utils\takeScreenshotOfHtml;
+use function PGEtinker\Utils\uploadFileToPit;
+
 class CodeController extends Controller
 {
     function Compile(Request $request)
@@ -39,8 +45,16 @@ function Share(Request $request)
         if($share != null)
         {
             $result["shareURL"] = env("APP_URL") . "/s/" . $share->slug;
+
+            if(empty($share->thumb_url))
+            {
+                Log::info("no thumbnail, try to upload it");
+                $share->thumb_url = uploadFileToPit($share->slug . ".png", takeScreenshotOfHtml($result["html"]));
+                $share->save();
+            }
+
+            $result["shareThumbURL"] = $share->thumb_url;
             unset($result["hash"]);
-
             return response($result, $result["statusCode"])->header("Content-Type", "application/json");
         }
 
@@ -65,12 +79,15 @@ function Share(Request $request)
         $share->code = $code;
         $share->hash = $result["hash"];
         $share->slug = $slug;
-
+
+        $share->thumb_url = uploadFileToPit($share->slug . ".png", takeScreenshotOfHtml($result["html"]));
+
         if($share->save())
         {
             $result["shareURL"] = env("APP_URL") . "/s/" . $slug;
+            $result["shareThumbURL"] = $share->thumb_url;
             unset($result["hash"]);
-            
+
             return response($result, $result["statusCode"])->header("Content-Type", "application/json");
         }
 
@@ -168,7 +185,6 @@ function compileCode($code)
                 Redis::set("compiler_{$hashedCode}", $compiler->serialize());
             }
 
-
             return [
                 "statusCode" => 200,
                 "hash" => $hashedCode,
@@ -192,6 +208,7 @@ function compileCode($code)
         ];
     }
 
+
 }
 
 
diff --git a/database/migrations/2024_05_21_011623_add_thumbnail_to_codes.php b/database/migrations/2024_05_21_011623_add_thumbnail_to_codes.php
@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('codes', function (Blueprint $table) {
+            $table->string("thumb_url", 256)->nullable()->default("");
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('codes', function (Blueprint $table) {
+            $table->dropColumn('thumb_url');
+        });
+    }
+};
+
+
diff --git a/pgetinker/Utils.php b/pgetinker/Utils.php
@@ -2,6 +2,10 @@
 
 namespace PGEtinker\Utils;
 
+use Exception;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Log;
+
 function hashCode(string $code)
 {
     /**
@@ -73,3 +77,54 @@ function hashCode(string $code)
     return hash("sha256", $cppcode);
 }
 
+function takeScreenshotOfHtml($html)
+{
+    if(empty(env("SCREENSHOTTER_URL")))
+    {
+        Log::error("Error: screenshotter url not set... aborted.");
+        return null;
+    }
+
+    try
+    {
+        $screenshot = Http::withHeader("Content-Type", "application/json")
+                            ->post(env("SCREENSHOTTER_URL"), [
+                                "html" => $html,
+                            ])
+                            ->body();
+    }
+    catch(Exception $e)
+    {
+        Log::error("Failed to get screenshot. Is the screenshot service running?");
+        return null;
+    }
+
+    return $screenshot;
+}
+
+function uploadFileToPit($filename, $content)
+{
+
+    if(empty(env("PIT_ACCESS_TOKEN")))
+    {
+        Log::error("Error: missing Pit Access Token... aborted.");
+        return null;
+    }
+
+    try
+    {
+        $response = Http::withHeader("x-api-key", env("PIT_ACCESS_TOKEN"))
+                        ->attach($filename, $content, $filename)
+                        ->post(env("PIT_URL") . "/api/upload");
+
+        Log::debug("upload status: " . $response->status(), ["response" => $response]);
+
+        $fileUrl = $response->json()["url"];
+    }
+    catch(Exception $e)
+    {
+        return null;
+    }
+
+    return $fileUrl;
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -1,2 +1,2 @@
 User-agent: *
-Disallow:
+Disallow: 
diff --git a/resources/css/dialog.scss b/resources/css/dialog.scss
@@ -49,7 +49,12 @@
     padding: 0.4rem 1rem;
     border-radius: 0.2rem;
 }
-
+.dialog .window > .content img {
+    display: block;
+    width: auto;
+    height: 30rem;
+    margin: 2rem auto;
+}
 .ok {
     background: #0D6EFD;
     color: var(--dialog-text-color);

diff --git a/resources/js/app.js b/resources/js/app.js
@@ -122,7 +122,7 @@ class PGEtinker
                 code: this.monacoEditor.getValue()
             }).then((response) =>
             {
-                shareDialog(response.data.shareURL)
+                shareDialog(response.data.shareURL, response.data.shareThumbURL)
                     .finally(() =>
                     {
                         this.compileSuccessHandler(response.data);

diff --git a/resources/js/lib/shareDialog.js b/resources/js/lib/shareDialog.js
@@ -1,4 +1,4 @@
-export default function shareDialog(shareUrl)
+export default function shareDialog(shareUrl, shareThumbUrl)
 {
     function shareClickAnywhereHandler(event)
     {
@@ -19,6 +19,7 @@ export default function shareDialog(shareUrl)
             <div class="window">
                 <div class="header">Share Your Masterpiece!</div>
                 <div class="content">
+                    <img src="${shareThumbUrl}">
                     <div class="input-group">
                         <label>Share URL:</label>
                         <input type="text" id="share-url" value="${shareUrl}" readonly>

diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
@@ -3,7 +3,31 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:title" content="PGEtinker" />
+
+    <meta property="twitter:description" content="Interactively build olcPixelGameEngine programs right from the browser." />
+@if (empty($share_thumb_url))
+    <meta property="twitter:image:src" content="{{ env("APP_URL") }}/images/PGEtinker-screenshot.png" />
+@else
+    <meta property="twitter:image:src" content="{{ $share_thumb_url }}" />
+@endif
+
+    <meta property="og:title" content="PGEtinker" />
+    <meta property="og:description" content="Interactively build olcPixelGameEngine programs right from the browser." />
+    <meta property="url" content="{{ env("APP_URL") }}" />
+    <meta property="og:type" content="website" />
+@if (empty($share_thumb_url))
+    <meta property="og:image" content="{{ env("APP_URL") }}/images/PGEtinker-screenshot.png" />
+    <meta property="og:image:secure_url" content="{{ env("APP_URL") }}/images/PGEtinker-screenshot.png" />
+@else
+    <meta property="og:image" content="{{ $share_thumb_url }}" />
+    <meta property="og:image:secure_url" content="{{ $share_thumb_url }}" />
+@endif
+
     <title>PGEtinker</title>
+
     <link rel="icon" type="text/svg" href="{{ env('APP_URL') }}/favicon.svg">
     <link rel="stylesheet" type="text/css" href="{{ Vite::asset('resources/css/goldenlayout-base.scss')}}">
     <link rel="stylesheet" type="text/css" href="{{ Vite::asset('resources/css/goldenlayout-dark-theme.scss')}}" id="goldenlayout-dark-theme">

diff --git a/routes/web.php b/routes/web.php
@@ -8,7 +8,8 @@
 {
     return view('home', [
         "code" => "",
-
+        "share_thumb_url" => "",
+
         // TODO: hook sponsor data into some dynamically loading situation.
         "navBarSponsorLink" => "https://www.youtube.com/channel/UC-yuWVUplUJZvieEligKBkA",
         "navBarSponsorText" => "Watch Javidx9, the creator of the olcPixelGameEngine, on Youtube."
@@ -25,7 +26,8 @@
 
     return view("home", [
         "code" => $code->code,
-
+        "share_thumb_url" => $code->thumb_url,
+
         // TODO: hook sponsor data into some dynamically loading situation.
         "navBarSponsorLink" => "https://www.youtube.com/channel/UC-yuWVUplUJZvieEligKBkA",
         "navBarSponsorText" => "Watch Javidx9, the creator of the olcPixelGameEngine, on Youtube."