Update flask example

Author: dbrattli

README.md

@@ -12,8 +12,17 @@ as Flask, MicroBit and many more
 
 ## Installation
 
+Prerequisite to compile F# to Python using Fable:
+
+```sh
+> dotnet tool install --global fable-py --version 4.0.0-alpha-004
+> dotnet add package Fable.Core.Experimental --version 4.0.0-alpha-005
+```
+
+To use the `Fable.Python` library:
+
 ```sh
-dotnet package add Fable.Python
+> dotnet package add Fable.Python
 ```
 
 ## Usage

examples/flask/build.sh

@@ -1,2 +1,2 @@
 #!/bin/bash
-dotnet fable-py -c Release src
+dotnet fable-py src/Flask.fsproj

examples/flask/src/App.fs

@@ -10,7 +10,7 @@ let htmlPage page =
     page |> Render.htmlDocument
 
 
-let site : Site = {
+let model : Model = {
     Title="Fable Python |> F# ♥️ Python"
     Description="Demo Website, Fable Python running on Flask!"
     Banner="https://unsplash.it/1200/900?random"
@@ -24,19 +24,19 @@ let subTitle (str: string) = Html.p [ prop.classes [ Bulma.Subtitle ]; prop.text
 
 let helloWorld () =
     let body = Html.div [
-        title site.Title
-        subTitle site.Description
+        title model.Title
+        subTitle model.Description
     ]
 
     Html.html [
-        Head.head site
+        Head.head model
 
-        Navbar.navbar site
-        Hero.hero site body
+        Navbar.navbar model
+        Hero.hero model body
     ]
     |> htmlPage
 
-// Setup the routes. TODO: See if we can use attributes instead
+// Setup the routes. See if we can use attributes instead
 app.route("/")(helloWorld) |> ignore
 
 [<EntryPoint>]

examples/flask/src/Head.fs

@@ -3,13 +3,13 @@ namespace Flask
 open Feliz.ViewEngine
 
 module Head =
-    let head (site: Site) =
+    let head (model: Model) =
         Html.head [
-            Html.title [ prop.text site.Title ]
+            Html.title [ prop.text model.Title ]
 
             Html.meta [ prop.charset.utf8 ]
-            Html.meta [ prop.name "author"; prop.content site.Author ]
-            Html.meta [ prop.name "description"; prop.content site.Description ]
+            Html.meta [ prop.name "author"; prop.content model.Author ]
+            Html.meta [ prop.name "description"; prop.content model.Description ]
 
             Html.meta [ prop.httpEquiv.contentType; prop.content "text/html"; prop.charset.utf8 ]
             Html.meta [ prop.name "viewport"; prop.content "width=device-width, initial-scale=1" ]

examples/flask/src/Hero.fs

@@ -6,11 +6,11 @@ module Hero =
     let title (str: string) = Html.p [ prop.classes [ Bulma.Title ]; prop.text str ]
     let subTitle (str: string) = Html.p [ prop.classes [ Bulma.Subtitle ]; prop.text str ]
 
-    let hero (site: Site) body =
+    let hero (model: Model) body =
         Html.section [
             prop.classes [ Bulma.Hero; Bulma.IsFullheightWithNavbar ]
             prop.style [
-                style.backgroundImageUrl (site.Banner)
+                style.backgroundImageUrl (model.Banner)
                 style.backgroundPosition "center"
                 style.backgroundSize.cover
             ]

examples/flask/src/Model.fs

@@ -4,7 +4,7 @@ open Zanaptak.TypedCssClasses
 
 type Bulma = CssClasses<"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css", Naming.PascalCase>
 
-type Site = {
+type Model = {
     Author: string
     Banner: string
     Title: string

examples/flask/src/NavBar.fs

@@ -5,7 +5,7 @@ open System
 open Feliz.ViewEngine
 
 module Navbar =
-    let navbar (site: Site) =
+    let navbar (model: Model) =
         Html.nav [
             prop.classes [ Bulma.Navbar; Bulma.IsPrimary ]
             prop.children [
@@ -14,12 +14,12 @@ module Navbar =
                     prop.children [
                         Html.a [
                             prop.classes [ Bulma.NavbarItem ]
-                            prop.href site.PermaLink
+                            prop.href model.PermaLink
                             prop.children [
-                                Html.img [ prop.alt "Brand"; prop.src (site.Brand) ]
+                                Html.img [ prop.alt "Brand"; prop.src (model.Brand) ]
                                 Html.p [
                                     prop.classes [ Bulma.Title; Bulma.Is4 ]
-                                    prop.text site.Title
+                                    prop.text model.Title
                                 ]
                             ]
                         ]

examples/timeflies/Program.fs

@@ -9,7 +9,6 @@ open Fable.Python.Queue
 
 type Msg =
     | Place of label: Label * x: int * y: int
-    //| Place of  x: int * y: int
     | Empty
 
 let root = Tk()
@@ -50,7 +49,7 @@ let sink (ev: Notification<Label * int * int>) =
         match ev with
         | OnNext (label, x, y) -> queue.put (Place(label, x, y))
         | OnError (err) -> printfn $"Stream Error: {err}"
-        | _ -> printfn "Stream Completed"
+        | _ -> printfn "Stream Completed!"
 
         return ()
     }

examples/timeflies/TimeFlies.fsproj

@@ -9,8 +9,8 @@
     <Compile Include="Program.fs" />
   </ItemGroup>
   <ItemGroup>
-    <PackageReference Include="Fable.Python" Version="0.9.0" />
-    <PackageReference Include="Fable.Core.Experimental" Version="4.0.0-alpha-003" />
+    <PackageReference Include="Fable.Python" Version="0.12.0" />
+    <PackageReference Include="Fable.Core.Experimental" Version="4.0.0-alpha-005" />
     <PackageReference Include="FSharp.Control.AsyncRx" Version="1.6.0" />
   </ItemGroup>
   </Project>

src/jupyter/IPython.fs

@@ -7,6 +7,8 @@ type IDisplay =
     abstract Code : data: string -> unit
     [<Emit("display.Code($1, language=$2)")>]
     abstract Code : data: string * language: string -> unit
+    [<Emit("display.Markdown($1)")>]
+    abstract Markdown : data: string -> unit
 
 [<Import("display", "IPython")>]
 let display : IDisplay = nativeOnly