document titles

frontend/package.json

@@ -37,6 +37,7 @@
     "purescript-psa": "^0.3.9",
     "purs-loader": "^2.0.0",
     "react": "^15.0.0",
+    "react-document-title": "^2.0.2",
     "react-dom": "^15.0.0",
     "rimraf": "^2.5.2",
     "webpack": "^2.1.0-beta.25"

frontend/src/BlogEntry.purs

@@ -10,7 +10,8 @@ import Network.HTTP.Affjax (AJAX, get)
 import Prelude (bind, pure, show, ($), (<>), (<<<))
 import Pux (EffModel, noEffects)
 import Pux.Html (Html, div, h1, p, text)
-import Pux.Html.Attributes (className, id_)
+import Pux.Html.Attributes (className, id_, title)
+import Pux.DocumentTitle (documentTitle)
 
 data Action = RequestPost
             | ReceivePost (Either String Post)
@@ -73,6 +74,7 @@ view { id: id, status: status, post: (Post post) } =
         (Just _) ->
           div [ className "row" ]
           [ h1 [] [ text status ]
+          , documentTitle [ title $ post.title <> " - Christine Dodrill" ] []
           , div [ className "col s8 offset-s2" ]
             [ p [ id_ "blogpost" ] [ text post.body ] ]
           ]

frontend/src/BlogIndex.purs

@@ -1,14 +1,15 @@
 module App.BlogIndex where
 
 import Control.Monad.Aff (attempt)
+import DOM (DOM)
 import Data.Argonaut (class DecodeJson, decodeJson, (.?))
 import Data.Either (Either(Left, Right), either)
-import DOM (DOM)
 import Network.HTTP.Affjax (AJAX, get)
 import Prelude (($), bind, map, const, show, (<>), pure, (<<<))
 import Pux (EffModel, noEffects)
+import Pux.DocumentTitle (documentTitle)
 import Pux.Html (Html, br, div, h1, ol, li, button, text, span, p)
-import Pux.Html.Attributes (key, className, id_)
+import Pux.Html.Attributes (className, id_, key, title)
 import Pux.Html.Events (onClick)
 import Pux.Router (link)
 
@@ -80,5 +81,6 @@ view state =
   div
     []
     [ h1 [] [ text "Posts" ]
+    , documentTitle [ title "Posts - Christine Dodrill" ] []
     , p [] [ text state.status ]
     , div [ className "row" ] $ map post state.posts ]

frontend/src/Layout.purs

@@ -9,9 +9,11 @@ import DOM (DOM)
 import Network.HTTP.Affjax (AJAX)
 import Prelude (($), (#), map, pure)
 import Pux (EffModel, noEffects, mapEffects, mapState)
+import Pux.DocumentTitle (documentTitle)
 import Pux.Html as H
 import Pux.Html (style, Html, a, code, div, h1, h2, h3, h4, li, nav, p, pre, text, ul, img, span)
-import Pux.Html.Attributes (classID, className, id_, role, href, src, rel)
+import Pux.Html.Attributes (classID, className, id_, role, href, src, rel, title)
+import Pux.Html (Html, a, code, div, h1, h3, h4, li, nav, p, pre, text, ul)
 import Pux.Router (link)
 
 data Action
@@ -82,7 +84,8 @@ contact :: Html Action
 contact =
   div
     [ className "row" ]
-    [ div
+    [ documentTitle [ title "Contact - Christine Dodrill" ] []
+    , div
       [ className "col s6" ]
       [ h3 [] [ text "Email" ]
       , div [ className "email" ] [ text "me@christine.website" ]
@@ -121,7 +124,8 @@ index :: Html Action
 index =
   div
   [ className "row panel" ]
-  [ H.link [ rel "stylesheet", href "/static/css/about/main.css" ] []
+  [ documentTitle [ title "Christine Dodrill" ] []
+  , H.link [ rel "stylesheet", href "/static/css/about/main.css" ] []
   , div
     [ className "col m4 bg_blur valign-wrapper center-align" ]
     [ div

frontend/src/Pux/DocumentTitle.js

@@ -0,0 +1,3 @@
+var Pux = require('purescript-pux');
+
+exports.documentTitle = Pux.fromReact(require('react-document-title'));

frontend/src/Pux/DocumentTitle.purs

@@ -0,0 +1,7 @@
+module Pux.DocumentTitle where
+
+import Pux.Html (Html, Attribute)
+
+-- | Declaratively set `document.title`.  See [react-document-title](https://github.com/gaearon/react-document-title)
+-- | for more information.
+foreign import documentTitle :: forall a. Array (Attribute a) -> Array (Html a) -> Html a