finish basic component abstraction

src/FsLab.Fornax/Components.fs

@@ -0,0 +1,39 @@
+namespace FsLab.Fornax
+
+type Components() =
+
+    static member Icon(iconClass: string) = IconComponent.icon iconClass
+
+    static member DefaultHeadTags(siteTitle: string) = DefaultHeadTagsComponent.defaultHeadTags siteTitle
+
+    static member Navbar(
+        ?LogoLink: string,
+        ?MenuEntries: HtmlElement list,
+        ?SocialLinks: HtmlElement list
+    ) = 
+        let logoLink = defaultArg LogoLink (TemplateConfig.PrefixUrl "/images/favicon.png")
+        let menuEntries = defaultArg MenuEntries []
+        let socialLinks = defaultArg SocialLinks []
+
+        NavbarComponent.fslabNavbar logoLink menuEntries socialLinks
+
+    static member FooterIconLink(
+        iconClass: string,
+        text: string,
+        link: string
+    ) =
+        FooterComponent.footerIconLink iconClass text link
+
+    static member FooterBlock(children: HtmlElement list) = FooterComponent.footerBlock children
+
+    static member Footer(
+        ?Column1: HtmlElement list,
+        ?Column2: HtmlElement list,
+        ?Column3: HtmlElement list
+    ) =
+
+        let c1 = defaultArg Column1 FooterComponent.fslabInfoFooterBlock
+        let c2 = defaultArg Column2 FooterComponent.fslabMoreFooterBlock
+        let c3 = defaultArg Column3 FooterComponent.fslabExternalFooterBlock
+
+        FooterComponent.fslabFooter c1 c2 c3

src/FsLab.Fornax/Components/DefaultLinks.fs

