diff --git a/README.md b/README.md
index 187755a..29d0a8b 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
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
@@ -10,9 +10,9 @@ 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
diff --git a/build/_frontend/interface.jsx b/build/_frontend/interface.jsx
index 28d0336..be74bef 100644
--- a/build/_frontend/interface.jsx
+++ b/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}
+
+ Sponsor this project
);
}
diff --git a/build/_frontend/interface.scss b/build/_frontend/interface.scss
index 6e54263..3579c75 100644
--- a/build/_frontend/interface.scss
+++ b/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,21 +297,17 @@ $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,');
font-size: 80%;
&:hover {
@@ -318,6 +315,15 @@ $footer-border-color: #CCC;
}
}
+ .github-link {
+ background-image: url('data:image/svg+xml;utf8,');
+ }
+
+ .sponsor-link {
+ background-image: url('data:image/svg+xml;utf8,');
+ margin-left: 2em;
+ }
+
.file-cache-only {
margin-top: 0;
}
diff --git a/build/build.php b/build/build.php
index 931f9a5..fae214d 100644
--- a/build/build.php
+++ b/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 @@ $output = str_replace(
[$jsOutput, $cssOutput, $phpOutput, $languagePack],
$template
);
+
if ($makeJsLocal) {
- echo "🔗 Making js links local\n";
- $jsTags = [];
- $matched = preg_match_all('!!', $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}}',
+ "",
+ $output
+ );
+} else {
+ echo "🔗 Using remote js links from '{$useRemoteJsFrom}'\n";
+ $output = str_replace('{{JS_LIBRARIES}}',
+ implode("\n ", array_map(static function ($jsUrl) {
+ return "";
+ }, $remoteJsLocations[$useRemoteJsFrom])),
+ $output
+ );
}
file_put_contents($parentPath . '/index.php', $output);
diff --git a/build/template.phps b/build/template.phps
index e29b2ab..d3b7b2f 100644
--- a/build/template.phps
+++ b/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();
+
OPcache statistics on <?= $opcache->getData('version', 'host'); ?>
-
-
-
+ {{JS_LIBRARIES}}
diff --git a/index.php b/index.php
index b190c09..143510e 100644
--- a/index.php
+++ b/index.php
@@ -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/
*/
@@ -65,7 +65,7 @@ use Exception;
class Service
{
- public const VERSION = '3.4.0';
+ public const VERSION = '3.5.0';
protected $tz;
protected $data;
@@ -507,12 +507,13 @@ $opcache = (new Service($options))->handle();
+
OPcache statistics on <?= $opcache->getData('version', 'host'); ?>
-
-
-
+
+
+
@@ -522,7 +523,7 @@ $opcache = (new Service($options))->handle();