diff --git a/elm.json b/elm.json index 0d5f54e..44ef8de 100644 --- a/elm.json +++ b/elm.json @@ -11,7 +11,6 @@ "elm/html": "1.0.0", "elm/http": "2.0.0", "elm/url": "1.0.0", - "elm-explorations/markdown": "1.0.0", "hecrj/html-parser": "2.4.0" }, "indirect": { @@ -28,4 +27,4 @@ "direct": {}, "indirect": {} } -} +} \ No newline at end of file diff --git a/src/Base.elm b/src/Base.elm new file mode 100644 index 0000000..cc89b31 --- /dev/null +++ b/src/Base.elm @@ -0,0 +1,5 @@ +module Base exposing (urlPrefix) + +urlPrefix : String +urlPrefix = + "website" \ No newline at end of file diff --git a/src/Blog.elm b/src/Blog.elm index 49ea5c9..4348016 100644 --- a/src/Blog.elm +++ b/src/Blog.elm @@ -1,12 +1,11 @@ -module Blog exposing (..) +port module Blog exposing (..) +import Base exposing (urlPrefix) import Html exposing (..) -import Html.Attributes exposing (class, placeholder, value) -import Html.Events exposing (onClick, onInput) +import Html.Attributes exposing (class, href, id, style) import Html.Parser import Html.Parser.Util import Http exposing (Error(..)) -import Markdown exposing (defaultOptions) import Url exposing (Protocol(..)) @@ -37,27 +36,77 @@ type alias Blog = } + +-- PORT + + +port sendString : String -> Cmd msg + + view : Model -> Html Msg view model = div [ class "foo-interface" ] [ div [ class "foo-console foo-terminal foo-active" ] - [ div [ class "max-width mx-auto px3 ltr" ] - [ div - [ class "foo-term-story" ] - [ input - [ placeholder "Enter URL to a markdown file" - , value model.markDownUrl - , onInput StoreInput - ] - [] - , button [ onClick GetMarkdown ] [ text "Get Markdown" ] - ] - , div [ class "content index py4" ] - [ if model.success then - markdownToHtml model + [ div [ class "main-wrapper" ] + [ viewToc model.success + , main_ [ class "main-content", id "content" ] + [ viewArticle ] + ] + ] + ] - else - div [ class "foo-error" ] [ text model.markDown ] + +viewToc : Bool -> Html Msg +viewToc show = + if show then + div + [ class "toc" + , style "display" + (if show then + "block" + + else + "none" + ) + ] + [ aside [ class "document-toc-container" ] + [ section [ class "document-toc" ] + [ h2 [ class "document-toc-heading" ] [ text "In this page" ] + , ul + [ class "document-toc-list", id "toc-entries" ] + [] + ] + ] + ] + + else + div [] [] + + +viewArticle : Html Msg +viewArticle = + article + [ class "main-page-content" ] + [ div [ id "insert-here" ] [] + , viewMetadata + ] + + +viewMetadata : Html Msg +viewMetadata = + aside [ class "metadata" ] + [ div [ class "metadata-content-container" ] + [ div [ class "on-github" ] + [ h3 [] [ text "Found a problem" ] + , ul [] + [ li [] + [ a [ href "https://github.com/avinal" ] + [ text "open an issue" ] + ] + , li [] + [ a [ href "https://avinal.space" ] + [ text "Website" ] + ] ] ] ] @@ -66,29 +115,58 @@ view model = type Msg = GetMarkdown - | StoreInput String | DataReceived (Result Http.Error String) -init : () -> ( Model, Cmd Msg ) -init _ = - ( { blog = - { title = "My First Blog Post" - , url = "my-first-blog-post" - , description = "This is my first blog post" - , content = "This is the content of my first blog post" - , category = "category" - , tags = [ "elm", "blog" ] - , date = "2018-01-01" - } - , markDownUrl = "" +init : Maybe String -> ( Model, Cmd Msg ) +init slug = + ( { blog = initBlog + , markDownUrl = finalUrl slug , markDown = "" - , success = True + , success = False } - , Cmd.none + , getMarkdown <| finalUrl slug ) +getMarkdown : String -> Cmd Msg +getMarkdown url = + Http.get + { url = url + , expect = Http.expectString DataReceived + } + + +finalUrl : Maybe String -> String +finalUrl slug = + let + resolvedSlug = + Maybe.withDefault "error" slug + in + case resolvedSlug of + "error" -> + "https://raw.githubusercontent.com/avinal/avinal.space/content/posts/error.md" + + _ -> + "https://raw.githubusercontent.com/avinal/" + ++ urlPrefix + ++ "/content/posts/" + ++ resolvedSlug + ++ ".md" + + +initBlog : Blog +initBlog = + { title = "" + , url = "" + , description = "" + , content = "" + , category = "" + , tags = [] + , date = "" + } + + update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of @@ -96,14 +174,11 @@ update msg model = ( model, Http.get { url = model.markDownUrl, expect = Http.expectString DataReceived } ) DataReceived (Ok data) -> - ( { model | markDown = data, success = True }, Cmd.none ) + ( { model | markDown = data, success = True }, sendString data ) DataReceived (Err err) -> ( { model | success = False, markDown = errorToString err }, Cmd.none ) - StoreInput input -> - ( { model | markDownUrl = input }, Cmd.none ) - errorToString : Http.Error -> String errorToString error = @@ -140,11 +215,26 @@ textToHtml text = [] -markdownToHtml : Model -> Html Msg -markdownToHtml model = - Markdown.toHtmlWith - { defaultOptions - | githubFlavored = Just { tables = True, breaks = False } - } - [] - model.markDown + +-- main : Program (String, String) Model Msg +-- main = +-- Browser.element +-- { init = init +-- , view = view +-- , update = update +-- , subscriptions = \_ -> Sub.none +-- } +-- div +-- [ class "foo-term-story section-content" ] +-- [ input +-- [ placeholder "Enter URL to a markdown file" +-- , value model.markDownUrl +-- , onInput StoreInput +-- ] +-- [] +-- , button [ class "button secondary", onClick GetMarkdown ] [ text "Get Markdown" ] +-- , if model.success then +-- div [] [] +-- else +-- div [ class "foo-error" ] [ text model.markDown ] +-- ] diff --git a/src/Main.elm b/src/Main.elm index fc7e5e3..2699697 100644 --- a/src/Main.elm +++ b/src/Main.elm @@ -1,5 +1,6 @@ module Main exposing (main) +import Base exposing (urlPrefix) import Blog as Blog import Browser exposing (Document) import Browser.Navigation as Nav @@ -80,9 +81,11 @@ view model = in { title = model.title , body = - [ lazy viewHeader model.page - , content - , lazy viewFooter model.page + [ div [ class "foo-content" ] + [ lazy viewHeader model.page + , content + , lazy viewFooter model.page + ] ] } @@ -218,6 +221,7 @@ type Route | Blog | Terminal | Static + | BlogPost String String @@ -230,8 +234,7 @@ parser = [ Parser.map Splash Parser.top , Parser.map Splash (s urlPrefix) , Parser.map Blog (s urlPrefix s "posts") - - -- , Parser.map BlogPost (s urlPrefix s "posts" Parser.string Parser.string) + , Parser.map BlogPost (s urlPrefix s "posts" Parser.string Parser.string) , Parser.map Static (s urlPrefix s "pages") , Parser.map Terminal (s urlPrefix s "terminal") ] @@ -245,12 +248,13 @@ updateUrl model = |> toSplash model Just Blog -> - Blog.init () + Blog.init Nothing + |> toBlog model + + Just (BlogPost category slug) -> + Blog.init (Just (category ++ slug)) |> toBlog model - -- Just (BlogPost category slug) -> - -- Blog.init { category = category, slug = slug } - -- |> toBlog model Just Terminal -> Terminal.init () |> toTerminal model @@ -278,12 +282,3 @@ main = , onUrlChange = ChangeUrl , onUrlRequest = ClickedLink } - - - --- URLPREFIX - - -urlPrefix : String -urlPrefix = - "website"