Add option to download assets to serve them locally (#8)

Resolves #5

Author: spawnia

README.md

@@ -34,6 +34,15 @@ By default, the playground is reachable at `/graphql-playground`
 It assumes a running GraphQL endpoint at `/graphql`. You can enter another URL in the
 UI or change the default setting in the configuration file.
 
+### Local assets
+
+If you want to serve the assets from your own server, you can download them with the command
+
+    php artisan graphql-playground:download-assets
+
+This puts the necessary CSS, JS and Favicon into your `public` directory. If you have
+the assets downloaded, they will be used instead of the online version from the CDN.
+
 ## Security
 
 If you do not want to enable the GraphQL playground in production, you can disable it in the config file.

src/DownloadAssetsCommand.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace MLL\GraphQLPlayground;
+
+use Illuminate\Console\Command;
+
+class DownloadAssetsCommand extends Command
+{
+    const JS_PATH_LOCAL = 'vendor/graphql-playground/middleware.js';
+    const JS_PATH_CDN = '//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/js/middleware.js';
+    const CSS_PATH_LOCAL = 'vendor/graphql-playground/index.css';
+    const CSS_PATH_CDN = '//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/css/index.css';
+    const FAVICON_PATH_LOCAL = 'vendor/graphql-playground/favicon.png';
+    const FAVICON_PATH_CDN = '//cdn.jsdelivr.net/npm/graphql-playground-react/build/favicon.png';
+    
+    protected $signature = 'graphql-playground:download-assets';
+    protected $description = 'Download the newest version of the GraphQLPlayground assets to serve them locally.';
+    
+    public function handle()
+    {
+        $this->fileForceContents(
+            public_path(self::CSS_PATH_LOCAL),
+            file_get_contents('https:' . self::CSS_PATH_CDN)
+        );
+        $this->fileForceContents(
+            public_path(self::JS_PATH_LOCAL),
+            file_get_contents('https:' . self::JS_PATH_CDN)
+        );
+        $this->fileForceContents(
+            public_path(self::FAVICON_PATH_LOCAL),
+            file_get_contents('https:' . self::FAVICON_PATH_CDN)
+        );
+    }
+    
+    protected function fileForceContents(string $path, string $contents)
+    {
+        $parts = explode('/', $path);
+        $file = array_pop($parts);
+        $path = '';
+        foreach ($parts as $part) {
+            if (!is_dir($path .= "/$part")) {
+                mkdir($path);
+            }
+        }
+        file_put_contents("$path/$file", $contents);
+    }
+}

src/GraphQLPlaygroundServiceProvider.php

@@ -47,5 +47,11 @@ public function boot()
     public function register()
     {
         $this->mergeConfigFrom(self::CONFIG_PATH, 'graphql-playground');
+    
+        if ($this->app->runningInConsole()) {
+            $this->commands([
+                \MLL\GraphQLPlayground\DownloadAssetsCommand::class,
+            ]);
+        }
     }
 }

views/index.blade.php

@@ -6,9 +6,29 @@
     <meta charset=utf-8 />
     <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
     <title>GraphQL Playground</title>
-    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/css/index.css" />
-    <link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/favicon.png" />
-    <script src="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/js/middleware.js"></script>
+
+    <link rel="stylesheet"
+          href="{{
+            file_exists(public_path(\MLL\GraphQLPlayground\DownloadAssetsCommand::CSS_PATH_LOCAL))
+            ? asset(\MLL\GraphQLPlayground\DownloadAssetsCommand::CSS_PATH_LOCAL)
+            : \MLL\GraphQLPlayground\DownloadAssetsCommand::CSS_PATH_CDN
+          }}"
+    />
+
+    <link rel="shortcut icon"
+          href="{{
+            file_exists(public_path(\MLL\GraphQLPlayground\DownloadAssetsCommand::FAVICON_PATH_LOCAL))
+            ? asset(\MLL\GraphQLPlayground\DownloadAssetsCommand::FAVICON_PATH_LOCAL)
+            : \MLL\GraphQLPlayground\DownloadAssetsCommand::FAVICON_PATH_CDN
+          }}"
+    />
+
+    <script src="{{
+                file_exists(public_path(\MLL\GraphQLPlayground\DownloadAssetsCommand::JS_PATH_LOCAL))
+                ? asset(\MLL\GraphQLPlayground\DownloadAssetsCommand::JS_PATH_LOCAL)
+                : \MLL\GraphQLPlayground\DownloadAssetsCommand::JS_PATH_CDN
+            }}"
+    ></script>
 
 </head>