ybbond-reason

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

BlogContentScene.re (1958B)

      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 = (~slug: string, ~id: string) => {
     53   let (state, dispatch) =
     54     React.useReducer(
     55       (_state, action) =>
     56         switch (action) {
     57         | Loaded(data) => {blog_content: data}
     58         },
     59       {blog_content: "Mengambil data konten blog..."},
     60     );
     61 
     62   React.useEffect0(() => {
     63     BlogGistData.fetchBlog(data => dispatch(Loaded(data)), id) |> ignore;
     64     None;
     65   });
     66 
     67   <details open_=true>
     68     <summary className=Styles.summary> {ReasonReact.string(slug)} </summary>
     69     <h1 className=Styles.h1> {ReasonReact.string("# " ++ slug)} </h1>
     70     <span className=Styles.date>
     71       <time>
     72         {ReasonReact.string(
     73            id |> Js.Date.fromString |> Js.Date.toLocaleString,
     74          )}
     75       </time>
     76       {ReasonReact.string(" [")}
     77       <Link href=slug text="link" />
     78       {ReasonReact.string("]")}
     79     </span>
     80     <pre className=Styles.pre> {ReasonReact.string(state.blog_content)} </pre>
     81   </details>;
     82 };