npm - @maizzle/framework - Versions diffs - 4.0.0 → 4.0.1 - Mend

@maizzle/framework 4.0.0 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/.editorconfig +9 -9
package/.github/workflows/nodejs.yml +28 -28
package/LICENSE +21 -21
package/bin/maizzle +3 -3
package/package.json +2 -2
package/src/generators/config.js +32 -32
package/src/generators/output/index.js +4 -4
package/src/generators/output/to-disk.js +208 -208
package/src/generators/output/to-string.js +67 -67
package/src/generators/postcss.js +29 -29
package/src/generators/posthtml.js +66 -66
package/src/index.js +17 -17
package/src/transformers/attributeToStyle.js +90 -90
package/src/transformers/baseUrl.js +69 -69
package/src/transformers/extraAttributes.js +26 -26
package/src/transformers/filters/defaultFilters.js +126 -126
package/src/transformers/filters/index.js +55 -55
package/src/transformers/inlineCss.js +37 -37
package/src/transformers/markdown.js +19 -19
package/src/transformers/minify.js +21 -21
package/src/transformers/plaintext.js +23 -23
package/src/transformers/posthtmlMso.js +10 -10
package/src/transformers/prettify.js +27 -27
package/src/transformers/preventWidows.js +13 -13
package/src/transformers/removeAttributes.js +17 -17
package/src/transformers/removeInlineBackgroundColor.js +52 -52
package/src/transformers/removeInlineSizes.js +41 -41
package/src/transformers/replaceStrings.js +14 -14
package/src/transformers/safeClassNames.js +24 -24
package/src/transformers/shorthandInlineCSS.js +19 -19
package/src/transformers/sixHex.js +33 -33
package/src/transformers/urlParameters.js +17 -17
package/src/utils/helpers.js +17 -17
package/test/expected/posthtml/extend-template.html +2 -2
package/test/expected/posthtml/fetch.html +5 -5
package/test/expected/posthtml/layout.html +3 -3
package/test/expected/transformers/base-url.html +99 -99
package/test/fixtures/posthtml/extend-template.html +7 -7
package/test/fixtures/posthtml/fetch.html +9 -9
package/test/fixtures/posthtml/layout.html +11 -11
package/test/fixtures/transformers/base-url.html +101 -101
package/test/stubs/assets/foo.bar +1 -1
package/test/stubs/breaking/bad.html +5 -5
package/test/stubs/config/config.js +10 -10
package/test/stubs/config/config.maizzle-ci.js +10 -10
package/test/stubs/data.json +14 -14
package/test/stubs/events/before-create.html +1 -1
package/test/stubs/layouts/basic.html +1 -1
package/test/stubs/layouts/full.html +12 -12
package/test/stubs/layouts/template.html +5 -5
package/test/stubs/main.css +5 -5
package/test/stubs/tailwind/content-source.html +1 -1
package/test/stubs/tailwind/tailwind.css +3 -3
package/test/stubs/template.html +10 -10
package/test/test-posthtml.js +72 -72
package/test/test-todisk.js +511 -511
package/test/test-transformers.js +1 -0
package/xo.config.js +22 -22

package/src/transformers/urlParameters.js CHANGED Viewed

@@ -1,17 +1,17 @@
-const posthtml = require('posthtml')
-const {get, isEmpty} = require('lodash')
-const urlParams = require('posthtml-url-parameters')
-module.exports = async (html, config = {}, direct = false) => {
-  const urlParameters = direct ? config : get(config, 'urlParameters', {})
-  if (!isEmpty(urlParameters)) {
-    const {_options, ...parameters} = urlParameters
-    const {tags, qs} = _options || {tags: ['a'], qs: {encode: false}}
-    const posthtmlOptions = get(config, 'build.posthtml.options', {})
-    return posthtml([urlParams({parameters, tags, qs})]).process(html, posthtmlOptions).then(result => result.html)
-  }
-  return html
-}
+const posthtml = require('posthtml')
+const {get, isEmpty} = require('lodash')
+const urlParams = require('posthtml-url-parameters')
+module.exports = async (html, config = {}, direct = false) => {
+  const urlParameters = direct ? config : get(config, 'urlParameters', {})
+  if (!isEmpty(urlParameters)) {
+    const {_options, ...parameters} = urlParameters
+    const {tags, qs} = _options || {tags: ['a'], qs: {encode: false}}
+    const posthtmlOptions = get(config, 'build.posthtml.options', {})
+    return posthtml([urlParams({parameters, tags, qs})]).process(html, posthtmlOptions).then(result => result.html)
+  }
+  return html
+}

