docs: use json settings field in demo

Author: Dominik Jansen

demo/index.php

@@ -6,7 +6,7 @@
 
 function getUrl(): ?string
 {
-    $skipParams = ['url', 'instagram_token', 'facebook_token'];
+    $skipParams = ['url', 'settings'];
     $url = getParam('url');
 
     if (!$url) {
@@ -30,6 +30,12 @@ function getParam(string $paramName): ?string
     return $_GET[$paramName] ?? null;
 }
 
+function getJsonSettings(): array
+{
+    $jsonString = getParam('settings') ?: '{}';
+    return json_decode($jsonString, true, 512, JSON_THROW_ON_ERROR);
+}
+
 function getEscapedUrl(): ?string
 {
     $url = getUrl();
@@ -148,7 +154,7 @@ function printCode(?string $code, bool $asHtml = true): void
             form { background: #EEE; border-bottom: solid 1px #DDD; color: #666; padding: 3em 1.5em; }
             fieldset { border: none; padding: 0; }
             label { display: block; cursor: pointer; font-weight: bold; }
-            input[type="url"] { border: none; background: white; border-radius: 2px; box-sizing: border-box; width: 100%; margin: 5px 0; font-size: 1.3em; padding: 0.5em; color: #666; }
+            input[type="url"], textarea { border: none; background: white; border-radius: 2px; box-sizing: border-box; min-width: 100%; margin: 5px 0; font-size: 1.3em; padding: 0.5em; color: #666; }
             button, summary { font-size: 1.6rem; font-weight: bold; font-family: Arial; background: yellowgreen; border: none; border-radius: 3px; padding: 0.3em 1em; cursor: pointer; margin-top: 5px; }
             button:hover, summary:hover { background: black; color: white; }
             details {
@@ -159,7 +165,7 @@ function printCode(?string $code, bool $asHtml = true): void
                 width: max-content;
                 margin: auto;
             }
-
+            .helptext { font-weight: normal; font-size: 0.75em; }
             /* result */
             main { padding: 1.5em; }
             main h1, main h2 { font-size: 2em; color: #666; letter-spacing: -0.02em; }
@@ -179,12 +185,17 @@ function printCode(?string $code, bool $asHtml = true): void
                     <input type="url" name="url" autofocus placeholder="http://" value="<?php echo getEscapedUrl(); ?>">
                 </label>
                 <label>
-                    <span>Instagram Token:</span>
-                    <input type="text" name="instagram_token" placeholder="1234|5678" value="<?php echo getParam('instagram_token'); ?>">
-                </label>
-                <label>
-                    <span>Facebook Token:</span>
-                    <input type="text" name="facebook_token" placeholder="1234|5678" value="<?php echo getParam('facebook_token'); ?>">
+                    <span>Settings:</span>
+                    <?php
+                    $placeholderJson = json_encode(['instagram:token' => null], JSON_PRETTY_PRINT);
+                    $currentJson = getJsonSettings();
+                    ?>
+                    <textarea name="settings" rows="3" placeholder='<?php echo $placeholderJson; ?>'><?php
+                         echo !empty($currentJson)
+                             ? json_encode($currentJson, JSON_PRETTY_PRINT | JSON_FORCE_OBJECT)
+                             : '';
+                    ?></textarea>
+                    <span class="helptext">Add settings like "instagram:token", "facebook:token", ...</span>
                 </label>
             </fieldset>
 
@@ -208,11 +219,12 @@ function printCode(?string $code, bool $asHtml = true): void
                 ]);
 
                 $embed->setSettings(
-                    [
-                        'twitch:parent' => $_SERVER['SERVER_NAME'] === 'localhost' ? null : $_SERVER['SERVER_NAME'],
-                        'instagram:token' => getParam('instagram_token'),
-                        'facebook:token' => getParam('facebook_token'),
-                    ]
+                    array_merge(
+                        [
+                            'twitch:parent' => $_SERVER['SERVER_NAME'] === 'localhost' ? null : $_SERVER['SERVER_NAME'],
+                        ],
+                        getJsonSettings()
+                    )
                 );
                 $info = $embed->get(getUrl());
             } catch (Exception $exception) {