examples: Add some metadata to the generated webpages.

This commit is contained in:
Ryan C. Gordon 2024-12-06 13:04:06 -05:00
parent ffb9b30e84
commit 0f228de48a
No known key found for this signature in database
GPG key ID: FA148B892AB48044
4 changed files with 48 additions and 10 deletions

View file

@ -221,6 +221,7 @@ sub handle_example_dir {
$other_examples_html .= "</ul>"; $other_examples_html .= "</ul>";
my $category_description = get_category_description($category); my $category_description = get_category_description($category);
my $preview_image = get_example_thumbnail($project, $category, $example);
my $html = ''; my $html = '';
open my $htmltemplate, '<', "$examples_dir/template.html" or die("Couldn't open '$examples_dir/template.html': $!\n"); 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/\@javascript_file\@/$jsfname/g;
s/\@htmlified_source_code\@/$htmlified_source_code/g; s/\@htmlified_source_code\@/$htmlified_source_code/g;
s/\@description\@/$description/g; s/\@description\@/$description/g;
s/\@preview_image\@/$preview_image/g;
s/\@other_examples_html\@/$other_examples_html/g; s/\@other_examples_html\@/$other_examples_html/g;
$html .= $_; $html .= $_;
} }
@ -242,6 +244,20 @@ sub handle_example_dir {
close($htmloutput); 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 { sub generate_example_thumbnail {
my $project = shift; my $project = shift;
my $category = shift; my $category = shift;
@ -250,20 +266,13 @@ sub generate_example_thumbnail {
my $example_no_num = "$example"; my $example_no_num = "$example";
$example_no_num =~ s/\A\d+\-//; $example_no_num =~ s/\A\d+\-//;
my $example_image_url; my $example_image_url = get_example_thumbnail($project, $category, $example);
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_mouseover_html = ''; my $example_mouseover_html = '';
if ( -f "$examples_dir/$category/$example/onmouseover.webp" ) { 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" ) { } 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 " 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" ); 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 $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 # write category page
my $html = ''; my $html = '';
@ -321,6 +334,7 @@ sub handle_category_dir {
s/\@category_name\@/$category/g; s/\@category_name\@/$category/g;
s/\@category_description\@/$category_description/g; s/\@category_description\@/$category_description/g;
s/\@examples_list_html\@/$examples_list_html/g; s/\@examples_list_html\@/$examples_list_html/g;
s/\@preview_image\@/$preview_image/g;
$html .= $_; $html .= $_;
} }
close($htmltemplate); close($htmltemplate);
@ -379,12 +393,15 @@ foreach my $category (get_categories()) {
$homepage_list_html .= "</div>"; $homepage_list_html .= "</div>";
} }
my $preview_image = "/$project/thumbnail.png";
my $dst = "$output_dir/"; my $dst = "$output_dir/";
my $html = ''; my $html = '';
open my $htmltemplate, '<', "$examples_dir/template-homepage.html" or die("Couldn't open '$examples_dir/template-category.html': $!\n"); open my $htmltemplate, '<', "$examples_dir/template-homepage.html" or die("Couldn't open '$examples_dir/template-category.html': $!\n");
while (<$htmltemplate>) { while (<$htmltemplate>) {
s/\@project_name\@/$project/g; s/\@project_name\@/$project/g;
s/\@homepage_list_html\@/$homepage_list_html/g; s/\@homepage_list_html\@/$homepage_list_html/g;
s/\@preview_image\@/$preview_image/g;
$html .= $_; $html .= $_;
} }
close($htmltemplate); close($htmltemplate);

View file

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>@project_name@ Examples: @category_description@</title> <title>@project_name@ Examples: @category_description@</title>
<link rel="icon" href="/@project_name@/thumbnail.png" type="image/png" />
<link <link
rel="stylesheet" rel="stylesheet"
type="text/css" type="text/css"
@ -15,6 +16,12 @@
margin-top: 0; margin-top: 0;
} }
</style> </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> </head>
<body> <body>
<header> <header>

View file

@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>@project_name@ Examples</title> <title>@project_name@ Examples</title>
<link rel="icon" href="/@project_name@/thumbnail.png" type="image/png" />
<link <link
rel="stylesheet" rel="stylesheet"
type="text/css" type="text/css"
@ -15,6 +16,12 @@
margin-top: 0; margin-top: 0;
} }
</style> </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> </head>
<body> <body>
<header> <header>

View file

@ -5,6 +5,13 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>@project_name@ Example: @category_name@/@example_name@</title> <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" /> <link rel="stylesheet" type="text/css" href="/@project_name@/examples.css" />
<style> <style>
main { main {