This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0
README

GitHubRibbon

Show the "Fork me on GitHub" ribbon in your Elm app.

Element

ribbon : Repository -> Style -> Html msg

A ribbon as a piece of HTML.

view : Model -> Html Msg
view m =
    div []
        [ ribbon
            { owner = "y-taka-23", repo = "elm-github-ribbon" }
            { position = Right, color = Red }
        , ...
        ]

Configurations

type alias Repository = { owner : String , repo : String }

Repository on GitHub for linking to.

type alias Style = { position : Position , color : Color }

Sytle of the ribbon.

type Position = Left | Right

Position of the ribbon. The left-top or right-top corner of a page.

type Color = Red | Green | DarkBlue | Orange | Gray | White

Color of the ribbon. Six colors are provided by GitHub.

module GitHubRibbon
    exposing
        ( Repository
        , Style
        , Position(..)
        , Color(..)
        , ribbon
        )

{-| Show the "Fork me on GitHub" ribbon in your Elm app.


# Element

@docs ribbon


# Configurations

@docs Repository, Style, Position, Color

-}

import Html exposing (..)
import Html.Attributes exposing (..)


{-| A ribbon as a piece of HTML.

    view : Model -> Html Msg
    view m =
        div []
            [ ribbon
                { owner = "y-taka-23", repo = "elm-github-ribbon" }
                { position = Right, color = Red }
            , ...
            ]

-}
ribbon : Repository -> Style -> Html msg
ribbon r s =
    a
        [ href <| toHref r ]
        [ img
            [ alt "Fork me on GitHub"
            , src <| toSrc s
            , style <| toStyle s.position
            ]
            []
        ]


{-| Repository on GitHub for linking to.
-}
type alias Repository =
    { owner : String
    , repo : String
    }


toHref : Repository -> String
toHref r =
    "https://github.com/" ++ r.owner ++ "/" ++ r.repo


{-| Sytle of the ribbon.
-}
type alias Style =
    { position : Position
    , color : Color
    }


toSrc : Style -> String
toSrc s =
    "https://s3.amazonaws.com/github/ribbons/forkme_"
        ++ position s.position
        ++ "_"
        ++ color s.color
        ++ ".png"


{-| Position of the ribbon. The left-top or right-top corner of a page.
-}
type Position
    = Left
    | Right


toStyle : Position -> List ( String, String )
toStyle pos =
    [ ( "position", "absolute" )
    , ( "top", "0" )
    , ( position pos, "0" )
    , ( "border", "0" )
    ]


position : Position -> String
position pos =
    case pos of
        Left ->
            "left"

        Right ->
            "right"


{-| Color of the ribbon. Six colors are provided by GitHub.
-}
type Color
    = Red
    | Green
    | DarkBlue
    | Orange
    | Gray
    | White


color : Color -> String
color col =
    case col of
        Red ->
            "red_aa0000"

        Green ->
            "green_007200"

        DarkBlue ->
            "darkblue_121621"

        Orange ->
            "orange_ff7600"

        Gray ->
            "gray_6d6d6d"

        White ->
            "white_ffffff"