ybbond-reason

My old site written in ReasonReact
Log | Files | Refs | README | LICENSE | CC-LICENSE

BlogContent.re (2015B)

      1 module Styles = {
      2   open Css;
      3   let h1 =
      4     style([
      5       fontWeight(`num(600)),
      6       fontSize(`em(1.2)),
      7       media("(max-width: 544px)", [fontSize(`em(1.1))]),
      8     ]);
      9 
     10   let summary =
     11     style([
     12       fontSize(`em(1.0)),
     13       marginTop(`em(1.0)),
     14       marginBottom(`em(1.0)),
     15       marginLeft(`px(0)),
     16       marginRight(`px(0)),
     17       flex(`num(1.0)),
     18       textAlign(`left),
     19       cursor(`pointer),
     20       userSelect(`none),
     21     ]);
     22 
     23   let date =
     24     style([
     25       fontFamily("Cousine for Powerline, monospace"),
     26       fontSize(`em(0.8)),
     27       color(`hex("777777")),
     28       whiteSpace(`nowrap),
     29     ]);
     30 
     31   let pre =
     32     style([
     33       fontFamily("Cousine for Powerline, monospace"),
     34       display(`block),
     35       whiteSpace(`preWrap),
     36       maxWidth(`px(544)),
     37       fontSize(`em(0.9)),
     38       lineHeight(`em(2.8)),
     39       media(
     40         "(max-width: 544px)",
     41         [fontSize(`em(0.8)), lineHeight(`em(3.0))],
     42       ),
     43     ]);
     44 };
     45 
     46 type state = {blog_content: string};
     47 
     48 type action =
     49   | Loaded(string);
     50 
     51 [@react.component]
     52 let make =
     53     (~link: string, ~source: string, ~title: string, ~createdAt: string) => {
     54   let (state, dispatch) =
     55     React.useReducer(
     56       (_state, action) =>
     57         switch (action) {
     58         | Loaded(data) => {blog_content: data}
     59         },
     60       {blog_content: "Mengambil data konten blog..."},
     61     );
     62 
     63   React.useEffect0(() => {
     64     BlogGistData.fetchBlog(data => dispatch(Loaded(data)), link) |> ignore;
     65     None;
     66   });
     67 
     68   <details open_=true>
     69     <summary className=Styles.summary> {ReasonReact.string(title)} </summary>
     70     <h1 className=Styles.h1> {ReasonReact.string("# " ++ title)} </h1>
     71     <span className=Styles.date>
     72       <time>
     73         {ReasonReact.string(
     74            createdAt |> Js.Date.fromString |> Js.Date.toLocaleString,
     75          )}
     76       </time>
     77       {ReasonReact.string(" [")}
     78       <Link href=source text="link" />
     79       {ReasonReact.string("]")}
     80     </span>
     81     <pre className=Styles.pre> {ReasonReact.string(state.blog_content)} </pre>
     82   </details>;
     83 };