Add external data example.

examples/external-data/.gitignore

@@ -0,0 +1 @@
+/gen/Pages.elm

examples/external-data/.npmrc

@@ -0,0 +1 @@
+loglevel=warn

examples/external-data/README.md

@@ -0,0 +1 @@
+# elm-pages external data example

examples/external-data/content/index.md

@@ -0,0 +1,2 @@
+---
+---

examples/external-data/elm.json

@@ -0,0 +1,52 @@
+{
+    "type": "application",
+    "source-directories": [
+        "src",
+        "../../src",
+        "gen"
+    ],
+    "elm-version": "0.19.0",
+    "dependencies": {
+        "direct": {
+            "avh4/elm-color": "1.0.0",
+            "dillonkearns/elm-markdown": "1.1.0",
+            "dillonkearns/elm-oembed": "1.0.0",
+            "elm/browser": "1.0.1",
+            "elm/core": "1.0.2",
+            "elm/html": "1.0.0",
+            "elm/http": "2.0.0",
+            "elm/json": "1.1.3",
+            "elm/parser": "1.1.0",
+            "elm/svg": "1.0.1",
+            "elm/url": "1.0.0",
+            "elm-community/dict-extra": "2.4.0",
+            "elm-community/list-extra": "8.2.2",
+            "elm-community/result-extra": "2.2.1",
+            "elm-community/string-extra": "4.0.1",
+            "elm-explorations/markdown": "1.0.0",
+            "justinmimbs/date": "3.1.2",
+            "lukewestby/elm-string-interpolate": "1.0.4",
+            "mdgriffith/elm-markup": "3.0.1",
+            "mdgriffith/elm-ui": "1.1.5",
+            "miniBill/elm-codec": "1.2.0",
+            "noahzgordon/elm-color-extra": "1.0.2",
+            "rtfeldman/elm-hex": "1.0.0"
+        },
+        "indirect": {
+            "elm/bytes": "1.0.8",
+            "elm/file": "1.0.5",
+            "elm/regex": "1.0.0",
+            "elm/time": "1.0.0",
+            "elm/virtual-dom": "1.0.2",
+            "fredcy/elm-parseint": "2.0.1"
+        }
+    },
+    "test-dependencies": {
+        "direct": {
+            "elm-explorations/test": "1.2.2"
+        },
+        "indirect": {
+            "elm/random": "1.0.0"
+        }
+    }
+}

examples/external-data/images/elm-logo.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+   viewBox="0 0 323.141 322.95" enable-background="new 0 0 323.141 322.95" xml:space="preserve">
+<g>
+  <polygon
+    fill="#F0AD00"
+    points="161.649,152.782 231.514,82.916 91.783,82.916"/>
+
+  <polygon
+    fill="#7FD13B"
+    points="8.867,0 79.241,70.375 232.213,70.375 161.838,0"/>
+
+  <rect
+    fill="#7FD13B"
+    x="192.99"
+    y="107.392"
+    transform="matrix(0.7071 0.7071 -0.7071 0.7071 186.4727 -127.2386)"
+    width="107.676"
+    height="108.167"/>
+
+  <polygon
+    fill="#60B5CC"
+    points="323.298,143.724 323.298,0 179.573,0"/>
+
+  <polygon
+    fill="#5A6378"
+    points="152.781,161.649 0,8.868 0,314.432"/>
+
+  <polygon
+    fill="#F0AD00"
+    points="255.522,246.655 323.298,314.432 323.298,178.879"/>
+
+  <polygon
+    fill="#60B5CC"
+    points="161.649,170.517 8.869,323.298 314.43,323.298"/>
+</g>
+</svg>

examples/external-data/images/github.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub icon</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

examples/external-data/images/icon.svg

