From b827a4b0f91a34b83675ac4ee18e10b85d2eff7a Mon Sep 17 00:00:00 2001 From: Avinal Kumar Date: Tue, 24 Jan 2023 16:43:32 +0530 Subject: [PATCH] cleanup and minor fixes Signed-off-by: Avinal Kumar --- src/Layouts/Blog.elm | 2 +- src/Pages/Posts.elm | 6 +----- src/Pages/Posts/ALL_.elm | 21 ++++++++------------- src/Utils/Constants.elm | 20 -------------------- src/Utils/Utils.elm | 6 +++--- src/web-components/MarkedRender.js | 11 ++++++----- 6 files changed, 19 insertions(+), 47 deletions(-) diff --git a/src/Layouts/Blog.elm b/src/Layouts/Blog.elm index 7cb58ef..e9804bc 100644 --- a/src/Layouts/Blog.elm +++ b/src/Layouts/Blog.elm @@ -65,7 +65,7 @@ subscriptions model = blogTheme : String blogTheme = - "mt-4 prose prose-invert mx-auto lg:prose-lg prose-a:decoration-cyan-500 hover:prose-a:decoration-pink-500" + "mt-4 prose prose-invert mx-auto lg:prose-lg prose-a:decoration-cyan-500 hover:prose-a:decoration-pink-500 prose-img:float-right" view : { fromMsg : Msg -> mainMsg, content : View mainMsg, model : Model } -> View mainMsg diff --git a/src/Pages/Posts.elm b/src/Pages/Posts.elm index 899ca12..b474743 100644 --- a/src/Pages/Posts.elm +++ b/src/Pages/Posts.elm @@ -50,7 +50,7 @@ init () = cmd : Cmd Msg cmd = Http.get - { url = "https://avinal.space/content/posts/posts.json" + { url = "/content/posts/posts.json" , expect = Http.expectJson BloglistReceived (Json.list jsonMetaDecoder) } in @@ -94,10 +94,6 @@ subscriptions model = -- VIEW -unsplash = - "https://source.unsplash.com/random/" - - view : Model -> View Msg view model = let diff --git a/src/Pages/Posts/ALL_.elm b/src/Pages/Posts/ALL_.elm index 94c522f..0cbae23 100644 --- a/src/Pages/Posts/ALL_.elm +++ b/src/Pages/Posts/ALL_.elm @@ -63,7 +63,6 @@ init : Route { first_ : String, rest_ : List String } -> () -> ( Model, Effect M init route () = let requestUrl = - -- "https://gist.githubusercontent.com/avinal/a66c60362491498d114b53e8801632d6/raw/cd2fd3816f0f005fe12ebfeead8d8b1fcaafa5db/markdowntest.md" UU.contentUrl { category = route.params.first_ , post = @@ -80,7 +79,7 @@ init route () = ( { blog = Nothing , requestUrl = requestUrl , success = False - , fragment = "" + , fragment = Maybe.withDefault "" route.hash , error = Nothing } , Effect.sendCmd cmd @@ -93,7 +92,6 @@ init route () = type Msg = RawMarkdownReceived (Result Http.Error String) - | AttributeUpdate String update : Msg -> Model -> ( Model, Effect Msg ) @@ -110,9 +108,6 @@ update msg model = RawMarkdownReceived (Err err) -> ( { model | success = False, error = Just (UU.errorToString err) }, Effect.none ) - AttributeUpdate data -> - ( model, Effect.none ) - -- SUBSCRIPTIONS @@ -138,7 +133,7 @@ view model = , src blog.meta.image ] [] - , articleNode blog.content + , articleNode blog.content model.fragment , Html.div [ class "text-center text-neutral-300 border-t border-dashed border-teal-500 p-2" ] [ Html.text <| "Published on " ++ blog.meta.date ++ " under " , Html.a [ href "https://www.mozilla.org/en-US/MPL/2.0/" ] [ Html.text "Mozilla Public License 2.0" ] @@ -226,10 +221,10 @@ view model = errorView : String -> Html msg errorView error = Html.div - [ class "flex items-center rounded shadow-md overflow-hidden max-w-xl relative dark:bg-neutral-900 dark:text-gray-100" + [ class "flex items-center rounded shadow-md overflow-hidden max-w-xl relative bg-neutral-900 text-gray-100" ] [ Html.div - [ class "self-stretch flex items-center px-3 flex-shrink-0 dark:bg-gray-700 dark:text-pink-500" + [ class "self-stretch flex items-center px-3 flex-shrink-0 bg-gray-700 text-pink-500" ] [ svg [ SvgAttr.fill "none" @@ -254,7 +249,7 @@ errorView error = ] [ Html.text error ] , Html.p - [ class " dark:text-gray-400" + [ class " text-gray-400" ] [ Html.a [ href "../posts" @@ -267,10 +262,10 @@ errorView error = ] -articleNode : String -> Html Msg -articleNode data = +articleNode : String -> String -> Html Msg +articleNode data fragment = Html.node "rendered-md" - [ Html.Attributes.attribute "markdowndata" data ] + [ Html.Attributes.attribute "markdowndata" data, Html.Attributes.attribute "fragment" fragment ] [] diff --git a/src/Utils/Constants.elm b/src/Utils/Constants.elm index 88a99d2..f56ab8b 100644 --- a/src/Utils/Constants.elm +++ b/src/Utils/Constants.elm @@ -34,26 +34,6 @@ iconLinks = ] -contentBase : String -contentBase = - "https://avinal.space/" - - -user : String -user = - "avinal" - - -urlPrefix : String -urlPrefix = - "avinal.github.io" - - -contentUrlPrefix : String -contentUrlPrefix = - contentBase ++ "/content/" - - nameMatrix : Array Int nameMatrix = Array.fromList diff --git a/src/Utils/Utils.elm b/src/Utils/Utils.elm index 5015638..e1f624b 100644 --- a/src/Utils/Utils.elm +++ b/src/Utils/Utils.elm @@ -9,12 +9,12 @@ import Utils.Constants exposing (..) categoryNtags : String -> List String -> Html msg categoryNtags category tags = Html.span [ class "flex flex-wrap py-6 space-x-2 border-t border-dashed border-teal-500" ] - (Html.b [ class "px-3 py-1 m-1 rounded-sm hover:underline dark:bg-pink-400 dark:text-gray-900" ] + (Html.b [ class "px-3 py-1 m-1 rounded-sm hover:underline bg-pink-400 text-gray-900" ] [ Html.text category ] :: List.map (\tag -> - Html.i [ class "px-3 py-1 m-1 rounded-sm hover:underline dark:bg-cyan-500 dark:text-gray-900" ] + Html.i [ class "px-3 py-1 m-1 rounded-sm hover:underline bg-cyan-500 text-gray-900" ] [ Html.text tag ] ) @@ -24,7 +24,7 @@ categoryNtags category tags = contentUrl : { category : String, post : String } -> String contentUrl { category, post } = - contentUrlPrefix ++ "posts/" ++ category ++ "/" ++ post ++ ".md" + "/content/posts/" ++ category ++ "/" ++ post ++ ".md" errorToString : Http.Error -> String diff --git a/src/web-components/MarkedRender.js b/src/web-components/MarkedRender.js index 7e8c2d2..e0e6fe6 100644 --- a/src/web-components/MarkedRender.js +++ b/src/web-components/MarkedRender.js @@ -8,12 +8,10 @@ customElements.define( connectedCallback() { this.runMarked(); } - attributeChangedCallback(name, oldValue, newValue) { - this.runMarked(); - } runMarked() { const renderer = new marked.Renderer(); const data = this.getAttribute("markdowndata"); + const fragment = this.getAttribute("fragment"); var lead = 0; renderer.heading = (text, level) => { if (level === 1) { @@ -51,17 +49,20 @@ customElements.define( console.warn(`Unable to find prism highlight for '${lang}'`); return; } - console.info("Found", lang); return Prism.highlight(code, grammer, lang); }, }); this.innerHTML = marked.parse(data); console.log("Markdown rendering complete!"); + if (fragment) { + console.log("Fragment found, scrolling to: #", fragment); + window.location = "#" + fragment; + } } static get observedAttributes() { - return ["markdowndata"]; + return ["markdowndata", "fragment"]; } } );