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

If you're just arriving, read

and

first.

Step 1 - Try adding an
h1
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

text

, 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:

<html>
  <body>
    <div>
      <h1>Elm explorer blog</h1>
      Here's what I learned while exploring Elm...
    </div>
  </body>
</html>

In this case both the

and the text "Here's what I..." have a single parent element,

div

. Let's apply this to the Elm application.

Step 3 - Wrap the elements in the
div

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

viewBlogPost

main =
    viewBlogPost


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
article
tag

Actually, instead of

showing

you

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:

dev@jaredmsmith.com

Sharing is caring:

about this article.

Elm Blog GitHub SeriesPart 2 - Add title and content areasDraft

Step 1 - Try adding an h1 for the blog title