@@ -0,0 +1,2 @@
+<svg version="1.1" viewBox="251.0485 144.52063 56.114286 74.5" width="50px" height="74.5"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="10%" style="stop-color:rgba(1.96%,45.88%,90.2%,1);stop-opacity:1"></stop><stop offset="100%" style="stop-color:rgba(0%,94.9%,37.65%,1);stop-opacity:1"></stop></linearGradient></defs><metadata></metadata><g id="Canvas_11" stroke="none" fill="url(#grad1)" stroke-opacity="1" fill-opacity="1" stroke-dasharray="none"><g id="Canvas_11: Layer 1"><g id="Group_38"><g id="Graphic_32"><path d="M 252.5485 146.02063 L 252.5485 217.52063 L 305.66277 217.52063 L 305.66277 161.68254 L 290.00087 146.02063 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></path></g><g id="Line_34"><line x1="266.07286" y1="182.8279" x2="290.75465" y2="183.00997" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line></g><g id="Line_35"><line x1="266.07286" y1="191.84156" x2="290.75465" y2="192.02363" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line></g><g id="Line_36"><line x1="266.07286" y1="200.85522" x2="290.75465" y2="201.0373" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line></g><g id="Line_37"><line x1="266.07286" y1="164.80058" x2="278.3874" y2="164.94049" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line></g></g></g></g></svg>
+

examples/external-data/index.js

@@ -0,0 +1,9 @@
+import "elm-oembed";
+import "./style.css";
+// @ts-ignore
+const { Elm } = require("./src/Main.elm");
+const pagesInit = require("elm-pages");
+
+pagesInit({
+  mainElmModule: Elm.Main
+});

examples/external-data/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "elm-pages-example",
+  "version": "1.0.0",
+  "description": "Example site built with elm-pages.",
+  "scripts": {
+    "start": "elm-pages develop",
+    "serve": "npm run build && http-server ./dist -a localhost -p 3000 -c-1",
+    "build": "elm-pages build"
+  },
+  "author": "Dillon Kearns",
+  "license": "BSD-3",
+  "dependencies": {
+    "node-sass": "^4.12.0",
+    "prismjs": "^1.17.1"
+  },
+  "devDependencies": {
+    "elm": "^0.19.0-no-deps",
+    "elm-oembed": "0.0.6",
+    "elm-pages": "file:../..",
+    "elm-test": "^0.19.0-rev6",
+    "http-server": "^0.11.1"
+  }
+}

examples/external-data/src/Main.elm

