ybbond-reason

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

commit 274d36ead9e239f1fd03b6c36ecf3a7007e68c6a
parent 18e322a5ffb5eac37d6dc625d29b0e79009bd08f
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Wed, 14 Aug 2019 08:40:25 +0700

moving to my PC

Diffstat:
Msrc/App.re | 45++++++++++++++++++++++++++++++++++++++++++---
Dsrc/CurVi.re | 38--------------------------------------
Asrc/CurViScene.re | 36++++++++++++++++++++++++++++++++++++
Asrc/List.re | 26++++++++++++++++++++++++++
Msrc/Spoiler.re | 7++++---
Asrc/Styled.re | 30++++++++++++++++++++++++++++++
Asrc/UsesScene.re | 6++++++

7 files changed, 144 insertions(+), 44 deletions(-)

diff --git a/src/App.re b/src/App.re
@@ -1,8 +1,47 @@
+module Styles = {
+  open Css;
+
+  let container =
+    style([
+      minHeight(vh(100.0)),
+      flexGrow(1.0),
+      flexShrink(1.0),
+      flexBasis(`auto),
+      display(`flex),
+      flexDirection(`column),
+      textAlign(`left),
+      padding(em(1.0)),
+      paddingTop(px(0)),
+      paddingBottom(px(0)),
+      fontSize(em(0.9)),
+    ]);
+
+  let main =
+    style([
+      flexGrow(1.0),
+      width(`percent(100.0)),
+      marginTop(px(0)),
+      marginBottom(px(0)),
+      marginLeft(`auto),
+      marginRight(`auto),
+      maxWidth(em(50.0)),
+    ]);
+};
+
 [@react.component]
 let make = () => {
   let url = ReasonReact.Router.useUrl();
 
-  switch (url.path) {
-  | _ => <CurVi />
-  };
+  let content = () =>
+    switch (url.path) {
+    | ["/uses"] => <CurViScene />
+    | _ => <CurViScene />
+    };
+
+  <div className=Styles.container>
+    <main className=Styles.main>
+      <Styled dark=true />
+      {content()}
+    </main>
+  </div>;
 };
diff --git a/src/CurVi.re b/src/CurVi.re
@@ -1,38 +0,0 @@
-type state = {
-  opened: string,
-  dark: bool,
-};
-type section =
-  | Quest
-  | Info
-  | Contact;
-type action =
-  | ToggleDark
-  | Open(section);
-
-let convert = (s: section) =>
-  switch (s) {
-  | Quest => "quest"
-  | Info => "info"
-  | Contact => "contact"
-  };
-let initialState = {opened: "quest", dark: false};
-
-[@react.component]
-let make = () => {
-  let (_, _) =
-    React.useReducer(
-      (state, action) =>
-        switch (action) {
-        | ToggleDark => {...state, dark: !state.dark}
-        | Open(toOpen) => {...state, opened: convert(toOpen)}
-        },
-      initialState,
-    );
-
-  <div>
-    <span>
-      <Spoiler content={ReasonReact.string("Hello")} title="Yeay" />
-    </span>
-  </div>;
-};
diff --git a/src/CurViScene.re b/src/CurViScene.re
@@ -0,0 +1,36 @@
+type state = {
+  opened: string,
+  dark: bool,
+};
+type section =
+  | Quest
+  | Info
+  | Contact;
+type action =
+  | ToggleDark
+  | Open(section);
+
+let convert = (s: section) =>
+  switch (s) {
+  | Quest => "quest"
+  | Info => "info"
+  | Contact => "contact"
+  };
+let initialState = {opened: "quest", dark: false};
+
+[@react.component]
+let make = () => {
+  let (_, _) =
+    React.useReducer(
+      (state, action) =>
+        switch (action) {
+        | ToggleDark => {...state, dark: !state.dark}
+        | Open(toOpen) => {...state, opened: convert(toOpen)}
+        },
+      initialState,
+    );
+
+  <React.Fragment>
+    <Spoiler content={ReasonReact.string("Hello")} title="Yeay" />
+  </React.Fragment>;
+};
diff --git a/src/List.re b/src/List.re
@@ -0,0 +1,26 @@
+module Styles = {
+  open Css;
+  let ul = style([
+    marginLeft(em(2.5)),
+    marginTop(em(0.8)),
+    paddingLeft(px(0)),
+    /* listStyle((`outside, `none)), */
+  ]);
+}
+
+type listContent = {
+  text: ReasonReact.reactElement,
+  customClass: string,
+};
+
+[@react.component]
+let make = (~content: list(listContent)) => {
+  let contentMapped = List.map((item, key) => {
+    <li key={key}>
+      <p></p>
+    </li>
+  }, content);
+  <ul className=Styles.ul>
+    <li><span>{ReasonReact.string("Hell")}</span></li>
+  </ul>
+};
diff --git a/src/Spoiler.re b/src/Spoiler.re
@@ -3,6 +3,7 @@ module Styles = {
 
   let summary =
     style([
+      fontSize(em(1.0)),
       marginTop(em(1.0)),
       marginBottom(em(1.0)),
       marginLeft(px(0)),
@@ -24,7 +25,7 @@ type action =
 
 [@react.component]
 let make = (~content: ReasonReact.reactElement, ~title: string) =>
-  <summary className=Styles.summary>
-    <details> {ReasonReact.string(title)} </details>
+  <details>
+    <summary className=Styles.summary> {ReasonReact.string(title)} </summary>
     content
-  </summary>;
+  </details>;
diff --git a/src/Styled.re b/src/Styled.re
@@ -0,0 +1,30 @@
+open Utils;
+
+[@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 bodyStyle = {j|
+body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  line-height: 1.8em;
+  letter-spacing: -0.01em;
+  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;
+
+  <style dangerouslySetInnerHTML={dangerousHtml(setStyle)} />
+};
diff --git a/src/UsesScene.re b/src/UsesScene.re
@@ -0,0 +1,6 @@
+[@react.component]
+let make = () => {
+  <React.Fragment>
+    <span>{ReasonReact.string("Hi")}</span>
+  </React.Fragment>
+}