Merge pull request #99 from amnuts/inline-js

inline js
2023-08-15 17:59:01 +01:00 · 2023-08-15 17:59:01 +01:00 · 953f5b9363
commit 953f5b9363
parent 0f3c71770a 539ea38c2c
6 changed files with 76 additions and 29 deletions
--- 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}</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>
    );
 }
--- 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,<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 {
@ -318,6 +315,15 @@ $footer-border-color: #CCC;
    }
  }

+  .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;
  }
--- 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('!<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);
--- 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/
 */
@ -71,9 +71,7 @@ $opcache = (new Service($options))->handle();
    <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="//cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/axios/1.3.6/axios.min.js"></script>
+    {{JS_LIBRARIES}}
    <style>
        {{CSS_OUTPUT}}
    </style>
--- a/index.php
+++ b/index.php
--- a/src/Opcache/Service.php
+++ b/src/Opcache/Service.php
@ -8,7 +8,7 @@ use Exception;

 class Service
 {
-    public const VERSION = '3.4.0';
+    public const VERSION = '3.5.0';

    protected $tz;
    protected $data;