pbrisbin/details.md

## details.md

      
    Raw
  

              details.md
            
          
    Start with config/routes:
/sites SitesR GET POST

This means that the URL "/sites" is served via the SitesR route and it supports the GET and POST HTTP verbs.
This means the app must implement the Handler functions getSitesR and postSitesR somewhere.
You can find them in Handler/Sites.hs (notice the pattern: SitesR -> Handler/Sites.hs)
getSitesR :: Handler Html
getSitesR = do
    -- ...
    -- ...

    defaultLayout $ do
        setTitle "Carnival - Sites"
        $(widgetFile "sites/index")

Two things going on here:
First, widgetFile "sites/index" means to load templates/sites/index.hamlet, templates/sites/index.lucius, templates/sites/index.julius, and templates/sites/index.coffee to produce (a portion of) the response. These are the files you'll need to create or update to change the HTML, CSS, and JavaScript for this particular page.
Hamlet is basically HTML without closing tags (it's whitespace sensitive):
<h1>A title

<p>
   Some content

Etc. It supports variable interpolation, loops, conditionals and other things we can get into when/if you need them.
Lucius is CSS + nesting, variables and some other things. I don't know it well and usually just write CSS in these files.
Julius is JavaScript + variable interpolation.
Coffee is, unsurprisingly, coffee-script.
The second thing going on is that this is passed to defaultLayout. This function is defined in Foundation.hs and is where the overall HTML/CSS shared by all pages is specified:
defaultLayout widget = do
    -- ...
    -- ...

    pc <- widgetToPageContent $ do
        $(combineStylesheets' 'StaticR
            [ css_normalize_css
            , css_bootstrap_css
            ])
        $(widgetFile "default-layout")
    withUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet")

This code first loads static/css/normalize.css and static/bootstrap.css as a single, combined stylesheet (this step will probably go away soon).
It then uses the same widgetFile construct to load any of "templates/default-layout.{hamlet,lucius,julius,coffee}" that exist. These are the files you'll want to create or update to change the markup or styles for the overall layout shared by all pages. This basically produces all the content meant to be within body (plus any title, stylesheets, or scripts that will go in head).
Then, hamletFile "templates/default-layout-wrapper.hamlet" renders pc (the page content) into that overall "wrapper" template. There are technical reasons for the two templates that aren't important, you should be able to compare default-layout-wrapper.hamlet to default-layout.hamlet to see what goes where.