From 0f228de48a68c95acd5b81c7cc1838a19309d8ac Mon Sep 17 00:00:00 2001
From: "Ryan C. Gordon" <[EMAIL REDACTED]>
Date: Fri, 6 Dec 2024 13:04:06 -0500
Subject: [PATCH] examples: Add some metadata to the generated webpages.
---
build-scripts/build-web-examples.pl | 37 +++++++++++++++++++++--------
examples/template-category.html | 7 ++++++
examples/template-homepage.html | 7 ++++++
examples/template.html | 7 ++++++
4 files changed, 48 insertions(+), 10 deletions(-)
diff --git a/build-scripts/build-web-examples.pl b/build-scripts/build-web-examples.pl
index e1b7ca394bcfc..8c9e8a7b7e9f2 100755
--- a/build-scripts/build-web-examples.pl
+++ b/build-scripts/build-web-examples.pl
@@ -221,6 +221,7 @@ sub handle_example_dir {
$other_examples_html .= "</ul>";
my $category_description = get_category_description($category);
+ my $preview_image = get_example_thumbnail($project, $category, $example);
my $html = '';
open my $htmltemplate, '<', "$examples_dir/template.html" or die("Couldn't open '$examples_dir/template.html': $!\n");
@@ -232,6 +233,7 @@ sub handle_example_dir {
s/\@javascript_file\@/$jsfname/g;
s/\@htmlified_source_code\@/$htmlified_source_code/g;
s/\@description\@/$description/g;
+ s/\@preview_image\@/$preview_image/g;
s/\@other_examples_html\@/$other_examples_html/g;
$html .= $_;
}
@@ -242,6 +244,20 @@ sub handle_example_dir {
close($htmloutput);
}
+sub get_example_thumbnail {
+ my $project = shift;
+ my $category = shift;
+ my $example = shift;
+
+ if ( -f "$examples_dir/$category/$example/thumbnail.png" ) {
+ return "/$project/$category/$example/thumbnail.png";
+ } elsif ( -f "$examples_dir/$category/thumbnail.png" ) {
+ return "/$project/$category/thumbnail.png";
+ }
+
+ return "/$project/thumbnail.png";
+}
+
sub generate_example_thumbnail {
my $project = shift;
my $category = shift;
@@ -250,20 +266,13 @@ sub generate_example_thumbnail {
my $example_no_num = "$example";
$example_no_num =~ s/\A\d+\-//;
- my $example_image_url;
- if ( -f "$examples_dir/$category/$example/thumbnail.png" ) {
- $example_image_url = "/$project/$category/$example/thumbnail.png";
- } elsif ( -f "$examples_dir/$category/thumbnail.png" ) {
- $example_image_url = "/$project/$category/thumbnail.png";
- } else {
- $example_image_url = "/$project/thumbnail.png";
- }
+ my $example_image_url = get_example_thumbnail($project, $category, $example);
my $example_mouseover_html = '';
if ( -f "$examples_dir/$category/$example/onmouseover.webp" ) {
- $example_mouseover_html = "onmouseover=\"this.src='/$project/$category/$example/onmouseover.webp'\" onmouseout=\"this.src='$example_image_url'\";";
+ $example_mouseover_html = "onmouseover=\"this.src='/$project/$category/$example/onmouseover.webp'\" onmouseout=\"this.src='$example_image_url';\"";
} elsif ( -f "$examples_dir/$category/onmouseover.webp" ) {
- $example_mouseover_html = "onmouseover=\"this.src='/$project/$category/onmouseover.webp'\" onmouseout=\"this.src='$example_image_url'\";";
+ $example_mouseover_html = "onmouseover=\"this.src='/$project/$category/onmouseover.webp'\" onmouseout=\"this.src='$example_image_url';\"";
}
return "
@@ -312,6 +321,10 @@ sub handle_category_dir {
do_copy("$examples_dir/$category/onmouseover.webp", "$dst/onmouseover.webp") if ( -f "$examples_dir/$category/onmouseover.webp" );
my $category_description = get_category_description($category);
+ my $preview_image = "/$project/thumbnail.png";
+ if ( -f "$examples_dir/$category/thumbnail.png" ) {
+ $preview_image = "/$project/$category/thumbnail.png";
+ }
# write category page
my $html = '';
@@ -321,6 +334,7 @@ sub handle_category_dir {
s/\@category_name\@/$category/g;
s/\@category_description\@/$category_description/g;
s/\@examples_list_html\@/$examples_list_html/g;
+ s/\@preview_image\@/$preview_image/g;
$html .= $_;
}
close($htmltemplate);
@@ -379,12 +393,15 @@ sub handle_category_dir {
$homepage_list_html .= "</div>";
}
+my $preview_image = "/$project/thumbnail.png";
+
my $dst = "$output_dir/";
my $html = '';
open my $htmltemplate, '<', "$examples_dir/template-homepage.html" or die("Couldn't open '$examples_dir/template-category.html': $!\n");
while (<$htmltemplate>) {
s/\@project_name\@/$project/g;
s/\@homepage_list_html\@/$homepage_list_html/g;
+ s/\@preview_image\@/$preview_image/g;
$html .= $_;
}
close($htmltemplate);
diff --git a/examples/template-category.html b/examples/template-category.html
index 3ff57b8ae9878..909b2c6392cdb 100644
--- a/examples/template-category.html
+++ b/examples/template-category.html
@@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>@project_name@ Examples: @category_description@</title>
+ <link rel="icon" href="/@project_name@/thumbnail.png" type="image/png" />
<link
rel="stylesheet"
type="text/css"
@@ -15,6 +16,12 @@
margin-top: 0;
}
</style>
+
+ <meta property="og:type" content="website">
+ <meta property="og:title" content="@project_name@ Examples: @category_description@">
+ <meta property="og:description" content="@project_name@ Examples: @category_description@">
+ <meta property="og:image" content="@preview_image@" />
+
</head>
<body>
<header>
diff --git a/examples/template-homepage.html b/examples/template-homepage.html
index 1c3620c3ca7ce..46951b287ddcf 100644
--- a/examples/template-homepage.html
+++ b/examples/template-homepage.html
@@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>@project_name@ Examples</title>
+ <link rel="icon" href="/@project_name@/thumbnail.png" type="image/png" />
<link
rel="stylesheet"
type="text/css"
@@ -15,6 +16,12 @@
margin-top: 0;
}
</style>
+
+ <meta property="og:type" content="website">
+ <meta property="og:title" content="@project_name@ Examples">
+ <meta property="og:description" content="@project_name@ Examples">
+ <meta property="og:image" content="@preview_image@" />
+
</head>
<body>
<header>
diff --git a/examples/template.html b/examples/template.html
index 44fd27062fbbf..d6a730507f7b6 100644
--- a/examples/template.html
+++ b/examples/template.html
@@ -5,6 +5,13 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>@project_name@ Example: @category_name@/@example_name@</title>
+ <link rel="icon" href="/@project_name@/thumbnail.png" type="image/png" />
+
+ <meta property="og:type" content="website">
+ <meta property="og:title" content="@project_name@ Example: @category_name@/@example_name@">
+ <meta property="og:description" content="@description@">
+ <meta property="og:image" content="@preview_image@" />
+
<link rel="stylesheet" type="text/css" href="/@project_name@/examples.css" />
<style>
main {