add markdown loader

Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>

elm.json

@@ -9,10 +9,14 @@
             "elm/browser": "1.0.2",
             "elm/core": "1.0.5",
             "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": {
+            "elm/bytes": "1.0.8",
+            "elm/file": "1.0.5",
             "elm/json": "1.1.3",
             "elm/parser": "1.1.0",
             "elm/time": "1.0.0",

public/index.html

@@ -7,8 +7,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/website/post-style.css">
     <link rel="stylesheet" href="/website/foo-style.css">
-    <link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
+    <!-- <link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
-    crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'" />
+        crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'" /> -->
+    <link rel="stylesheet"
+        href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/github-dark.min.css">
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/highlight.min.js"></script>
     <title>Document</title>
     <script src="/website/redirect.js"></script>
 </head>
@@ -17,52 +20,32 @@
     <div id="app"></div>
 
     <script src="/website/app.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
+    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script> -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.7/clipboard.min.js"
+    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.7/clipboard.min.js"
-        crossorigin="anonymous"></script>
+        crossorigin="anonymous"></script> -->
     <script>
         var app = Elm.Main.init({ node: document.getElementById("app") });
 
-        $(function () {
+        // $(function () {
-            // copy-btn HTML
+        //     // copy-btn HTML
-            var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"Copy to clipboard!\">";
+        //     var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"Copy to clipboard!\">";
-            btn += '<i class="far fa-clone"></i>';
+        //     btn += '<i class="far fa-clone"></i>';
-            btn += '</span>';
+        //     btn += '</span>';
-            // mount it!
+        //     // mount it!
-            $(".highlight table").before(btn);
+        //     $(".highlight table").before(btn);
-            var clip = new ClipboardJS('.btn-copy', {
+        //     var clip = new ClipboardJS('.btn-copy', {
-                text: function (trigger) {
+        //         text: function (trigger) {
-                    return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str, it) => str + it.innerText + '\n', '')
+        //             return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str, it) => str + it.innerText + '\n', '')
-                }
+        //         }
-            });
+        //     });
-            clip.on('success', function (e) {
+        //     clip.on('success', function (e) {
-                e.trigger.setAttribute('aria-label', "Copied!");
+        //         e.trigger.setAttribute('aria-label', "Copied!");
-                e.clearSelection();
+        //         e.clearSelection();
-            })
+        //     })
-        });
+        // });
     </script>
 
 
-
-     <!-- <script type="text/javascript">
-        $(function () {
-            // copy-btn HTML
-            var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"Copy to clipboard!\">";
-            btn += '<i class="far fa-clone"></i>';
-            btn += '</span>';
-            // mount it!
-            $(".highlight table").before(btn);
-            var clip = new ClipboardJS('.btn-copy', {
-                text: function (trigger) {
-                    return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str, it) => str + it.innerText + '\n', '')
-                }
-            });
-            clip.on('success', function (e) {
-                e.trigger.setAttribute('aria-label', "Copied!");
-                e.clearSelection();
-            })
-        })
-    </script> -->
 </body>
 
 </html>

src/Blog.elm

@@ -1,9 +1,13 @@
 module Blog exposing (..)
 
 import Html exposing (..)
-import Html.Attributes exposing (class)
+import Html.Attributes exposing (class, placeholder, value)
+import Html.Events exposing (onClick, onInput)
 import Html.Parser
 import Html.Parser.Util
+import Http exposing (Error(..))
+import Markdown exposing (defaultOptions)
+import Url exposing (Protocol(..))
 
 
 
@@ -12,6 +16,9 @@ import Html.Parser.Util
 
 type alias Model =
     { blog : Blog
+    , markDownUrl : String
+    , markDown : String
+    , success : Bool
     }
 
 
@@ -30,18 +37,37 @@ type alias Blog =
     }
 
 
-view : Model -> Html msg
+view : Model -> Html Msg
 view model =
     div [ class "foo-interface" ]
-        [ div [ class "max-width mx-auto px3 ltr" ]
+        [ div [ class "foo-console foo-terminal foo-active" ]
-            [ div [ class "content index py4" ]
+            [ div [ class "max-width mx-auto px3 ltr" ]
-                (textToHtml postString)
+                [ 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
+
+                      else
+                        div [ class "foo-error" ] [ text model.markDown ]
+                    ]
+                ]
             ]
         ]
 
 
 type Msg
-    = Nothing
+    = GetMarkdown
+    | StoreInput String
+    | DataReceived (Result Http.Error String)
 
 
 init : () -> ( Model, Cmd Msg )
@@ -51,10 +77,13 @@ init _ =
             , url = "my-first-blog-post"
             , description = "This is my first blog post"
             , content = "This is the content of my first blog post"
-            , category = "blog"
+            , category = "category"
             , tags = [ "elm", "blog" ]
             , date = "2018-01-01"
             }
