Merge pull request #97 from amnuts/develop

Latest updates

Author: amnuts

README.md

@@ -2,17 +2,17 @@
 
 A clean and responsive interface for Zend OPcache information, showing statistics, settings and cached files, and providing a real-time update for the information.
 
-This interface uses ReactJS and Axios and is for modern browsers and requires a minimum of PHP 7.1.
+This interface uses ReactJS and Axios and is for modern browsers, and requires a minimum of PHP 7.1.
 
 ## License
 
 MIT: http://acollington.mit-license.org/
 
 ## Sponsoring this work
 
-If you're able and would like to sponsor this work in some way, then that would be super awesome :heart:, and you can do so through the [GitHub Sponsorship](https://github.com/sponsors/amnuts) page.
+If you're able and would like to sponsor this work in some way, then that would be super awesome :heart:.  You can do that through the [GitHub Sponsorship](https://github.com/sponsors/amnuts) page.
 
-Alternatively, if you'd just like to give me a [shout-out on Twitter](https://twitter.com/acollington) to say you use it, that'd be awesome, too!  (Any one else miss postcardware?)
+Alternatively, if you'd just like to give me a [shout-out on X (aka, Twitter)](https://twitter.com/acollington) to say you use it, then that'd be awesome, too!  (Any one else miss postcardware?)
 
 ## Using the opcache-gui
 
@@ -175,7 +175,9 @@ Also, if you choose to invalidate any files or reset the cache it will do this w
 
 ### Building it yourself
 
-The interface has been split up to allow you to easily change the colours of the gui, the language shown, or even the core components, should you wish.
+The interface has been designed around the principle of having just one file that anyone needs in order to get up and running.  To fulfil this, there's a template file, language files, jsx and css, which are all used in order to create the interface and they're brought together in the build process.
+
+This build process will allow you to change the language used, how the required 3rd-party javascript libraries are included, the look and feel, or even the core components, should you wish.
 
 #### The build command
 
@@ -185,6 +187,7 @@ To run the build process, run the command `php ./build/build.php` from the repo
 🐢 Installing node modules
 🏗️ Building js and css
 🚀 Creating single build file
