Editorconfig page

docs/.style/fsdocs-custom.sass

@@ -92,6 +92,29 @@ $headings-font-family: 'Reem Kufi', sans-serif
       line-height: 1
       color: $white
 
+  .green-recommendation
+    color: $green
+  .red-recommendation
+    color: $red
+  .orange-recommendation
+    color: $orange
+  .gresearch-recommendation
+    padding: 6px
+    background-color: $gresearch-color
+    border-radius: 50%
+
+.green-tooltip
+  .tooltip-inner
+    background-color: $green
+.red-tooltip
+  .tooltip-inner
+    background-color: $red
+.orange-tooltip
+  .tooltip-inner
+    background-color: $orange
+.gresearch-tooltip
+  .tooltip-inner
+    background-color: $gresearch-color
 .fsdocs-source-link
   float: right
   text-decoration: none

docs/.style/variables.sass

@@ -5,9 +5,13 @@ $drop-shadow: rgba(22, 22, 22, 0.2)
 $white: #FFF
 $pearl: #f6f7f7
 $menu-open: #347193
+$green: #92DC84
+$orange: #F5BF4F
+$red: #EA7268
+$gresearch-color: #00A8E2
 $navbar-light-brand-color: $white
 $navbar-light-brand-hover-color: $white
 $navbar-light-color: $white
 $navbar-light-active-color: $secondary
 $navbar-light-hover-color: $white
-$navbar-nav-link-padding-x: 0
+$navbar-nav-link-padding-x: 0

docs/_template.html

@@ -103,6 +103,7 @@
     document.getElementById(e.target.id+'-wrapper').classList.add('menu-open');
   }
 })
+
   </script>
   <!-- BEGIN SEARCH BOX: this adds support for the search box -->
   <link rel="stylesheet"
@@ -114,6 +115,10 @@
   <script type="text/javascript" src="{{root}}content/fsdocs-search.js"></script>
   <!-- END SEARCH BOX: this adds support for the search box -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