@@ -0,0 +1,14 @@
+module internal DefaultHeadTagsComponent
+
+open Html
+open FsLab.Fornax
+
+let defaultHeadTags siteTitle = [
+    meta [CharSet "utf-8"]
+    meta [Name "viewport"; Content "width=device-width, initial-scale=1"]
+    title [] [!! siteTitle]
+    link [Rel "icon"; Type "image/png"; Sizes "32x32"; Href (TemplateConfig.PrefixUrl "/images/favicon.png"]
+    link [Rel "stylesheet"; Href "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"]
+    link [Rel "stylesheet"; Href "https://fonts.googleapis.com/css?family=Nunito+Sans"]
+    script [ Defer true; Src "https://kit.fontawesome.com/0d3e0ea7a6.js"; CrossOrigin "anonymous"] []
+]

src/FsLab.Fornax/Components/Footer.fs

@@ -0,0 +1,78 @@
+module internal FooterComponent
+
+open Html
+open FsLab.Fornax
+
+let footerIconLink (iconClass:string) (text:string) (link:string) = 
+    div [Class "icon-text is-white"] [
+        span [Class"icon"] [
+            i [Class iconClass] []
+        ]
+        span [] [a [Class "footer-link"; Href link] [!! text]]
+    ]
+
+let footerBlock children = 
+    div [Class "block"] children
+
+let fslabInfoFooterBlock =
+    [
+        div [Class "block"] [
+            h3 [Class "subtitle is-white"] [!!"FsLab - the project incubation space for data science in F#"]
+        ]
+        div [Class "block"] [
+            p [] [!!"FsLab is only possible due to the joined forces of F# open source contributors."]
+        ]
+        div [Class "block"] [
+            p [] [!!"This website is created and maintained by individual FsLab open source contributors."]
+        ]
+        div [Class "block"] [
+            footerIconLink "fas fa-code-branch" "website source code" "https://github.com/fslaborg/fslaborg.github.io"
+            footerIconLink "far fa-handshake" "fslab contributors" "https://github.com/orgs/fslaborg/people"
+        ]
+    ]
+
+let fslabMoreFooterBlock =
+    [
+        div [Class "block"] [
+            h3 [Class "subtitle is-white"] [!!"More"]
+        ]
+        div [Class "block"] [
+            div [Class "block"] [
+                footerIconLink "fab fa-github" "the fslab organisation on github" "https://github.com/fslaborg?type=source"
+                footerIconLink "fab fa-twitter" "fslab on twitter" "https://twitter.com/fslaborg"
+            ]
+            div [Class "block"] [
+                footerIconLink "fas fa-cubes" "endorsed packages" "https://fslab.org/packages.html"
+                footerIconLink "fas fa-plus" "add a package to the list" "https://github.com/fslaborg/fslaborg.github.io#add-a-project-to-the-packages-site"
+
+            ]
+            div [Class "block"] [
+                footerIconLink "fas fa-graduation-cap" "tutorials and learning resources" "https://fslab.org/tutorials.html"
+                footerIconLink "fas fa-plus" "add tutorial content" "https://github.com/fslaborg/fslaborg.github.io#add-a-tutorial-guide-or-blogpost"
+            ]
+        ]
+    ]
+
+let fslabExternalFooterBlock =
+    [
+        div [Class "block"] [
+            h3 [Class "subtitle is-white"] [!!"External resources"]
+        ]
+        div [Class "block"] [
+            ul [] [
+                li [] [a [Href "https://github.com/fsprojects?type=source"; Class "footer-link"] [!!"fsprojects - general F# project incubation space"]]
+                li [] [a [Href "https://fsharp.org/"; Class "footer-link"] [!!"fsharp.org"]]
+            ]
+        ]
+    ]
+
+let fslabFooter col1 col2 col3 = 
+    footer [Class "footer has-bg-darkmagenta"] [
+        div [Class "container"] [
+            div [Class "columns"] [
+                div [Class "column is-4 m-4"] col1
+                div [Class "column is-4 m-4"] col2
+                div [Class "column is-4 m-4"] col3
+            ]
+        ]
+    ]

src/FsLab.Fornax/Components/Icon.fs

@@ -0,0 +1,8 @@
+module internal IconComponent
+
+open Html
+
+let icon (iconClass:string) =
+    span [Class"icon"] [
+        i [Class iconClass] []
+    ]

src/FsLab.Fornax/Components/Nabvbar.fs

@@ -0,0 +1,28 @@
+module internal NavbarComponent
+
+open Html
+open FsLab.Fornax
+
+let fslabNavbar (logoLink:string) (menuEntries: HtmlElement list) (socialLinks: HtmlElement list) =
+    nav [Class "navbar is-fixed-top"] [
+        div [Class "navbar-brand"] [
+            a [Class "navbar-item"; Href "/"] [
+                    img [Src logoLink; Alt "Logo"]
+                ]
+            a [
+                Class "navbar-burger"; 
+                HtmlProperties.Custom ("data-target", "navMenu"); 
+                HtmlProperties.Custom ("aria-label", "menu"); 
+                HtmlProperties.Role "button"
+                HtmlProperties.Custom ("aria-expanded", "false")
+            ] [
+                span [HtmlProperties.Custom ("aria-hidden","true")] []
+                span [HtmlProperties.Custom ("aria-hidden","true")] []
+                span [HtmlProperties.Custom ("aria-hidden","true")] []
+            ]
+        ]
+        div [Id "navMenu"; Class "navbar-menu"] [
+            div [Class "navbar-start"] menuEntries
+            div [Class "navbar-end"] socialLinks
+        ]
+    ]

src/FsLab.Fornax/FsLab.Fornax.fsproj

@@ -6,21 +6,22 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <Compile Include="Library.fs" />
-    <Compile Include="Components\Root.fs" />
-    <Compile Include="Components/Navbar.fs" />
+    <Content Include="_lib\Fornax.Core.dll">
+      <Pack>true</Pack>
+      <PackagePath>lib\$(TargetFramework)</PackagePath>
+    </Content>
+    <Compile Include="TemplateConfig.fs" />
+    <Compile Include="Components\DefaultLinks.fs" />
+    <Compile Include="Components\Icon.fs" />
+    <Compile Include="Components\Nabvbar.fs" />
+    <Compile Include="Components\Footer.fs" />
+    <Compile Include="Components.fs" />
   </ItemGroup>
   <ItemGroup>
     <Reference Include="Fornax">
       <HintPath>_lib\Fornax.Core.dll</HintPath>
     </Reference>
   </ItemGroup>
-  <ItemGroup>
-    <Content Include="_lib\Fornax.Core.dll">
-      <Pack>true</Pack>
-      <PackagePath>lib\$(TargetFramework)</PackagePath>
-    </Content>
-  </ItemGroup>
   <ItemGroup>
     <PackageReference Update="FSharp.Core" Version="5.*" />
     <PackageReference Include="Markdig" Version="0.30.2" />

src/FsLab.Fornax/TemplateConfig.fs

@@ -0,0 +1,5 @@
+namespace FsLab.Fornax
+
+module TemplateConfig =
+
+    let mutable PrefixUrl: string -> string = id