Skip to content

Commit db66c28

Browse files
thisisjofrankthisisjofrank
authored
Title and descriptions (#1817)
1 parent 6357d13 commit db66c28

File tree

4 files changed

+48
-107
lines changed

4 files changed

+48
-107
lines changed

‎_components/OpenGraph.tsx‎

Lines changed: 6 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -6,121 +6,24 @@ export default function OpenGraph(
66
url: string;
77
},
88
) {
9-
const formatHtmlForMeta = (html: string | undefined | null): string => {
10-
// Handle undefined or null values
11-
if (html === undefined || html === null) {
12-
return "";
13-
}
14-
15-
// Convert <sup> content to Unicode superscript characters
16-
let formatted = html.replace(/<sup>(\d+)<\/sup>/g, (_, digit) => {
17-
const superscriptMap: Record<string, string> = {
18-
"0": "⁰",
19-
"1": "¹",
20-
"2": "²",
21-
"3": "³",
22-
"4": "⁴",
23-
"5": "⁵",
24-
"6": "⁶",
25-
"7": "⁷",
26-
"8": "⁸",
27-
"9": "⁹",
28-
};
29-
return digit.split("").map((char: any) => superscriptMap[char] || char)
30-
.join(
31-
"",
32-
);
33-
});
34-
35-
formatted = formatted.replace(/<sup>([a-zA-Z]+)<\/sup>/g, (_, text) => {
36-
const superscriptAlphaMap: Record<string, string> = {
37-
"a": "ᵃ",
38-
"b": "ᵇ",
39-
"c": "ᶜ",
40-
"d": "ᵈ",
41-
"e": "ᵉ",
42-
"f": "ᶠ",
43-
"g": "ᵍ",
44-
"h": "ʰ",
45-
"i": "ⁱ",
46-
"j": "ʲ",
47-
"k": "ᵏ",
48-
"l": "ˡ",
49-
"m": "ᵐ",
50-
"n": "ⁿ",
51-
"o": "ᵒ",
52-
"p": "ᵖ",
53-
"q": "ᵠ", // Change from "Q" to lowercase "ᵠ" as the best available option
54-
"r": "ʳ",
55-
"s": "ˢ",
56-
"t": "ᵗ",
57-
"u": "ᵘ",
58-
"v": "ᵛ",
59-
"w": "ʷ",
60-
"x": "ˣ",
61-
"y": "ʸ",
62-
"z": "ᶻ",
63-
"A": "ᴬ",
64-
"B": "ᴮ",
65-
"C": "ᶜ",
66-
"D": "ᴰ",
67-
"E": "ᴱ",
68-
"F": "ᶠ",
69-
"G": "ᴳ",
70-
"H": "ᴴ",
71-
"I": "ᴵ",
72-
"J": "ᴶ",
73-
"K": "ᴷ",
74-
"L": "ᴸ",
75-
"M": "ᴹ",
76-
"N": "ᴺ",
77-
"O": "ᴼ",
78-
"P": "ᴾ",
79-
"Q": "ᵠ",
80-
"R": "ᴿ",
81-
"S": "ˢ",
82-
"T": "ᵀ",
83-
"U": "ᵁ",
84-
"V": "ⱽ",
85-
"W": "ᵂ",
86-
"X": "ˣ",
87-
"Y": "ʸ",
88-
"Z": "ᶻ",
89-
};
90-
return text.split("").map((char: any) =>
91-
superscriptAlphaMap[char] || char
92-
)
93-
.join("");
94-
});
95-
96-
formatted = formatted.replace(/<sup>([^<]*)<\/sup>/g, "⁽$1⁾");
97-
98-
return formatted.replace(/<[^>]*>/g, "");
99-
};
100-
1019
let image;
10210
if (section == "api") {
10311
image = `/img/og.webp`;
10412
} else {
10513
image = `${url}index.png`;
10614
}
107-
108-
// Process both title and description with null safety
109-
const formattedTitle = formatHtmlForMeta(title);
110-
const formattedDescription = formatHtmlForMeta(description);
111-
11215
return (
11316
<>
114-
<meta name="twitter:title" content={formattedTitle} />
115-
<meta name="twitter:description" content={formattedDescription} />
17+
<meta name="twitter:title" content={title} />
18+
<meta name="twitter:description" content={description} />
11619
<meta name="twitter:image" content={image} />
117-
<meta name="twitter:image:alt" content={formattedDescription} />
20+
<meta name="twitter:image:alt" content={description} />
11821
<meta name="twitter:card" content="summary_large_image" />
11922
<meta name="twitter:site" content="@deno_land" />
120-
<meta property="og:title" content={formattedTitle} />
121-
<meta property="og:description" content={formattedDescription} />
23+
<meta property="og:title" content={title} />
24+
<meta property="og:description" content={description} />
12225
<meta property="og:image" content={image} />
123-
<meta property="og:image:alt" content={formattedDescription} />
26+
<meta property="og:image:alt" content={description} />
12427
<meta property="og:type" content="article" />
12528
<meta property="og:site_name" content="Deno" />
12629
<meta property="og:locale" content="en_US" />

‎_includes/open_graph/default.jsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,28 @@
11
/** @jsxImportSource npm:react@18.2.0 */
22

33
export default function ({ title, description, openGraphColor }) {
4+
// Process text to replace superscript EA with "Early Access"
5+
const processEarlyAccessText = (text) => {
6+
if (!text) return text;
7+
8+
// Replace superscript EA with "Early Access"
9+
// Using multiple approaches for reliable matching
10+
return text
11+
.replace(/\u1D31\u1D00/g, " Early Access") // ᴱᴬ using codepoints
12+
.replace(/ᴱ\s*ᴬ/g, " Early Access"); // Direct character matching
13+
};
14+
415
if (!title) {
516
title = "Deno documentation";
617
}
718
if (!description) {
819
description = "Learn more at docs.deno.com";
920
}
1021

22+
// Process title and description for Early Access text
23+
const processedTitle = processEarlyAccessText(title);
24+
const processedDescription = processEarlyAccessText(description);
25+
1126
const bgColor = openGraphColor || "#70ffaf";
1227

1328
return (
@@ -48,7 +63,7 @@ export default function ({ title, description, openGraphColor }) {
4863
marginTop: 0,
4964
}}
5065
>
51-
{title}
66+
{processedTitle}
5267
</h1>
5368
<div
5469
style={{
@@ -66,7 +81,7 @@ export default function ({ title, description, openGraphColor }) {
6681
lineHeight: "1.5",
6782
}}
6883
>
69-
{description}
84+
{processedDescription}
7085
</p>
7186
<svg
7287
xmlns="http://www.w3.org/2000/svg"

‎_includes/open_graph/examples.jsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,21 @@
11
/** @jsxImportSource npm:react@18.2.0 */
22

33
export default function ({ title, description }) {
4+
// Process text to replace superscript EA with "Early Access"
5+
const processEarlyAccessText = (text) => {
6+
if (!text) return text;
7+
8+
// Replace superscript EA with "Early Access"
9+
// Using multiple approaches for reliable matching
10+
return text
11+
.replace(/\u1D31\u1D00/g, " Early Access") // ᴱᴬ using codepoints
12+
.replace(/ᴱ\s*ᴬ/g, " Early Access"); // Direct character matching
13+
};
14+
15+
// Process title and description for Early Access text
16+
const processedTitle = processEarlyAccessText(title);
17+
const processedDescription = processEarlyAccessText(description);
18+
419
return (
520
<div
621
style={{
@@ -37,9 +52,9 @@ export default function ({ title, description }) {
3752
fontWeight: 800,
3853
}}
3954
>
40-
{title}
55+
{processedTitle}
4156
</div>
42-
<div>{description}</div>
57+
<div>{processedDescription}</div>
4358
<p>Examples</p>
4459
</div>
4560
);

‎styleguide/og.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,14 @@ example page.
2424

2525
<img src="/styleguide/og/short-title-and-long-description/index.png" alt="Example OG image with short title and longer description" />
2626

27+
## OG image with superscript in title
28+
29+
As generated by the
30+
[title-and-description-superscript](/styleguide/og/title-and-description-superscript/)
31+
example page.
32+
33+
<img src="/styleguide/og/title-and-description-superscript/index.png" alt="Example OG image with superscript in the title" />
34+
2735
## OG image with short title and short description
2836

2937
As generated by the

0 commit comments

Comments
 (0)