Skip to content

Commit 14d00a1

Browse files
jderochervlkjderochervlk
committed
getting meta tags to work
1 parent 2b785e2 commit 14d00a1

18 files changed

+136
-529
lines changed

‎app/routes/ApiRoute.res‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,5 +132,17 @@ let loader: ReactRouter.Loader.t<loaderData> = async args => {
132132

133133
let default = () => {
134134
let loaderData: loaderData = ReactRouter.useLoaderData()
135-
<ApiDocs {...loaderData} />
135+
let {pathname} = ReactRouter.useLocation()
136+
137+
let segments = (pathname :> string)->String.split("/")
138+
let title = switch (segments[4], segments[5]) {
139+
| (Some(x), Some(y)) => `${x->String.capitalize}.${y->String.capitalize} | ReScript API`
140+
| (Some(x), None) => `${x->String.capitalize} | ReScript API`
141+
| _ => "ReScript API"
142+
}
143+
144+
<>
145+
<title> {React.string(title)} </title>
146+
<ApiDocs {...loaderData} />
147+
</>
136148
}

‎app/routes/BlogRoute.res‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,15 @@ let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
1616
@react.component
1717
let default = () => {
1818
let {posts, category} = ReactRouter.useLoaderData()
19-
<Blog posts category />
19+
<>
20+
<title>
21+
{React.string(
22+
`${switch category {
23+
| All => "All Posts"
24+
| Archived => "Archived Posts"
25+
}} | ReScript Blog`,
26+
)}
27+
</title>
28+
<Blog posts category />
29+
</>
2030
}

‎app/routes/LandingPageRoute.res‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
let default = () => {
2-
<LandingPageLayout>
3-
<> </>
4-
</LandingPageLayout>
2+
<>
3+
<title> {React.string("The ReScript Programming Language")} </title>
4+
<LandingPageLayout>
5+
<> </>
6+
</LandingPageLayout>
7+
</>
58
}

‎app/routes/MdxRoute.res‎

Lines changed: 42 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ type loaderData = {
99
mdxSources?: array<SyntaxLookup.item>,
1010
activeSyntaxItem?: SyntaxLookup.item,
1111
breadcrumbs?: list<Url.breadcrumb>,
12+
title: string,
1213
}
1314

1415
/**
@@ -146,6 +147,7 @@ let loader: Loader.t<loaderData> = async ({request}) => {
146147
entries: [],
147148
categories: [],
148149
blogPost: mdx.attributes->BlogLoader.transform,
150+
title: `${mdx.attributes.title} | ReScript Blog`,
149151
}
150152
res
151153
} else if pathname->String.includes("syntax-lookup") {
@@ -164,6 +166,7 @@ let loader: Loader.t<loaderData> = async ({request}) => {
164166
categories: [],
165167
mdxSources,
166168
?activeSyntaxItem,
169+
title: mdx.attributes.title, // TODO RR7: check if this is correct
167170
}
168171
res
169172
} else {
@@ -225,14 +228,37 @@ let loader: Loader.t<loaderData> = async ({request}) => {
225228
})
226229
: None
227230

231+
let metaTitleCategory = {
232+
let path = (pathname :> string)
233+
let title = if path->String.includes("docs/react") {
234+
"ReScript React"
235+
} else if path->String.includes("docs/manual/api") {
236+
"ReScript API"
237+
} else if path->String.includes("docs/manual") {
238+
"ReScript Language Manual"
239+
} else if path->String.includes("community") {
240+
"ReScript Community"
241+
} else {
242+
"ReScript"
243+
}
244+
245+
title
246+
}
247+
248+
let title = if pathname == "/docs/manual/api" {
249+
"API"
250+
} else {
251+
mdx.attributes.title
252+
}
253+
228254
let res: loaderData = {
229255
__raw: mdx.__raw,
230256
attributes: mdx.attributes,
231257
entries,
232258
categories,
233259
?breadcrumbs,
260+
title: `${title} | ${metaTitleCategory}`,
234261
}
235-
236262
res
237263
}
238264
}
@@ -244,15 +270,10 @@ let default = () => {
244270

245271
let loaderData: loaderData = useLoaderData()
246272

247-
let {entries, categories} = loaderData
273+
let {entries, categories, title} = loaderData
248274

249-
// TODO RR7: get actual meta categories working
250-
let metaTitleCategory =
251-
(pathname :> string)->String.includes("docs/manual")
252-
? "ReScript Language Manual"
253-
: "Some other page"
254275
<>
255-
<title> {React.string(attributes.metaTitle->Nullable.getOr(attributes.title))} </title>
276+
{title != "" ? <title> {React.string(title)} </title> : React.null}
256277
<meta name="description" content={attributes.description->Nullable.getOr("")} />
257278
{if (pathname :> string) == "/docs/manual/api" {
258279
<ApiOverviewLayout.Docs>
@@ -263,10 +284,10 @@ let default = () => {
263284
(pathname :> string)->String.includes("docs/react")
264285
) {
265286
<DocsLayout
266-
metaTitleCategory
267287
categories
268288
activeToc={title: "Introduction", entries}
269289
breadcrumbs=?loaderData.breadcrumbs
290+
editHref={`https://github.com/rescript-lang/rescript-lang.org/blob/master/pages${attributes.path}.mdx`}
270291
>
271292
<div className="markdown-body pt-20 md:pt-0"> {component()} </div>
272293
</DocsLayout>
@@ -285,9 +306,18 @@ let default = () => {
285306
} else {
286307
switch loaderData.mdxSources {
287308
| Some(mdxSources) =>
288-
<SyntaxLookup mdxSources activeItem=?loaderData.activeSyntaxItem>
289-
{component()}
290-
</SyntaxLookup>
309+
<>
310+
<title>
311+
{React.string(
312+
`${loaderData.activeSyntaxItem
313+
->Option.map(item => item.name)
314+
->Option.getOr("Syntax Lookup")} | ReScript API`,
315+
)}
316+
</title>
317+
<SyntaxLookup mdxSources activeItem=?loaderData.activeSyntaxItem>
318+
{component()}
319+
</SyntaxLookup>
320+
</>
291321
| None => React.null
292322
}
293323
}}

‎app/routes/MdxRoute.resi‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ type loaderData = {
66
mdxSources?: array<SyntaxLookup.item>,
77
activeSyntaxItem?: SyntaxLookup.item,
88
breadcrumbs?: list<Url.breadcrumb>,
9+
title: string,
910
}
1011

1112
let loader: ReactRouter.Loader.t<loaderData>

‎app/routes/PackagesRoute.res‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,8 @@ let loader = async () => {
66

77
let default = () => {
88
let props = ReactRouter.useLoaderData()
9-
<Packages {...props} />
9+
<>
10+
<title> {React.string("Package Index | ReScript Documentation")} </title>
11+
<Packages {...props} />
12+
</>
1013
}

‎app/routes/SyntaxLookupRoute.res‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,5 +32,8 @@ let loader: Loader.t<loaderData> = async ({request}) => {
3232

3333
let default = () => {
3434
let {mdxSources} = useLoaderData()
35-
<SyntaxLookup mdxSources />
35+
<>
36+
<title> {React.string("Syntax Lookup | ReScript API")} </title>
37+
<SyntaxLookup mdxSources />
38+
</>
3639
}

‎app/routes/TryRoute.res‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ module ClientOnly = {
4848

4949
let default = () => {
5050
let {bundleBaseUrl, versions} = ReactRouter.useLoaderData()
51-
52-
<ClientOnly bundleBaseUrl versions />
51+
<>
52+
<title> {React.string("ReScript Playground")} </title>
53+
<ClientOnly bundleBaseUrl versions />
54+
</>
5355
}

‎src/ApiDocs.res‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -377,7 +377,7 @@ let make = (props: props) => {
377377

378378
<SidebarLayout
379379
breadcrumbs={list{{Url.name: "Docs", href: "/docs/manual/introduction"}, ...breadcrumbs}}
380-
metaTitle={title ++ " | ReScript API"}
380+
// metaTitle={title ++ " | ReScript API"}
381381
theme=#Reason
382382
sidebarState=(isSidebarOpen, setSidebarOpen)
383383
sidebar

‎src/components/Meta.res‎

Lines changed: 42 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -33,52 +33,48 @@ let make = (
3333
| None => title
3434
}
3535

36-
React.null
36+
<>
37+
<title key="title"> {React.string(title)} </title>
38+
<meta charSet="utf-8" />
39+
<meta
40+
name="viewport"
41+
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, minimal-ui"
42+
/>
43+
<meta key="description" name="description" content=description />
44+
<meta key="keywords" name="keywords" content={Array.join(keywords, ",")} />
45+
{switch canonical {
46+
| Some(href) => <link key="canonical" href rel="canonical" />
47+
| None => React.null
48+
}}
49+
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
50+
<link rel="icon" type_="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
51+
<link rel="icon" type_="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
52+
<link rel="manifest" href="/favicon/site.webmanifest" />
3753

38-
// TODO RR7 - fix meta tags
54+
/* OG link preview meta data */
55+
<meta key="og:site_name" property="og:site_name" content=ogSiteName />
56+
<meta key="og:locale" property="og:locale" content=ogLocale />
57+
<meta key="og:title" property="og:title" content=ogTitle />
58+
<meta key="og:description" property="og:description" content=ogDescription />
59+
<meta key="og:image" property="og:image" content=ogImage />
3960

40-
// <Head>
41-
// <title key="title"> {React.string(title)} </title>
42-
// <meta charSet="utf-8" />
43-
// <meta
44-
// name="viewport"
45-
// content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, minimal-ui"
46-
// />
47-
// <meta key="description" name="description" content=description />
48-
// <meta key="keywords" name="keywords" content={Array.join(keywords, ",")} />
49-
// {switch canonical {
50-
// | Some(href) => <link key="canonical" href rel="canonical" />
51-
// | None => React.null
52-
// }}
53-
// <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
54-
// <link rel="icon" type_="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
55-
// <link rel="icon" type_="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
56-
// <link rel="manifest" href="/favicon/site.webmanifest" />
57-
58-
// /* OG link preview meta data */
59-
// <meta key="og:site_name" property="og:site_name" content=ogSiteName />
60-
// <meta key="og:locale" property="og:locale" content=ogLocale />
61-
// <meta key="og:title" property="og:title" content=ogTitle />
62-
// <meta key="og:description" property="og:description" content=ogDescription />
63-
// <meta key="og:image" property="og:image" content=ogImage />
64-
65-
// /* Twitter Meta */
66-
// <meta key="twitter:title" name="twitter:title" content=title />
67-
// <meta key="twitter:description" name="twitter:description" content=description />
68-
// <meta key="twitter:site" name="twitter:site" content="@rescriptlang" />
69-
// <meta key="twitter:image" property="og:image" content=ogImage />
70-
// <meta key="twitter:creator" name="twitter:creator" content="@ReScriptAssoc" />
71-
// <meta key="twitter:card" name="twitter:card" content="summary_large_image" />
72-
// <link rel="alternate" type_="application/rss+xml" title="ReScript Blog" href="/blog/feed.xml" />
73-
// // Docsearch meta tags
74-
// <meta
75-
// name="docsearch:version"
76-
// content={switch version {
77-
// | Some(Version(v)) => v
78-
// | Some(Latest) => Constants.versions.latest
79-
// | Some(Next) => Constants.versions.next
80-
// | _ => Constants.versions.latest
81-
// }}
82-
// />
83-
// </Head>
61+
/* Twitter Meta */
62+
<meta key="twitter:title" name="twitter:title" content=title />
63+
<meta key="twitter:description" name="twitter:description" content=description />
64+
<meta key="twitter:site" name="twitter:site" content="@rescriptlang" />
65+
<meta key="twitter:image" property="og:image" content=ogImage />
66+
<meta key="twitter:creator" name="twitter:creator" content="@ReScriptAssoc" />
67+
<meta key="twitter:card" name="twitter:card" content="summary_large_image" />
68+
<link rel="alternate" type_="application/rss+xml" title="ReScript Blog" href="/blog/feed.xml" />
69+
// Docsearch meta tags
70+
<meta
71+
name="docsearch:version"
72+
content={switch version {
73+
| Some(Version(v)) => v
74+
| Some(Latest) => Constants.versions.latest
75+
| Some(Next) => Constants.versions.next
76+
| _ => Constants.versions.latest
77+
}}
78+
/>
79+
</>
8480
}

0 commit comments

Comments
 (0)