{
  "globals": {
    "settings": {
      "language": 1,
      "title": "teleportHQ",
      "key": "test"
    },
    "meta" : [
      { "name": "description", "content": "Free Web tutorials" },
      { "name": "keywords", "content": "prea bun, prea ca la tara" },
      { "name": "viewport", "content": "width=device-width, initial-scale=1.0" },
      { "property": "og:title", "content": "Free Web tutorials" },
      { "property": "og:url", "content": "/playground_assets/asdasd.png" }
    ],
    "manifest": {
      "icons": [
        {
          "src": "/playground_assets/icons-192.png",
          "type": "image/png",
          "sizes": "192x192"
        },
        {
          "src": "/playground_assets/icons-512.png",
          "type": "image/png",
          "sizes": "512x512"
        }
      ],
      "theme_color": "#822CEC",
      "background_color": "#822CEC"
    },
    "assets": [
      {
        "type": "style",
        "path": "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css",
        "options": {
          "target": "body"
        }
      },
      {
        "type": "scripts",
        "path": "https://www.googletagmanager.com/gtm.js",
        "options": {
          "defer": true
        }
      },
      {
        "type": "script",
        "content": "console.log(\"inline script\")",
        "options": {
          "target": "body"
        }
      },
      {
        "type": "font",
        "path": "https://fonts.googleapis.com/css?family=Roboto"
      },
      {
        "type": "style",
        "content": "body{font-family: 'Roboto', sans-serif;}"
      },
      {
        "type": "icon",
        "path": "/playground_assets/favicon-32x32.png",
        "options": {
          "type": "image/png",
          "iconSizes": "32x32"
        }
      }
    ],
    "variables": {
      "primaryColor": "#822CEC",
      "secondaryColor": "#414141",
      "spacing": "10px"
    }
  },
  "root": {
    "name": "App",
    "stateDefinitions": {
      "route": {
        "type": "string",
        "defaultValue": "index",
        "values": [
          {
            "value": "index",
            "pageOptions": {
              "navLink": "/",
              "componentName": "Home"
            }
          },
          {
            "value": "about",
            "pageOptions": {
              "navLink": "/about",
              "componentName": "About"
            }
          },
          {
            "value": "contact-us",
            "pageOptions": {
              "navLink": "/here-we-are",
              "componentName": "Us"
            }
          }
        ]
      }
    },
    "node": {
      "type": "element",
      "content": {
        "elementType": "Router",
        "children": [
          {
            "type": "conditional",
            "content": {
              "node": {
                "type": "element",
                "content": {
                  "elementType": "container",
                  "children": [
                    {
                      "type": "static",
                      "content": "Page 1"
                    }
                  ]
                }
              },
              "value": "index",
              "reference": {
                "type": "dynamic",
                "content": {
                  "referenceType": "state",
                  "id": "route"
                }
              }
            }
          },
          {
            "type": "conditional",
            "content": {
              "node": {
                "type": "element",
                "content": {
                  "elementType": "container",
                  "children": [
                    {
                      "type": "static",
                      "content": "Page 2"
                    }
                  ]
                }
              },
              "value": "about",
              "reference": {
                "type": "dynamic",
                "content": {
                  "referenceType": "state",
                  "id": "route"
                }
              }
            }
          },{
            "type": "conditional",
            "content": {
              "node": {
                "type": "element",
                "content": {
                  "elementType": "container",
                  "children": [
                    {
                      "type": "static",
                      "content": "Page 3"
                    }
                  ]
                }
              },
              "value": "contact-us",
              "reference": {
                "type": "dynamic",
                "content": {
                  "referenceType": "state",
                  "id": "route"
                }
              }
            }
          }
        ]
      }
    }
  },
  "components": {
    "OneComponent": {
      "name": "OneComponent",
      "propDefinitions": {
        "title": {
          "type": "string",
          "defaultValue": "Hello"
        },
        "items": {
          "type": "array",
          "defaultValue": []
        }
      },
      "stateDefinitions": {
        "isVisible": {
          "type": "boolean",
          "defaultValue": true
        }
      },
      "node": {
        "type": "element",
        "content": {
          "elementType": "container",
          "attrs": {
            "data-static-attr": {
              "type": "static",
              "content": "test"
            },
            "data-dynamic-attr": {
              "type": "dynamic",
              "content": {
                "referenceType": "prop",
                "id": "title"
              }
            }
          },
          "children": [
            {
              "type": "element",
              "content": {
                "elementType": "text",
                "children": [
                  {
                    "type": "static",
                    "content": "Hello World!"
                  },
                  {
                    "type": "dynamic",
                    "content": {
                      "referenceType": "prop",
                      "id": "title"
                    }
                  }
                ]
              }
            },
            {
              "type": "repeat",
              "content": {
                "node": {
                  "type": "element",
                  "content": {
                    "elementType": "text",
                    "children": [
                      {
                        "type": "dynamic",
                        "content": {
                          "referenceType": "local",
                          "id": "item"
                        }
                      },
                      {
                        "type": "element",
                        "content": {
                          "elementType": "list",
                          "attrs": {
                            "items": {
                              "type": "static",
                              "content": ["angular", "react", "vue"]
                            }
                          }
                        }
                      }
                    ]
                  }
                },
                "dataSource": {
                  "type": "dynamic",
                  "content": {
                    "referenceType": "prop",
                    "id": "items"
                  }
                },
                "meta": {
                  "useIndex": true,
                  "iteratorName": "item"
                }
              }
            },
            {
              "type": "conditional",
              "content": {
                "reference": {
                  "type": "dynamic",
                  "content": {
                    "referenceType": "state",
                    "id": "isVisible"
                  }
                },
                "value": true,
                "node": {
                  "type": "element",
                  "content": {
                    "elementType": "text",
                    "children": [{
                      "type": "static",
                      "content": "Now you see me!"
                    }]
                  }
                }
              }
            }
          ]
        }
      }
    }
  }
}