Change the froth panel

Signed-off-by: Sam Therapy <sam@samtherapy.net>

instance/panel.html

@@ -1,43 +1,33 @@
-<div style="margin-left:12px; margin-right:12px">
-  <p style="text-align:center">
+<div style="margin-left: 12px; margin-right: 12px">
+  <p style="text-align: center">
     Welcome to the Froth Zone!
     <br />
-    <a href="https://bloat.froth.zone" rel="noopener noreferrer nofollow">
-      Bloat FE
-    </a>
-    |
-    <a href="https://glitch.froth.zone" rel="noopener noreferrer nofollow">
-      Masto FE
-    </a>
-    |
-    <a href="/main/all" rel="noopener noreferrer nofollow">
-      Pleroma FE
-    </a>
-    |
-    <a href="https://treebird.froth.zone" rel="noopener noreferrer nofollow">
-      Treebird FE
-    </a>
+    <br />
+    Now available on
+    <a href="https://froth.oz" rel="noopener noreferrer nofollow">OpenNIC</a>!
+    (Functionality not guaranteed)
     <br />
     <br />
-    <a href="https://poopchan.org" rel="noopener noreferrer nofollow">
-      Fchan
-    </a>
+    <a href="https://bloat.froth.zone" rel="noopener noreferrer nofollow">Bloat FE</a>
     |
-    <a href="https://funkwhale.samtherapy.net" rel="noopener noreferrer nofollow">
-      Funkwhale
-    </a>
+    <a href="https://glitch.froth.zone" rel="noopener noreferrer nofollow">Masto FE</a>
     |
-    <a href="https://mk.froth.zone" rel="noopener noreferrer nofollow">
-      Misskey
-    </a>
+    <a href="/main/all" rel="noopener noreferrer nofollow">Pleroma FE</a>
     |
-    <a href="https://tube.froth.zone" rel="noopener noreferrer nofollow">
-      PeerTube
-    </a>
+    <a href="https://soap.froth.zone" rel="noopener noreferrer nofollow">Soapbox FE</a>
+    |
+    <a href="https://treebird.froth.zone" rel="noopener noreferrer nofollow">Treebird FE</a>
     <br />
     <br />
-    <a href="https://status.froth.zone/status" rel="noopener noreferrer nofollow">
-      Everything else I host
-    </a>
+    <a href="https://git.froth.zone" rel="noopener noreferrer nofollow">Gitea</a>
+    |
+    <a href="https://funkwhale.samtherapy.net" rel="noopener noreferrer nofollow">Funkwhale</a>
+    |
+    <a href="https://mk.froth.zone" rel="noopener noreferrer nofollow">Misskey</a>
+    |
+    <a href="https://tube.froth.zone" rel="noopener noreferrer nofollow">PeerTube</a>
+    <br />
+    <br />
+    <a href="https://status.froth.zone/status" rel="noopener noreferrer nofollow">Everything else I host</a>
   </p>
 </div>

instance/pleroma-mod-loader.js

