switch to downloading YAML

package-lock.json

@@ -18,6 +18,7 @@
         "@angular/platform-browser": "21.1.0",
         "@angular/router": "21.1.0",
         "ajv": "8.17.1",
+        "js-yaml": "4.1.1",
         "lodash-es": "4.17.23",
         "ngx-timeago": "4.0.0",
         "rxjs": "7.8.0",
@@ -29,6 +30,7 @@
         "@angular/compiler-cli": "21.1.0",
         "@angular/material": "21.1.4",
         "@tailwindcss/postcss": "4.1.12",
+        "@types/js-yaml": "4.0.9",
         "@types/lodash-es": "4.17.12",
         "jsdom": "27.1.0",
         "postcss": "8.5.3",
@@ -785,6 +787,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -4296,6 +4299,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/js-yaml": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.9.tgz",
+      "integrity": "sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/lodash": {
       "version": "4.17.23",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.23.tgz",
@@ -4580,6 +4590,12 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
     "node_modules/assertion-error": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
@@ -6313,6 +6329,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/js-yaml": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/jsdom": {
       "version": "27.1.0",
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-27.1.0.tgz",
@@ -6665,6 +6693,7 @@
       "integrity": "sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cli-truncate": "^5.0.0",
         "colorette": "^2.0.20",

package.json

@@ -36,6 +36,7 @@
     "@angular/platform-browser": "21.1.0",
     "@angular/router": "21.1.0",
     "ajv": "8.17.1",
+    "js-yaml": "4.1.1",
     "lodash-es": "4.17.23",
     "ngx-timeago": "4.0.0",
     "rxjs": "7.8.0",
@@ -47,6 +48,7 @@
     "@angular/compiler-cli": "21.1.0",
     "@angular/material": "21.1.4",
     "@tailwindcss/postcss": "4.1.12",
+    "@types/js-yaml": "4.0.9",
     "@types/lodash-es": "4.17.12",
     "jsdom": "27.1.0",
     "postcss": "8.5.3",

src/app/app.ts

@@ -12,6 +12,7 @@ import { ConfigService } from '../services/config.service';
 import { SchemaService } from '../services/schema.service';
 import { SettingsService } from '../services/settings.service';
 import { ConfigComponent } from './config/config.component';
+import * as yaml from 'js-yaml';
 
 @Component({
   selector: 'app-root',
@@ -59,7 +60,7 @@ export class App {
   downloadConfig() {
     const config = this.configService.currentlyShownConfig();
     if (config) {
-      this.downloadJSON(config, 'config.json');
+      this.downloadYAML(config, 'config.yaml');
     } else {
       this.snackBar.open('No config to download.', 'Dismiss', {
         duration: 3000,
@@ -71,7 +72,23 @@ export class App {
     const content = JSON.stringify(data, null, 2);
     const dataUri = URL.createObjectURL(
       new Blob([content], {
-        type: 'text/json;charset=utf-8',
+        type: 'application/json;charset=utf-8',
+      }),
+    );
+    const dummyLink = document.createElement('a');
+    dummyLink.href = dataUri;
+    dummyLink.download = filename;
+
+    document.body.appendChild(dummyLink);
+    dummyLink.click();
+    document.body.removeChild(dummyLink);
+  }
+
+  downloadYAML(data: object, filename: string) {
+    const content = yaml.dump(data);
+    const dataUri = URL.createObjectURL(
+      new Blob([content], {
+        type: 'application/yaml;charset=utf-8',
       }),
     );
     const dummyLink = document.createElement('a');