package/src/utils/helpers.js CHANGED Viewed

@@ -1,17 +1,17 @@
-module.exports = {
-  asyncForEach: async (array, callback) => {
-    for (let index = 0; index < array.length; index++) {
-      await callback(array[index], index, array) // eslint-disable-line
-    }
-  },
-  requireUncached: module => {
-    try {
-      delete require.cache[require.resolve(module)]
-      return require(module)
-    } catch {
-      throw new Error(`could not load ${module}`)
-    }
-  },
-  // https://github.com/lukeed/console-clear
-  clearConsole: () => process.stdout.write('\x1B[H\x1B[2J')
-}
+module.exports = {
+  asyncForEach: async (array, callback) => {
+    for (let index = 0; index < array.length; index++) {
+      await callback(array[index], index, array) // eslint-disable-line
+    }
+  },
+  requireUncached: module => {
+    try {
+      delete require.cache[require.resolve(module)]
+      return require(module)
+    } catch {
+      throw new Error(`could not load ${module}`)
+    }
+  },
+  // https://github.com/lukeed/console-clear
+  clearConsole: () => process.stdout.write('\x1B[H\x1B[2J')
+}

package/test/expected/posthtml/extend-template.html CHANGED Viewed

@@ -1,2 +1,2 @@
-Parent
-    Child in second.html
+Parent
+    Child in second.html

package/test/expected/posthtml/fetch.html CHANGED Viewed

@@ -1,5 +1,5 @@
-Leanne Graham
-Ervin Howell
-Clementine Bauch
+Leanne Graham
+Ervin Howell
+Clementine Bauch

package/test/expected/posthtml/layout.html CHANGED Viewed

@@ -1,3 +1,3 @@
-    Environment: maizzle-ci
-    Front matter variable: Hello
+    Environment: maizzle-ci
+    Front matter variable: Hello

package/test/expected/transformers/base-url.html CHANGED Viewed

