Merge remote-tracking branch 'origin/main'

Readme.md

@@ -0,0 +1,49 @@
+# Markdown editor in Elm by GitHub Copilot
+
+I have done this almost solely by chatting with GitHub Copilot.
+
+Demo is here: [https://elm-vite-test.vercel.app/](https://elm-vite-test.vercel.app/)
+
+## Starting point
+
+I started by from a template for Vite and Elm https://github.com/lindsaykwardell/vite-elm-template.
+
+## Initial prompt
+
+The initial prompt was as follows:
+
+```
+Create a basic markdown editor in Elm with the following features:
+
+* Create model for markdown with default text "type markdown here"
+* A text area where users can write markdown
+* Show a live preview of the markdown text as I type
+* Support for basic markdown syntax like headers, bold, italics
+* The markdown text and resulting HTML should be saved in the model.
+```
+
+## Further conversation
+
+The conversation was then about which Elm package I needed to install and how to use VSCode, which I was slightly rusty
+at.
+
+I asked for more features once I had tried the initial version. Copilot wrote code to interact with JavaScript to access
+local storage.
+Something I've done many times but still Copilot was easier to use.
+
+At one point I asked for a slightly different style in the code when it comes to update and side effects. No problem
+there to get a changed version.
+
+Of course, I also got help with the CSS.
+
+## Deployment
+
+I knew already how to deploy to Vercel. So that was a matter of connecting the repository to my Vercel account. Vercel
+has support for Vite.
+
+## Conclusion
+
+GitHub Copilot did the job well, as expected, even in Elm, a language not so widespread as JavaScript.
+
+An interesting effect on my own thinking was that I started to think more about what I wanted and not how it should be
+accomplished. 

elm.json

@@ -9,11 +9,12 @@
             "elm/browser": "1.0.2",
             "elm/core": "1.0.5",
             "elm/html": "1.0.0",
+            "elm/time": "1.0.0",
+            "elm-explorations/markdown": "1.0.0",
             "hmsk/elm-vite-plugin-helper": "1.0.1"
         },
         "indirect": {
             "elm/json": "1.1.3",
-            "elm/time": "1.0.0",
             "elm/url": "1.0.0",
             "elm/virtual-dom": "1.0.3"
         }

main.js

@@ -10,4 +10,22 @@ if (process.env.NODE_ENV === "development") {
 }
 
 const root = document.querySelector("#app div");
-const app = Elm.Main.init({ node: root });
+const savedMarkdown = localStorage.getItem('markdown') || 'type markdown here';
+const app = Elm.Main.init({ node: root, flags: savedMarkdown });
+
+app.ports.downloadMarkdown.subscribe(function(markdown) {
+    var element = document.createElement('a');
+    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(markdown));
+    element.setAttribute('download', 'markdown.md');
+
+    element.style.display = 'none';
+    document.body.appendChild(element);
+
+    element.click();
+
+    document.body.removeChild(element);
+});
+
+app.ports.saveMarkdown.subscribe(function(markdown) {
+    localStorage.setItem('markdown', markdown);
+});

src/Main.elm

@@ -1,31 +1,93 @@
-module Main exposing (main)
+port module Main exposing (Model, Msg, main)
 
 import Browser
-import HelloWorld exposing (helloWorld)
-import Html exposing (Html, div, img)
-import Html.Attributes exposing (src, style)
-import Msg exposing (Msg(..))
-import VitePluginHelper
+import Html exposing (Html, button, div, h1, img, p, text, textarea)
+import Html.Attributes exposing (class, height, src, style, value)
+import Html.Events exposing (onClick, onInput)
+import Markdown
+import Time
+import VitePluginHelper exposing (asset)
 
 
-main : Program () Int Msg
-main =
-    Browser.sandbox { init = 0, update = update, view = view }
+type alias Model =
+    { markdown : String
+    , html : Html Msg
+    }
+
+
+init : String -> ( Model, Cmd Msg )
+init savedMarkdown =
+    let
+        markdown : String
+        markdown =
+            if savedMarkdown == "" then
+                "type markdown here"
+
+            else
+                savedMarkdown
+    in
+    ( { markdown = markdown
+      , html = Markdown.toHtml [] markdown
+      }
+    , Cmd.none
+    )
 
 
-update : Msg -> number -> number
+type Msg
+    = MarkdownChanged String
+    | DownloadMarkdown
+    | Tick
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case msg of
-        Increment ->
-            model + 1
+        MarkdownChanged newMarkdown ->
+            ( { model | markdown = newMarkdown, html = Markdown.toHtml [] newMarkdown }, Cmd.none )
 
-        Decrement ->
-            model - 1
+        DownloadMarkdown ->
+            ( model, downloadMarkdown model.markdown )
 
+        Tick ->
+            ( model, saveMarkdown model.markdown )
 
-view : Int -> Html Msg
+
+view : Model -> Html Msg
 view model =
     div []
-        [ img [ src <| VitePluginHelper.asset "/src/assets/logotype.png", style "width" "300px" ] []
-        , helloWorld model
+        [ img [ src <| asset "/src/assets/logotype.png", height 50 ] []
+        , h1 [] [ text "Markdown Editor" ]
+        , p [] [ text "This is a simple markdown editor. It will save your markdown every 30 seconds locally in your browser. You can download the markdown by pressing the download button." ]
+        , div []
+            [ textarea
+                [ style "width" "100%"
+                , style "height" "50vh"
+                , value model.markdown
+                , onInput MarkdownChanged
+                ]
+                []
+            , button [ onClick DownloadMarkdown ] [ text "Download Markdown" ]
+            , div [ class "markdown-output" ] [ model.html ]
+            ]
         ]
+
+
+port downloadMarkdown : String -> Cmd msg
+
+
+port saveMarkdown : String -> Cmd msg
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Time.every 30000 (\_ -> Tick)
+
+
+main : Program String Model Msg
+main =
+    Browser.element
+        { init = init
+        , update = update
+        , view = view
+        , subscriptions = subscriptions
+        }

style.css

@@ -2,7 +2,6 @@
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    text-align: center;
     color: #2c3e50;
     margin: 0 auto;
     margin-top: 60px;
@@ -12,6 +11,27 @@ a {
     color: #60b5cc;
 }
 
+.markdown-output {
+    /* CSS properties for the div itself */
+    width: 100%;
+    padding: 10px;
+}
+
+.markdown-output h1,
+.markdown-output h2,
+.markdown-output h3,
+.markdown-output h4,
+.markdown-output h5,
+.markdown-output h6 {
+    /* CSS properties for headings */
+    color: blue;
+}
+
+.markdown-output p {
+    /* CSS properties for paragraphs */
+    line-height: 1.5;
+}
+
 button {
     background-color: #60b5cc; /* Blå bakgrundsfärg */
     color: white; /* Vit text */