From 19f7ce4d624e88c668178f5a5fcb1413e8561411 Mon Sep 17 00:00:00 2001 From: Jack Lenox Date: Wed, 1 Jul 2020 00:49:40 +0200 Subject: [PATCH] Update to work with Elm 0.19.1 Incorporates a number of API changes and better ways of doing things. --- README.md | 8 +-- elm-package.json | 21 -------- elm.json | 31 ++++++++++++ functions.php | 2 +- index.php | 3 +- src/Ulmus.elm | 124 ++++++++++++++++++++++++++--------------------- 6 files changed, 102 insertions(+), 87 deletions(-) delete mode 100644 elm-package.json create mode 100644 elm.json diff --git a/README.md b/README.md index 0f5dedb..892d4a4 100644 --- a/README.md +++ b/README.md @@ -19,13 +19,7 @@ npm install elm -g Once you've done that, clone this repo to your system. From within this directory, you run: ``` -elm package install -``` - -Say that yes, you agree to the plan. You can then compile the file to JavaScript with the following command: - -``` -elm-make src/Ulmus.elm --output ulmus.js +elm make src/Ulmus.elm --output ulmus.js ``` Once that's done, this will work like a normal theme. You just need to drag the whole directory into the `wp-content/themes` directory of a WordPress site, and activate the theme via `wp-admin`. diff --git a/elm-package.json b/elm-package.json deleted file mode 100644 index 4ca8a0b..0000000 --- a/elm-package.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "version": "1.0.0", - "summary": "helpful summary of your project, less than 80 characters", - "repository": "https://github.com/user/project.git", - "license": "BSD3", - "source-directories": [ - "src" - ], - "exposed-modules": [], - "native-modules": true, - "dependencies": { - "elm-lang/core": "5.0.0 <= v < 6.0.0", - "elm-lang/dom": "1.1.1 <= v < 2.0.0", - "elm-lang/html": "2.0.0 <= v < 3.0.0", - "elm-lang/http": "1.0.0 <= v < 2.0.0", - "elm-lang/navigation": "2.0.1 <= v < 3.0.0", - "evancz/elm-markdown": "3.0.1 <= v < 4.0.0", - "evancz/url-parser": "2.0.1 <= v < 3.0.0" - }, - "elm-version": "0.18.0 <= v < 0.19.0" -} diff --git a/elm.json b/elm.json new file mode 100644 index 0000000..58746f9 --- /dev/null +++ b/elm.json @@ -0,0 +1,31 @@ +{ + "type": "application", + "source-directories": [ + "src" + ], + "elm-version": "0.19.1", + "dependencies": { + "direct": { + "elm/browser": "1.0.2", + "elm/core": "1.0.5", + "elm/html": "1.0.0", + "elm/http": "2.0.0", + "elm/json": "1.1.3", + "elm/url": "1.0.0", + "elm-explorations/markdown": "1.0.0", + "hecrj/html-parser": "2.3.4" + }, + "indirect": { + "elm/bytes": "1.0.8", + "elm/file": "1.0.5", + "elm/parser": "1.1.0", + "elm/time": "1.0.0", + "elm/virtual-dom": "1.0.2", + "rtfeldman/elm-hex": "1.0.0" + } + }, + "test-dependencies": { + "direct": {}, + "indirect": {} + } +} diff --git a/functions.php b/functions.php index ffd190f..c5b3c56 100644 --- a/functions.php +++ b/functions.php @@ -52,6 +52,6 @@ function ulmus_setup() { function ulmus_scripts() { wp_enqueue_style( 'ulmus-style', get_stylesheet_uri() ); - wp_enqueue_script( 'ulmus-theme', get_template_directory_uri() . '/ulmus.js', array(), '20170118', true ); + wp_enqueue_script( 'ulmus-theme', get_template_directory_uri() . '/ulmus.js', array(), '20200630', true ); } add_action( 'wp_enqueue_scripts', 'ulmus_scripts' ); diff --git a/index.php b/index.php index 782bd0d..eef11e8 100644 --- a/index.php +++ b/index.php @@ -28,8 +28,7 @@ diff --git a/src/Ulmus.elm b/src/Ulmus.elm index 100273d..72b5e98 100644 --- a/src/Ulmus.elm +++ b/src/Ulmus.elm @@ -1,20 +1,22 @@ port module Ulmus exposing (..) -import Dom.Scroll exposing (toTop) +import Browser exposing (Document, UrlRequest(..)) +import Browser.Navigation as Nav import Html exposing (..) import Html.Attributes exposing (..) -import Html.Events exposing (onClick, onWithOptions) +import Html.Parser +import Html.Parser.Util import Http import Json.Decode as Decode exposing (Decoder, field, at, succeed) -import Markdown -import Navigation -import UrlParser as Url exposing((), (), s, int, string, stringParam, top) +import Url exposing (Url) +import Url.Parser as UrlParser exposing((), (), s, int, string, top) -- MODEL type alias Model = - { route : Route + { key : Nav.Key + , path : Route , history : List (Maybe Route) , posts : List Post , havePosts : Bool @@ -32,22 +34,23 @@ type alias Post = } -initialModel : Route -> Model -initialModel route = - { route = route +initialModel : Nav.Key -> Route -> Model +initialModel key path = + { key = key + , path = path , history = [] , posts = [] , havePosts = False , apiUrl = "" } -init : Navigation.Location -> ( Model, Cmd Msg ) -init location = +init : () -> Url -> Nav.Key -> ( Model, Cmd Msg ) +init _ url key = let currentRoute = - parseLocation location + parseLocation url in - ( initialModel currentRoute, Cmd.none ) + ( initialModel key currentRoute, Cmd.none ) -- URL PARSING @@ -62,24 +65,24 @@ type Route type alias PostRoute = { year : Int, month : Int, day : Int, slug : String } -rawPost : Url.Parser (Int -> Int -> Int -> String -> slug) slug +rawPost : UrlParser.Parser (Int -> Int -> Int -> String -> slug) slug rawPost = int int int string -route : Url.Parser (Route -> a) a +route : UrlParser.Parser (Route -> a) a route = - Url.oneOf - [ Url.map Home top - , Url.map BlogPost rawPost + UrlParser.oneOf + [ UrlParser.map Home top + , UrlParser.map BlogPost rawPost ] -parseLocation : Navigation.Location -> Route +parseLocation : Url -> Route parseLocation location = - case (Url.parsePath route location) of - Just route -> - route + case (UrlParser.parse route location) of + Just path -> + path Nothing -> NotFoundRoute @@ -91,8 +94,8 @@ parseLocation location = type Msg = GetPosts (Result Http.Error (List Post)) | ApiUrl (String) - | NewUrl String - | UrlChange Navigation.Location + | ClickLink UrlRequest + | UrlChange Url | NoOp @@ -103,25 +106,24 @@ update msg model = ( { model | posts = latestPosts, havePosts = True }, Cmd.none ) GetPosts (Err error) -> - let - _ = Debug.log "Oops!" error - in - (model, Cmd.none) + (model, Cmd.none) ApiUrl newApiUrl -> ( { model | apiUrl = newApiUrl }, getPosts newApiUrl) - NewUrl url -> - ( model - , Navigation.newUrl url - ) + ClickLink urlRequest -> + case urlRequest of + Internal url -> + ( model, Nav.pushUrl model.key <| Url.toString url ) + External url -> + ( model, Nav.load url ) UrlChange location -> let newRoute = parseLocation location in - ( { model | route = newRoute }, Cmd.none ) + ( { model | path = newRoute }, Cmd.none ) NoOp -> ( model, Cmd.none ) @@ -143,15 +145,11 @@ postDecoder = -- COMMANDS getPosts : String -> Cmd Msg -getPosts apiUrl = - (Decode.list postDecoder) - |> Http.get (apiUrl ++ "posts") - |> Http.send GetPosts - - -onPrevDefClick : msg -> Attribute msg -onPrevDefClick message = - onWithOptions "click" { stopPropagation = True, preventDefault = True } (Decode.succeed message) +getPosts getApiUrl = + Http.get + { url = getApiUrl ++ "posts" + , expect = Http.expectJson GetPosts (Decode.list postDecoder) + } -- SUBSCRIPTIONS @@ -165,25 +163,29 @@ subscriptions model = -- VIEW -view : Model -> Html Msg +view : Model -> Document Msg view model = - div [ id "page", class "site" ] - [ div [ class "content" ] - [ header [ id "masthead", class "site-header" ] - [ div [ class "site-branding" ] - [ h1 [ class "site-title" ] [ - a [ href "/", onPrevDefClick (NewUrl "/") ] - [ text "WordPress ♥ Elm ♥ REST API" ] + { title = "WordPress ♥ Elm ♥ REST API" + , body = + [ div [ id "page", class "site" ] + [ div [ class "content" ] + [ header [ id "masthead", class "site-header" ] + [ div [ class "site-branding" ] + [ h1 [ class "site-title" ] [ + a [ href "/" ] + [ text "WordPress ♥ Elm ♥ REST API" ] + ] ] ] + , page model ] - , page model ] ] + } page : Model -> Html Msg page model = - case model.route of + case model.path of Home -> viewPostList model.posts @@ -221,13 +223,21 @@ viewSinglePost model slug = viewPost : Post -> Html Msg viewPost post = + let + nodes = + case Html.Parser.run post.content of + Ok parsedNodes -> + Html.Parser.Util.toVirtualDom parsedNodes + _ -> + [] + in section [ class "post" ] [ h2 [] [ - a [ href post.link, onPrevDefClick (NewUrl post.link) ] + a [ href post.link ] [ text post.title ] ] , article [ class "content"] - [ Markdown.toHtml [] post.content ] + nodes ] @@ -237,11 +247,13 @@ viewNotFound = [ text "Not found" ] -main : Program Never Model Msg +main : Program () Model Msg main = - Navigation.program UrlChange + Browser.application { init = init , view = view , update = update , subscriptions = subscriptions + , onUrlRequest = ClickLink + , onUrlChange = UrlChange }