@@ -0,0 +1,293 @@
+module Main exposing (main)
+
+import Color
+import Element exposing (Element)
+import Element.Background
+import Element.Border
+import Element.Font as Font
+import Element.Region
+import Head
+import Head.Seo as Seo
+import Html exposing (Html)
+import Html.Attributes as Attr
+import Json.Decode as Decode exposing (Decoder)
+import Pages exposing (images, pages)
+import Pages.Directory as Directory exposing (Directory)
+import Pages.Document
+import Pages.ImagePath as ImagePath exposing (ImagePath)
+import Pages.Manifest as Manifest
+import Pages.Manifest.Category
+import Pages.PagePath as PagePath exposing (PagePath)
+import Pages.Platform exposing (Page)
+import Palette
+import Secrets
+import StaticHttp
+
+
+manifest : Manifest.Config Pages.PathKey
+manifest =
+    { backgroundColor = Just Color.white
+    , categories = [ Pages.Manifest.Category.education ]
+    , displayMode = Manifest.Standalone
+    , orientation = Manifest.Portrait
+    , description = "elm-pages - A statically typed site generator."
+    , iarcRatingId = Nothing
+    , name = "elm-pages docs"
+    , themeColor = Just Color.white
+    , startUrl = pages.index
+    , shortName = Just "elm-pages"
+    , sourceIcon = images.iconPng
+    }
+
+
+type alias View =
+    ()
+
+type alias Metadata = ()
+
+main : Pages.Platform.Program Model Msg Metadata View
+main =
+    Pages.Platform.application
+        { init = init
+        , view = view
+        , update = update
+        , subscriptions = subscriptions
+        , documents = [ markdownDocument ]
+        , manifest = manifest
+        , canonicalSiteUrl = canonicalSiteUrl
+        , onPageChange = OnPageChange
+        , internals = Pages.internals
+        }
+
+
+markdownDocument : ( String, Pages.Document.DocumentHandler Metadata () )
+markdownDocument =
+    Pages.Document.parser
+        { extension = "md"
+        , metadata = Decode.succeed ()
+        , body = \_ -> Ok ()
+        }
+
+
+type alias Model =
+    {}
+
+
+init : Maybe (PagePath Pages.PathKey) -> ( Model, Cmd Msg )
+init maybePagePath =
+    ( Model, Cmd.none )
+
+
+type Msg
+    = OnPageChange (PagePath Pages.PathKey)
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        OnPageChange page ->
+            ( model, Cmd.none )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
+
+
+type alias Company =
+    { name : String
+    , logoUrl : String
+    }
+
+
+companyView : Company -> Html msg
+companyView company =
+    Html.div []
+        [ Html.h2 [] [ Html.text company.name ]
+        , Html.img [ Attr.src company.logoUrl ] []
+        ]
+
+
+airtableRequest : StaticHttp.Request (List Company)
+airtableRequest =
+    StaticHttp.jsonRequestWithSecrets
+        (\secrets ->
+            secrets
+                |> Secrets.get "AIRTABLE_API_KEY"
+                |> Result.map (\airtableApiKey -> "https://api.airtable.com/v0/appNsAv2iE9mFm56N/Table%201?view=Approved&api_key=" ++ airtableApiKey)
+        )
+        (Decode.field "records"
+            (Decode.list
+                (Decode.field "fields"
+                    (Decode.map2 Company
+                        (Decode.field "Company Name" Decode.string)
+                        (Decode.field "Company Logo" (Decode.index 0 (Decode.field "url" Decode.string)))
+                    )
+                )
+            )
+        )
+
+
+view :
+    List ( PagePath Pages.PathKey, Metadata )
+    ->
+        { path : PagePath Pages.PathKey
+        , frontmatter : Metadata
+        }
+    ->
+        StaticHttp.Request
+            { view : Model -> View -> { title : String, body : Html Msg }
+            , head : List (Head.Tag Pages.PathKey)
+            }
+view siteMetadata page =
+    let
+        viewFn =
+            case page.frontmatter of
+                () ->
+                    StaticHttp.map3
+                        (\elmCompanies elmPagesStarterStars netlifyStars ->
+                            { view =
+                                \model viewForPage ->
+                                    { title = "Landing Page"
+                                    , body =
+                                        elmCompanies
+                                            |> List.map companyView
+                                            |> Html.div []
+                                    }
+                            , head = head page.frontmatter
+                            }
+                        )
+                        airtableRequest
+                        (StaticHttp.jsonRequest "https://api.github.com/repos/dillonkearns/elm-pages-starter"
+                            (Decode.field "stargazers_count" Decode.int)
+                        )
+                        (StaticHttp.jsonRequest "https://api.github.com/repos/dillonkearns/elm-markdown"
+                            (Decode.field "stargazers_count" Decode.int)
+                        )
+
+    in
+    viewFn
+
+
+wrapBody body =
+    body
+        |> Element.layout
+            [ Element.width Element.fill
+            , Font.size 20
+            , Font.family [ Font.typeface "Roboto" ]
+            , Font.color (Element.rgba255 0 0 0 0.8)
+            ]
+
+
+articleImageView : ImagePath Pages.PathKey -> Element msg
+articleImageView articleImage =
+    Element.image [ Element.width Element.fill ]
+        { src = ImagePath.toString articleImage
+        , description = "Article cover photo"
+        }
+
+
+header : PagePath Pages.PathKey -> Element msg
+header currentPath =
+    Element.column [ Element.width Element.fill ]
+        [ Element.el
+            [ Element.height (Element.px 4)
+            , Element.width Element.fill
+            , Element.Background.gradient
+                { angle = 0.2
+                , steps =
+                    [ Element.rgb255 0 242 96
+                    , Element.rgb255 5 117 230
+                    ]
+                }
+            ]
+            Element.none
+        , Element.row
+            [ Element.paddingXY 25 4
+            , Element.spaceEvenly
+            , Element.width Element.fill
+            , Element.Region.navigation
+            , Element.Border.widthEach { bottom = 1, left = 0, right = 0, top = 0 }
+            , Element.Border.color (Element.rgba255 40 80 40 0.4)
+            ]
+            [ Element.link []
+                { url = "/"
+                , label =
+                    Element.row
+                        [ Font.size 30
+                        , Element.spacing 16
+                        , Element.htmlAttribute (Attr.id "navbar-title")
+                        ]
+                        [ Element.text "elm-pages"
+                        ]
+                }
+            , Element.row [ Element.spacing 15 ]
+                [ elmDocsLink
+                , githubRepoLink
+                ]
+            ]
+        ]
+
+
+
+{-| <https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards>
+<https://htmlhead.dev>
+<https://html.spec.whatwg.org/multipage/semantics.html#standard-metadata-names>
+<https://ogp.me/>
+-}
+head : () -> List (Head.Tag Pages.PathKey)
+head () =
+            Seo.summaryLarge
+                { canonicalUrlOverride = Nothing
+                , siteName = "elm-pages"
+                , image =
+                    { url = images.iconPng
+                    , alt = "elm-pages logo"
+                    , dimensions = Nothing
+                    , mimeType = Nothing
+                    }
+                , description = siteTagline
+                , locale = Nothing
+                , title = "External Data Example"
+                }
+                |> Seo.website
+
+
+canonicalSiteUrl : String
+canonicalSiteUrl =
+    "https://elm-pages.com"
+
+
+siteTagline : String
+siteTagline =
+    "A statically typed site generator - elm-pages"
+
+
+
+
+
+
+githubRepoLink : Element msg
+githubRepoLink =
+    Element.newTabLink []
+        { url = "https://github.com/dillonkearns/elm-pages"
+        , label =
+            Element.image
+                [ Element.width (Element.px 22)
+                , Font.color Palette.color.primary
+                ]
+                { src = ImagePath.toString Pages.images.github, description = "Github repo" }
+        }
+
+
+elmDocsLink : Element msg
+elmDocsLink =
+    Element.newTabLink []
+        { url = "https://package.elm-lang.org/packages/dillonkearns/elm-pages/latest/"
+        , label =
+            Element.image
+                [ Element.width (Element.px 22)
+                , Font.color Palette.color.primary
+                ]
+                { src = ImagePath.toString Pages.images.elmLogo, description = "Elm Package Docs" }
+        }

