feat: formatting, prettier and editorconfig

docs/.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

docs/.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ['plugin:react/recommended', 'google', 'prettier'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react', '@typescript-eslint'],
+  rules: {},
+  react: {
+    version: 'latest',
+  },
+};

docs/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "semi": true
+}

docs/blog/2021-03-08-mern.md

@@ -10,9 +10,9 @@ image: https://i.imgur.com/mErPwqL.png
 hide_table_of_contents: false
 ---
 
-So we've all been in this situation. You're building a Web App, you're super productive in your stack and you can go quickly - however generating lot's of data to see what your app will look like with enough users and traffic is a pain. 
+So we've all been in this situation. You're building a Web App, you're super productive in your stack and you can go quickly - however generating lot's of data to see what your app will look like with enough users and traffic is a pain.
 
-Either you're going to spend a lot of time manually inputting data or you're going to write some scripts to generate that data for you. There *must* be a better way.
+Either you're going to spend a lot of time manually inputting data or you're going to write some scripts to generate that data for you. There _must_ be a better way.
 
 In this post we're going to explore how we can solve this problem using the open-source project [Synth][synth]. Synth is a state-of-the-art declarative data generator - you tell Synth what you want your data to look like and Synth will generate that data for you.
 
@@ -40,7 +40,7 @@ docker run -d --name mongo-on-docker -p 27017:27017 mongo
 
 The repository we just cloned contains a working end-to-end web-app running on a MERN stack. It's a super simple CRUD application enabling the user to add / remove some movie reviews which are persisted on a MongoDB database.
 
-The app consists of 2 main components, a `nodejs` server which lives under the `movies-app/server/` sub-directory, and a `React` front-end which lives under the `movies-app/client` sub-directory. 
+The app consists of 2 main components, a `nodejs` server which lives under the `movies-app/server/` sub-directory, and a `React` front-end which lives under the `movies-app/client` sub-directory.
 
 The client and server talk to each other using a standard HTTP API under `/movie`.
 
@@ -87,9 +87,9 @@ To install Synth on MacOS / Linux, visit the [docs](/) and choose the appropriat
 
 Synth uses a declarative data model to specify how data is generated.
 
-Hmmm, so what is a declarative model you may ask? A **declarative model**, as opposed to an imperative model, is where you 'declare' your desired end state and the underlying program will figure out how to get there. 
+Hmmm, so what is a declarative model you may ask? A **declarative model**, as opposed to an imperative model, is where you 'declare' your desired end state and the underlying program will figure out how to get there.
 
-On the other had, an imperative model (which is what we are mostly used to), is step by step instructions on how to get to our end-state. Most popular programming languages like Java or C are *imperative* - your code is step-by-step instructions on how to reach an end state.
+On the other had, an imperative model (which is what we are mostly used to), is step by step instructions on how to get to our end-state. Most popular programming languages like Java or C are _imperative_ - your code is step-by-step instructions on how to reach an end state.
 
 Programming frameworks like SQL or React or Terraform are declarative. You don't specify how to get to your end-state, you just specify what you want and the underlying program will figure out how to get there.
 
@@ -99,7 +99,7 @@ With Synth you specify what your desired dataset should look like, not how to ma
 
 A **workspace** represents a set of synthetic data namespaces managed by Synth. Workspaces are marked by `.synth/` sub-directory.
 
-A workspace can have *zero or more namespaces*, where the namespaces are just represented as sub-directories. All information pertaining to a workspace is in its directory.
+A workspace can have _zero or more namespaces_, where the namespaces are just represented as sub-directories. All information pertaining to a workspace is in its directory.
 
 So let's create sub-directory called `data/` and initialize our Synth workspace.
 
@@ -174,7 +174,7 @@ $ synth generate cinema/
 }
 ```
 
-So now we've generated data with the same schema as the original - but the value of the data points doesn't really line up with the semantic meaning  of our dataset. For example, the `time` array is just garbled text, not actual times of the day.
+So now we've generated data with the same schema as the original - but the value of the data points doesn't really line up with the semantic meaning of our dataset. For example, the `time` array is just garbled text, not actual times of the day.
 
 The last steps is to tweak the Synth schema and create some realistic looking data!
 
@@ -242,9 +242,9 @@ So let's open `cinema/movies.json` in our favorite text editor and take a look a
 }
 ```
 
-There is a lot going on here but let's break it down. 
+There is a lot going on here but let's break it down.
 
-The top-level object (which represents our `movies` collection) is of type `array` - where the `content` of the array is an object with 4 fields, `_id`, `name`, `time`, and `rating`. 
+The top-level object (which represents our `movies` collection) is of type `array` - where the `content` of the array is an object with 4 fields, `_id`, `name`, `time`, and `rating`.
 
 We can completely remove the field `_id` since this is automatically managed by MongoDB and get started in making our data look real. You may want to have the [Generators Reference](/docs/content/null) open here for reference.
 
