{
  "name": "GopalOS Developer Manual",
  "icon": "\u{1F4D8}\uFE0F",
  "desc": "A reference for creators of GopalOS applications.",
  "id": "dev-manual",
  "defaultRelease": "alpha",
  "releases": {
    "alpha": {
      "version": "v0.2.4-alpha",
      "app-files": {
        "dev-manual": {
          type: "pgm",
          content() {
            if (document.getElementById("app_dev-manual_window")) {
              document.getElementById("app_dev-manual_window").style.display = "block";
            }
            else {
              document.getElementById("windows").insertAdjacentHTML("beforeend", getRef("/apps/dev-manual/window"));
              getRef("/apps/dev-manual/load")();
            }
            focusWin(document.getElementById("app_dev-manual_window"));
            regTbarIcon("/apps/dev-manual/dev-manual", "app_dev-manual_window", "\u{1F4D8}\uFE0F");
            refreshWindows();
          }
        },
        "load": {
          type: "js",
          content() {
            for (let i = 0; i < document.getElementById("app_dev-manual_sidebar").querySelectorAll("[data-anchor]").length; i++) {
              document.getElementById("app_dev-manual_sidebar").querySelectorAll("[data-anchor]")[i].onclick = function(event) {
                document.getElementById(`app_dev-manual_anchor-${this.getAttribute("data-anchor")}`).scrollIntoView();
              };
            }
          }
        },
        "window": {
          type: "html",
          content: `<div class="window" id="app_dev-manual_window" style="top: 60px; left: 60px;">
  <div class="window-title">GopalOS Developer Manual</div>
  <div class="window-controls">
    <div class="window-control window-control-minimize"><span>&#x1F5D5;</span></div>
    <div class="window-control window-control-maximize"><span>&#x1F5D6;</span></div>
    <div class="window-control window-control-close"><span>&#x274C;&#xFE0E;</span></div>
  </div>
  <div class="window-content" style="font-family: 'Segoe UI', 'Arial', sans-serif; overflow: hidden; float: left;">
    <div class="menubar">
      <button id="app_dev-manual_filebtn" class="noborder popup-btn" data-popup-id="app_dev-manual_file">File</button>
      <button id="app_dev-manual_helpbtn" class="noborder popup-btn" data-popup-id="app_dev-manual_help">Help</button>
    </div>
    <div id="app_dev-manual_file" class="popup-menu" data-popup-origin-id="app_dev-manual_filebtn" style="position: absolute; top: 26px; left: 0;">
      <div class="popup-menu-item" onclick="">Update/Reinstall&hellip;</div>
      <div class="popup-menu-item">Go to Page&hellip;</div>
      <div class="popup-menu-item" onclick="document.getElementById('app_dev-manual_window').querySelector('.window-control-close').click();">Exit</div>
    </div>
    <div id="app_dev-manual_help" class="popup-menu" data-popup-origin-id="app_dev-manual_helpbtn" style="position: absolute; top: 26px; left: 60px;">
      <div class="popup-menu-item" onclick="msgbox('Version: ' + os.apps['dev-manual'].version, 'GopalOS Developer Manual');">About</div>
    </div>
    <div id="app_dev-manual_sidebar" style="position: absolute; top: 26px; left: 0; width: 110px; height: calc(100% - 47px); border: none; resize: none; background: #CCC; overflow: auto; scrollbar-width: thin;">
      <div class="app_dev-manual_item" data-anchor="intro">Intro</div>
    </div>
    <div id="app_dev-manual_viewer" class="noborder" style="position: absolute; top: 26px; left: 110px; width: calc(100% - 130px); height: calc(100% - 70px); resize: none; padding: 10px; overflow: auto;">
      <div style="font-size: 30px; text-align: center;">GopalOS Developer Manual</div>
      <hr>
      <div style="font-size: 25px;" id="app_dev-manual_anchor-intro">Intro</div>
      <p>GopalOS is a web-based operating system with a JSON-based filesystem and programs such as a File Manager, Text Editor, search engine, and more!</p>
      <div style="font-size: 25px;">GopalOS File System</div>
      <p>Every file in GopalOS is in the following format:</p>
      <pre>[filename]: {
  type: filetype,
  content: filecontent,
  other: otherMetadata
}</pre>
      <p>Sometimes, <code>content</code> may be a function and be shortened from <code>content: function() {}</code> to <code>content() {}</code>. The <code>filetype</code> key has a string value containing the file extension in lowercase (e.g. <code>"txt"</code>). In GopalOS, there are three directories and one file on the root directory. The /version.var file is the only file that is allowed in the root directory. It contains a string representing the current version of GopalOS. The other three directories are <code>/home</code>, <code>/apps</code>, and <code>/system</code>, which store user-made files, application files, and system files.</p>
    <div style="font-size: 25px;">GopalOS Apps</div>
    <p>An app's files are stored in the <code>/apps</code> directory, with a folder name equal to that of the app ID. For example, File Manager's app ID is "file-manager" and its files are located in <code>/apps/file-manager</code>. The files in a basic app's (i.e. with a load script and standard window) directory is as follows:</p>
    <div><code>app-id.pgm</code>: This is the program file, which runs the load script, displays the window, and optionally registers a taskbar icon (to enable minimizing or pinning the program). The file name of the launch program <strong>must</strong> be the app ID. For example, File Manager's app ID is "file-manager" and its launch program is located at <code>/apps/file-manager/file-manager.pgm</code></div>
    <div style="margin-top: 10px;"><code>load.js</code>: This is the file that is usually run on program start. For example, in File Manager, it loads the list of files and displays them.</div>
    <div style="margin-top: 10px;"><code>window.html</code>: This is the file that contains the HTML markup code for the app's main window. The contents of this file will be injected into the <code>&lt;div id="windows"&gt;</code> element by the <code>load.js</code> file.</div>
    <div style="margin-top: 10px;"><code>install.html</code>: This optional file contains code that will be run when the app is installed (e.g. from Package Installer).</div>
    <div style="margin-top: 10px;"><code>uninstall.html</code>: This optional file contains code that will be run when the app is uninstalled (e.g. from Application Manager).</div>
    </div>
    <div id="app_dev-manual_statbar" style="position: absolute; bottom: 0; left: 0; padding: 2px; width: calc(100% - 4px); background: #EEE; font-size: 14px;">Ready</div>
  </div>
  <style>
  .app_dev-manual_item {
    display: block;
    padding: 5px;
    background: #CCC;
    font-size: 14px;
  }
  .app_dev-manual_item:hover {
    background: #BBB;
  }
  .app_dev-manual_item:active {
    background: #AAA;
  }
  </style>
  </div>`
        }
      }
    }
  }
}