commit 309cd507b98fcbe901255e4afd5a142c48014a7c parent 19170154e45a567d615fbb3b6c959d866cd25307 Author: Yohanes Bandung <bandungpenting@gmail.com> Date: Tue, 3 Mar 2020 04:38:17 +0700 refactor(Blog) => make blog content summary Diffstat:
| M | src/BlogContent.re | | | 33 | +++++++++++++++++++++++++++++++-- |
| M | src/BlogScene.re | | | 18 | ++++++++++++++---- |
2 files changed, 45 insertions(+), 6 deletions(-)
diff --git a/src/BlogContent.re b/src/BlogContent.re @@ -1,10 +1,28 @@ +module Styles = { + open Css; + let h1 = style([fontWeight(`num(600)), fontSize(`em(1.2))]); + let summary = + style([ + fontSize(`em(1.0)), + marginTop(`em(1.0)), + marginBottom(`em(1.0)), + marginLeft(`px(0)), + marginRight(`px(0)), + flex(`num(1.0)), + textAlign(`left), + cursor(`pointer), + userSelect(`none), + ]); +}; + type state = {blog_content: string}; type action = | Loaded(string); [@react.component] -let make = (~link: string) => { +let make = + (~link: string, ~source: string, ~title: string, ~createdAt: string) => { let (state, dispatch) = React.useReducer( (_state, action) => @@ -19,5 +37,16 @@ let make = (~link: string) => { None; }); - <pre> {ReasonReact.string(state.blog_content)} </pre>; + <details> + <summary className=Styles.summary> {ReasonReact.string(title)} </summary> + <h1 className=Styles.h1> + {ReasonReact.string("# " ++ title ++ " [")} + <Link href=source text="link" /> + {ReasonReact.string("]")} + </h1> + <date> + {ReasonReact.string(createdAt |> Js.Date.fromString |> Js.Date.toString)} + </date> + <pre> {ReasonReact.string(state.blog_content)} </pre> + </details>; }; diff --git a/src/BlogScene.re b/src/BlogScene.re @@ -1,5 +1,13 @@ open BlogGistData; +module Styles = { + open Css; + + let strikethrough = style([textDecoration(`lineThrough)]); + let underline = style([textDecoration(`underline)]); + let h1 = style([fontWeight(`num(600)), fontSize(`em(1.4))]); +}; + type state = {gist_content: option(BlogGistData.gist_return)}; type action = @@ -22,7 +30,6 @@ let make = () => { }); <React.Fragment> - <h3> {ReasonReact.string("Blog")} </h3> {switch (state.gist_content) { | Some(story) => let comp = @@ -33,9 +40,12 @@ let make = () => { switch (blogContent) { | Some(value) => <div key={string_of_int(key)}> - <h1> {ReasonReact.string("# " ++ item.description)} </h1> - <date> {ReasonReact.string(item.created_at)} </date> - <BlogContent link={value.raw_url} /> + <BlogContent + source={item.html_url} + link={value.raw_url} + title={item.description} + createdAt={item.created_at} + /> </div> | None => <div /> };