Update Docs

src/docs/README.markdown

@@ -8,9 +8,9 @@ The docs website is built using [Fornax], to contribute to the docs you can add
 [guides], [posts], [controls] directories.
 
 ## Guides
-Guides are a general way to explain how to archieve a result or to take a user through an explanation of an existing concept inside Avalonia.FuncUI.
+Guides are a general way to explain how to achieve a result or to take a user through an explanation of an existing concept inside Avalonia.FuncUI.
 
-Guides follow the follwing format
+Guides follow the following format
 
 ```markdown
 ---
@@ -41,7 +41,7 @@ Possible values are
 - author (optional) -> any string that denominates the author of the guide
 - tags (optional) -> comma separated strings
 
-Please put Links on the top of the document, also use relative url's when linking documents that exist inside the Avalonia.FuncUI Website.
+Please put Links on the top of the document, also use relative URL's when linking documents that exist inside the Avalonia.FuncUI Website.
 See the `[Basic Template]: guides/Basic-Template.html` example, you can refer to other documents in the [guides] directory
 
 
@@ -65,17 +65,17 @@ You can checkout [Basic Template]
 - layout -> post
     (always use post)
 - title -> any string that describes the title
-- published (optional) -> a string in the follwing format YYYY-MM-DD
+- published (optional) -> a string in the following format YYYY-MM-DD
 - author (optional) -> any string that denominates the author of the guide
 - tags (optional) -> comma separated strings
 
-In the same way you have to put Links at the top and use relative urls when linking content inside the Avalonia.FuncUI Website
+In the same way you have to put Links at the top and use relative URLs when linking content inside the Avalonia.FuncUI Website
 
 
 ### Preview while Developing
 Fornax offers a watch command that allows you to preview the website as you develop it's contents
 
-- install the fornax cli tool
+- install the fornax-cli tool
 - change directory into the docs sources
 - fornax watch
 - open your browser on localhost:8080 (for further information visit the [Fornax] repository)
@@ -94,7 +94,7 @@ fornax watch
 ### Build Docs
 To update the website, we have to build the docs sources, we use a fake script for this
 
-> Pleas note that if you are only adding/updating content (example: adding a .md file) you don't need to include the updated docs in your pull request, if you added a different layout, or modified an existing page (example: generators/index.fsx) please notify in the pull request so it can also be verified by the mantainers
+> Pleas note that if you are only adding/updating content (example: adding a .md file) you don't need to include the updated docs in your pull request, if you added a different layout, or modified an existing page (example: generators/index.fsx) please notify in the pull request so it can also be verified by the maintainers
 
 - install fornax cli tool
 - change directory into the docs sources

src/docs/controls/CheckBox.md

@@ -0,0 +1,66 @@
+---
+layout: control
+name: CheckBox
+group: controls
+---
+[CheckBox]: https://avaloniaui.net/docs/controls/checkbox
+[CheckBox API]: https://avaloniaui.net/api/Avalonia.Controls/CheckBox/
+[CheckBox.fs]: https://github.com/AvaloniaCommunity/Avalonia.FuncUI/blob/master/src/Avalonia.FuncUI.DSL/CheckBox.fs
+
+> *Note*: You can check the Avalonia docs for the [CheckBox] and [CheckBox API] if you need more information.
+> 
+> For Avalonia.FuncUI's DSL properties you can check [CheckBox.fs]
+
+The checkbox is a control that allows a user to represent boolean values or the absense of a value
+
+## Usage
+
+**Set Label**
+```fsharp
+CheckBox.create [
+    Checkbox.content "I Accept the terms and conditions."
+]
+```
+
+**Set Is Checked**
+
+```fsharp
+CheckBox.create [
+    // can be either true or false
+    Checkbox.isChecked state.booleanValue
+]
+```
+
+**Set Indeterminate**
+```fsharp
+CheckBox.create [
+    // can be either true or false
+    CheckBox.isThreeState state.indeterminate
+    // this value is required to be either a nullable boolean
+    // or a boolean option
+    Checkbox.isChecked None
+]
+```
+> To be able to set the indeterminate state, the `isThreeState` value must be true and the `isChecked` value must be None or Nullable boolean set to null
+
+**Set Dynamic State Checkbox**
+
+You can mix and match the three states of a checkbox. In this example
+if the count value is greater than 0 the box will be checked, if the value is 0 then it will be indeterminate lastly if the value is less than 0 it will be unchecked
+```fsharp
+let isChecked = 
+    if state.count = 0 then
+        None
+    else if state.count > 0 then
+        Some true
+    else
+        Some false
+
+CheckBox.create [
+    CheckBox.content "Dynamic CheckBox"
+    // this is not required
+    Checkbox.isEnabled false 
+    CheckBox.isThreeState (state.count = 0)
+    CheckBox.isChecked isChecked
+]
+```

src/docs/controls/DatePicker.md

@@ -0,0 +1,77 @@
+---
+layout: control
+name: DatePicker
+group: controls
+---
+[DatePicker API]: https://avaloniaui.net/api/Avalonia.Controls/DatePicker/
+[DatePicker.fs]: https://github.com/AvaloniaCommunity/Avalonia.FuncUI/blob/master/src/Avalonia.FuncUI.DSL/Calendar/DatePicker.fs
+[Custom date and time format strings]: https://docs.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings/
+[DatePickerFormat]: http://avaloniaui.net/api/Avalonia.Controls/DatePickerFormat/
+
+> *Note*: You can check the Avalonia docs for the [DatePicker API] if you need more information.
+> 
+> For Avalonia.FuncUI's DSL properties you can check [DatePicker.fs]
+
+The DatePicker control is a single date picker that displays a calendar, it is also posible to enter a date via the TextBox the control has
+
+## Usage
+
+**Set Date**
+```fsharp
+DatePicker.create [
+    DatePicker.selectedDate DateTime.Today
+]
+```
+
+**Set DateFormat**
+```fsharp
+DatePicker.create [
+    DatePicker.selectedDateFormat DatePickerFormat.Long
+]
+
+DatePicker.create [
+    DatePicker.selectedDateFormat DatePickerFormat.Short
+]
+
+DatePicker.create [
+    DatePicker.selectedDateFormat DatePickerFormat.Custom
+    // It can be any valid DateFormat string
+    DatePicker.customDateFormatString "MMMM dd, yyyy"
+]
+```
+> For more information about the DatePickerFormat check [DatePickerFormat]
+
+>You can check [Custom date and time format strings] Microsoft docs for more information about the format string
+
+**Set Start Display Date**
+
+Sets the first date available to display
+```fsharp
+let startFromYesterday =
+    DateTime.Today.Subtract(TimeSpan.FromDays(1.0))
+DatePicker.create [
+    DatePicker.displayDateStart startFromYesterday
+]
+```
+
+**Set End Display Date**
+
+Sets the last date available to display
+```fsharp
+let showUpToTomorrow =
+    DateTime.Today.Add(TimeSpan.FromDays(1.0))
+DatePicker.create [
+    DatePicker.displayDateStart showUpToTomorrow
+]
+```
+
+**Set Watermark**
+
+Sets the watermark (placeholder) for the TextBox that is included in this control
+```fsharp
+DatePicker.create [
+    DatePicker.watermark "Select a date"
+]
+```
+
+

src/docs/generators/layout.fsx

@@ -45,6 +45,7 @@ let layout (ctx : SiteContents) active bodyCnt =
     let controls = 
         ctx.TryGetValues<Controlloader.Control> () 
         |> Option.defaultValue Seq.empty
+        |> Seq.sortBy(fun c -> c.name)
         |> Seq.groupBy(fun c -> c.group)
 
     let guides =