Elm Blog GitHub Series
Part 2 - Add title and content areas

If you're just arriving, read
the introduction
part 1

Step 1 - Try adding an
for the blog title

A naive approach might be to add the
before the content.
main =
    h1 [] [ text "Elm explorer blog"]
    text "Here's what I learned while exploring Elm..."
Let's see what the compiler has to say about it.
Run the following on the command line:
elm make src/Main.elm --output=elm.js
Output from the compiler:
-- TOO MANY ARGS ---------------------------------- src/Main.elm

The `h1` function expects 2 arguments, but it got 4 instead.

 7|>    h1 []
 8|         [ text "Elm explorer blog" ]
 9|         text
10|         "Here's what I learned while exploring Elm..."

Are there any missing commas? Or missing parentheses?
It looks like the compiler thinks we're passing four (4) arguments to the
function but reminds us it expects only two (2).

Step 2 - Try returning a list

Since functions can only have one return value, let's try returning both of them in a list.
main =
    [ h1 [] [ text "Elm explorer blog" ]
    , text "Here's what I learned while exploring Elm..."
This time the compiler tells us we're returning an unsupported type of value.
-- BAD MAIN TYPE ---------------------------------- src/Main.elm

I cannot handle this type of `main` value:

6| main =
The type of `main` value I am seeing is:

    List (Html msg)

I only know how to handle Html, Svg, and Programs though. Modify
`main` to be one of those types of values!
Let's not get too caught up on the different types but think back to what did work. We could return some HTML
, but we couldn't return a list of HTML "things".
This makes sense if we think about how we write HTML; every element has a single parent:
      <h1>Elm explorer blog</h1>
      Here's what I learned while exploring Elm...
In this case both the
and the text "Here's what I..." have a single parent element,
. Let's apply this to the Elm application.

Step 3 - Wrap the elements in the

main =
    div []
        [ h1 [] [ text "Elm explorer blog" ]
        , text "Here's what I learned while exploring Elm..."
Yay! It compiles! Run it and see your progress come to life.
Next we'll move this into it's own function.

Step 4 - Move the blog post view into a separate function

Now that we're confident the compiler will have our back let's do a bit of quick refactoring.
Let's move the code to view a blog post into it's own function called
main =

viewBlogPost =
    div []
        [ h1 [] [ text "Elm explorer blog" ]
        , text "Here's what I learned while exploring Elm..."
That was easy. It made the code a bit more semantic too.

Step 5 - Wrap the content with an

Actually, instead of
this code, try it on your own; then show it to me.
Chances are good if you make a mistake the compiler will let you know. If you get lost, start back where you knew the code was working and try again.
Tweet a link to your commit
on GitHub repo with the result!

Next steps

Make the blog interactive with multiple pages in
part 3
If you have any feedback, I would love to hear from you:
Sharing is caring:
about this article.
© 2018 Jared M. Smith