+      , markDownUrl = ""
+      , markDown = ""
+      , success = True
       }
     , Cmd.none
     )
@@ -63,8 +92,42 @@ init _ =
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case msg of
-        Nothing ->
+        GetMarkdown ->
-            ( model, Cmd.none )
+            ( model, Http.get { url = model.markDownUrl, expect = Http.expectString DataReceived } )
+
+        DataReceived (Ok data) ->
+            ( { model | markDown = data, success = True }, Cmd.none )
+
+        DataReceived (Err err) ->
+            ( { model | success = False, markDown = errorToString err }, Cmd.none )
+
+        StoreInput input ->
+            ( { model | markDownUrl = input }, Cmd.none )
+
+
+errorToString : Http.Error -> String
+errorToString error =
+    case error of
+        BadUrl url ->
+            "The URL " ++ url ++ " was invalid"
+
+        Timeout ->
+            "Unable to reach the server, try again"
+
+        NetworkError ->
+            "Unable to reach the server, check your network connection"
+
+        BadStatus 500 ->
+            "The server had a problem, try again later"
+
+        BadStatus 400 ->
+            "Verify your information and try again"
+
+        BadStatus _ ->
+            "Unknown error"
+
+        BadBody errorMessage ->
+            errorMessage
 
 
 textToHtml : String -> List (Html.Html msg)
@@ -77,124 +140,11 @@ textToHtml text =
             []
 
 
-testString : String
+markdownToHtml : Model -> Html Msg
-testString =
+markdownToHtml model =
-    """
+    Markdown.toHtmlWith
-    <div id="header">
+        { defaultOptions
-    <a href="/">
+            | githubFlavored = Just { tables = True, breaks = False }
-        <div id="logo" style="background-image: url(/images/logo.png);"></div>
+        }
-        <div id="title">
+        []
-            <h1>Hexo</h1>
+        model.markDown
-        </div>
-    </a>
-    <div id="nav">
-        <ul>
-            <li class="icon">
-                <a href="#" aria-label="Menu"><i class="fas fa-bars fa-2x"></i></a>
-            </li>
-            <li><a href="/">Home</a></li>
-            <li><a href="/about/">About</a></li>
-            <li><a href="/archives/">Writing</a></li>
-            <li><a target="_blank" rel="noopener" href="http://github.com/probberechts">Projects</a></li>
-        </ul>
-    </div>
-    </div>
-    <section id="about">
-        <p>
-            Find me on
-            <a class="icon" target="_blank" rel="noopener" href="http://github.com/probberechts/cactus-dark"
-                aria-label="github">
-                <i class="fab fa-github"></i>
-            </a>
-            <a class="icon" target="_blank" rel="noopener" href="/" aria-label="twitter">
-                <i class="fab fa-twitter"></i>
-            </a>
-            <a class="icon" target="_blank" rel="noopener" href="/" aria-label="facebook">
-                <i class="fab fa-facebook"></i>
-            </a>
-            <a class="icon" target="_blank" rel="noopener" href="/" aria-label="linkedin">
-                <i class="fab fa-linkedin"></i>
-            </a>and
-            <a class="icon" target="_blank" rel="noopener" href="mailto:name@email.com" aria-label="mail">
-                <i class="fas fa-envelope"></i>
-            </a>
-        </p>
-    </section>
-    <section id="writing">
-        <span class="h1"><a href="/archives/">Writing</a></span>
-        <ul class="post-list">
-            <li class="post-item">
-                <div class="meta">
-                    <time datetime="2022-09-15T17:21:59.000Z" itemprop="datePublished">2022-09-15</time>
-                </div>
-                <span>
-                    <a class="" href="/posts/techtest/hey-world">Hello</a>
-                </span>
-            </li>
-            <li class="post-item">
-                <div class="meta">
-                    <time datetime="2022-09-05T17:21:59.000Z" itemprop="datePublished">2022-09-05</time>
-                </div>
-                <span>
-                    <a class="" href="/posts/tech/hello-world">Hello World</a>
-                </span>
-            </li>
-        </ul>
-    </section>
-    """
-
-
-postString : String
-postString =
-    """
-            <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
-  <div>
-    
-    <h1 class="posttitle" itemprop="name headline">
-        Hello World
-    </h1>
-
-
-
-    <div class="meta">
-      <span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
-        <span itemprop="name"></span>
-      </span>
-      
-    <div class="postdate">
-      
-        <time datetime="2016-11-14T12:19:32.000Z" itemprop="datePublished">2016-11-14</time>
-        
-      
-    </div>
-
-
-      
-    <div class="article-category">
-        <i class="fas fa-archive"></i>
-        <a class="category-link" href="/categories/tech/">tech<span class="category-count">2</span></a>
-    </div>
-
-
-      
-
-    </div>
-  </div>
-  
-
-  <div class="content" itemprop="articleBody">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at dolor a sem consequat facilisis ut et augue. Vestibulum vestibulum lectus erat, id tincidunt sapien laoreet non. Ut nec ante eu lorem posuere fringilla sit amet in tortor.</p>
-<h2 id="This-is-a-subtitle"><a href="#This-is-a-subtitle" class="headerlink" title="This is a subtitle"></a>This is a subtitle</h2><p>Quisque ac maximus ligula, sed sagittis est. Integer venenatis pellentesque elit. Donec molestie turpis sit amet sodales cursus. Sed at risus cursus, feugiat lacus sit amet, rutrum sem. Vestibulum accumsan dui urna, vel feugiat lectus malesuada id. Quisque in interdum turpis, et pulvinar tortor. Vivamus tincidunt purus eu libero viverra, at posuere dolor gravida.</p>
-<figure class="highlight python"><figcaption><span>Hello world</span><a target="_blank" rel="noopener" href="http://github.com">hello_world.py</a></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">print</span> <span class="string">&quot;Hello World!&quot;</span></span><br><span class="line">=&gt; <span class="string">&quot;Hello World!&quot;</span></span><br></pre></td></tr></table></figure>
-
-<h2 id="This-is-a-second-subtitle"><a href="#This-is-a-second-subtitle" class="headerlink" title="This is a second subtitle"></a>This is a second subtitle</h2><p>Donec venenatis eu nunc non accumsan. Etiam elementum dapibus urna, ac mattis tortor volutpat a. Pellentesque eu purus metus. Curabitur vel nulla ut odio congue vulputate. Morbi lacinia tellus sit amet facilisis dictum. Nullam a erat felis. Vestibulum nec diam ac nisi pharetra tincidunt. Ut vitae ullamcorper ipsum. Sed vehicula vehicula dolor. Quisque ac tortor a neque scelerisque venenatis.</p>
-<img src="/assets/wallpaper-878514.jpg" class="" title="Wallpaper">
-
-<blockquote class="pullquote right"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat.</p>
-</blockquote>
-
-<p>Mauris quis lorem id arcu lobortis finibus in quis mauris. Cras lacinia neque arcu, id viverra nunc pretium eget. Aenean eu luctus diam. Maecenas blandit eros in fermentum cursus. Pellentesque hendrerit ipsum orci, tempor facilisis est maximus at. Suspendisse potenti. Sed eleifend ullamcorper eleifend. Nullam tincidunt eget ex vitae blandit. Donec molestie iaculis elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas in suscipit ex. Integer molestie felis mi, in commodo dolor fermentum a. Cras blandit auctor enim, eu rhoncus turpis ullamcorper id.</p>
-
-  </div>
-</article>
-    """

