V1

ocamlbr · Oct 7, 2024 · 3c3287f · 3c3287f
1 parent 7022c78
commit 3c3287f
Show file tree

Hide file tree

Showing 12 changed files with 313 additions and 56 deletions.
diff --git a/package.json b/package.json
@@ -7,14 +7,14 @@
     "init": "opam switch create . 5.1.1 -y --deps-only && npm run install-opam-npm",
     "install-opam-npm": "npm install && npm run install-opam && npm run check-npm-deps",
     "dune": "opam exec -- dune",
-    "build": "npm run dune -- build @react @node",
+    "build": "npm run dune -- build @react",
     "build-verbose": "npm run build -- --verbose",
     "clean": "npm run dune -- clean",
     "format": "npm run format-check -- --auto-promote",
     "format-check": "npm run dune -- build @fmt",
     "watch": "npm run build -- --watch",
-    "bundle": "webpack --mode production --entry ./_build/default/src/output/src/ReactApp.js",
-    "serve": "webpack serve --open --mode development --entry ./_build/default/src/output/src/ReactApp.js"
+    "bundle": "webpack --mode production --entry ./_build/default/src/output/src/App.js",
+    "serve": "webpack serve --open --mode development --entry ./_build/default/src/output/src/App.js"
   },
   "scriptsComments": {
     "preinstall-opam": "# Sync opam database with upstream repositories: https://opam.ocaml.org/doc/Usage.html#opam-update",

diff --git a/public/index.html b/public/index.html
@@ -1,11 +1,12 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="pt-BR">
   <head>
     <meta charset="utf-8" />
-    <title>Melange Basic Template</title>
-    <script type="module" src="main.js"></script>
+    <title>OCaml Brasil</title>
+    <script src="https://cdn.tailwindcss.com"></script>
   </head>
   <body>
     <div id="root"></div>
+    <script src="main.js"></script>
   </body>
 </html>
diff --git a/src/ReactApp.mlx → src/App.mlx b/src/ReactApp.mlx → src/App.mlx
@@ -1,7 +1,9 @@
+open Home
+
 module App = struct
   let[@react.component] make () =
-    ["Hello " ^ World.name ^ "!"; "This is React!!"]
-    |> List.map (fun greeting -> <h1 key=greeting> (React.string greeting) </h1>)
+    ["Hello " ^ "MLX" ^ "!"; "This is React!!"]
+    |> List.map (fun greeting -> <h1 className="text-2xl font-bold mb-6 text-center text-gray-800" key=greeting> (React.string greeting) </h1>)
     |> Array.of_list
     |> React.array
 end
@@ -10,6 +12,6 @@ let () =
   match ReactDOM.querySelector "#root" with
   | Some element ->
     let root = ReactDOM.Client.createRoot element in
-    ReactDOM.Client.render root <App />
+    ReactDOM.Client.render root <Home />
   | None ->
     Js.Console.error "Failed to start React: couldn't find the #root element"
diff --git a/src/Hello.ml b/src/Hello.ml
diff --git a/src/Home.mlx b/src/Home.mlx
@@ -0,0 +1,67 @@
+module Home = struct
+    let[@react.component] make () =
+        <div className="bg-gray-900 text-white min-h-screen">
+      <header className="bg-gray-800 p-4">
+        <nav className="flex justify-between items-center">
+          <div className="text-2xl font-bold">(React.string "OCaml BR")</div>
+          <ul className="flex space-x-4">
+            <li>(React.string "Grupo no Telegram")</li>
+            <li>(React.string "Associe-se")</li>
+            (* <li>(React.string "item")</li> *)
+          </ul>
+        </nav>
+      </header>
+
+      <main className="container mx-auto px-4 py-8">
+        <section className="text-center mb-12">
+          <h1 className="text-4xl font-bold mb-4">(React.string "OCaml Brasil")</h1>
+          <p className="text-xl mb-4">(React.string "Comunidade Brasileira de programadores OCaml com interesse em falar sobre a linguagem, construir coisas usando OCaml e fazer evangelismo da linguagem no Brasil.")</p>
+          <button className="bg-orange-500 text-white px-6 py-2 rounded">(React.string "Aprenda OCaml")</button>
+        </section>
+
+        <section className="mb-12">
+          <h2 className="text-2xl font-bold mb-4">(React.string "Porque aprender OCaml?")</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div className="bg-gray-800 p-6 rounded">
+        <h3 className="text-xl font-bold mb-2">(React.string {js|Sistema de Tipos Poderoso! 💪|js})</h3>
+              <p>(React.string {js|O sistema de tipos do OCaml captura erros em tempo de compilação, garantindo um código robusto e confiável.|js})</p>
+            </div>
+            <div className="bg-gray-800 p-6 rounded">
+        <h3 className="text-xl font-bold mb-2">(React.string {js|Blazing Fast! 🔥|js})</h3>
+        <p>(React.string {js|O compilador do OCaml é conhecido por sua velocidade, permitindo iteração e desenvolvimento rápidos.|js})</p>
+            </div>
+            <div className="bg-gray-800 p-6 rounded">
+        <h3 className="text-xl font-bold mb-2">(React.string {js|Grandes Empresas confiam em OCaml! 📈 |js})</h3>
+        <p>(React.string {js|Usado por grandes empresas como Facebook, Bloomberg e Jane Street em aplicações críticas.|js})</p>
+            </div>
+          </div>
+        </section>
+
+        <section>
+        <h2 className="text-2xl font-bold mb-4">(React.string {js|Últimas Notícias|js})</h2>
+          (* Article 1 *)
+          <article>
+          <div className="mt-2 bg-gray-800 p-4 rounded">
+        <h3 className="text-xl font-bold">(React.string {js|Título|js})</h3>
+            <p>(React.string "04/01/2025 15:34 UTC-3")</p>
+            <p> (React.string "Content")</p>
+          </div>
+        </article>
+          (* Article 2 *)
+          <article>
+          <div className="mt-2 bg-gray-800 p-4 rounded">
+        <h3 className="text-xl font-bold">(React.string {js|Título|js})</h3>
+            <p>(React.string "04/01/2025 15:34 UTC-3")</p>
+            <p> (React.string "Content")</p>
+          </div>
+        </article>
+        </section>
+      </main>
+
+      <footer className="bg-gray-800 p-4 mt-12">
+        <div className="container mx-auto text-center">
+          <p>(React.string "Feito com OCaml e React.")</p>
+        </div>
+      </footer>
+    </div>
+end
diff --git a/src/dune b/src/dune
@@ -1,45 +1,9 @@
-; `melange.emit` is a Dune stanza that will produce build rules to generate
-; JavaScript files from sources using the Melange compiler
-; https://dune.readthedocs.io/en/stable/melange.html#melange-emit
 (melange.emit
-
- ; The `target` field is used by Dune to put all JavaScript artifacts in a specific folder inside `_build/default`
- ; This field `target` allows to have multiple `melange.emit` stanzas in the `dune` file
- ; if, for example, we want to produce ES6 and CommonJS output from the same sources.
- (target output)
-
- ; The `alias` field can be used later on to build just the artifacts from this `melange.emit`
- ; by calling `dune build @react`.
- ; Note that if no `alias` field is defined, a default `melange` alias will be used instead.
+ (target output) ;; Specify the desired output directory directly
  (alias react)
+ (libraries reason-react melange.belt)
+ (preprocess (pps melange.ppx reason-react-ppx))
+ (module_systems es6)
+ (promote (until-clean))
+ (modules :standard))
 
- ; Here's the list of dependencies of the stanza. In this case (being `melange.emit`),
- ; Dune will look into those dependencies and generate rules with JavaScript targets
- ; for the modules in those libraries as well.
- ; Caveat: the libraries need to be specified with `(modes melange)`.
- (libraries reason-react world melange.belt)
-
- ; By default, Dune will include all modules in the folder to the targets. With `modules` field
- ; we can tweak this default behavior by excluding `hello` from the list of targets of this stanza.
- ; See https://dune.readthedocs.io/en/stable/reference/predicate-language.html#predicate-language
- (modules :standard \ hello)
-
- ; Uncomment the following to copy the generated JavaScript files inside the source tree
- ; (promote (until-clean))
-
- (preprocess
-  ; The `pps` field is a list of ppx to apply to the sources before generating JavaScript. melange.ppx allows to use Melange attributes [@mel. ...] (https://melange.re/v2.0.0/communicate-with-javascript/#attributes)
-  ; reason-react-ppx allows to use JSX for ReasonReact components by using the [@JSX] attributes from Reason: https://reasonml.github.io/docs/en/jsx
-  (pps melange.ppx reason-react-ppx))
-
- ; module_systems is a list of module systems to generate code for (es6, commonjs)
- ; Change to (module_systems es6 commonjs) if you want to generate both
- ; https://melange.re/v2.0.0/build-system/#commonjs-or-es6-modules
- (module_systems es6))
-
-(melange.emit
- (target node)
- (alias node)
- (libraries world)
- (modules hello)
- (module_systems (es6 mjs)))
diff --git a/src/output/src/.output.mobjs/melange.js b/src/output/src/.output.mobjs/melange.js
diff --git a/src/output/src/App.js b/src/output/src/App.js
diff --git a/src/output/src/Home.js b/src/output/src/Home.js
diff --git a/src/world/dune b/src/world/dune
diff --git a/src/world/world.ml b/src/world/world.ml