ybbond-reason

commit 8657f90701197485fe47f74640a68fc64bc04f3e
parent a580acadad39b3553a2f4257f833d49b448817f6
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Fri, 13 Mar 2020 13:02:10 +0700

feature(Blog) => BlogPage

Diffstat:
M
src/App.re
 | 
1
+
M
src/BlogContent.re
 | 
2
+-
A
src/BlogContentScene.re
 | 
82
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

diff --git a/src/App.re b/src/App.re
@@ -39,6 +39,7 @@ let make = () => {
     | [] => <CurViScene />
     | ["uses"] => <UsesScene />
     | ["blog"] => <BlogScene />
+    | ["blog", slug, id] => <BlogContentScene slug id />
     | ["poem"] =>
       ReasonReact.Router.replace("poems");
       <PoemsScene />;
diff --git a/src/BlogContent.re b/src/BlogContent.re
@@ -65,7 +65,7 @@ let make =
     None;
   });
 
-  <details>
+  <details open_=true>
     <summary className=Styles.summary> {ReasonReact.string(title)} </summary>
     <h1 className=Styles.h1> {ReasonReact.string("# " ++ title)} </h1>
     <span className=Styles.date>
diff --git a/src/BlogContentScene.re b/src/BlogContentScene.re
@@ -0,0 +1,82 @@
+module Styles = {
+  open Css;
+  let h1 =
+    style([
+      fontWeight(`num(600)),
+      fontSize(`em(1.2)),
+      media("(max-width: 544px)", [fontSize(`em(1.1))]),
+    ]);
+
+  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),
+    ]);
+
+  let date =
+    style([
+      fontFamily("Cousine for Powerline, monospace"),
+      fontSize(`em(0.8)),
+      color(`hex("777777")),
+      whiteSpace(`nowrap),
+    ]);
+
+  let pre =
+    style([
+      fontFamily("Cousine for Powerline, monospace"),
+      display(`block),
+      whiteSpace(`preWrap),
+      maxWidth(`px(544)),
+      fontSize(`em(0.9)),
+      lineHeight(`em(2.8)),
+      media(
+        "(max-width: 544px)",
+        [fontSize(`em(0.8)), lineHeight(`em(3.0))],
+      ),
+    ]);
+};
+
+type state = {blog_content: string};
+
+type action =
+  | Loaded(string);
+
+[@react.component]
+let make = (~slug: string, ~id: string) => {
+  let (state, dispatch) =
+    React.useReducer(
+      (_state, action) =>
+        switch (action) {
+        | Loaded(data) => {blog_content: data}
+        },
+      {blog_content: "Mengambil data konten blog..."},
+    );
+
+  React.useEffect0(() => {
+    BlogGistData.fetchBlog(data => dispatch(Loaded(data)), id) |> ignore;
+    None;
+  });
+
+  <details open_=true>
+    <summary className=Styles.summary> {ReasonReact.string(slug)} </summary>
+    <h1 className=Styles.h1> {ReasonReact.string("# " ++ slug)} </h1>
+    <span className=Styles.date>
+      <time>
+        {ReasonReact.string(
+           id |> Js.Date.fromString |> Js.Date.toLocaleString,
+         )}
+      </time>
+      {ReasonReact.string(" [")}
+      <Link href=slug text="link" />
+      {ReasonReact.string("]")}
+    </span>
+    <pre className=Styles.pre> {ReasonReact.string(state.blog_content)} </pre>
+  </details>;
+};