Polish v12 blogpost and playground (#1150)

* use self-hosted brand logo

* remove typos

* remove unused children

* add backdrop blur to gutter

Author: tsnobip

app/routes/LandingPageRoute.res

@@ -12,8 +12,6 @@ let default = () => {
         "web development",
       ]
     />
-    <LandingPageLayout>
-      <> </>
-    </LandingPageLayout>
+    <LandingPageLayout />
   </>
 }

markdown-pages/blog/release-12-0-0.mdx

@@ -197,10 +197,10 @@ Note that `Result.getOrThrow` now throws a JavaScript exception, so please updat
 
 We’ve renamed JS errors to `JsError.t` to better distinguish them from the `Result.Error` variant. Since JavaScript allows throwing anything (not only proper Error objects), the previous way of catching JS exceptions was unsafe:
 
-```res
+```rescript
 let foo = switch myUnsafeJsResult() {
 | exception Exn.Error(e) => Error(e->Error.message)
-  // ☝️ this will crash if `e` is undefined or null
+// ☝️ this will crash if `e` is undefined or null
 | myRes => Ok(myRes)
 }
 ```
@@ -209,17 +209,17 @@ Additionally, the coexistence of `Result.Error` and the `Error` module caused co
 
 The new recommended pattern is:
 
-```res
+```rescript
 let foo = switch myUnsafeJsResult() {
-| exception JsExn(e) => Error(e->JsExn.message))
-// ☝️ this is now safe even `e` is undefined or null
+| exception JsExn(e) => Error(e->JsExn.message)
+// ☝️ this is now safe even if `e` is undefined or null
 | myRes => Ok(myRes)
 }
 ```
 
 Utility helpers for working with JS errors are now in `JsError`, eg:
 
-```res
+```rescript
 JsError.throw(JsError.RangeError.make("the payload should be below 16"))
 ```
 

src/BlogLoader.res

@@ -19,7 +19,7 @@ let transform = (mdx: Mdx.attributes): BlogApi.post => {
         username: "rescript-team",
         fullname: "ReScript Team",
         role: "Core Development",
-        imgUrl: "https://pbs.twimg.com/profile_images/1358354824660541440/YMKNWE1V_400x400.png",
+        imgUrl: "/brand/rescript-brandmark.svg",
         social: X("rescriptlang"),
       }),
       co_authors: (mdx.co_authors->Nullable.getOr([]) :> array<BlogFrontmatter.author>),

src/common/BlogFrontmatter.res

@@ -55,7 +55,7 @@ let authors = [
     username: "rescript-team",
     fullname: "ReScript Team",
     role: "Core Development",
-    imgUrl: "https://pbs.twimg.com/profile_images/1358354824660541440/YMKNWE1V_400x400.png",
+    imgUrl: "/brand/rescript-brandmark.svg",
     social: X("rescriptlang"),
   },
   {

src/components/CodeMirror.res

@@ -695,10 +695,14 @@ let createEditor = (config: editorConfig): editorInstance => {
         ".cm-activeLine": dict{
           "backgroundColor": "rgba(255, 255, 255, 0.02)",
         },
-        ".cm-gutters": dict{"backgroundColor": "inherit"},
+        ".cm-gutters": dict{
+          "color": "#696b7d",
+          "backgroundColor": "transparent",
+          "backdropFilter": "blur(var(--blur-sm))",
+        },
         ".cm-gutters.cm-gutters-before": dict{"border": "none"},
-        ".cm-activeLineGutter": dict{
-          "color": "#cdcdd6",
+        ".cm-gutterElement.cm-activeLineGutter": dict{
+          "color": "#ffffff",
           "backgroundColor": "inherit",
         },
         "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": dict{

src/layouts/LandingPageLayout.res

@@ -677,7 +677,7 @@ module CuratedResources = {
 }
 
 @react.component
-let make = (~components=MarkdownComponents.default, ~children) => {
+let make = (~components=MarkdownComponents.default) => {
   <>
     <Meta
       title="The ReScript Programming Language"
@@ -708,7 +708,6 @@ let make = (~components=MarkdownComponents.default, ~children) => {
                   <OtherSellingPoints />
                   <TrustedBy />
                   <CuratedResources />
-                  children
                 </div>
               </div>
             </main>

src/layouts/LandingPageLayout.resi

@@ -1,2 +1,2 @@
 @react.component
-let make: (~components: MarkdownComponents.t=?, ~children: React.element) => React.element
+let make: (~components: MarkdownComponents.t=?) => React.element