ybbond-reason

commit baafdf35baf27c795de325d511f8057d2d123547
parent f12181eb118d3ea4abea8db380bdcc360f809f11
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Thu, 15 Aug 2019 20:13:40 +0700

feature(Theme) => theme toggler

Diffstat:
M
src/App.re
 | 
12
++++++------
M
src/CurViScene.re
 | 
22
+++++++++-------------
M
src/Styled.re
 | 
60
+++++++++++++++++++++++++++++++++++++++++++++++++++++-------
M
src/components/ContentList.re
 | 
5
++++-
A
src/components/Link.re
 | 
3
+++

diff --git a/src/App.re b/src/App.re
@@ -34,14 +34,14 @@ let make = () => {
 
   let content = () =>
     switch (url.path) {
-    | ["/uses"] => <CurViScene />
-    | _ => <CurViScene />
+    | ["/uses"] => <UsesScene />
+    | ["/"] => <CurViScene />
+    | _ =>
+      ReasonReact.Router.push("");
+      <CurViScene />;
     };
 
   <div className=Styles.container>
-    <main className=Styles.main>
-      <Styled dark=true />
-      {content()}
-    </main>
+    <main className=Styles.main> <Styled /> {content()} </main>
   </div>;
 };
diff --git a/src/CurViScene.re b/src/CurViScene.re
@@ -76,10 +76,7 @@ let make = () => {
         },
         {
           variant: Default,
-          text:
-            <span>
-              {ReasonReact.string("Drinks coffee.")}
-            </span>,
+          text: <span> {ReasonReact.string("Drinks coffee.")} </span>,
         },
         {
           variant: Default,
@@ -90,17 +87,11 @@ let make = () => {
         },
         {
           variant: Default,
-          text:
-            <span>
-              {ReasonReact.string("Vim user.")}
-            </span>,
+          text: <span> {ReasonReact.string("Vim user.")} </span>,
         },
         {
           variant: Default,
-          text:
-            <span>
-              {ReasonReact.string("Jakarta, Indonesia")}
-            </span>,
+          text: <span> {ReasonReact.string("Jakarta, Indonesia")} </span>,
         },
       |]
     />;
@@ -124,7 +115,12 @@ let make = () => {
           variant: Default,
           text:
             <span>
-              {ReasonReact.string("Instagram, Github, Twitter.")}
+              <Link href="https://www.instagram.com/ybbond" text="Instagram" />
+              {ReasonReact.string(", ")}
+              <Link href="https://github.com/ybbond" text="Github" />
+              {ReasonReact.string(", ")}
+              <Link href="https://twitter.com/bandungpenting" text="Twitter" />
+              {ReasonReact.string(".")}
             </span>,
         },
       |]
diff --git a/src/Styled.re b/src/Styled.re
@@ -1,10 +1,35 @@
 open Utils;
 
+type state = {dark: bool};
+type action =
+  | ToggleDark;
+
+let initialState = {dark: false};
+
 [@react.component]
-let make = (~dark: bool) => {
-  let backgroundColor = dark ? "#1b1b1b" : "#fdfdfd";
-  let textColor = dark ? "#fdfdfd" : "#1b1b1b";
-  let htmlStyle = "html { height: 100vh; background-color:" ++ backgroundColor ++ "; color:" ++ textColor  ++ "; }";
+let make = () => {
+  let (state, dispatch) =
+    React.useReducer(
+      (state, action) =>
+        switch (action) {
+        | ToggleDark => {dark: !state.dark}
+        },
+      initialState,
+    );
+  let backgroundColor = state.dark ? "#1b1b1b" : "#fdfdfd";
+  let textColor = state.dark ? "#fdfdfd" : "#1b1b1b";
+  let markColor = state.dark ? "#3e3e3e" : "#d8dcd5";
+  let markHover = state.dark ? "#d8dcd6" : "#2d2d2d";
+  let anchorColor = state.dark ? "#d8dcd5" : "#2d2d2d";
+  let anchorHover = state.dark ? "#2d2d2d" : "#d8dcd5";
+
+  let htmlStyle =
+    "html { height: 100vh; font-family: 'Cousine', monospace; background-color:"
+    ++ backgroundColor
+    ++ "; color:"
+    ++ textColor
+    ++ "; }";
+  let fontFace = "@import url('https://fonts.googleapis.com/css?family=Cousine:400,700&display=swap');";
   let bodyStyle = {j|
 body {
   display: flex;
@@ -17,14 +42,35 @@ body {
   word-wrap: break-word;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}    
+}
   |j};
   let miscStyle = {j|
 ::selection {
   background-color: #79d688;
 }
   |j};
-  let setStyle = htmlStyle ++ bodyStyle ++ miscStyle;
+  let markStyle =
+    "mark{background-color:"
+    ++ markColor
+    ++ ";}"
+    ++ "mark:hover{background-color:"
+    ++ markHover
+    ++ ";}";
+  let anchorStyle =
+    "a{text-decoration: none;cursor: pointer;color:"
+    ++ anchorColor
+    ++ ";}"
+    ++ "a:hover{color:"
+    ++ anchorHover
+    ++ ";}";
+
+  let setStyle =
+    htmlStyle ++ fontFace ++ bodyStyle ++ miscStyle ++ markStyle ++ anchorStyle;
 
-  <style dangerouslySetInnerHTML={dangerousHtml(setStyle)} />
+  <React.Fragment>
+    <style dangerouslySetInnerHTML={dangerousHtml(setStyle)} />
+    <button onClick={_ => dispatch(ToggleDark)}>
+      {ReasonReact.string("hai")}
+    </button>
+  </React.Fragment>;
 };
diff --git a/src/components/ContentList.re b/src/components/ContentList.re
@@ -1,5 +1,6 @@
 module Styles = {
   open Css;
+
   let ul =
     style([
       marginLeft(em(2.5)),
@@ -56,7 +57,9 @@ let make = (~content: array(listContent)) => {
           | Done => Styles.pDone
           | Default => Styles.pDefault
           };
-        <li key=string_of_int(key)> <p className=listPointType> {item.text} </p> </li>;
+        <li key={string_of_int(key)}>
+          <p className=listPointType> {item.text} </p>
+        </li>;
       },
       content,
     );
diff --git a/src/components/Link.re b/src/components/Link.re
@@ -0,0 +1,3 @@
+[@react.component]
+let make = (~href: string, ~text: string) =>
+  <mark> <a href> {ReasonReact.string(text)} </a> </mark>;