mirror of
https://github.com/avinal/avinal.github.io.git
synced 2026-07-04 07:40:09 +05:30
add botton informations
Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>
This commit is contained in:
+2
-20
@@ -101,24 +101,6 @@ unsplash =
|
||||
view : Model -> View Msg
|
||||
view model =
|
||||
let
|
||||
taglist =
|
||||
[]
|
||||
|
||||
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.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.text tag
|
||||
]
|
||||
)
|
||||
tags
|
||||
)
|
||||
|
||||
maincard : List JsonMeta -> Html msg
|
||||
maincard bloglist =
|
||||
case bloglist of
|
||||
@@ -131,7 +113,7 @@ view model =
|
||||
[ Html.text first.title ]
|
||||
, Html.span [ class "text-gray-400" ] [ Html.text first.date ]
|
||||
, Html.p [] [ Html.text <| String.left 200 first.description ]
|
||||
, categoryNtags first.category taglist
|
||||
, UU.categoryNtags first.category []
|
||||
]
|
||||
]
|
||||
, Html.div [ class "grid justify-center grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3" ] <| List.map card rest
|
||||
@@ -148,7 +130,7 @@ view model =
|
||||
[ Html.h3 [ class "text-2xl font-semibold group-hover:underline group-focus:underline" ] [ Html.text blog.title ]
|
||||
, Html.span [ class " text-gray-400" ] [ Html.text blog.date ]
|
||||
, Html.p [] [ Html.text <| String.left 200 blog.description ]
|
||||
, categoryNtags blog.category taglist
|
||||
, UU.categoryNtags blog.category []
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
+134
-5
@@ -2,13 +2,16 @@ module Pages.Posts.ALL_ exposing (Model, Msg, page)
|
||||
|
||||
import Effect exposing (Effect)
|
||||
import Html exposing (Html)
|
||||
import Html.Attributes
|
||||
import Html.Attributes exposing (class, href, rel, src)
|
||||
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.Constants
|
||||
import Utils.Utils as UU
|
||||
import View exposing (View)
|
||||
import Yaml.Decode as Yaml
|
||||
@@ -129,15 +132,141 @@ view model =
|
||||
case model.blog of
|
||||
Just blog ->
|
||||
{ title = "Blog | " ++ blog.meta.title
|
||||
, body = [ articleNode blog.content ]
|
||||
, body =
|
||||
[ Html.img
|
||||
[ class "object-cover w-full h-60 sm:h-96 rounded"
|
||||
, src blog.meta.image
|
||||
]
|
||||
[]
|
||||
, articleNode blog.content
|
||||
, 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" ]
|
||||
, 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." ]
|
||||
]
|
||||
, UU.categoryNtags blog.meta.category blog.meta.tags
|
||||
, Html.div [ class "flex flex-col space-y-2 md:space-y-0 md:space-x-6 md:flex-row border-t border-neutral-700" ]
|
||||
[ Html.img
|
||||
[ class "self-center flex-shrink-0 w-24 h-24 border rounded-full md:justify-self-start"
|
||||
, src "https://github.com/avinal.png"
|
||||
]
|
||||
[]
|
||||
, Html.div [ class "flex flex-col self-center" ]
|
||||
[ Html.h4 [ class "text-xl font-semibold " ] [ Html.text "Avinal Kumar" ]
|
||||
, Html.p [ class "text-gray-400" ]
|
||||
[ Html.text "I am a Associate Software Engineer at Red Hat and I work for Hybrid Cloud Engineering. I contribute to Open Source projects and write blogs in tech and literature."
|
||||
]
|
||||
]
|
||||
]
|
||||
, Html.div [ class "flex justify-center space-x-4 align-center text-neutral-600 text-xl" ]
|
||||
(List.map
|
||||
(\iconlink ->
|
||||
Html.a [ href iconlink.url, class "hover:text-pink-500" ] [ Html.i [ class iconlink.icon ] [] ]
|
||||
)
|
||||
Utils.Constants.iconLinks
|
||||
)
|
||||
]
|
||||
}
|
||||
|
||||
Nothing ->
|
||||
{ title = "Be My SpaceTime | Something went wrong"
|
||||
, body = [ articleNode <| Maybe.withDefault "" model.error ]
|
||||
, body =
|
||||
[ case model.error of
|
||||
Just err ->
|
||||
errorView err
|
||||
|
||||
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"
|
||||
]
|
||||
[]
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
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"
|
||||
]
|
||||
[ Html.div
|
||||
[ class "self-stretch flex items-center px-3 flex-shrink-0 dark:bg-gray-700 dark: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 " dark:text-gray-400"
|
||||
]
|
||||
[ Html.a
|
||||
[ href "../posts"
|
||||
, rel "referrer noopener"
|
||||
, class "underline"
|
||||
]
|
||||
[ Html.text "return to list of Blogs?" ]
|
||||
]
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
articleNode : String -> Html Msg
|
||||
articleNode data =
|
||||
Html.node "rendered-md"
|
||||
@@ -155,7 +284,7 @@ type alias YamlMeta =
|
||||
, description : Maybe String
|
||||
, tags : List String
|
||||
, category : String
|
||||
, image : Maybe String
|
||||
, image : String
|
||||
, modified : Maybe String
|
||||
}
|
||||
|
||||
@@ -191,5 +320,5 @@ metaDecoder =
|
||||
(Yaml.maybe (Yaml.field "description" Yaml.string))
|
||||
(Yaml.field "tags" (Yaml.list Yaml.string))
|
||||
(Yaml.field "category" Yaml.string)
|
||||
(Yaml.maybe (Yaml.field "image" Yaml.string))
|
||||
(Yaml.field "image" Yaml.string)
|
||||
(Yaml.maybe (Yaml.field "modified" Yaml.string))
|
||||
|
||||
+19
-1
@@ -1,9 +1,27 @@
|
||||
module Utils.Utils exposing (..)
|
||||
|
||||
import Html exposing (Html)
|
||||
import Html.Attributes exposing (class)
|
||||
import Http exposing (Error(..))
|
||||
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.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.text tag
|
||||
]
|
||||
)
|
||||
tags
|
||||
)
|
||||
|
||||
|
||||
contentUrl : { category : String, post : String } -> String
|
||||
contentUrl { category, post } =
|
||||
contentUrlPrefix ++ "posts/" ++ category ++ "/" ++ post ++ ".md"
|
||||
@@ -28,7 +46,7 @@ errorToString error =
|
||||
"Verify your information and try again"
|
||||
|
||||
BadStatus _ ->
|
||||
"Unknown error"
|
||||
"The content can't be found, please check your url"
|
||||
|
||||
BadBody errorMessage ->
|
||||
errorMessage
|
||||
|
||||
@@ -14,9 +14,10 @@ customElements.define(
|
||||
runMarked() {
|
||||
const renderer = new marked.Renderer();
|
||||
const data = this.getAttribute("markdowndata");
|
||||
var lead = 0;
|
||||
renderer.heading = (text, level) => {
|
||||
if (level === 1) {
|
||||
return `<header>
|
||||
return `<header class="text-center w-full">
|
||||
<h1>
|
||||
${text}</h1>
|
||||
</header>`;
|
||||
@@ -34,6 +35,14 @@ customElements.define(
|
||||
</h${level}>`;
|
||||
};
|
||||
|
||||
renderer.paragraph = (text) => {
|
||||
lead++;
|
||||
if (lead === 1) {
|
||||
return `<p class="lead">${text}</p>`;
|
||||
}
|
||||
return `<p>${text}</p>`;
|
||||
};
|
||||
|
||||
marked.setOptions({
|
||||
renderer: renderer,
|
||||
highlight: function (code, lang) {
|
||||
|
||||
Reference in New Issue
Block a user