@@ -1,477 +1,479 @@
 class PleromaModLoader {
   constructor () {
     this.config = {
-      "modDirectory": "/instance/pleroma-mods/",
-      "mods": []
-    };
-    this.loadConfig();
-    this.loadedMods = {};
-    this.classes = {};
+      modDirectory: '/instance/pleroma-mods/',
+      mods: []
+    }
+    this.loadConfig()
+    this.loadedMods = {}
+    this.classes = {}
   }
 
   loadMods () {
     this.config.mods.forEach((mod) => {
-      this.loadMod(mod);
-    });
+      this.loadMod(mod)
+    })
   }
 
   loadMod (modName) {
     return PleromaModLoader.includeScript(
-      this.config.modDirectory + "pleroma-mod-" + modName + "/mod.js"
+      this.config.modDirectory + 'pleroma-mod-' + modName + '/mod.js'
     ).then(() => {
-      this.loadedMods[modName] = new this.classes[PleromaModLoader.getClassName(modName)]();
-    });
+      this.loadedMods[modName] = new this.classes[PleromaModLoader.getClassName(modName)]()
+    })
   }
 
   loadConfig () {
-    window.fetch("/instance/pleroma-mod-config.json").then((response) => {
-      return response.json();
+    window.fetch('/instance/pleroma-mod-config.json').then((response) => {
+      return response.json()
     }).then((json) => {
       Object.keys(json).forEach((key) => {
-        this.config[key] = json[key];
-      });
-      this.loadMods();
+        this.config[key] = json[key]
+      })
+      this.loadMods()
     }).catch((error) => {
-      console.error("can't load loader config");
-      console.error(error);
-    });
+      console.error("can't load loader config")
+      console.error(error)
+    })
   }
 
   registerClass (className, object) {
-    this.classes[className] = object;
+    this.classes[className] = object
   }
 
   waitUntilReady () {
-    const postPanel = document.querySelector(".status-container");
-    const loginPanel = document.querySelector(".login-form");
+    const postPanel = document.querySelector('.status-container')
+    const loginPanel = document.querySelector('.login-form')
     if (postPanel || loginPanel) {
       Object.keys(this.loadedMods).forEach((modName) => {
-        const settings = document.querySelector(".settings-modal div[label]:first-child");
+        const settings = document.querySelector('.settings-modal div[label]:first-child')
         if (settings) {
-          if (!settings.querySelector(".mod-settings")) {
-            this.appendModSettings(settings);
+          if (!settings.querySelector('.mod-settings')) {
+            this.appendModSettings(settings)
           }
         }
 
-        const mod = this.loadedMods[modName];
+        const mod = this.loadedMods[modName]
         if (mod.isEnabled) {
-          mod.ready();
+          mod.ready()
         }
-      });
+      })
 
-      this.createObserver();
+      this.createObserver()
     } else {
-      console.warn("not ready, trying again in 1s");
-      window.setTimeout(() => { this.waitUntilReady(); }, 1000);
+      console.warn('not ready, trying again in 1s')
+      window.setTimeout(() => { this.waitUntilReady() }, 1000)
     }
   }
 
   createCheckbox (label, mod) {
-    const labelElement = document.createElement("label");
-    labelElement.classList.add("checkbox");
+    const labelElement = document.createElement('label')
+    labelElement.classList.add('checkbox')
 
-    const input = document.createElement("input");
-    input.setAttribute("type", "checkbox");
-    input.checked = mod.isEnabled;
-    input.addEventListener("change", (event) => {
+    const input = document.createElement('input')
+    input.setAttribute('type', 'checkbox')
+    input.checked = mod.isEnabled
+    input.addEventListener('change', (event) => {
       if (event.target.checked) {
-        mod.enable();
+        mod.enable()
       } else {
-        mod.disable();
+        mod.disable()
       }
-    });
-    labelElement.appendChild(input);
+    })
+    labelElement.appendChild(input)
 
-    const fakeCheckbox = document.createElement("i");
-    fakeCheckbox.classList.add("checkbox-indicator");
-    labelElement.appendChild(fakeCheckbox);
+    const fakeCheckbox = document.createElement('i')
+    fakeCheckbox.classList.add('checkbox-indicator')
+    labelElement.appendChild(fakeCheckbox)
 
-    const text = document.createElement("span");
-    text.classList.add("label");
-    text.innerText = label;
-    labelElement.appendChild(text);
+    const text = document.createElement('span')
+    text.classList.add('label')
+    text.innerText = label
+    labelElement.appendChild(text)
 
-    return labelElement;
+    return labelElement
   }
 
   appendModSettings (element) {
-    const container = document.createElement("div");
-    container.classList.add("setting-item");
-    container.classList.add("mod-settings");
+    const container = document.createElement('div')
+    container.classList.add('setting-item')
+    container.classList.add('mod-settings')
 
-    const title = document.createElement("h2");
-    title.innerText = "Pleroma Mods";
-    container.appendChild(title);
+    const title = document.createElement('h2')
+    title.innerText = 'Pleroma Mods'
+    container.appendChild(title)
 
-    const optionList = document.createElement("ul");
-    optionList.classList.add("setting-list");
+    const optionList = document.createElement('ul')
+    optionList.classList.add('setting-list')
 
     Object.keys(this.loadedMods).sort().forEach((modName) => {
-      const li = document.createElement("li");
+      const li = document.createElement('li')
 
-      const enable = this.createCheckbox("enable " + modName, this.loadedMods[modName]);
-      li.appendChild(enable);
+      const enable = this.createCheckbox('enable ' + modName, this.loadedMods[modName])
+      li.appendChild(enable)
 
-      const ulConfig = document.createElement("ul");
-      ulConfig.classList.add("setting-list");
+      const ulConfig = document.createElement('ul')
+      ulConfig.classList.add('setting-list')
 
       Object.keys(this.loadedMods[modName].config).forEach((key) => {
-        if (key === "includes" || key === "filter") {
-          return;
+        if (key === 'includes' || key === 'filter') {
+          return
         }
 
-        this.loadedMods[modName].onSettingInit(key, ulConfig, document.createElement("li"));
-      });
+        this.loadedMods[modName].onSettingInit(key, ulConfig, document.createElement('li'))
+      })
 
-      li.appendChild(ulConfig);
+      li.appendChild(ulConfig)
 
-      optionList.appendChild(li);
-    });
+      optionList.appendChild(li)
+    })
 
