Website: add search

Author: MoOx

website/scripts/Prerender.re

@@ -43,8 +43,17 @@ let make =
   {j|
 <!DOCTYPE html>
 <html style="height:100%">
-<head>$helmetMeta $helmetLinks $helmetTitle $helmetStyle $helmetScript $css</head>
-<body style="min-height:100%">$html</body>
+<head>
+$helmetMeta
+$helmetLinks
+$helmetTitle
+$helmetStyle
+$css
+</head>
+<body style="min-height:100%">
+$html
+$helmetScript
+</body>
 </html>|j};
 };
 

website/src/components/Head.re

@@ -80,8 +80,11 @@ code {
   font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  all: unset;
+/* we use this tags for semantics/indexing only */
+h1, h2, h3, h4, h5, h6, p, blockquote {
+  font:inherit;
+  margin: 0;
+  padding: 0;
 }
 
 .hljs {
@@ -105,4 +108,23 @@ h1, h2, h3, h4, h5, h6 {
 |j}
       ->React.string
     </style>
+    // algolia
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"
+    />
+    <script>
+      {j|
+docsearch({
+  "apiKey": "2e8d1544f0698bef1243f3f7850b6483",
+  "indexName": "reason-react-native",
+  "inputSelector": "#SearchInput",
+  "debug": true
+});
+|j}
+      ->React.string
+    </script>
   </BsReactHelmet>;

website/src/components/HeaderLarge.re

@@ -17,14 +17,17 @@ let styles =
           ~zIndex=1,
           (),
         ),
+      "barWrapper":
+        style(~backgroundColor=Consts.Colors.dark, ~overflow=`visible, ())
+        ->unsafeAddStyle({"overflow-y": "visible", "overflow-x": "hidden"}),
       "bar":
         style(
           ~flexDirection=`row,
           ~flexWrap=`wrap,
           ~justifyContent=`spaceBetween,
           (),
         ),
-      "barWrapper": style(~backgroundColor=Consts.Colors.dark, ()),
+
       "logoLink":
         style(
           ~flexGrow=1.,
@@ -42,6 +45,7 @@ let styles =
           ~color=Consts.Colors.light,
           (),
         ),
+      "search": style(),
       "links":
         style(
           ~flexGrow=1.,
@@ -129,6 +133,20 @@ let make = (~currentLocation) => {
            })
          ->React.array}
       </SpacedView>
+      <SpacedView style=styles##search vertical=XS>
+        <input
+          id="SearchInput"
+          placeholder="Search"
+          style={ReactDOMRe.Style.make(
+            ~fontSize="15px",
+            ~width="120px",
+            ~borderRadius="20px",
+            ~border="0",
+            ~padding="10px 20px",
+            (),
+          )}
+        />
+      </SpacedView>
       <SpacedView style=styles##icons vertical=XS>
         {Consts.socialLinks
          ->Belt.Array.map(item =>

website/src/components/shared/Html.re

@@ -234,7 +234,7 @@ module P = {
       ) => {
     <View style=Style.(arrayOption([|Some(styles##p), styl|]))>
       <Text style=Style.(arrayOption([|Some(styles##text), textStyl|]))>
-        children
+        <p> children </p>
       </Text>
     </View>;
   };
@@ -270,7 +270,7 @@ module Li = {
         style=Style.(
           arrayOption([|Some(styles##li), Some(styles##text), styl|])
         )>
-        children
+        <p> children </p>
       </Text>
     </View>;
   };
@@ -288,7 +288,7 @@ module BlockQuote = {
     <View style=Style.(arrayOption([|Some(styles##blockQuote), styl|]))>
       <Text
         style=Style.(arrayOption([|Some(styles##blockQuoteText), textStyl|]))>
-        children
+        <blockquote> children </blockquote>
       </Text>
     </View>;
   };