Update website for 0.62

Author: MoOx

package.json

@@ -5,7 +5,7 @@
   "version": "0.0.0",
   "scripts": {
     "svg:cleanup": "trash src/SVGs/components",
-    "svg:convert": "react-from-svg src/SVGs src/SVGs/components --with-reason",
+    "svg:convert": "react-from-svg src/SVGs src/SVGs/components --with-web-for-reason",
     "svg:format": "find src/SVGs/components -name \"*.re\" | grep -v \"node_modules\" | xargs bsrefmt --in-place",
     "svg": "yarn svg:cleanup && yarn svg:convert && yarn svg:format",
     "re:clean": "bsb -clean-world",
@@ -27,23 +27,23 @@
   "devDependencies": {
     "@moox/bs-react-helmet": "^2.0.0",
     "@phenomic/markdown-as-json": "^1.0.0",
-    "@reason-react-native/safe-area-context": "^0.6.0",
-    "bs-platform": "^7.1.0",
+    "@reason-react-native/safe-area-context": "^3.0.0",
+    "bs-platform": "^7.3.0",
     "copyfiles": "^2.2.0",
     "glob": "^7.1.3",
     "mkdirp": "^0.5.1",
     "module-alias": "^2.2.0",
     "opn-cli": "^4.1.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-from-svg": "^3.1.0",
+    "react-from-svg": "^4.0.0",
     "react-helmet": "^5.2.0",
-    "react-multiversal": "https://github.com/MoOx/react-multiversal.git#8239c04",
+    "react-multiversal": "https://github.com/MoOx/react-multiversal.git#bf0f30f",
     "react-native-web": "^0.11.2",
     "reason-future": "^2.4.0",
     "reason-highlightjs": "^0.2.0",
-    "reason-react": "^0.7.0",
-    "reason-react-native": "https://github.com/reason-react-native/reason-react-native.git#bd0b3b1",
+    "reason-react": "^0.8.0",
+    "reason-react-native": "^0.62.0",
     "static-server-cli": "^1.0.2",
     "trash-cli": "^1.4.0"
   }

src/components/Head.re

@@ -26,7 +26,9 @@ let make = () =>
        ~props=
          ReactDOMRe.objToDOMProps({
            "rel": "mask-icon",
-           "href": {Consts.baseUrl ++ "/safari-pinned-tab.svg"},
+           "href": {
+             Consts.baseUrl ++ "/safari-pinned-tab.svg";
+           },
            "color": "#222222",
          }),
        [||],

src/components/HeaderLarge.re

@@ -111,8 +111,8 @@ let make = (~currentLocation) => {
       <ViewLink href={Consts.baseUrl ++ "/"} style=styles##logoLink>
         <SpacedView style=styles##logo vertical=XS horizontal=XS>
           <SVGBsReactNative
-            width={36.->ReactFromSvg.Size.dp}
-            height={36.->ReactFromSvg.Size.dp}
+            width="36"
+            height="36"
             fill=Consts.Colors.lightest
           />
           <WindowSizeFilter.Small>
@@ -175,7 +175,7 @@ let make = (~currentLocation) => {
                accessibilityLabel={item.text}>
                {item.componentFunc(
                   ~iconColor=Consts.Colors.light,
-                  ~iconSize=22.->ReactFromSvg.Size.dp,
+                  ~iconSize="22",
                 )}
                <WindowSizeFilter.NotSmall>
                  <Spacer size=XS />

src/components/PageContent.re

@@ -102,8 +102,8 @@ let make = (~pageData) => {
            ->Option.map(officialDocHref =>
                <TextLink style=styles##officialDocLink href=officialDocHref>
                  <SVGExternalLink
-                   width={14.->ReactFromSvg.Size.dp}
-                   height={14.->ReactFromSvg.Size.dp}
+                   width="14"
+                   height="14"
                    fill={Predefined.Colors.Ios.light.blue}
                  />
                  {| Official documentation |}->React.string

src/components/ScreenBlogIndex.re

@@ -27,20 +27,22 @@ let make = (~docsIndex, ~blogIndex, ~currentLocation) => {
         style(~flexDirection=`row, ~flexWrap=`wrap, ~height=100.->pct, ())
       )>
       <ContentContainer>
-        {{blogIndex->Array.map(indexEntry =>
-            <ViewLink
-              key=indexEntry##title
-              href={Consts.baseUrl ++ "/en/blog/" ++ indexEntry##id}>
-              <SpacedView style=styles##card>
-                <Title> {indexEntry##title->React.string} Title>
-                <Spacer />
-                <TextLight>
-                  {indexEntry##date->React.string}
-                  {("  |  By @" ++ indexEntry##author)->React.string}
-                TextLight>
-              SpacedView>
-            ViewLink>
-          )}
+        {{
+           blogIndex->Array.map(indexEntry =>
+             <ViewLink
+               key=indexEntry##title
+               href={Consts.baseUrl ++ "/en/blog/" ++ indexEntry##id}>
+               <SpacedView style=styles##card>
+                 <Title> {indexEntry##title->React.string} Title>
+                 <Spacer />
+                 <TextLight>
+                   {indexEntry##date->React.string}
+                   {("  |  By @" ++ indexEntry##author)->React.string}
+                 TextLight>
+               SpacedView>
+             ViewLink>
+           );
+         }
          ->React.array}
       ContentContainer>
       <SidebarDocs docsIndex currentLocation />

src/components/SidebarBlog.re

@@ -34,14 +34,11 @@ let makeSections =
   sections
   ->List.toArray
   ->Array.map(section =>
-      {
-        "key": Some(section.title),
-        "data": section.data->List.toArray,
-        "renderItem": None,
-        "ItemSeparatorComponent": None,
-        "keyExtractor": None,
-        "sectionData": None,
-      }
+      VirtualizedSectionList.section(
+        ~key=section.title,
+        ~data=section.data->List.toArray,
+        (),
+      )
     );
 };
 

src/components/SidebarDocs.re

@@ -32,14 +32,11 @@ let makeSections =
   sections
   ->List.toArray
   ->Array.map(section =>
-      {
-        "key": Some(section.title),
-        "data": section.data->List.toArray,
-        "renderItem": None,
-        "ItemSeparatorComponent": None,
-        "keyExtractor": None,
-        "sectionData": None,
-      }
+      VirtualizedSectionList.section(
+        ~key=section.title,
+        ~data=section.data->List.toArray,
+        (),
+      )
     );
 };