-    container.appendChild(optionList);
+    container.appendChild(optionList)
 
-    element.appendChild(container);
+    element.appendChild(container)
   }
 
   createObserver () {
     this.containers = {
-      main: document.querySelector(".main"),
-      notifications: document.querySelector(".notifications"),
-      userPanel: document.querySelector(".user-panel"),
-      settingsModal: document.querySelector(".settings-modal")
-    };
+      main: document.querySelector('.main'),
+      notifications: document.querySelector('.notifications'),
+      userPanel: document.querySelector('.user-panel'),
+      settingsModal: document.querySelector('.settings-modal')
+    }
 
     const observerConfig = {
       subtree: true,
       childList: true
-    };
+    }
 
     this.observer = new MutationObserver((mutations, observer) => {
-      const modal = document.querySelector(".settings-modal div[label]:first-child");
-      if (modal && !modal.querySelector(".mod-settings")) {
-        this.appendModSettings(modal);
+      const modal = document.querySelector('.settings-modal div[label]:first-child')
+      if (modal && !modal.querySelector('.mod-settings')) {
+        this.appendModSettings(modal)
       }
 
       Object.values(this.loadedMods).forEach((mod) => {
         if (mod.isEnabled) {
           mutations.forEach((mutation) => {
-            mod.mutate(mutation, observer);
-          });
+            mod.mutate(mutation, observer)
+          })
         }
-      });
-    });
+      })
+    })
 
