Show the "Fork me on GitHub" ribbon in your Elm app.
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 }
, ...
]
Repository on GitHub for linking to.
Sytle of the ribbon.
Position of the ribbon. The left-top or right-top corner of a page.
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"