Skip to content

Commit cf89016

Browse files
committed
add page container + tailwind
1 parent dc66179 commit cf89016

File tree

18 files changed

+91
-101
lines changed

18 files changed

+91
-101
lines changed

client/src/Bridge.re

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,16 @@ module React = {
44
};
55

66
module Dom = {
7+
module Div = {
8+
[@react.component]
9+
let make = (~cls as className=?, ~children) => {
10+
<div ?className> children </div>;
11+
};
12+
};
713
module Ul = {
814
[@react.component]
9-
let make = (~children) => {
10-
<ul> children </ul>;
15+
let make = (~cls as className=?, ~children) => {
16+
<ul ?className> children </ul>;
1117
};
1218
};
1319
module Form = {

client/src/Index.re

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
[%bs.raw {|require("./index.css")|}];
2-
31
switch (Bindings.getElementById("root")) {
42
| Some(el) => ReactDOMRe.hydrate(<App />, el)
53
| None => ()

client/src/index.css

Lines changed: 0 additions & 14 deletions
This file was deleted.

client/src/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<title>Reason react starter</title>
5+
<title>OCaml webapp</title>
6+
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
67
</head>
78
<body>
89
<div id="root"></div>

server/lib/handlers.ml

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ let default_head =
1212
link ~rel:[ `Icon ]
1313
~a:[ a_mime_type "image/x-icon" ]
1414
~href:"/static/favicon.ico" ();
15-
link ~rel:[ `Stylesheet ] ~href:"/static/style.css" ();
15+
link ~rel:[ `Stylesheet ]
16+
~href:"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" ();
1617
]
1718

1819
(** The basic page layout, emitted as an [`Html string] which Opium can use as a
@@ -78,33 +79,33 @@ module Handlers = struct
7879

7980
module Pages = struct
8081
(** Defines a handler that replies to requests at the root endpoint *)
81-
let root _req = respond' @@ basic_page (Shared.PageWelcome.make ())
82+
let root _req = respond' @@ basic_page ([Shared.PageWelcome.make ()])
8283

8384
(** Defines a handler that takes a path parameter from the route *)
84-
let hello lang _req = respond' @@ basic_page (Shared.PageHello.make ~lang)
85+
let hello lang _req = respond' @@ basic_page ([Shared.PageHello.make ~lang])
8586

8687
(** Fallback handler in case the endpoint is called without a language parameter *)
8788
let hello_fallback _req =
88-
respond' @@ basic_page (Shared.PageHelloFallback.make ())
89+
respond' @@ basic_page ([Shared.PageHelloFallback.make ()])
8990

9091
let excerpts_add _req =
91-
respond' @@ basic_page (Shared.PageAddExcerpt.make ())
92+
respond' @@ basic_page ([Shared.PageAddExcerpt.make ()])
9293

9394
let excerpts_by_author name req =
9495
let open Lwt in
9596
Db.Get.excerpts_by_author name req
9697
>>= respond_or_err @@ fun excerpts ->
9798
page_with_payload
9899
(Shared.PageExcerpts_j.string_of_payload excerpts)
99-
(Shared.PageExcerpts.make ~excerpts)
100+
([Shared.PageExcerpts.make ~excerpts])
100101

101102
let authors_with_excerpts req =
102103
let open Lwt in
103104
Db.Get.authors req
104105
>>= respond_or_err @@ fun authors ->
105106
page_with_payload
106107
(Shared.PageAuthorExcerpts_j.string_of_payload authors)
107-
(Shared.PageAuthorExcerpts.make ~authors)
108+
([Shared.PageAuthorExcerpts.make ~authors])
108109
end
109110

110111
module Api = struct
@@ -130,7 +131,7 @@ module Post = struct
130131
App.urlencoded_pairs_of_body req >>= excerpt_of_form_data >>= fun excerpt ->
131132
Db.Update.add_excerpt excerpt req
132133
>>= respond_or_err (fun () ->
133-
basic_page (Shared.PageExcerptAdded.make ~excerpt))
134+
basic_page ([Shared.PageExcerptAdded.make ~excerpt]))
134135
end
135136

136137
module Router = Shared.Router.Make (Handlers)
@@ -148,4 +149,4 @@ let create_middleware ~router =
148149
let m = create_middleware ~router:(Shared.Method_routes.one_of Router.routes)
149150

150151
let four_o_four =
151-
not_found (fun _req -> respond' @@ basic_page (Shared.PageNotFound.make ()))
152+
not_found (fun _req -> respond' @@ basic_page ([Shared.PageNotFound.make ()]))

server/static/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<title>Reason react starter</title>
5+
<title>OCaml webapp</title>
6+
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
67
</head>
78
<body>
89
<div id="root"></div>

server/static/style.css

Lines changed: 0 additions & 35 deletions
This file was deleted.

server/tyxml-reasonreact-bridge/bridge.ml

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,19 +25,27 @@ end
2525
module Dom = struct
2626
open Tyxml.Html
2727

28-
module Ul = struct let createElement ~children () = ul children end
28+
let opt_concat f el list =
29+
match el with
30+
| None -> list
31+
| Some el -> f el :: list
32+
33+
module Div = struct
34+
let createElement ?cls ~children () =
35+
div ~a:([] |> opt_concat (fun cls -> a_class [ cls ]) cls) children
36+
end
37+
38+
module Ul = struct
39+
let createElement ?cls ~children () =
40+
ul ~a:([] |> opt_concat (fun cls -> a_class [ cls ]) cls) children
41+
end
2942

3043
module Form = struct
3144
let createElement ~action ~form_method ~children () =
3245
form ~a:[ a_action action; a_method form_method ] children
3346
end
3447

3548
module Input = struct
36-
let opt_concat f el list =
37-
match el with
38-
| None -> list
39-
| Some el -> f el :: list
40-
4149
let createElement ~input_type ?name ?value () =
4250
input
4351
~a:

shared/Link.re

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ open Bridge;
22

33
let createElement = (~url, ~txt, ()) => {
44
<a
5+
className="text-blue-500 hover:text-blue-800"
56
href=url
67
onClick={e => {
78
ReactEvent.Mouse.preventDefault(e);

shared/PageAddExcerpt.re

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -23,19 +23,21 @@ let make = () => {
2323

2424
let submit = <> <Input input_type=`Submit value="Submit" /> </>;
2525

26-
<>
27-
{<Form form_method=`Post action="/excerpts/add">
28-
{List.mapi(
29-
(_i, x) => <P key={string_of_int(_i)}> x </P>,
30-
[
31-
txtInput("author"),
32-
excerptInput,
33-
txtInput("source"),
34-
txtInput("page"),
35-
submit,
36-
],
37-
)
38-
|> React.list}
39-
</Form>}
40-
</>;
26+
<PageContainer>
27+
<>
28+
{<Form form_method=`Post action="/excerpts/add">
29+
{List.mapi(
30+
(_i, x) => <P key={string_of_int(_i)}> x </P>,
31+
[
32+
txtInput("author"),
33+
excerptInput,
34+
txtInput("source"),
35+
txtInput("page"),
36+
submit,
37+
],
38+
)
39+
|> React.list}
40+
</Form>}
41+
</>
42+
</PageContainer>;
4143
};

0 commit comments

Comments
 (0)