@@ -1,99 +1,99 @@
-<html>
-  <head>
-    <style>.test {
-        background-image: url('https://example.com/image.jpg');
-        background: url('https://example.com/image.jpg');
-        background-image: url('https://preserve.me/image.jpg');
-        background: url('https://preserve.me/image.jpg');
-      }
-      .test-2 {
-        background-image: url("https://example.com/image.jpg");
-        background: url("https://example.com/image.jpg");
-        background-image: url("https://preserve.me/image.jpg");
-        background: url("https://preserve.me/image.jpg");
-      }
-      .test-3 {
-        background-image: url(https://example.com/image.jpg);
-        background: url(https://example.com/image.jpg);
-        background-image: url(https://preserve.me/image.jpg);
-        background: url(https://preserve.me/image.jpg);
-      }</style>
-  </head>
-  <body>
-    <img src="https://example.com/test.jpg">
-    <img src="https://example.com/test.jpg">
-    <img src="https://example.com/image1.jpg" srcset="https://example.com/image1-HD.jpg 2x, https://example.com/image1-phone.jpg 100w">
-    <img src="https://example.com/image2.jpg" srcset="https://example.com/image2-HD.jpg 2x, https://example.com/image2-phone.jpg 100w">
-    <picture>
-      <source media="(max-width: 799px)" srcset="https://example.com/elva-480w-close-portrait.jpg">
-      <source media="(min-width: 800px)" srcset="https://example.com/elva-800w.jpg">
-      <img src="https://example.com/elva-800w.jpg" alt="...">
-    </picture>
-    <video width="250" poster="https://example.com/flower.jpg">
-      <source src="https://example.com/media/flower.webm" type="video/webm">
-      <source src="https://example.tv/media/flower.mp4" type="video/mp4">
-      <track default="" kind="captions" srclang="en" src="https://example.com/media/tracks/friday.vtt">
-    </video>
-    <audio src="https://example.com/media/sample.mp3">
-      Fallback content
-    </audio>
-    <embed type="video/webm" src="https://example.com/media/flower.mp4" width="250" height="200">
-    <iframe width="300" height="200" src="https://example.com/embed.html"></iframe>
-    <input type="image" src="https://example.com/image.jpg" alt="">
-    <script src="https://example.com/javascript.js"></script>
-    <div>
-      <!--[if mso]>
-      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image.jpg" style="width:600px;height:400px;" />
-      <v:rect fill="false" stroke="false" style="position:absolute;width:600px;height:400px;">
-      <v:textbox inset="0,0,0,0"><div><![endif]-->
-        <div>test</div>
-      <!--[if mso]></div></v:textbox></v:rect><![endif]-->
-    </div>
-    <!--[if mso]>
-      <v:image src="https://example.com/image-2.jpg" xmlns:v="urn:schemas-microsoft-com:vml" style="width:600px;height:400px;" />
-    <![endif]-->
-    <!--[if mso]>
-      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image-3.jpg" style="width:600px;height:400px;" />
-    <![endif]-->
-    <table>
-      <tr>
-        <td background="https://example.com/image.png" bgcolor="#7bceeb" width="120" height="92" valign="top">
-          <!--[if gte mso 9]>
-          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:92px;">
-            <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
-            <v:textbox inset="0,0,0,0">
-          <![endif]-->
-          <div>test</div>
-          <!--[if gte mso 9]>
-            </v:textbox>
-          </v:rect>
-          <![endif]-->
-        </td>
-      </tr>
-    </table>
-    <!--[if mso]>
-      <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
-    <![endif]-->
-    <!--[if mso]>
-      <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
-    <![endif]-->
-  </body>
-</html>
+<html>
+  <head>
+    <style>.test {
+        background-image: url('https://example.com/image.jpg');
+        background: url('https://example.com/image.jpg');
+        background-image: url('https://preserve.me/image.jpg');
+        background: url('https://preserve.me/image.jpg');
+      }
+      .test-2 {
+        background-image: url("https://example.com/image.jpg");
+        background: url("https://example.com/image.jpg");
+        background-image: url("https://preserve.me/image.jpg");
+        background: url("https://preserve.me/image.jpg");
+      }
+      .test-3 {
+        background-image: url(https://example.com/image.jpg);
+        background: url(https://example.com/image.jpg);
+        background-image: url(https://preserve.me/image.jpg);
+        background: url(https://preserve.me/image.jpg);
+      }</style>
+  </head>
+  <body>
+    <img src="https://example.com/test.jpg">
+    <img src="https://example.com/test.jpg">
+    <img src="https://example.com/image1.jpg" srcset="https://example.com/image1-HD.jpg 2x, https://example.com/image1-phone.jpg 100w">
+    <img src="https://example.com/image2.jpg" srcset="https://example.com/image2-HD.jpg 2x, https://example.com/image2-phone.jpg 100w">
+    <picture>
+      <source media="(max-width: 799px)" srcset="https://example.com/elva-480w-close-portrait.jpg">
+      <source media="(min-width: 800px)" srcset="https://example.com/elva-800w.jpg">
+      <img src="https://example.com/elva-800w.jpg" alt="...">
+    </picture>
+    <video width="250" poster="https://example.com/flower.jpg">
+      <source src="https://example.com/media/flower.webm" type="video/webm">
+      <source src="https://example.tv/media/flower.mp4" type="video/mp4">
+      <track default="" kind="captions" srclang="en" src="https://example.com/media/tracks/friday.vtt">
+    </video>
+    <audio src="https://example.com/media/sample.mp3">
+      Fallback content
+    </audio>
+    <embed type="video/webm" src="https://example.com/media/flower.mp4" width="250" height="200">
+    <iframe width="300" height="200" src="https://example.com/embed.html"></iframe>
+    <input type="image" src="https://example.com/image.jpg" alt="">
+    <script src="https://example.com/javascript.js"></script>
+    <div>
+      <!--[if mso]>
+      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image.jpg" style="width:600px;height:400px;" />
+      <v:rect fill="false" stroke="false" style="position:absolute;width:600px;height:400px;">
+      <v:textbox inset="0,0,0,0"><div><![endif]-->
+        <div>test</div>
+      <!--[if mso]></div></v:textbox></v:rect><![endif]-->
+    </div>
+    <!--[if mso]>
+      <v:image src="https://example.com/image-2.jpg" xmlns:v="urn:schemas-microsoft-com:vml" style="width:600px;height:400px;" />
+    <![endif]-->
+    <!--[if mso]>
+      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image-3.jpg" style="width:600px;height:400px;" />
+    <![endif]-->
+    <table>
+      <tr>
+        <td background="https://example.com/image.png" bgcolor="#7bceeb" width="120" height="92" valign="top">
+          <!--[if gte mso 9]>
+          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:92px;">
+            <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
+            <v:textbox inset="0,0,0,0">
+          <![endif]-->
+          <div>test</div>
+          <!--[if gte mso 9]>
+            </v:textbox>
+          </v:rect>
+          <![endif]-->
+        </td>
+      </tr>
+    </table>
+    <!--[if mso]>
+      <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
+    <![endif]-->
+    <!--[if mso]>
+      <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
+    <![endif]-->
+  </body>
+</html>

package/test/fixtures/posthtml/extend-template.html CHANGED Viewed

@@ -1,7 +1,7 @@
----
-template: second
----
-<extends src="test/stubs/template.html">
-  <block name="button">Child in second.html</block>
-</extends>
+---
+template: second
+---
+<extends src="test/stubs/template.html">
+  <block name="button">Child in second.html</block>
+</extends>

package/test/fixtures/posthtml/fetch.html CHANGED Viewed

@@ -1,9 +1,9 @@
-<extends src="test/stubs/layouts/basic.html">
-  <block name="template">
-    <fetch url="test/stubs/data.json">
-      <each loop="user in response">
-[[ user.name ]]
-      </each>
-    </fetch>
-  </block>
-</extends>
+<extends src="test/stubs/layouts/basic.html">
+  <block name="template">
+    <fetch url="test/stubs/data.json">
+      <each loop="user in response">
+[[ user.name ]]
+      </each>
+    </fetch>
+  </block>
+</extends>

package/test/fixtures/posthtml/layout.html CHANGED Viewed

@@ -1,11 +1,11 @@
----
-greeting: Hello
----
-<extends src="test/stubs/layouts/basic.html">
-  <block name="template">
-    Environment: {{ page.env }}
-    Front matter variable: {{ page.greeting }}
-  </block>
-</extends>
+---
+greeting: Hello
+---
+<extends src="test/stubs/layouts/basic.html">
+  <block name="template">
+    Environment: {{ page.env }}
+    Front matter variable: {{ page.greeting }}
+  </block>
+</extends>

package/test/fixtures/transformers/base-url.html CHANGED Viewed

@@ -1,101 +1,101 @@
-<html>
-  <head>
-    <style>
-      .test {
-        background-image: url('image.jpg');
-        background: url('image.jpg');
-        background-image: url('https://preserve.me/image.jpg');
-        background: url('https://preserve.me/image.jpg');
-      }
-      .test-2 {
-        background-image: url("image.jpg");
-        background: url("image.jpg");
-        background-image: url("https://preserve.me/image.jpg");
-        background: url("https://preserve.me/image.jpg");
-      }
-      .test-3 {
-        background-image: url(image.jpg);
-        background: url(image.jpg);
-        background-image: url(https://preserve.me/image.jpg);
-        background: url(https://preserve.me/image.jpg);
-      }
-    </style>
-  </head>
-  <body>
-    <img src="test.jpg">
-    <img src="https://example.com/test.jpg">
-    <img src="image1.jpg" srcset="image1-HD.jpg 2x,image1-phone.jpg 100w">
-    <img src="https://example.com/image2.jpg" srcset="https://example.com/image2-HD.jpg 2x, https://example.com/image2-phone.jpg 100w">
-    <picture>
-      <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
-      <source media="(min-width: 800px)" srcset="elva-800w.jpg">
-      <img src="elva-800w.jpg" alt="...">
-    </picture>
-    <video width="250" poster="flower.jpg">
-      <source src="media/flower.webm" type="video/webm">
-      <source src="https://example.tv/media/flower.mp4" type="video/mp4">
-      <track default kind="captions" srclang="en" src="media/tracks/friday.vtt">
-    </video>
-    <audio src="media/sample.mp3">
-      Fallback content
-    </audio>
-    <embed type="video/webm" src="media/flower.mp4" width="250" height="200">
-    <iframe width="300" height="200" src="embed.html"></iframe>
-    <input type="image" src="image.jpg" alt="">
-    <script src="javascript.js"></script>
-    <div>
-      <!--[if mso]>
-      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="image.jpg" style="width:600px;height:400px;" />
-      <v:rect fill="false" stroke="false" style="position:absolute;width:600px;height:400px;">
-      <v:textbox inset="0,0,0,0"><div><![endif]-->
-        <div>test</div>
-      <!--[if mso]></div></v:textbox></v:rect><![endif]-->
-    </div>
-    <!--[if mso]>
-      <v:image src="image-2.jpg" xmlns:v="urn:schemas-microsoft-com:vml" style="width:600px;height:400px;" />
-    <![endif]-->
-    <!--[if mso]>
-      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image-3.jpg" style="width:600px;height:400px;" />
-    <![endif]-->
-    <table>
-      <tr>
-        <td background="image.png" bgcolor="#7bceeb" width="120" height="92" valign="top">
-          <!--[if gte mso 9]>
-          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:92px;">
-            <v:fill type="tile" src="image.png" color="#7bceeb" />
-            <v:textbox inset="0,0,0,0">
-          <![endif]-->
-          <div>test</div>
-          <!--[if gte mso 9]>
-            </v:textbox>
-          </v:rect>
-          <![endif]-->
-        </td>
-      </tr>
-    </table>
-    <!--[if mso]>
-      <v:fill type="tile" src="image.png" color="#7bceeb" />
-    <![endif]-->
-    <!--[if mso]>
-      <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
-    <![endif]-->
-  </body>
-</html>
+<html>
+  <head>
+    <style>
+      .test {
+        background-image: url('image.jpg');
+        background: url('image.jpg');
+        background-image: url('https://preserve.me/image.jpg');
+        background: url('https://preserve.me/image.jpg');
+      }
+      .test-2 {
+        background-image: url("image.jpg");
+        background: url("image.jpg");
+        background-image: url("https://preserve.me/image.jpg");
+        background: url("https://preserve.me/image.jpg");
+      }
+      .test-3 {
+        background-image: url(image.jpg);
+        background: url(image.jpg);
+        background-image: url(https://preserve.me/image.jpg);
+        background: url(https://preserve.me/image.jpg);
+      }
+    </style>
+  </head>
+  <body>
+    <img src="test.jpg">
+    <img src="https://example.com/test.jpg">
+    <img src="image1.jpg" srcset="image1-HD.jpg 2x,image1-phone.jpg 100w">
+    <img src="https://example.com/image2.jpg" srcset="https://example.com/image2-HD.jpg 2x, https://example.com/image2-phone.jpg 100w">
+    <picture>
+      <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
+      <source media="(min-width: 800px)" srcset="elva-800w.jpg">
+      <img src="elva-800w.jpg" alt="...">
+    </picture>
+    <video width="250" poster="flower.jpg">
+      <source src="media/flower.webm" type="video/webm">
+      <source src="https://example.tv/media/flower.mp4" type="video/mp4">
+      <track default kind="captions" srclang="en" src="media/tracks/friday.vtt">
+    </video>
+    <audio src="media/sample.mp3">
+      Fallback content
+    </audio>
+    <embed type="video/webm" src="media/flower.mp4" width="250" height="200">
+    <iframe width="300" height="200" src="embed.html"></iframe>
+    <input type="image" src="image.jpg" alt="">
+    <script src="javascript.js"></script>
+    <div>
+      <!--[if mso]>
+      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="image.jpg" style="width:600px;height:400px;" />
+      <v:rect fill="false" stroke="false" style="position:absolute;width:600px;height:400px;">
+      <v:textbox inset="0,0,0,0"><div><![endif]-->
+        <div>test</div>
+      <!--[if mso]></div></v:textbox></v:rect><![endif]-->
+    </div>
+    <!--[if mso]>
+      <v:image src="image-2.jpg" xmlns:v="urn:schemas-microsoft-com:vml" style="width:600px;height:400px;" />
+    <![endif]-->
+    <!--[if mso]>
+      <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://example.com/image-3.jpg" style="width:600px;height:400px;" />
+    <![endif]-->
+    <table>
+      <tr>
+        <td background="image.png" bgcolor="#7bceeb" width="120" height="92" valign="top">
+          <!--[if gte mso 9]>
+          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:92px;">
+            <v:fill type="tile" src="image.png" color="#7bceeb" />
+            <v:textbox inset="0,0,0,0">
+          <![endif]-->
+          <div>test</div>
+          <!--[if gte mso 9]>
+            </v:textbox>
+          </v:rect>
+          <![endif]-->
+        </td>
+      </tr>
+    </table>
+    <!--[if mso]>
+      <v:fill type="tile" src="image.png" color="#7bceeb" />
+    <![endif]-->
+    <!--[if mso]>
+      <v:fill type="tile" src="https://example.com/image.png" color="#7bceeb" />
+    <![endif]-->
+  </body>
+</html>

package/test/stubs/assets/foo.bar CHANGED Viewed

	@@ -1 +1 @@
1	- Some asset file...
1	+ Some asset file...

package/test/stubs/breaking/bad.html CHANGED Viewed

@@ -1,5 +1,5 @@
----
-title: [THIS] should break
----
-<div>{{ page.title }}</div>
+---
+title: [THIS] should break
+---
+<div>{{ page.title }}</div>

package/test/stubs/config/config.js CHANGED Viewed

@@ -1,10 +1,10 @@
-module.exports = {
-  build: {
-    templates: {
-      source: '../templates',
-      destination: {
-        path: 'build_local'
-      }
-    }
-  }
-}
+module.exports = {
+  build: {
+    templates: {
+      source: '../templates',
+      destination: {
+        path: 'build_local'
+      }
+    }
+  }
+}

package/test/stubs/config/config.maizzle-ci.js CHANGED Viewed

@@ -1,10 +1,10 @@
-module.exports = {
-  build: {
-    templates: {
-      source: '../templates',
-      destination: {
-        path: 'build_production'
-      }
-    }
-  }
-}
+module.exports = {
+  build: {
+    templates: {
+      source: '../templates',
+      destination: {
+        path: 'build_production'
+      }
+    }
+  }
+}

package/test/stubs/data.json CHANGED Viewed

@@ -1,14 +1,14 @@
-[
-  {
-    "id": 1,
-    "name": "Leanne Graham"
-  },
-  {
-    "id": 2,
-    "name": "Ervin Howell"
-  },
-  {
-    "id": 3,
-    "name": "Clementine Bauch"
-  }
-]
+[
+  {
+    "id": 1,
+    "name": "Leanne Graham"
+  },
+  {
+    "id": 2,
+    "name": "Ervin Howell"
+  },
+  {
+    "id": 3,
+    "name": "Clementine Bauch"
+  }
+]