+  <script>
+    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
+  </script>
   <script type="module">
       import mermaid from "https://cdn.skypack.dev/mermaid";
       mermaid.initialize({

docs/docs/end-users/Configuration.fsx

@@ -0,0 +1,170 @@
+(**
+---
+category: End-users
+categoryindex: 1
+index: 3
+---
+*)
+#r "nuget: Fantomas.Core, 5.0.0-beta-*"
+
+open Fantomas.Core.FormatConfig
+open Fantomas.Core
+let formatCode input configIndent =
+    CodeFormatter.FormatDocumentAsync  (false, input, configIndent)
+    |>  Async.RunSynchronously
+
+(**
+# Configuration
+Fantomas ships with a limited series of options.
+These can be stored in an [.editorconfig](https://editorconfig.org/) file and will be picked up automatically by the 
+commandline.   
+Your IDE should respect your settings, however the implementation of that is editor specific. Setting the configuration via 
+UI might be available depending on the IDE.
+*)
+
+(**
+## Usage
+Inside .editorconfig you can specify the file extension and code location to be use per config:
+```
+[*.fs]
+fsharp_space_before_uppercase_invocation = true
+
+# Write a comment by starting the line with a '#'
+[*.{fs,fsx,fsi}]
+fsharp_bar_before_discriminated_union_declaration = true
+
+# Apply specific settings for a targeted subfolder
+[src/Elmish/View.fs]
+fsharp_multiline_block_brackets_on_same_column = true
+fsharp_experimental_stroustrup_style = true
+```
+*)
+
+(**
+## Trying your settings via the online tool
+You can quickly try your settings via the <a href="https://fsprojects.github.io/fantomas-tools/#/fantomas/preview" target="_blank">online tool</a>.  
+<img src="{{root}}/online_tool_usage.gif" alt="drawing" width="100%"/>
+*)
+
+(**
+## Settings recommendations
+Fantomas ships with a series of settings that you can use freely depending  on your case. However, there are settings that we do not recommend and generally should not be used.   
+<i class="bi bi-check-circle-fill green-recommendation" ></i> <strong>Safe to change:</strong> Settings that aren't attached to any guidelines. Depending on your team or your own preferences, feel free to use these as it's been agreed on the codebase, however, you can always use it's defaults.     
+<i class="bi bi-exclamation-circle-fill orange-recommendation"></i> <strong>Not recommended:</strong> Settings that don't follow any guidelines.  
+<i class="bi bi-check-circle-fill red-recommendation"></i> <strong>Do not use:</strong> Experimental settings that might not be stable and don't follow any guidelines.
+
+<img class="gresearch-recommendation" src="{{root}}/gresearch.svg" alt="G-Research logo"/> <strong>G-Research:</strong> G-Research styling guide. If you use one of these, for consistency reasons you should use all of them.  
+*)
+
+(**
+## Auxiliary settings
+#### <i class="bi bi-check-circle-fill green-recommendation" data-bs-toggle="tooltip" data-bs-custom-class="green-tooltip" data-bs-title="This setting is good to use" ></i> indent_size
+` indent_size` has to be between 1 and 10.
+
+This preference sets the indentation
+The common values are 2 and 4. 
+The same indentation is ensured to be consistent in a source file.
+Default = 4.
+
+`defaultConfig`
+*)
+
+let input = """ 
+let inline selectRandom (f: _ []) =
+    let r = random 1.0
+
+    let rec find =
+        function
+        | 0 -> fst f.[0]
+        | n when r < snd f.[n] -> fst f.[n]
+        | n -> find (n - 1)
+
+    find <| f.Length - 1
+"""
+let configIndent = { FormatConfig.Default with IndentSize = 2 }
+formatCode input configIndent
+(*** include-it ***)
+
+(**
+## Maximum width constraints
+#### <i class="bi bi-check-circle-fill orange-recommendation" data-bs-toggle="tooltip" data-bs-custom-class="orange-tooltip" data-bs-title="This setting is not recommended"></i> indent_size
+` indent_size` has to be between 1 and 10.
+
+This preference sets the indentation
+The common values are 2 and 4. 
+The same indentation is ensured to be consistent in a source file.
+Default = 4.
+
+`defaultConfig`
+*)
+
+let input2 = """ 
+let inline selectRandom (f: _ []) =
+    let r = random 1.0
+
+    let rec find =
+        function
+        | 0 -> fst f.[0]
+        | n when r < snd f.[n] -> fst f.[n]
+        | n -> find (n - 1)
+
+    find <| f.Length - 1
+"""
+let configIndent2 = { FormatConfig.Default with IndentSize = 2 }
+
+(**
+## <img class="gresearch-recommendation align-top" data-bs-toggle="tooltip" data-bs-custom-class="gresearch-tooltip" data-bs-title="If you use one of these you should use all G-Research settings for consistency reasons" data-bs-custom-class="orange-tooltip" src="{{root}}/gresearch.svg" alt="G-Research logo"/> G-Research style
+#### <i class="bi bi-check-circle-fill orange-recommendation" data-bs-toggle="tooltip" data-bs-custom-class="orange-tooltip" data-bs-title="This setting is not recommended"></i> indent_size
+` indent_size` has to be between 1 and 10.
+
+This preference sets the indentation
+The common values are 2 and 4. 
+The same indentation is ensured to be consistent in a source file.
+Default = 4.
+
+`defaultConfig`
+*)
+
+let input3 = """ 
+let inline selectRandom (f: _ []) =
+    let r = random 1.0
+
+    let rec find =
+        function
+        | 0 -> fst f.[0]
+        | n when r < snd f.[n] -> fst f.[n]
+        | n -> find (n - 1)
+
+    find <| f.Length - 1
+"""
+let configIndent3 = { FormatConfig.Default with IndentSize = 2 }
+
+(**
+## Other
+#### <i class="bi bi-check-circle-fill red-recommendation" data-bs-toggle="tooltip" data-bs-custom-class="red-tooltip" data-bs-title="You shouldn't use this setting"></i> indent_size
+
+` indent_size` has to be between 1 and 10.
+
+This preference sets the indentation
+The common values are 2 and 4. 
+The same indentation is ensured to be consistent in a source file.
+Default = 4.
+
+`defaultConfig`
+*)
+
+let input4 = """ 
+let inline selectRandom (f: _ []) =
+    let r = random 1.0
+
+    let rec find =
+        function
+        | 0 -> fst f.[0]
+        | n when r < snd f.[n] -> fst f.[n]
+        | n -> find (n - 1)
+
+    find <| f.Length - 1
+"""
+let configIndent4 = { FormatConfig.Default with IndentSize = 2 }
+
+formatCode input configIndent