ybbond-reason

My old site written in ReasonReact
Log | Files | Refs | README

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:
Msrc/BlogContent.re | 33+++++++++++++++++++++++++++++++--
Msrc/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 />
              };