+🔗 Using remote js links from 'cloudflare'
 💯 Done!
 ```
 
@@ -208,13 +211,17 @@ Run the build script again should you make changes here.
 
 The wrapper PHP template used in the build process, and that acts to pass various bits of data to the ReactJS side of things, is located at `build/template.phps`.  If you wanted to update the version of ReactJS used, or how the wrapper html is structured (such as wanting to pass additional things to the ReactJS side of things), then this would be the file you'd want to update. 
 
-The template includes a few remote js files.  If you want to make those local (for example, you have CSP policies in place and the remote urls are not whitelisted), then you can use the `-j` or `--local-js` flags when building, such as `php ./build/build.php -j`.  This will fetch the remote script files and put them in the root of the repo, adjusting the links in the built `index.php` file to point to the local copies.  If you want to build it again with remote files, run the command again without the flag.
+The interface requires a few 3rd-party js files to function correctly.  You have the option of being able to change where these are fetched (between CloudFare, JSDelivr, and Unpkg), or you can have js js completely local and in-line (for example, you have CSP policies in place and the remote urls are not whitelisted).
+
+In order to change the location of the 3rd-party resources, use the `-r` or `--remote-js` option followed by either `cloudflare`, `jsdelivr`, or `unpkg`.  For example, if you wanted to use _jsdelivr_ then you'd run the build command like this: `php ./build/build.php -r jsdelivr`.  This defaults to `cloudflare`.
+
+If you wanted to have the js in-line, then you can use the `-j` or `--local-js` flag when building, such as `php ./build/build.php -j`.  This will fetch the remote script files and embed the js into main `index.php` file.  If you want to build it again with remote files, run the command again without the flag.  Fetching the files will take your `-r` option into consideration if you provide it.
 
 #### The language
 
 There's an old saying that goes, "If you know more than one language you're multilingual, if you don't you're British."  Not only is that a damning indictment of the British mentality towards other languages, but also goes to explain why the UI has only so far been in English - because I am, for all my sins, British.
 
-However, it is now possible to build the interface with a different language.  Currently, thanks to contributor, French is also support.  If anyone else wants to contribute additional language packs, please submit a PR! 
+However, it is now possible to build the interface with a different language.  Currently, thanks to a contributor, French is also supported.  If anyone else wants to contribute additional language packs, please submit a PR! 
 
 If the language pack is in the `build/_languages/` directory then you can use that with the `-l` or `--lang` flag.  For example, if there is a `fr.json` language pack then you can use `php ./build/build.php -l fr` in order to build with that language.
 
@@ -224,6 +231,14 @@ So to get started with a new language, copy the `example.json` to the language y
 
 ## Releases
 
+**Version 3.5.0**\
+This version changes how the build process includes the javascript.
+* The `-j`/`--local-js` flag now embeds the javascript into the `index.php` file rather than having them as a separate files
+* The `-r`/`--remote-js` option has been added to allow you to decide where you get the 3rd-party files from (either when fetched locally or when added as remote script links), with `cloudflare`, `jsdelivr`, or `unpkg` being available options
+* CloudFlare has been set as the default for the remote js links
+* Added PR#94 from @M-Falken
+* Added PR#95 from @firassziedan
+
 **Version 3.4.0**\
 This version adds a little more info about the files in the cache, and allows a bit more configuration though the config and build script.
 * Added new `datetime_format` config option for flexible formatting of date/time values

build/_frontend/interface.jsx

@@ -1166,6 +1166,11 @@ function Footer(props) {
                target="_blank"
                title="opcache-gui (currently version {props.version}) on GitHub"
             >https://github.com/amnuts/opcache-gui - version {props.version}</a>
+
+            <a className="sponsor-link" href="https://github.com/sponsors/amnuts"
+               target="_blank"
+               title="Sponsor this project and author on GitHub"
+            >Sponsor this project</a>
         </footer>
     );
 }

build/_frontend/interface.scss

@@ -286,7 +286,8 @@ $footer-border-color: #CCC;
 
   .nav-tab-link-reset,
   .nav-tab-link-realtime,
-  .github-link {
+  .github-link,
+  .sponsor-link {
     background-repeat: no-repeat;
     background-color: transparent;
   }
@@ -296,28 +297,33 @@ $footer-border-color: #CCC;
     background-position: 24px 50%;
   }
 
-  .github-link {
-    background-position: 5px 50%;
-  }
-
   .main-footer {
     border-top: 1px solid $footer-border-color;
     padding: 1em 2em;
   }
 
-  .github-link {
+  .github-link,
+  .sponsor-link {
     background-position: 0 50%;
     padding: 2em 0 2em 2.3em;
     text-decoration: none;
     opacity: 0.7;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1.19em" height="1em" viewBox="0 0 1664 1408"><path d="M640 960q0 40-12.5 82t-43 76t-72.5 34t-72.5-34t-43-76t-12.5-82t12.5-82t43-76t72.5-34t72.5 34t43 76t12.5 82zm640 0q0 40-12.5 82t-43 76t-72.5 34t-72.5-34t-43-76t-12.5-82t12.5-82t43-76t72.5-34t72.5 34t43 76t12.5 82zm160 0q0-120-69-204t-187-84q-41 0-195 21q-71 11-157 11t-157-11q-152-21-195-21q-118 0-187 84t-69 204q0 88 32 153.5t81 103t122 60t140 29.5t149 7h168q82 0 149-7t140-29.5t122-60t81-103t32-153.5zm224-176q0 207-61 331q-38 77-105.5 133t-141 86t-170 47.5t-171.5 22t-167 4.5q-78 0-142-3t-147.5-12.5t-152.5-30t-137-51.5t-121-81t-86-115Q0 992 0 784q0-237 136-396q-27-82-27-170q0-116 51-218q108 0 190 39.5T539 163q147-35 309-35q148 0 280 32q105-82 187-121t189-39q51 102 51 218q0 87-27 168q136 160 136 398z" fill="#{toRGB($nav-icon-color)}"/></svg>');
     font-size: 80%;
 
     &:hover {
       opacity: 1;
     }
   }
 
+  .github-link {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1.19em" height="1em" viewBox="0 0 1664 1408"><path d="M640 960q0 40-12.5 82t-43 76t-72.5 34t-72.5-34t-43-76t-12.5-82t12.5-82t43-76t72.5-34t72.5 34t43 76t12.5 82zm640 0q0 40-12.5 82t-43 76t-72.5 34t-72.5-34t-43-76t-12.5-82t12.5-82t43-76t72.5-34t72.5 34t43 76t12.5 82zm160 0q0-120-69-204t-187-84q-41 0-195 21q-71 11-157 11t-157-11q-152-21-195-21q-118 0-187 84t-69 204q0 88 32 153.5t81 103t122 60t140 29.5t149 7h168q82 0 149-7t140-29.5t122-60t81-103t32-153.5zm224-176q0 207-61 331q-38 77-105.5 133t-141 86t-170 47.5t-171.5 22t-167 4.5q-78 0-142-3t-147.5-12.5t-152.5-30t-137-51.5t-121-81t-86-115Q0 992 0 784q0-237 136-396q-27-82-27-170q0-116 51-218q108 0 190 39.5T539 163q147-35 309-35q148 0 280 32q105-82 187-121t189-39q51 102 51 218q0 87-27 168q136 160 136 398z" fill="#{toRGB($nav-icon-color)}"/></svg>');
+  }
+
+  .sponsor-link {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24"><path fill="crimson" d="M12 21.35l-1.45-1.32c-5.15-4.67-8.55-7.75-8.55-11.53 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09 1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.78-3.4 6.86-8.55 11.54l-1.45 1.31z"/></svg>');
+    margin-left: 2em;
+  }
+
   .file-cache-only {
     margin-top: 0;
   }

build/build.php

@@ -4,22 +4,48 @@
  * OPcache GUI - build script
  *
  * @author Andrew Collington, andy@amnuts.com
- * @version 3.4.0
+ * @version 3.5.0
  * @link https://github.com/amnuts/opcache-gui
  * @license MIT, https://acollington.mit-license.org/
  */
 
-$options = getopt('jl:', ['local-js', 'lang:']);
+$remoteJsLocations = [
+    'cloudflare' => [
+        'cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js',
+        'cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js',
+        'cdnjs.cloudflare.com/ajax/libs/axios/1.3.6/axios.min.js',
+    ],
+    'jsdelivr' => [
+        'cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js',
+        'cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js',
+        'cdn.jsdelivr.net/npm/axios/dist/axios.min.js',
+    ],
+    'unpkg' => [
+        'unpkg.com/react@18/umd/react.production.min.js',
+        'unpkg.com/react-dom@18/umd/react-dom.production.min.js',
+        'unpkg.com/axios/dist/axios.min.js',
+    ],
+];
+$defaultRemoteJsFrom = array_keys($remoteJsLocations)[0];
+
+$options = getopt('jr:l:', ['local-js', 'remote-js', 'lang:']);
 $makeJsLocal = (isset($options['j']) || isset($options['local-js']));
+$useRemoteJsFrom = $options['r'] ?? $options['remote-js'] ?? $defaultRemoteJsFrom;
 $useLanguage = $options['l'] ?? $options['lang'] ?? null;
 $languagePack = 'null';
 $parentPath = dirname(__DIR__);
 
+if (!isset($remoteJsLocations[$useRemoteJsFrom])) {
+    $validRemotes = implode(', ', array_keys($remoteJsLocations));
+    echo "\nThe '{$useRemoteJsFrom}' remote js location is not valid - must be one of {$validRemotes} - defaulting to '{$defaultRemoteJsFrom}'\n\n";
+    $useRemoteJsFrom = $defaultRemoteJsFrom;
+}
+
 if ($useLanguage !== null) {
     $useLanguage = preg_replace('/[^a-z_-]/', '', $useLanguage);
     $languageFile = __DIR__ . "/_languages/{$useLanguage}.json";
     if (!file_exists($languageFile)) {
-        echo "The '{$useLanguage}' file does not exist - using default English\n\n";
+        echo "\nThe '{$useLanguage}' file does not exist - using default English\n\n";
     } else {
         $languagePack = "<<< EOJSON\n" . file_get_contents($languageFile) . "\nEOJSON";
     }
@@ -46,18 +72,25 @@
     [$jsOutput, $cssOutput, $phpOutput, $languagePack],
     $template
 );
+
 if ($makeJsLocal) {
-    echo "🔗 Making js links local\n";
-    $jsTags = [];
-    $matched = preg_match_all('!<script src="([^"]*)"></script>!', $output, $jsTags);
-    if ($matched) {
-        foreach ($jsTags[1] as $jsUrl) {
-            $jsFile = basename($jsUrl);
-            $jsFilePath = $parentPath . '/' . $jsFile;
-            file_put_contents($jsFilePath, file_get_contents('https:' . $jsUrl));
-            $output = str_replace($jsUrl, $jsFile, $output);
-        }
+    echo "🔗 Making js locally in-line\n";
+    $jsContents = [];
+    foreach ($remoteJsLocations[$useRemoteJsFrom] as $jsUrl) {
+        $jsContents[] = file_get_contents('https://' . $jsUrl);
     }
+    $output = str_replace('{{JS_LIBRARIES}}',
+        "<script>\n" . implode(";\n\n", $jsContents) . ";\n</script>",
+        $output
+    );
+} else {
+    echo "🔗 Using remote js links from '{$useRemoteJsFrom}'\n";
+    $output = str_replace('{{JS_LIBRARIES}}',
+        implode("\n    ", array_map(static function ($jsUrl) {
+            return "<script src=\"//{$jsUrl}\"></script>";
+        }, $remoteJsLocations[$useRemoteJsFrom])),
+        $output
+    );
 }
 
 file_put_contents($parentPath . '/index.php', $output);

build/template.phps

@@ -8,7 +8,7 @@ namespace Amnuts\Opcache;
  * A simple but effective single-file GUI for the OPcache PHP extension.
  *
  * @author Andrew Collington, andy@amnuts.com
- * @version 3.4.0
+ * @version 3.5.0
  * @link https://github.com/amnuts/opcache-gui
  * @license MIT, https://acollington.mit-license.org/
  */
@@ -69,10 +69,9 @@ $opcache = (new Service($options))->handle();
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="robots" content="noindex, nofollow" />
     <title>OPcache statistics on <?= $opcache->getData('version', 'host'); ?></title>
-    <script src="//unpkg.com/react/umd/react.production.min.js"></script>
-    <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
-    <script src="//unpkg.com/axios/dist/axios.min.js"></script>
+    {{JS_LIBRARIES}}
     <style>
         {{CSS_OUTPUT}}
     </style>