perl-users-jp · kfly8 · Oct 3, 2020 · Feb 8, 2020 · Oct 2, 2020 · Oct 3, 2020
diff --git a/cpanfile b/cpanfile
@@ -1,17 +1,17 @@
 requires 'perl', '5.030001';
 
-requires 'Encode::Locale';
-requires 'Encode';
-
+# order by a-z
 requires 'Class::Tiny';
 requires 'Date::Format';
+requires 'Encode';
+requires 'Encode::Locale';
 requires 'Path::Tiny';
+requires 'Pod::Simple::XHTML';
+requires 'Text::Markdown';
 requires 'Text::MicroTemplate';
-requires 'XML::Atom';
-
 requires 'Text::Xatena';
-requires 'Text::Markdown';
-requires 'Pod::Simple::XHTML';
+requires 'URI::Escape';
+requires 'XML::Atom';
 
 on 'develop' => sub {
     requires 'Plack';

diff --git a/layouts/entry.html b/layouts/entry.html
@@ -3,9 +3,24 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+        <title><?= $vars->{fulltitle} ?></title>
+        <meta name="title" content="<?= $vars->{fulltitle} ?>">
         <meta name="description" content="<?= $vars->{matter}->description ?>">
         <meta name="author" content="<?= $vars->{matter}->author ?>">
-        <title><?= $vars->{subtitle} ? "$vars->{title} - $vars->{subtitle}" : $vars->{title} ?></title>
+
+        <meta property="og:type" content="website">
+        <meta property="og:url" content="<?= $vars->{url} ?>">
+        <meta property="og:title" content="<?= $vars->{fulltitle} ?>">
+        <meta property="og:description" content="<?= $vars->{matter}->description ?>">
+        <meta property="og:image" content="<?= $vars->{og_image_url} ?>">
+
+        <meta property="twitter:card" content="summary_large_image">
+        <meta property="twitter:url" content="<?= $vars->{url} ?>">
+        <meta property="twitter:title" content="<?= $vars->{fulltitle} ?>">
+        <meta property="twitter:description" content="<?= $vars->{matter}->description ?>">
+        <meta property="twitter:image" content="<?= $vars->{og_image_url} ?>">
+
         <link rel="icon" href="/img/favicon.ico">
         <link rel="canonical" href="<?= $vars->{url} ?>">
         <link href="TODO" rel="stylesheet">

diff --git a/lib/PerlUsersJP/Builder.pm b/lib/PerlUsersJP/Builder.pm
@@ -11,6 +11,7 @@ use Encode qw(encode);
 use Path::Tiny qw(path);
 use Date::Format qw(time2str);
 use Scalar::Util qw(looks_like_number);
+use URI::Escape qw(uri_escape_utf8);
 
 use Text::MicroTemplate;
 use XML::Atom::Feed;
@@ -126,11 +127,13 @@ sub build_entry {
     }
     else {
         my $html = $self->_render_string('entry.html', {
-            text        => $self->entry_text($src),
-            title       => $matter->title,
-            subtitle    => $self->entry_subtitle($src),
-            matter      => $matter,
-            url         => $self->entry_url($src),
+            text         => $self->entry_text($src),
+            title        => $matter->title,
+            subtitle     => $self->entry_subtitle($src),
+            fulltitle    => $self->entry_fulltitle($src),
+            matter       => $matter,
+            url          => $self->entry_url($src),
+            og_image_url => $matter->og_image // $self->og_image_url($src),
         });
         $dest->spew_utf8($html);
         $sub_dest->spew_utf8($html) if $sub_dest;
@@ -168,7 +171,12 @@ sub entry_subtitle {
     return $subtitle;
 }
 
-
+sub entry_fulltitle {
+    my ($self, $src) = @_;
+    my $title    = $self->front_matter($src)->title;
+    my $subtitle = $self->entry_subtitle($src);
+    return $subtitle ? "$title - $subtitle" : $title;
+}
 
 sub build_categories {
     my ($self, $src_list) = @_;
@@ -403,7 +411,7 @@ sub build_atom_feed {
     my @new_src_list = splice @sorted, 0, $ATOM_FEED_COUNT;
     for my $src (@new_src_list) {
         my $entry = XML::Atom::Entry->new;
-    
+
         my $matter = $self->front_matter($src);
         my $path   = $self->entry_url_path($src);
 
@@ -547,7 +555,46 @@ sub category_url  { my $self = shift; $self->url($self->category_url_path(@_)) }
 sub tag_url       { my $self = shift; $self->url($self->tag_url_path(@_)) }
 sub tag_index_url { $_[0]->url("/tag/") }
 
+sub og_image_url {
+    my ($self, $src) = @_;
+
+    my $title_font_family = 'NotoSansJP-Black.otf';
+    my $title_font_size   = '50';
+    my $title_font_weight = 'bold';
+    my $title_font_color  = '000000';
+    my $title_width       = '900';
 
+    my $author_font_family = 'NotoSansJP-Black.otf';
+    my $author_font_size   = '30';
+    my $author_font_weight = 'bold';
+    my $author_font_color  = '000000';
+    my $author_x           = '130';
+    my $author_y           = '120';
+
+    my $matter = $self->front_matter($src);
+
+    # XXX commaがcloudinaryだと文字区切りの意味を持つので、代替文字に置き換え
+    # https://support.cloudinary.com/hc/en-us/community/posts/200788162-Using-special-characters-in-Text-overlaying-
+    my $title  = $matter->title =~ s!,!%E2%80%9A!gr;
+    my $author = $matter->author =~ s!,!%E2%80%9A!gr;
+
+    my $title_option = join ',', (
+        "l_text:${title_font_family}_${title_font_size}_${title_font_weight}:@{[ uri_escape_utf8 $title ]}",
+        "co_rgb:${title_font_color}",
+        "w_${title_width}",
+        "c_fit",
+    );
+
+    my $author_option = join ',', (
+        "l_text:${author_font_family}_${author_font_size}_${author_font_weight}:@{[ uri_escape_utf8 $author ]}",
+        "co_rgb:${author_font_color}",
+        "g_south_east",
+        "x_${author_x}",
+        "y_${author_y}",
+    );
+
+    return "https://res.cloudinary.com/kfly8/image/upload/${title_option}/${author_option}/v1601626948/og-perl-users-jp.png";
+}
 
 sub _render_string {
     my ($self, $template, $vars) = @_;

diff --git a/lib/PerlUsersJP/FrontMatter.pm b/lib/PerlUsersJP/FrontMatter.pm
@@ -10,6 +10,7 @@ use Class::Tiny qw(
     description
     author     
     tags       
+    og_image
 
     layout     
     format     
@@ -48,6 +49,7 @@ sub BUILDARGS {
             description => $data->{description} // '',
             author      => $data->{author} // '',
             tags        => $tags,
+            og_image    => $data->{og_image},
             layout      => $data->{layout},
             format      => $data->{format} // $format,
         }