Editorconfig page (#2427)

* Rebased with master
Add new configuration file

* Add function for formatting settings inside configuration page.
Temporarily deleted settings for ramping up the new configuration page.

* Clean a little bit introduction file

* Introduction
- Redacted basic introduction
- Included gif for online tool usage.

* Separated sections

* Recommendation system draft
- Create section where we explain each recommendation (to be redacted)
- Add icons for each recommendation
- Implement tooltip for when users hover the symbol

* Move function to top and update fantomas version in configuration.fsx to
beta

* Update not recommended color to orange

* Add G-Research logos

* Reworded some redactions
Changed <br> to two trailing spaces

* Recommendation explanations

* Custom tooltips when you hover on recommendation icons.

* Cleanup

* Better gif quality

* Icons and other stylings
- Resized recommendation system icons
- Changed code generation to not use variables
- Redaction tweaks

* Deleted letters from SVG

* Code result stylings

* Inline icon to header

* New gif

* Tweaks from last feedback
- Deleted repeated G-Research icon
- Changed output background stylings
- Deleted 'default_config' keyword
- Temporal lorep ipsum that later will explain sections

* Onload event for listeners

* Custom Web Components
- Imported Lit dependency for web components
- Created 4 web componentes for each recommendation system
- Changed hardcoded icons to custom web components
- Changed icons stylings for allowing different stylings depending on
  icon location

* Deleted unused class and comment

* Minor visual tweaks and haunted implementation for web components.

* Add settings list
Temporary lorem ipsum for each setting description
Temporary code generation

* Tweak stylings, minor refactors, rewords
- Add eval flag for readme file
- Refactor code for better readability
- Deleted unnecesary sass vars
- Reworded settings redactions
- Resize SVG icon

* SVG change size for icon recommendations

* Configurations with descriptions and code snippets!

* Fix fsharp_space_before_parameter not rendering the right example.

* Changed icons margin to inline stylings

Co-authored-by: alanlomeli <45440937+yisusalanpng@users.noreply.github.com>

build.fsx

@@ -340,7 +340,7 @@ Target.create "Docs" (fun _ ->
     DotNet.exec
         id
         "fsdocs"
-        $"build --clean --properties Configuration=Release --fscoptions \" -r:{semanticVersioning}\""
+        $"build --clean --properties Configuration=Release --fscoptions \" -r:{semanticVersioning}\" --eval"
     |> ignore)
 
 // --------------------------------------------------------------------------------------

docs/.README.md

@@ -2,7 +2,7 @@
 
 To run the website:
 
-> dotnet fsdocs watch
+> dotnet fsdocs watch --eval
 
 To compile the Sass:
 
@@ -16,4 +16,4 @@ To build the website:
 
 > dotnet fsi .\docs\\.style\style.fsx
 
-> dotnet fsdocs build
+> dotnet fsdocs build --eval

docs/.style/fsdocs-custom.sass

@@ -41,6 +41,11 @@ $headings-font-family: 'Reem Kufi', sans-serif
 
 #fsdocs-content
   box-shadow: 0 4px 10px $drop-shadow
+  table.pre
+    background-color: $pearl
+    pre
+      background-color: $pearl
+      color: $primary
   h1, h2, h3, h4, h5, h6
     a
       color: $black
@@ -64,6 +69,16 @@ $headings-font-family: 'Reem Kufi', sans-serif
     font-size: 1.2rem
     padding: 15px 0 10px 0
     font-weight: 400
+  h4
+    .green-recommendation, .orange-recommendation, .red-recommendation
+      vertical-align: 0
+      margin-right: 0.5rem
+      font-size: 1.3rem
+    .gresearch-recommendation
+      vertical-align: -0.2rem
+      margin-right: 0.5rem
+      width: 20px
+      height: 20px
   hr
     margin: 0 0 20px 0
   li
@@ -92,6 +107,35 @@ $headings-font-family: 'Reem Kufi', sans-serif
       line-height: 1
       color: $white
 
+  .green-recommendation
+    color: $success
+    vertical-align: middle
+    font-size: 1.4rem
+  .red-recommendation
+    color: $danger
+    vertical-align: middle
+    font-size: 1.4rem
+  .orange-recommendation
+    color: $warning
+    vertical-align: middle
+    font-size: 1.4rem
+  .gresearch-recommendation
+    padding: 3px
+    background-color: $gresearch-color
+    border-radius: 50%
+
+.green-tooltip
+  .tooltip-inner
+    background-color: $success
+.red-tooltip
+  .tooltip-inner
+    background-color: $danger
+.orange-tooltip
+  .tooltip-inner
+    background-color: $warning
+.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
+$success: #92DC84
+$warning: #F5BF4F
+$danger: #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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-root="{{root}}">
 
 <head>
   <meta charset="utf-8">
@@ -23,7 +23,6 @@
 
 <body>
   <main id="main-container">
-
      <div id="sidebar-wrapper" class="bg-primary h-100 fs-5 collapse show">
       <div id="sidebar-header" class="d-flex justify-content-end mt-1">
       <button class="btn d-md-none" data-bs-toggle="collapse" data-bs-target="#sidebar-wrapper" data-bs-parent="#main-container" aria-controls="sidebar-wrapper" aria-expanded="false" aria-label="Toggle navigation">
@@ -84,9 +83,11 @@
       </div>
         <div id="push"></div>
     </div>
-
   </main>
   <script type="text/javascript">
+window.addEventListener('load', (event) => {
+    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
 addEventListener('hide.bs.collapse', (e) => {
   if (e.target && e.target.id === 'sidebar-wrapper') {
     document.getElementById('main-container').classList.add('toggled');
@@ -103,6 +104,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 +116,7 @@
   <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/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
+  <script type="module" src="{{root}}content/fantomas-setting-icon.js"></script>
   <script type="module">
       import mermaid from "https://cdn.skypack.dev/mermaid";
       mermaid.initialize({
@@ -125,5 +128,4 @@
       });
   </script>
 </body>
-
 </html>

docs/content/fantomas-setting-icon.js

@@ -0,0 +1,35 @@
+import { html } from 'https://cdn.skypack.dev/lit';
+import { component } from 'https://cdn.skypack.dev/haunted';
+
+
+function FantomasSettingIcon({ tooltip, type }) {
+    let settingType
+    switch (type) {
+        case 'green':
+            settingType = {icon: "bi-check-circle-fill", color: "green-recommendation", tooltip: tooltip?tooltip:"This setting is good to use"}
+            break;
+        case 'orange':
+            settingType =  {icon:"bi-exclamation-circle-fill", color:"orange-recommendation", tooltip: tooltip?tooltip:"This setting is not recommended"}
+            break;
+        case 'red':
+            settingType = {icon: "bi-x-circle-fill", color:"red-recommendation", tooltip: tooltip?tooltip:"You shouldn't use this setting"}
+            break;
+    }
+    return  html`<i class="bi ${settingType.icon} ${settingType.color} me-2"
+                    data-bs-toggle="tooltip" data-bs-custom-class="${type}-tooltip" data-bs-title="${settingType.tooltip}"></i>`;
+}
+
+function FantomasSettingIconGResearch({ tooltip }) {
+    const root = document.documentElement.dataset.root
+    const safeTooltip =
+        tooltip ? tooltip : "If you use one of these you should use all G-Research settings for consistency reasons";
+
+    return  html`<img class="gresearch-recommendation me-2" data-bs-toggle="tooltip" data-bs-custom-class="gresearch-tooltip"
+                   data-bs-title="${safeTooltip}" data-bs-custom-class="gresearch-tooltip" src="${root}/images/gresearch.svg" alt="G-Research logo"/>`;
+}
+
+customElements.define('fantomas-setting-icon', component(FantomasSettingIcon, { useShadowDOM: false,
+                                                                               observedAttributes: [ 'tooltip','type'] }));
+
+customElements.define('fantomas-setting-icon-gresearch', component(FantomasSettingIconGResearch, { useShadowDOM: false,
+                                                                               observedAttributes: [ 'tooltip'] }));