feat: redesign the page

Dockerfile

@@ -30,6 +30,7 @@ RUN apt-get update && apt-get install -y \
 RUN npm install -g yarn
 
 # Adicionar os arquivos do projeto ao container
+COPY assets/ assets/
 COPY templates/ templates/
 COPY src/ src/
 COPY full-stack-reasonml-advanced-sample.opam full-stack-reasonml-advanced-sample.opam

README.md

@@ -1,5 +1,7 @@
 # Fullstack ReasonML Sample
 
+![Screenshot of the app runnning](screenshot.png)
+
 ## Table of Contents
 
 - [Introduction](#introduction)
@@ -11,9 +13,13 @@
 
 ## Introduction
 
-This is an advanced full-stack application using ReasonML and React. It serves as a sample project to demonstrate how to build an application with ReasonML and React, including a native ReasonML server.
+This is an advanced full-stack application using ReasonML and React. It serves as a sample project to demonstrate how to build an application with ReasonML and React, including a native ReasonML server. 
+
+This is possible due to this library: https://github.com/ml-in-barcelona/server-reason-react
+
+To understand better how it works check this article: https://sancho.dev/blog/server-side-rendering-react-in-ocaml
 
-You can access it here: https://native-reason-react-advanced-80387dde2d3c.herokuapp.com/
+And you can access this app running here: https://native-reason-react-advanced-80387dde2d3c.herokuapp.com/
 
 This project utilizes the following main libraries:
 

assets/index.css

@@ -0,0 +1,121 @@
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #000;
+  background: 0 0;
+  text-shadow: 0 1px #fff;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+code[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+pre[class*="language-"]::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+code[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+pre[class*="language-"]::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+  color: #708090;
+}
+.token.punctuation {
+  color: #999;
+}
+.token.namespace {
+  opacity: 0.7;
+}
+.token.boolean,
+.token.constant,
+.token.deleted,
+.token.number,
+.token.property,
+.token.symbol,
+.token.tag {
+  color: #905;
+}
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector,
+.token.string {
+  color: #690;
+}
+.token.module {
+  color: #4078f2;
+}
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.operator,
+.token.url {
+  color: #9a6e3a;
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #a626a4;
+}
+.token.class-name,
+.token.function {
+  color: #dd4a68;
+}
+.token.important,
+.token.regex,
+.token.variable {
+  color: #e90;
+}
+.token.bold,
+.token.important {
+  font-weight: 700;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
+}
+.token.disable {
+  color: #999;
+}

full-stack-reasonml-advanced-sample.opam

@@ -50,5 +50,5 @@ pin-depends: [
   ["server-reason-react.0.2.0" "git+https://github.com/ml-in-barcelona/server-reason-react#0.2.0"]
   ["reason.3.11.0" "git+https://github.com/reasonml/reason#3.11.0"]
   ["universal-portal.0.2.0" "git+https://github.com/pedrobslisboa/universal-portal#0.2.0"]
-  ["styled-ppx.0.56.0" "git+https://github.com/davesnx/styled-ppx#c6f8eebd55a2de8bc577da93bcca30f83c68552c"]
+  ["styled-ppx.0.56.0" "git+https://github.com/davesnx/styled-ppx#923c9abcf6ef2d64fe83e15cc632fb6e7cab8503"]
 ]

package.json

@@ -3,9 +3,11 @@
     "@emotion/css": "^11.11.2",
     "emotion": "^11.0.0",
     "flag-icons": "^7.2.1",