@@ -254,13 +254,13 @@ First let's change the `rating` field. Our app can only accept numbers between 0
 
 ```json synth
 {
-    "range": {
-        "high": 10,
-        "low": 0, 
-        "step": 0.5
-    },
-    "subtype": "f64",
-    "type": "number"
+  "range": {
+    "high": 10,
+    "low": 0,
+    "step": 0.5
+  },
+  "subtype": "f64",
+  "type": "number"
 }
 ```
 
@@ -270,31 +270,31 @@ The `time` field has been correctly detected as an array of values. First of all
 
 ```json synth[expect = "unknown variant `date_time`"]
 {
-    "type": "array",
-    "length": {
-        "type": "number",
-        "subtype": "u64",
-        "range": {
-            "low": 1,
-            "high": 5,
-            "step": 1
-        }
-    },
-    "content": {
-        "type": "one_of",
-        "variants": [
-            {
-                "weight": 1.0,
-                "type": "string",
-                "date_time": {
-                    "subtype": "naive_time",
-                    "format": "%H:%M",
-                    "begin": "12:00",
-                    "end": "23:59"
-                }
-            }
-        ]
+  "type": "array",
+  "length": {
+    "type": "number",
+    "subtype": "u64",
+    "range": {
+      "low": 1,
+      "high": 5,
+      "step": 1
     }
+  },
+  "content": {
+    "type": "one_of",
+    "variants": [
+      {
+        "weight": 1.0,
+        "type": "string",
+        "date_time": {
+          "subtype": "naive_time",
+          "format": "%H:%M",
+          "begin": "12:00",
+          "end": "23:59"
+        }
+      }
+    ]
+  }
 }
 ```
 
@@ -314,11 +314,11 @@ So let's use the `String::Faker` content type to generate some fake movie names!
 
 ```json synth
 {
-    "type": "string",
-    "faker": {
-        "generator": "text",
-        "max_nb_chars": 20
-    }
+  "type": "string",
+  "faker": {
+    "generator": "text",
+    "max_nb_chars": 20
+  }
 }
 ```
 
@@ -328,63 +328,63 @@ So, making all the changes above, we can use our beautiful finished schema to ge
 
 ```json synth[expect = "unknown variant `date_time`"]
 {
-    "type": "array",
-    "length": {
+  "type": "array",
+  "length": {
+    "type": "number",
+    "subtype": "u64",
+    "range": {
+      "low": 1,
+      "high": 2,
+      "step": 1
+    }
+  },
+  "content": {
+    "type": "object",
+    "name": {
+      "type": "string",
+      "faker": {
+        "generator": "text",
+        "max_nb_chars": 20
+      }
+    },
+    "time": {
+      "optional": false,
+      "type": "array",
+      "length": {
         "type": "number",
         "subtype": "u64",
         "range": {
-            "low": 1,
-            "high": 2,
-            "step": 1
+          "low": 1,
+          "high": 5,
+          "step": 1
         }
-    },
-    "content": {
-        "type": "object",
-        "name": {
+      },
+      "content": {
+        "type": "one_of",
+        "variants": [
+          {
+            "weight": 1.0,
             "type": "string",
-            "faker": {
-                "generator": "text",
-                "max_nb_chars": 20
-            }
-        },
-        "time": {
-            "optional": false,
-            "type": "array",
-            "length": {
-                "type": "number",
-                "subtype": "u64",
-                "range": {
-                    "low": 1,
-                    "high": 5,
-                    "step": 1
-                }
-            },
-            "content": {
-                "type": "one_of",
-                "variants": [
-                    {
-                        "weight": 1.0,
-                        "type": "string",
-                        "date_time": {
-                            "subtype": "naive_time",
-                            "format": "%H:%M",
-                            "begin": "00:00",
-                            "end": "23:59"
-                        }
-                    }
-                ]
+            "date_time": {
+              "subtype": "naive_time",
+              "format": "%H:%M",
+              "begin": "00:00",
+              "end": "23:59"
             }
-        },
-        "rating" : {
-            "range": {
-                "high": 10,
-                "low": 0,
-                "step": 0.5
-            },
-            "subtype": "f64",
-            "type": "number"
-        }
+          }
+        ]
+      }
+    },
+    "rating": {
+      "range": {
+        "high": 10,
+        "low": 0,
+        "step": 0.5
+      },
+      "subtype": "f64",
+      "type": "number"
     }
+  }
 }
 ```
 
@@ -466,5 +466,4 @@ This post was a summary of how you can use Synth to generate realistic looking t
 
 To check out the Synth source code you can visit the Synth repo on [GitHub](https://github.com/getsynth/synth/), and to join the conversation hop-on the the [Synth discord server](https://discord.com/invite/wwJVAFKKkq).
 
-
 [synth]: https://github.com/getsynth/synth