examples/external-data/src/Palette.elm

@@ -0,0 +1,44 @@
+module Palette exposing (blogHeading, color, heading)
+
+import Element exposing (Element)
+import Element.Font as Font
+import Element.Region
+
+
+color =
+    { primary = Element.rgb255 5 117 230
+    , secondary = Element.rgb255 0 242 96
+    }
+
+
+heading : Int -> List (Element msg) -> Element msg
+heading level content =
+    Element.paragraph
+        ([ Font.bold
+         , Font.family [ Font.typeface "Montserrat" ]
+         , Element.Region.heading level
+         ]
+            ++ (case level of
+                    1 ->
+                        [ Font.size 36 ]
+
+                    2 ->
+                        [ Font.size 24 ]
+
+                    _ ->
+                        [ Font.size 20 ]
+               )
+        )
+        content
+
+
+blogHeading : String -> Element msg
+blogHeading title =
+    Element.paragraph
+        [ Font.bold
+        , Font.family [ Font.typeface "Montserrat" ]
+        , Element.Region.heading 1
+        , Font.size 36
+        , Font.center
+        ]
+        [ Element.text title ]

examples/external-data/style.css

@@ -0,0 +1,13 @@
+@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto&display=swap");
+
+.avatar img {
+  border-radius: 50%;
+}
+@media all and (max-width: 600px) {
+  #navbar-title {
+    font-size: 20px !important;
+  }
+  #navbar-title svg {
+    width: 20px;
+  }
+}