+    "highlight.js": "^11.9.0",
     "ocaml": "^5.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "reason-highlightjs": "^0.2.1",
     "webpack": "^5.89.0"
   },
   "devDependencies": {

src/universal/native/lib/Components/Components_Button.re

@@ -0,0 +1,103 @@
+module Styles = {
+  let wrapper = [%cx
+    {|
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    padding: 10px;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    font-weight: 300;
+    font-size: 1em;
+  |}
+  ];
+
+  let prefix = [%cx {|
+    margin-right: 10px;
+  |}];
+
+  let outline = invert => {
+    let primary = invert ? `transparent : `hex("db4d3f");
+    let secondary = !invert ? `transparent : `hex("db4d3f");
+
+    [%cx {|
+        border: 1px solid $(primary);
+        background-color: $(secondary);
+        color: #db4d3f;
+    |}];
+  };
+
+  let filled = invert => {
+    let primary = invert ? `hex("fff") : `hex("db4d3f");
+    let secondary = !invert ? `hex("fff") : `hex("db4d3f");
+
+    [%cx
+     {|
+        background-color: $(primary);
+        color: $(secondary);
+    |}];
+  };
+
+  let text = invert => {
+    let color = invert ? `hex("fff") : `hex("db4d3f");
+
+    [%cx {|
+    background-color: transparent;
+    color: $(color);
+  |}];
+  };
+};
+
+[@react.component]
+let make =
+    (
+      ~onClick=?,
+      ~className=?,
+      ~children=React.null,
+      ~variant=`filled,
+      ~invert=false,
+      ~href=?,
+      ~target=?,
+      ~prefix=?,
+    ) => {
+  let vatiantClassName =
+    switch (variant) {
+    | `outline => Styles.outline(invert)
+    | `filled => Styles.filled(invert)
+    | `text => Styles.text(invert)
+    };
+
+  switch (href) {
+  | Some(href) =>
+    <a
+      ?onClick
+      ?target
+      href
+      className={Utils.classNames([
+        Option.value(className, ~default=""),
+        Styles.wrapper,
+        vatiantClassName,
+      ])}>
+      {switch (prefix) {
+       | Some(p) => <span className=Styles.prefix> p </span>
+       | None => React.null
+       }}
+      children
+    </a>
+  | None =>
+    <button
+      ?onClick
+      className={Utils.classNames([
+        Option.value(className, ~default=""),
+        Styles.wrapper,
+        vatiantClassName,
+      ])}>
+      {switch (prefix) {
+       | Some(p) => <span className=Styles.prefix> p </span>
+       | None => React.null
+       }}
+      children
+    </button>
+  };
+};

src/universal/native/lib/Components/Components_Highlight.re

@@ -0,0 +1,57 @@
+[@react.component]
+let make = () => {
+  <pre>
+    <code className="css language-reason">
+      <span className="token module"> {"Dream" |> React.string} </span>
+      {".get(" |> React.string}
+      <br />
+      <span className="token string"> {"  \"home\"," |> React.string} </span>
+      <br />
+      <span className="token disable"> {"   _ " |> React.string} </span>
+      {"=> {" |> React.string}
+      <br />
+      <span className="token keyword"> {"    let" |> React.string} </span>
+      {" html =" |> React.string}
+      <span className="token module"> {" ReactDOM" |> React.string} </span>
+      {".renderToString(" |> React.string}
+      <span className="token tag"> {"<" |> React.string} </span>
+      <span className="token module"> {"App" |> React.string} </span>
+      <span className="token tag"> {"/>" |> React.string} </span>
+      {");" |> React.string}
+      <br />
+      <br />
+      <span className="token module"> {"    Str" |> React.string} </span>
+      {".global_replace(" |> React.string}
+      <br />
+      <span className="token module"> {"      Str" |> React.string} </span>
+      {".regexp(" |> React.string}
+      <span className="token string">
+        {"\"<div id=\\\"root\\\"></div>\"" |> React.string}
+      </span>
+      {")," |> React.string}
+      <br />
+      <span className="token string">
+        {"      \"<div id=\\\"root\\\">\"" |> React.string}
+      </span>
+      <span className="token operator"> {" ++ " |> React.string} </span>
+      {"html" |> React.string}
+      <span className="token operator"> {" ++ " |> React.string} </span>
+      <span className="token string"> {"\"</div>\"" |> React.string} </span>
+      {"," |> React.string}
+      <br />
+      <span> {"      indexFileString," |> React.string} </span>
+      <br />
+      <span> {"    )" |> React.string} </span>
+      <br />
+      <span className="token keyword"> {"    |> " |> React.string} </span>
+      {"appendUniversalStyles)" |> React.string}
+      <br />
+      <span className="token keyword"> {"    |> " |> React.string} </span>
+      {"Dream.html;" |> React.string}
+      <br />
+      {"  }" |> React.string}
+      <br />
+      {")" |> React.string}
+    </code>
+  </pre>;
+};

src/universal/native/lib/Components/Components_Layout.re

@@ -1,10 +1,22 @@
 [%styled.global
   {|
+  * {
+    box-sizing: border-box;
+  }
+  
   body {
     font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
     margin: 0;
     background: #f2f2f2;
   }
+
+  pre, code {
+      white-space: pre-line;
+  }
+
+  pre > code > span {
+      white-space: pre;
+  }
 |}
 ];