From 2d6f7f929fe6e1b9c704fa93b22d0a9ec5539257 Mon Sep 17 00:00:00 2001 From: Avinal Kumar Date: Sat, 1 Apr 2023 19:16:19 +0530 Subject: [PATCH] change appearance of the posts Signed-off-by: Avinal Kumar --- src/Components/Footer.elm | 11 +-- src/Layouts/Blog.elm | 6 +- src/Pages/Posts/Category_/Post_.elm | 118 +++++++--------------------- src/Utils/Utils.elm | 14 +++- src/web-components/MarkedRender.js | 6 -- 5 files changed, 45 insertions(+), 110 deletions(-) diff --git a/src/Components/Footer.elm b/src/Components/Footer.elm index 65e746a..1ad05ef 100644 --- a/src/Components/Footer.elm +++ b/src/Components/Footer.elm @@ -7,14 +7,11 @@ import Utils.Constants exposing (IconLink, Link, footerLinks) singleLink : Link -> Html msg singleLink link = - Html.li [] - [ Html.a + Html.a [ href link.url - , class "mr-4 md:mr-6 underline decoration-cyan-500 hover:decoration-pink-500" + , class "underline decoration-cyan-500 hover:decoration-pink-500 text-xl" ] [ Html.text link.text ] - ] - iconedLink : IconLink -> Html msg iconedLink iconLink = @@ -25,8 +22,8 @@ iconedLink iconLink = footerLinksToSide : Html msg footerLinksToSide = - Html.div [ class "fixed bottom-0 left-0 bg-neutral-900 z-20 p-4 w-full md:flex md:items-center md:justify-between md:p-4" ] - [ Html.ul [ class "flex flex-wrap items-center mt-3 text-xl sm:mt-0 text-gray-400" ] + Html.div [ class "fixed bottom-0 left-0 bg-neutral-900 p-4 w-full border-t border-cyan-500" ] + [ Html.div [ class "mx-auto flex justify-center space-x-6 text-gray-400" ] (List.map singleLink <| { text = "Home", url = "https://avinal.space" } :: footerLinks diff --git a/src/Layouts/Blog.elm b/src/Layouts/Blog.elm index 6acd554..a85c882 100644 --- a/src/Layouts/Blog.elm +++ b/src/Layouts/Blog.elm @@ -66,15 +66,15 @@ subscriptions _ = blogTheme : String blogTheme = - "mt-4 prose prose-invert mx-auto lg:prose-lg prose-a:decoration-cyan-500 hover:prose-a:decoration-pink-500" + "prose prose-invert mx-auto lg:prose-lg prose-a:decoration-cyan-500 hover:prose-a:decoration-pink-500" view : { fromMsg : Msg -> mainMsg, content : View mainMsg, model : Model } -> View mainMsg view { fromMsg, model, content } = { title = content.title , body = - [ Html.div [ class "min-h-screen py-4 flex flex-col justify-center relative overflow-hidden " ] - [ Html.div [ class "relative w-full py-4 bg-neutral md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pb-28" ] + [ Html.div [ class "min-h-screen flex flex-col justify-center relative overflow-hidden " ] + [ Html.div [ class "relative w-full bg-neutral md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pb-28" ] [ Html.article [ class blogTheme ] content.body ] diff --git a/src/Pages/Posts/Category_/Post_.elm b/src/Pages/Posts/Category_/Post_.elm index ebf4ef6..6ab679f 100644 --- a/src/Pages/Posts/Category_/Post_.elm +++ b/src/Pages/Posts/Category_/Post_.elm @@ -3,14 +3,12 @@ module Pages.Posts.Category_.Post_ exposing (Model, Msg, page) import Components.Footer exposing (avatarAndLinks) import Effect exposing (Effect) import Html exposing (Html) -import Html.Attributes exposing (alt, class, datetime, href, rel, src) +import Html.Attributes exposing (alt, class, datetime, href, src, title) import Http import Layouts import Page exposing (Page) import Route exposing (Route) import Shared -import Svg exposing (path, svg) -import Svg.Attributes as SvgAttr import Url exposing (Protocol(..)) import Utils.Utils as UU import View exposing (View) @@ -127,15 +125,27 @@ view model = Just blog -> { title = "Blog | " ++ blog.meta.title , body = - [ Html.img - [ class "object-cover w-full h-60 sm:h-96 rounded" - , src blog.meta.image - , alt blog.meta.title + [ Html.div [ class "bg-neutral-900 md:-mx-8 lg:-mx-16 px-8 py-1" ] + [ Html.header [ class "relative" ] + [ Html.img + [ class "object-cover w-full h-60 sm:h-96 brightness-50 " + , src blog.meta.image + , alt blog.meta.title + ] + [] + , Html.h1 [ class "absolute top-3/4 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center w-full" ] [ Html.text blog.meta.title ] + ] + , Html.span [ class "text-base font-regular" ] + [ Html.text "By " + , Html.a [ href "https://avinal.space/pages/about-me", class "font-bold no-underline hover:text-pink-500" ] [ Html.text "Avinal Kumar" ] + , Html.text " on " + , Html.time [ datetime blog.meta.date ] [ Html.text <| UU.getFormattedDate blog.meta.date ] + ] + , Html.span [ class "text-base font-light float-right" ] [ Html.a [ href "", class "hover:text-pink-500" ] [ Html.abbr [ class "fa-solid fa-link no-underline", title "Share this article" ] [] ] ] + , articleNode blog.content model.fragment blog.meta.title blog.meta.description ] - [] - , articleNode blog.content model.fragment blog.meta.title blog.meta.description - , Html.div [ class "text-center text-neutral-300 border-t border-dashed border-teal-500 p-2" ] - [ Html.time [ datetime blog.meta.date ] [ Html.text <| "Published on " ++ UU.getFormattedDate blog.meta.date ++ " under " ] + , Html.div [ class "text-center text-neutral-300 border-dashed border-teal-500 p-2" ] + [ Html.text "Published under " , Html.a [ href "https://www.mozilla.org/en-US/MPL/2.0/" ] [ Html.text "Mozilla Public License 2.0" ] , Html.text " if you found an issue with the page, please report it " , Html.a [ href <| "https://github.com/avinal/avinal.github.io/issues/new?title=bug:+" ++ String.replace " " "+" blog.meta.title ] [ Html.text "here." ] @@ -146,7 +156,7 @@ view model = } Nothing -> - { title = "Be My SpaceTime | Something went wrong" + { title = "Avinal Kumar | Something went wrong" , body = [ case model.error of Just err -> @@ -154,47 +164,7 @@ view model = Nothing -> Html.div [ class "flex items-center justify-center flex-col object-cover object-center " ] - [ svg - [ SvgAttr.width "85" - , SvgAttr.height "80" - , SvgAttr.shapeRendering "crispEdges" - ] - [ Svg.style - [ SvgAttr.type_ "text/css" - ] - [ Html.text ".color { -webkit-animation: col 1s linear infinite; -moz-animation: col 1s linear infinite; -o-animation: col 1s linear infinite; animation: col 1s linear infinite; } @keyframes col { 0% { fill: #EE67A4; } 12.5% { fill: violet; } 25% { fill: indigo; } 37.5% { fill: blue; } 50% { fill: #35BEB8 } 62.5% { fill: green; } 75% { fill: yellow; } 87.5% { fill: orange; } 100% { fill: red; } } .rcolor { -webkit-animation: rcol 1s linear infinite; -moz-animation: rcol 1s linear infinite; -o-animation: rcol 1s linear infinite; animation: rcol 1s linear infinite; } @keyframes rcol { 0% { fill: #35BEB8; } 12.5% { fill: blue; } 25% { fill: indigo; } 37.5% { fill: violet; } 50% { fill: #EE67A4; } 62.5% { fill: red; } 75% { fill: orange; } 87.5% { fill: yellow; } 100% { fill: green; } }" ] - , Svg.symbol - [ SvgAttr.id "logo" - , SvgAttr.viewBox "0 -60 65 60" - ] - [ path - [ SvgAttr.class "st0 color" - , SvgAttr.d "M60-60H0V0h60z" - ] - [] - , path - [ SvgAttr.class "st1" - , SvgAttr.d "M60-41h-5v10h5z" - ] - [] - , path - [ SvgAttr.class "st2 rcolor" - , SvgAttr.d "M65-41h-5v10h5z" - ] - [] - ] - , Svg.use - [ SvgAttr.xlinkHref "#logo" - , SvgAttr.width "65" - , SvgAttr.height "60" - , SvgAttr.id "XMLID_14_" - , SvgAttr.y "-60" - , SvgAttr.transform "scale(1 -1)" - , SvgAttr.overflow "visible" - ] - [] - ] - ] + [] ] } @@ -202,44 +172,10 @@ view model = errorView : String -> Html msg errorView error = Html.div - [ 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 bg-gray-700 text-pink-500" - ] - [ svg - [ SvgAttr.fill "none" - , SvgAttr.viewBox "0 0 24 24" - , SvgAttr.stroke "currentColor" - , SvgAttr.class "h-8 w-8" - ] - [ path - [ SvgAttr.strokeLinecap "round" - , SvgAttr.strokeLinejoin "round" - , SvgAttr.strokeWidth "2" - , SvgAttr.d "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" - ] - [] - ] - ] - , Html.div - [ class "p-4 flex-1" - ] - [ Html.h3 - [ class "text-xl font-bold" - ] - [ Html.text error ] - , Html.p - [ class " text-gray-400" - ] - [ Html.a - [ href "https://avinal.space/posts" - , rel "referrer noopener" - , class "underline" - ] - [ Html.text "return to list of Blogs?" ] - ] - ] + [ class "border border-red-400 text-red-700 px-4 py-3 rounded relative" ] + [ Html.strong [ class "text-red-400" ] [ Html.text "Something bad has happened!" ] + , Html.br [] [] + , Html.text ("Error: " ++ error) ] diff --git a/src/Utils/Utils.elm b/src/Utils/Utils.elm index c56f4a4..259c1aa 100644 --- a/src/Utils/Utils.elm +++ b/src/Utils/Utils.elm @@ -1,7 +1,6 @@ module Utils.Utils exposing (..) -import Array - +import Array import Html exposing (Html) import Html.Attributes exposing (class, href, target) import Http exposing (Error(..)) @@ -22,7 +21,16 @@ getFormattedDate : String -> String getFormattedDate dateString = case Parser.run dateParser dateString of Ok date -> - (Maybe.withDefault "Month" <| Array.get (date.month - 1) months) ++ " " ++ String.fromInt date.day ++ ", " ++ String.fromInt date.year + (Maybe.withDefault "Month" <| Array.get (date.month - 1) months) + ++ " " + ++ String.fromInt date.day + ++ ", " + ++ String.fromInt date.year + ++ ", " + ++ String.fromInt date.hour + ++ ":" + ++ String.fromInt date.minute + ++ " IST" Err _ -> "Invalid date!!" diff --git a/src/web-components/MarkedRender.js b/src/web-components/MarkedRender.js index cde812e..adfd4e3 100644 --- a/src/web-components/MarkedRender.js +++ b/src/web-components/MarkedRender.js @@ -30,12 +30,6 @@ customElements.define( var lead = 0; renderer.heading = (text, level) => { - if (level === 1) { - return `
-

- ${text}

-
`; - } const escapedText = text .trim() .toLowerCase()