-    this.observer.observe(this.containers.main, observerConfig);
+    this.observer.observe(this.containers.main, observerConfig)
     if (this.containers.notifications) {
-      this.observer.observe(this.containers.notifications, observerConfig);
+      this.observer.observe(this.containers.notifications, observerConfig)
     }
     if (this.containers.userPanel) {
-      this.observer.observe(this.containers.userPanel, observerConfig);
+      this.observer.observe(this.containers.userPanel, observerConfig)
     }
     if (this.containers.settingsModal) {
-      this.observer.observe(this.containers.settingsModal, observerConfig);
+      this.observer.observe(this.containers.settingsModal, observerConfig)
     }
   }
 
   static registerMod (mod) {
-    window.__pleromaModLoader.registerClass(mod.name, mod);
+    window.__pleromaModLoader.registerClass(mod.name, mod)
   }
 
   static includeScript (src) {
-    console.log("include " + src);
+    console.log('include ' + src)
     return new Promise((resolve) => {
-      const script = document.createElement("script");
-      script.setAttribute("src", src);
-      script.setAttribute("type", "text/javascript");
+      const script = document.createElement('script')
+      script.setAttribute('src', src)
+      script.setAttribute('type', 'text/javascript')
       script.onload = () => {
-        resolve();
-      };
-      document.querySelector("body").appendChild(script);
-    });
+        resolve()
+      }
+      document.querySelector('body').appendChild(script)
+    })
   }
 
   static includeCss (src) {
-    console.log("include " + src);
+    console.log('include ' + src)
     return new Promise((resolve) => {
-      const link = document.createElement("link");
-      link.setAttribute("href", src);
-      link.setAttribute("rel", "stylesheet");
-      link.setAttribute("type", "text/css");
+      const link = document.createElement('link')
+      link.setAttribute('href', src)
+      link.setAttribute('rel', 'stylesheet')
+      link.setAttribute('type', 'text/css')
       link.onload = () => {
-        resolve();
-      };
-      document.querySelector("head").appendChild(link);
-    });
+        resolve()
+      }
+      document.querySelector('head').appendChild(link)
+    })
   }
 
   static excludeScript (src) {
     return new Promise((resolve) => {
-      const script = document.querySelector("script[src=\"" + src + "\"]");
+      const script = document.querySelector('script[src="' + src + '"]')
       if (script) {
-        script.remove();
+        script.remove()
       }
-      resolve();
-    });
+      resolve()
+    })
   }
 
   static excludeCss (src) {
     return new Promise((resolve) => {
-      const link = document.querySelector("link[href=\"" + src + "\"]");
+      const link = document.querySelector('link[href="' + src + '"]')
       if (link) {
-        link.remove();
+        link.remove()
       }
-      resolve();
-    });
+      resolve()
+    })
   }
 
   static getVueScope (element) {
     if (!element) {
-      return null;
+      return null
     }
     if (element.__vue__) {
-      console.warn("old vue version, please update pleroma-fe");
-      return element.__vue__;
+      console.warn('old vue version, please update pleroma-fe')
+      return element.__vue__
     }
     if (element._vnode) {
-      return element._vnode;
+      return element._vnode
     }
     if (element.__vnode) {
-      return element.__vnode;
+      return element.__vnode
     }
     if (element.parentNode) {
-      return PleromaModLoader.getVueScope(element.parentNode);
+      return PleromaModLoader.getVueScope(element.parentNode)
     }
-    return null;
+    return null
   }
 
   static getVueComponent (element) {
     if (!element) {
-      return null;
+      return null
     }
     if (element.__vnode && element.__vnode.component) {
-      return element.__vnode.component;
+      return element.__vnode.component
     }
     if (element.__vueParentComponent) {
-      return element.__vueParentComponent.ctx;
+      return element.__vueParentComponent.ctx
     }
     if (element.__vueComponent__) {
-      return element.__vueComponent__;
+      return element.__vueComponent__
     }
     if (element.parentNode) {
-      return PleromaModLoader.getVueComponent(element.parentNode);
+      return PleromaModLoader.getVueComponent(element.parentNode)
     }
-    return null;
+    return null
   }
 
   static getRootVueScope () {
-    return PleromaModLoader.getVueScope(document.querySelector("#app"));
+    return PleromaModLoader.getVueScope(document.querySelector('#app'))
   }
 
   static getToken () {
-    return PleromaModLoader.getRootVueScope().appContext.provides.store.getters.getUserToken();
+    return PleromaModLoader.getRootVueScope().appContext.provides.store.getters.getUserToken()
   }
 
   static getModDir () {
-    return window.__pleromaModLoader.config.modDirectory;
+    return window.__pleromaModLoader.config.modDirectory
   }
 
   static getClassName (name) {
-    let className = "PleromaMod";
-    name.split("-").forEach((namePart) => {
-      className += namePart.substring(0, 1).toUpperCase();
-      className += namePart.substring(1);
-    });
-    return className;
+    let className = 'PleromaMod'
+    name.split('-').forEach((namePart) => {
+      className += namePart.substring(0, 1).toUpperCase()
+      className += namePart.substring(1)
+    })
+    return className
   }
 
   static api (method, path, params) {
     return new Promise((resolve, reject) => {
-      const token = PleromaModLoader.getToken();
-      const xhr = new XMLHttpRequest();
-      xhr.responseType = "json";
-      xhr.open(method, path);
-      xhr.setRequestHeader("Content-Type", "application/json");
-      xhr.setRequestHeader("Authorization", "Bearer " + token);
+      const token = PleromaModLoader.getToken()
+      const xhr = new XMLHttpRequest()
+      xhr.responseType = 'json'
+      xhr.open(method, path)
+      xhr.setRequestHeader('Content-Type', 'application/json')
+      xhr.setRequestHeader('Authorization', 'Bearer ' + token)
       xhr.onreadstatechange = () => {
         if (xhr.readyState === 4) {
           if (xhr.status !== 200) {
             reject(new Error({
               status: xhr.status,
               response: xhr.response,
-              xhr: xhr
-            }));
+              xhr
+            }))
           }
         }
-      };
+      }
       xhr.onload = () => {
-        resolve(xhr.response);
-      };
-      xhr.send(JSON.stringify(params));
-    });
+        resolve(xhr.response)
+      }
+      xhr.send(JSON.stringify(params))
+    })
   }
 }
 
 class PleromaMod { // eslint-disable-line no-unused-vars
   constructor (name) {
-    this.name = name;
-    this.config = {};
-    this.isRunning = false;
+    this.name = name
+    this.config = {}
+    this.isRunning = false
   }
 
   get isEnabled () {
-    return localStorage.getItem("pleroma_mod_" + this.name + "_enabled") !== "false" || true;
+    return localStorage.getItem('pleroma_mod_' + this.name + '_enabled') !== 'false' || true
   }
 
   getClassName () {
-    return PleromaModLoader.getClassName(this.name);
+    return PleromaModLoader.getClassName(this.name)
   }
 
   getModDir () {
-    return PleromaModLoader.getModDir() + this.name + "/";
+    return PleromaModLoader.getModDir() + this.name + '/'
   }
 
   ready () {
-    this.onReady();
-    this.run();
+    this.onReady()
+    this.run()
   }
 
   destroy () {
-    this.isRunning = false;
+    this.isRunning = false
     if (this.config.includes) {
-      const styles = this.config.includes.css || [];
-      const scripts = this.config.includes.js || [];
+      const styles = this.config.includes.css || []
+      const scripts = this.config.includes.js || []
 
       Promise.all(styles.map((style) => {
-        return this.excludeCss(style);
+        return this.excludeCss(style)
       }).concat(scripts.map((script) => {
-        return this.excludeScript(script);
+        return this.excludeScript(script)
       }))).then(() => {
-        this.onDestroy();
-      });
+        this.onDestroy()
+      })
 
-      return;
+      return
     }
 
