meta tags

rescript-lang · jderochervlk · Sep 28, 2025 · Sep 28, 2025 · Sep 28, 2025 · Sep 28, 2025
commit 666f23588bf982ce33c249f4f37cff5703d542a5
diff --git a/app/root.res b/app/root.res
@@ -45,6 +45,10 @@ let default = () => {
       <link rel="stylesheet" href={hljsCss} />
       <link rel="stylesheet" href={utilsCss} />
       <link rel="icon" href="/favicon.ico" />
+      <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, minimal-ui"
+      />
       <meta charSet="UTF-8" />
     </head>
     <body>

diff --git a/app/routes/BlogRoute.res b/app/routes/BlogRoute.res
@@ -17,14 +17,15 @@ let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
 let default = () => {
   let {posts, category} = ReactRouter.useLoaderData()
   <>
-    <title>
-      {React.string(
-        `${switch category {
-          | All => "All Posts"
-          | Archived => "Archived Posts"
-          }} | ReScript Blog`,
-      )}
-    </title>
+    <Meta
+      siteName="ReScript Blog"
+      title={`${switch category {
+        | All => "All Posts"
+        | Archived => "Archived Posts"
+        }} | ReScript Blog`}
+      description="News, Announcements, Release Notes and more"
+    />
+
     <Blog posts category />
   </>
 }
diff --git a/app/routes/CommunityRoute.res b/app/routes/CommunityRoute.res
diff --git a/app/routes/LandingPageRoute.res b/app/routes/LandingPageRoute.res
@@ -1,6 +1,17 @@
 let default = () => {
   <>
-    <title> {React.string("The ReScript Programming Language")} </title>
+    <Meta
+      title="The ReScript Programming Language"
+      description="Fast, Simple, Fully Typed JavaScript from the Future"
+      keywords=[
+        "JavaScript",
+        "JS",
+        "programming language",
+        "ReScript",
+        "rescriptlang",
+        "web development",
+      ]
+    />
     <LandingPageLayout>
       <> </>
     </LandingPageLayout>

diff --git a/app/routes/MdxRoute.res b/app/routes/MdxRoute.res
@@ -1,4 +1,3 @@
-open ReactRouter
 open Mdx
 
 type loaderData = {
@@ -133,7 +132,7 @@ let communityTableOfContents = async () => {
   categories
 }
 
-let loader: Loader.t<loaderData> = async ({request}) => {
+let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
   let {pathname} = WebAPI.URL.make(~url=request.url)
 
   let mdx = await loadMdx(request, ~options={remarkPlugins: [Mdx.gfm]})
@@ -264,39 +263,41 @@ let loader: Loader.t<loaderData> = async ({request}) => {
 }
 
 let default = () => {
-  let {pathname} = useLocation()
+  let {pathname} = ReactRouter.useLocation()
   let component = useMdxComponent(~components)
   let attributes = useMdxAttributes()
 
-  let loaderData: loaderData = useLoaderData()
+  let loaderData: loaderData = ReactRouter.useLoaderData()
 
   let {entries, categories, title} = loaderData
 
   <>
-    {title != "" ? <title> {React.string(title)} </title> : React.null}
-    <meta name="description" content={attributes.description->Nullable.getOr("")} />
     {if (pathname :> string) == "/docs/manual/api" {
-      <ApiOverviewLayout.Docs>
-        <div className="markdown-body"> {component()} </div>
-      </ApiOverviewLayout.Docs>
+      <>
+        <Meta title=title description={attributes.description->Nullable.getOr("ReScript API")} />
+        <ApiOverviewLayout.Docs>
+          <div className="markdown-body"> {component()} </div>
+        </ApiOverviewLayout.Docs>
+      </>
     } else if (
       (pathname :> string)->String.includes("docs/manual") ||
         (pathname :> string)->String.includes("docs/react")
     ) {
-      <DocsLayout
-        categories
-        activeToc={title: "Introduction", entries}
-        breadcrumbs=?loaderData.breadcrumbs
-        editHref={`https://github.com/rescript-lang/rescript-lang.org/blob/master/pages${attributes.path}.mdx`}
-      >
-        <div className="markdown-body pt-20 md:pt-0"> {component()} </div>
-      </DocsLayout>
+      <>
+        <Meta title=title description={attributes.description->Nullable.getOr("")} />
+        <DocsLayout
+          categories
+          activeToc={title: "Introduction", entries}
+          breadcrumbs=?loaderData.breadcrumbs
+          editHref={`https://github.com/rescript-lang/rescript-lang.org/blob/master/pages${attributes.path}.mdx`}
+        >
+          <div className="markdown-body pt-20 md:pt-0"> {component()} </div>
+        </DocsLayout>
+      </>
     } else if (pathname :> string)->String.includes("community") {
-      <div>
-        <CommunityLayout categories entries>
-          <div className="markdown-body"> {component()} </div>
-        </CommunityLayout>
-      </div>
+      <CommunityLayout categories entries>
+        <div className="markdown-body"> {component()} </div>
+      </CommunityLayout>
     } else if (pathname :> string)->String.includes("blog") {
       switch loaderData.blogPost {
       | Some({frontmatter, archived, path}) =>
@@ -307,13 +308,13 @@ let default = () => {
       switch loaderData.mdxSources {
       | Some(mdxSources) =>
         <>
-          <title>
-            {React.string(
-              `${loaderData.activeSyntaxItem
-                ->Option.map(item => item.name)
-                ->Option.getOr("Syntax Lookup")} | ReScript API`,
-            )}
-          </title>
+          <Meta
+            title={loaderData.activeSyntaxItem
+            ->Option.map(item => item.name)
+            ->Option.getOr("Syntax Lookup | ReScript API")}
+            description={attributes.description->Nullable.getOr("")}
+          />
+
           <SyntaxLookup mdxSources activeItem=?loaderData.activeSyntaxItem>
             {component()}
           </SyntaxLookup>
@@ -322,6 +323,4 @@ let default = () => {
       }
     }}
   </>
-
-  // </ManualDocsLayout.V1200Layout>
 }
diff --git a/app/routes/PackagesRoute.res b/app/routes/PackagesRoute.res
@@ -7,7 +7,11 @@ let loader = async () => {
 let default = () => {
   let props = ReactRouter.useLoaderData()
   <>
-    <title> {React.string("Package Index | ReScript Documentation")} </title>
+    <Meta
+      ogSiteName="ReScript Packages"
+      title="Package Index | ReScript Documentation"
+      description="Official and unofficial resources, libraries and bindings for ReScript"
+    />
     <Packages {...props} />
   </>
 }
diff --git a/app/routes/TryRoute.res b/app/routes/TryRoute.res
@@ -49,7 +49,10 @@ module ClientOnly = {
 let default = () => {
   let {bundleBaseUrl, versions} = ReactRouter.useLoaderData()
   <>
-    <title> {React.string("ReScript Playground")} </title>
+    <Meta
+      title="ReScript Playground" description="Try ReScript in the browser" ogImage="/og/try.png"
+    />
+
     <ClientOnly bundleBaseUrl versions />
   </>
 }
diff --git a/src/Blog.res b/src/Blog.res
@@ -196,7 +196,6 @@ type params = {slug: string}
 @react.component
 let make = (~posts: array<BlogApi.post>, ~category: category): React.element => {
   let content = if Array.length(posts) === 0 {
-    /* <div> {React.string("Currently no posts available")} </div>; */
     <div className="mt-8">
       <Markdown.H1> {React.string("Blog not yet available")} </Markdown.H1>
       <Markdown.Warn> {React.string("This blog is currently in the works.")} </Markdown.Warn>
@@ -259,12 +258,8 @@ let make = (~posts: array<BlogApi.post>, ~category: category): React.element =>
   }
 
   let (isOverlayOpen, setOverlayOpen) = React.useState(() => false)
-  let title = "Blog | ReScript Documentation"
 
   <>
-    <Meta
-      siteName="ReScript Blog" title description="News, Announcements, Release Notes and more"
-    />
     <div className="mt-16 pt-2">
       <div className="text-gray-80 text-18">
         <div className="flex justify-center overflow-hidden">

diff --git a/src/common/Util.res b/src/common/Util.res
@@ -1,44 +1,3 @@
-/**
-module Debounce = {
-  // See: https://davidwalsh.name/javascript-debounce-function
-  let debounce = (~wait, fn) => {
-    let timeout = ref(None)
-
-    () => {
-      let unset = () => timeout := None
-
-      switch timeout.contents {
-      | Some(id) => Js.Global.clearTimeout(id)
-      | None => fn()
-      }
-      timeout := Some(Js.Global.setTimeout(unset, wait))
-    }
-  }
-
-  let debounce3 = (~wait, ~immediate=false, fn) => {
-    let timeout = ref(None)
-
-    (a1, a2, a3) => {
-      let unset = () => {
-        timeout := None
-        immediate ? fn(a1, a2, a3) : ()
-      }
-
-      switch timeout.contents {
-      | Some(id) => Js.Global.clearTimeout(id)
-      | None => fn(a1, a2, a3)
-      }
-      timeout := Some(Js.Global.setTimeout(unset, wait))
-
-      if immediate && timeout.contents === None {
-        fn(a1, a2, a3)
-      } else {
-        ()
-      }
-    }
-  }
-}
-**/
 module Unsafe = {
   external elementAsString: React.element => string = "%identity"
 }
@@ -51,9 +10,16 @@ module String = {
   let capitalize: string => string = %raw("str => {
       return str && str.charAt(0).toUpperCase() + str.substring(1);
     }")
+
+  let capitalizeSentence = str =>
+    str
+    ->String.split(" ")
+    ->Array.map(str => str->String.length > 2 ? str->String.capitalize : str)
+    ->Array.join(" ")
 }
 
 module Url = {
+  // TODO: convert to ReScript
   let isAbsolute: string => bool = %raw(`
     function(str) {
       var r = new RegExp('^(?:[a-z]+:)?//', 'i');
@@ -63,7 +29,7 @@ module Url = {
       }
       return false;
     }
-  `) //', 'i');
+  `)
 }
 
 module Date = {

diff --git a/src/common/Util.resi b/src/common/Util.resi
@@ -9,6 +9,7 @@ module Unsafe: {
 module String: {
   let camelCase: string => string
   let capitalize: string => string
+  let capitalizeSentence: string => string
 }
 
 module Date: {

diff --git a/src/components/Meta.res b/src/components/Meta.res
@@ -9,7 +9,7 @@ let make = (
   ~canonical=?,
   ~title=?,
   ~ogLocale="en_US",
-  ~ogSiteName=?,
+  ~ogSiteName=siteName,
   ~ogDescription=description,
   ~ogTitle=?,
   ~ogImage="/Art-3-rescript-launch.jpg",
@@ -23,11 +23,6 @@ let make = (
   | Some(title) => title
   }
 
-  let ogSiteName = switch ogSiteName {
-  | Some(ogSiteName) => ogSiteName
-  | None => siteName
-  }
-
   let ogTitle = switch ogTitle {
   | Some(ogTitle) => ogTitle
   | None => title
@@ -67,14 +62,8 @@ let make = (
     <meta key="twitter:card" name="twitter:card" content="summary_large_image" />
     <link rel="alternate" type_="application/rss+xml" title="ReScript Blog" href="/blog/feed.xml" />
     // Docsearch meta tags
-    <meta
-      name="docsearch:version"
-      content={switch version {
-      | Some(Version(v)) => v
-      | Some(Latest) => Constants.versions.latest
-      | Some(Next) => Constants.versions.next
-      | _ => Constants.versions.latest
-      }}
-    />
+    <meta name="docsearch:version" content="v12" />
+    // Robots meta tag
+    <meta name="robots" content="index, follow" />
   </>
 }
diff --git a/src/layouts/ApiOverviewLayout.res b/src/layouts/ApiOverviewLayout.res
@@ -1,6 +1,5 @@
 module Sidebar = SidebarLayout.Sidebar
 
-// TODO RR7 - do I need this?
 let categories: array<Sidebar.Category.t> = [
   {
     name: "Overview",
@@ -46,12 +45,7 @@ module Docs = {
       />
 
     <SidebarLayout
-      breadcrumbs
-      categories
-      // metaTitle="API"
-      sidebarState=(isSidebarOpen, setSidebarOpen)
-      theme={#Js}
-      sidebar
+      breadcrumbs categories sidebarState=(isSidebarOpen, setSidebarOpen) theme={#Js} sidebar
     >
       children
     </SidebarLayout>

diff --git a/src/layouts/CommunityLayout.res b/src/layouts/CommunityLayout.res
@@ -2,23 +2,35 @@
 let make = (~children, ~categories, ~entries) => {
   let {pathname} = ReactRouter.useLocation()
 
+  Console.log((pathname :> string)->String.split("/"))
+
+  let activePage =
+    (pathname :> string)
+    ->String.split("/")
+    ->Array.filter(str => str !== "")
+    ->Array.at(1)
+    ->Option.getOr("Community")
+    ->String.replaceAll("-", " ")
+    ->Util.String.capitalizeSentence
+
   let breadcrumbs = list{{Url.name: "Community", href: "/community"}}
 
   let (isSidebarOpen, setSidebarOpen) = React.useState(_ => false)
-
-  <SidebarLayout
-    sidebar={<SidebarLayout.Sidebar
-      categories
-      isOpen={isSidebarOpen}
-      route=pathname
-      toggle={() => setSidebarOpen(prev => !prev)}
-      activeToc={title: "Overview", entries}
-    />}
-    sidebarState=(isSidebarOpen, setSidebarOpen)
-    theme=#Reason
-    // metaTitle="ReScript Community"
-    breadcrumbs
-  >
-    children
-  </SidebarLayout>
+  <>
+    <Meta title={`${activePage} | ReScript Community`} />
+    <SidebarLayout
+      sidebar={<SidebarLayout.Sidebar
+        categories
+        isOpen={isSidebarOpen}
+        route=pathname
+        toggle={() => setSidebarOpen(prev => !prev)}
+        activeToc={title: "Overview", entries}
+      />}
+      sidebarState=(isSidebarOpen, setSidebarOpen)
+      theme=#Reason
+      breadcrumbs
+    >
+      children
+    </SidebarLayout>
+  </>
 }