src/Main.elm

@@ -4,7 +4,7 @@ import Blog as Blog
 import Browser exposing (Document)
 import Browser.Navigation as Nav
 import Html exposing (Html, a, div, footer, header, img, li, text, ul)
-import Html.Attributes exposing (class, href, src)
+import Html.Attributes exposing (class, href, src, target)
 import Html.Lazy exposing (lazy)
 import Splash as Splash
 import Static as Static
@@ -35,10 +35,10 @@ type alias Model =
 
 {-| Page designs
 
-    BlogPage: Page design for blogs
+    BlogPage:       Page design for blogs
-    TerminalPage: Page design for terminal
+    TerminalPage:   Page design for terminal
-    StaticPage: Page design for static pages
+    StaticPage:     Page design for static pages
-    NotFound: Page design for 404 page
+    NotFound:       Page design for 404 page
 
 -}
 type Page
@@ -106,7 +106,7 @@ viewHeader page =
 
                 _ ->
                     header [ class "foo-logo" ]
-                        [ img [ src "/website/logo-static.svg" ]
+                        [ img [ src "/website/logo-static.svg", target urlPrefix ]
                             []
                         ]
     in
@@ -220,12 +220,18 @@ type Route
     | Static
 
 
+
+-- | BlogPost String String
+
+
 parser : Parser (Route -> a) a
 parser =
     Parser.oneOf
         [ 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 Static (s urlPrefix </> s "pages")
         , Parser.map Terminal (s urlPrefix </> s "terminal")
         ]
@@ -242,6 +248,9 @@ updateUrl model =
             Blog.init ()
                 |> toBlog model
 
+        -- Just (BlogPost category slug) ->
+        --     Blog.init { category = category, slug = slug }
+        --         |> toBlog model
         Just Terminal ->
             Terminal.init ()
                 |> toTerminal model