-    this.onDestroy();
+    this.onDestroy()
   }
 
   run () {
     if (this.config.includes) {
-      const styles = this.config.includes.css || [];
-      const scripts = this.config.includes.js || [];
+      const styles = this.config.includes.css || []
+      const scripts = this.config.includes.js || []
 
       Promise.all(styles.map((style) => {
-        return this.includeCss(style);
+        return this.includeCss(style)
       }).concat(scripts.map((script) => {
-        return this.includeScript(script);
+        return this.includeScript(script)
       })).concat([
         this.loadConfig(),
         this.onCreate()
       ])).then(() => {
-        this.isRunning = true;
-        this.onRun();
-      });
+        this.isRunning = true
+        this.onRun()
+      })
 
-      return;
+      return
     }
 
-    this.isRunning = true;
-    this.onRun();
+    this.isRunning = true
+    this.onRun()
   }
 
   mutate (mutation, observer) {
     if (this.isRunning) {
-      this.onMutation(mutation, observer);
+      this.onMutation(mutation, observer)
     }
   }
 
   saveConfig () {
-    const storedConfig = {};
+    const storedConfig = {}
     Object.keys(this.config).filter((key) => {
-      return key !== "includes" && key !== "filter";
+      return key !== 'includes' && key !== 'filter'
     }).forEach((key) => {
-      storedConfig[key] = this.config[key];
-    });
-    localStorage.setItem(this.name + "_config", JSON.stringify(storedConfig));
+      storedConfig[key] = this.config[key]
+    })
+    localStorage.setItem(this.name + '_config', JSON.stringify(storedConfig))
   }
 
   mergeConfig (newConfig) {
     Object.keys(newConfig).forEach((key) => {
-      this.config[key] = JSON.parse(JSON.stringify(newConfig[key]));
-    });
+      this.config[key] = JSON.parse(JSON.stringify(newConfig[key]))
+    })
   }
 
   loadConfig () {
     return new Promise((resolve) => {
       // TODO: use structuredClone when its more supported
-      this.defaultConfig = JSON.parse(JSON.stringify(this.config));
+      this.defaultConfig = JSON.parse(JSON.stringify(this.config))
 
-      const storedConfig = JSON.parse(localStorage.getItem(this.name + "_config"));
+      const storedConfig = JSON.parse(localStorage.getItem(this.name + '_config'))
 
       this.onConfigLoad().then((json) => {
-        this.mergeConfig(json);
+        this.mergeConfig(json)
         if (storedConfig) {
-          this.mergeConfig(storedConfig);
+          this.mergeConfig(storedConfig)
         }
-        this.saveConfig();
-        resolve();
-      });
-    });
+        this.saveConfig()
+        resolve()
+      })
+    })
   }
 
   onReady () {}
   onCreate () {
     return new Promise((resolve) => {
-      resolve();
-    });
+      resolve()
+    })
   }
+
   onDestroy () {}
   onRun () {}
   onMutation (mutation, observer) {}
   onConfigLoad () {
     return new Promise((resolve) => {
-      resolve({});
-    });
+      resolve({})
+    })
   }
+
   onSettingInit (key, ul, li) {}
 
   includeCss (src) {
-    return PleromaModLoader.includeCss(PleromaModLoader.getModDir() + this.name + "/" + src);
+    return PleromaModLoader.includeCss(PleromaModLoader.getModDir() + this.name + '/' + src)
   }
 
   includeScript (src) {
-    return PleromaModLoader.includeScript(PleromaModLoader.getModDir() + this.name + "/" + src);
+    return PleromaModLoader.includeScript(PleromaModLoader.getModDir() + this.name + '/' + src)
   }
 
   excludeCss (src) {
-    return PleromaModLoader.excludeCss(PleromaModLoader.getModDir() + this.name + "/" + src);
+    return PleromaModLoader.excludeCss(PleromaModLoader.getModDir() + this.name + '/' + src)
   }
 
   excludeScript (src) {
-    return PleromaModLoader.excludeScript(PleromaModLoader.getModDir() + this.name + "/" + src);
+    return PleromaModLoader.excludeScript(PleromaModLoader.getModDir() + this.name + '/' + src)
   }
 
   fetchJson (src) {
-    console.log("loading " + src);
-    return window.fetch(PleromaModLoader.getModDir() + this.name + "/" + src).then((response) => {
-      return response.json();
-    });
+    console.log('loading ' + src)
+    return window.fetch(PleromaModLoader.getModDir() + this.name + '/' + src).then((response) => {
+      return response.json()
+    })
   }
 
   api (method, path, params) {
-    return PleromaModLoader.api(method, path, params);
+    return PleromaModLoader.api(method, path, params)
   }
 
   enable () {
-    this.ready();
-    localStorage.setItem("pleroma_mod_" + this.name + "_enabled", true);
+    this.ready()
+    localStorage.setItem('pleroma_mod_' + this.name + '_enabled', true)
   }
 
   disable () {
-    this.destroy();
-    localStorage.setItem("pleroma_mod_" + this.name + "_enabled", false);
+    this.destroy()
+    localStorage.setItem('pleroma_mod_' + this.name + '_enabled', false)
   }
 }
 
-window.__pleromaModLoader = new PleromaModLoader();
-window.__pleromaModLoader.waitUntilReady();
+window.__pleromaModLoader = new PleromaModLoader()
+window.__pleromaModLoader.waitUntilReady()