From 249d166811a718781f6bc694de5c9061714b0db4 Mon Sep 17 00:00:00 2001
From: bnewbold <bnewbold@robocracy.org>
Date: Mon, 8 May 2023 13:03:03 -0700
Subject: [PATCH] bskyweb: re-work HTML meta tags, for share cards (#596)

---
 bskyweb/templates/base.html    | 18 +++-----------
 bskyweb/templates/home.html    | 12 +++++++++
 bskyweb/templates/post.html    | 45 ++++++++++++++++++++--------------
 bskyweb/templates/profile.html | 39 +++++++++++++++++------------
 4 files changed, 64 insertions(+), 50 deletions(-)
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
index 866664e509..3bc8098ae9 100644
--- a/bskyweb/templates/base.html
+++ b/bskyweb/templates/base.html
@@ -134,30 +134,18 @@
   <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"/>
   <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png"/>
   <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png"/>
-  {% block head_page_meta -%}
-  <meta property="og:title" content="Bluesky Social"/>
-  <meta property="og:type" content="article"/>
-  <meta property="og:image" content="/static/default-social-card.png"/>
-  <meta name="twitter:title" content="Bluesky Social"/>
-  <meta name="twitter:description" content="See what&#x27;s next."/>
-  <meta name="twitter:image" content="/static/default-social-card.png"/>
-  <meta name="twitter:card" content="summary_large_image"/>
-  <meta name="twitter:site" content="@bluesky"/>
-  {%- endblock %}
-	<!-- TODO: link rel=canonical -->
-	<!-- TODO: analytics code -->
-	<!-- TODO: could put <link rel="preload"> tags here -->
+  {% block html_head_extra -%}{%- endblock %}
+  <meta name="application-name" name="Bluesky">
   <meta name="generator" name="bskyweb">
-	{% block head_metadata %}{% endblock %}
 </head>
 <body>
 {%- block body_all %}
 	<div id="root"></div>
     <noscript>
-			{%- block noscript_extra %}{% endblock -%}
       <h1>Javascript Required</h1>
       <p>This is a heavily interactive web application, and Javascript is required. Simple HTML interfaces are possible, but that is not what this is.
       <p>Learn more about Bluesky at <a href="https://blueskyweb.xyz">blueskyweb.xyz</a> and <a href="https://atproto.com">atproto.com</a>.
+			{% block noscript_extra %}{% endblock %}
     </noscript>
 {% endblock -%}
 </body>
diff --git a/bskyweb/templates/home.html b/bskyweb/templates/home.html
index 631f281c01..6625a7d96e 100644
--- a/bskyweb/templates/home.html
+++ b/bskyweb/templates/home.html
@@ -2,6 +2,18 @@
 
 {% block head_title %}Bluesky{% endblock %}
 
+{% block html_head_extra -%}
+  <meta property="og:title" content="Bluesky Social"/>
+  <meta property="og:description" content="See what's next."/>
+  <meta property="og:type" content="article"/>
+  <meta property="og:image" content="/static/default-social-card.png"/>
+  <meta name="twitter:title" content="Bluesky Social"/>
+  <meta name="twitter:description" content="See what&#x27;s next."/>
+  <meta name="twitter:image" content="/static/default-social-card.png"/>
+  <meta name="twitter:card" content="summary_large_image"/>
+  <meta name="twitter:site" content="@bluesky"/>
+{%- endblock %}
+
 {% block noscript_extra %}
 <p>This is the home page.
 {% endblock %}
diff --git a/bskyweb/templates/post.html b/bskyweb/templates/post.html
index a24f64ab5a..866a97396c 100644
--- a/bskyweb/templates/post.html
+++ b/bskyweb/templates/post.html
@@ -1,25 +1,32 @@
 {% extends "base.html" %}
 
-{% block head_page_meta -%}
-<!-- TODO: "same as" indication with at:// URI? -->
-{%- if postView -%}
-	<meta property="og:type" content="article"/>
-	<meta name="twitter:card" content="summary"/>
-  {%- if postView.Author.DisplayName -%}
-	<meta property="og:title" content="{{ postView.Author.DisplayName }} / {{ postView.Author.Handle }}"/>
-	<meta name="twitter:title" content="{{ postView.Author.DisplayName }} / {{ postView.Author.Handle }}"/>
-  {%- else -%}
-	<meta property="og:title" content="{{ postView.Author.Handle }}"/>
-	<meta name="twitter:title" content="{{ postView.Author.Handle }}"/>
-  {%- endif -%}
-	{%- if postView.Record.Text -%}
-	<meta name="twitter:description" content="{{ postView.Record.Text }}"/>
-	<!-- TODO: could put any images in here, or author avatar -->
-	{%- endif -%}
-{%- endif -%}
+{# TODO: link rel=canonical #}
+{# TODO: "same as" #}
+{% block html_head_extra -%}
+{%- if postView %}
+  <meta property="og:type" content="article"/>
+  <meta name="twitter:card" content="summary"/>
+  <meta property="og:title" content="{{ postView.Author.Handle }} - Bluesky"/>
+  <meta name="twitter:title" content="{{ postView.Author.Handle }} - Bluesky"/>
+  {%- if postView.Author.Avatar %}
+  <meta property="og:image" content="{{ postView.Author.Avatar }}"/>
+  <meta name="twitter:image" content="{{ postView.Author.Avatar }}"/>
+  {% endif -%}
+  {%- if postView.Record.Text %}
+  <meta property="og:description" content="{{ postView.Record.Text }}"/>
+  <meta name="twitter:description" content="{{ postView.Record.Text }}"/>
+  {% endif -%}
+  <meta name="twitter:label1" content="Author DID">
+  <meta name="twitter:value1" content="{{ postView.Author.Did }}">
+{% endif -%}
 {%- endblock %}
 
 {% block noscript_extra -%}
-<p>{{ postView.Author.DisplayName }} / {{ postView.Author.Handle }}
-<p>{{ postView.Record.Text }}
+<div id="bsky_post_summary">
+  <h3>Post</h3>
+  <p id="bsky_display_name">{{ postView.Author.DisplayName }}</p>
+  <p id="bsky_handle">{{ postView.Author.Handle }}</p>
+  <p id="bsky_did">{{ postView.Author.Did }}</p>
+  <p id="bsky_post_text">{{ postView.Record.Text }}</p>
+</div>
 {%- endblock %}
diff --git a/bskyweb/templates/profile.html b/bskyweb/templates/profile.html
index 260f211a66..0710d3280e 100644
--- a/bskyweb/templates/profile.html
+++ b/bskyweb/templates/profile.html
@@ -1,25 +1,32 @@
 {% extends "base.html" %}
 
-{% block head_page_meta -%}
-<!-- TODO: "same as" indication with DID? -->
+{# TODO: "same as" indication with DID? #}
+{# TODO: could work in profileView.DisplayName here, conditionally? #}
+{% block html_head_extra -%}
 {%- if profileView -%}
-	<meta property="og:type" content="article"/>
-	<meta name="twitter:card" content="summary"/>
-  {%- if profileView.DisplayName -%}
-	<meta property="og:title" content="{{ profileView.DisplayName }} / {{ profileView.Handle }}"/>
-	<meta name="twitter:title" content="{{ profileView.DisplayName }} / {{ profileView.Handle }}"/>
-  {%- else -%}
-	<meta property="og:title" content="{{ profileView.Handle }}"/>
-	<meta name="twitter:title" content="{{ profileView.Handle }}"/>
-  {%- endif -%}
-	<meta name="twitter:description" content="{{ profileView.Description }}"/>
-	{%- if profileView.Avatar -%}
+  <meta property="og:type" content="article"/>
+  <meta name="twitter:card" content="summary"/>
+  <meta property="og:title" content="{{ profileView.Handle }} - Bluesky"/>
+  <meta name="twitter:title" content="{{ profileView.Handle}} - Bluesky"/>
+  {%- if profileView.Description %}
+  <meta property="og:description" content="{{ profileView.Description }}"/>
+  <meta name="twitter:description" content="{{ profileView.Description }}"/>
+  {% endif -%}
+  {%- if profileView.Avatar %}
+  <meta property="og:image" content="{{ profileView.Avatar }}"/>
   <meta name="twitter:image" content="{{ profileView.Avatar }}"/>
-  {%- endif -%}
+  {% endif -%}
+  <meta name="twitter:label1" content="Author DID">
+  <meta name="twitter:value1" content="{{ profileView.Did }}">
 {%- endif -%}
 {%- endblock %}
 
 {% block noscript_extra -%}
-<p>{{ profileView.DisplayName }} / {{ profileView.Handle }}
-<p>{{ profileView.Description }}
+<div id="bsky_profile_summary">
+  <h3>Profile</h3>
+  <p id="bsky_display_name">{{ profileView.DisplayName }}</p>
+  <p id="bsky_handle">{{ profileView.Handle }}</p>
+  <p id="bsky_did">{{ profileView.Did }}</p>
+  <p id="bsky_profile_description">{{ profileView.Description }}</p>
+</div>
 {%- endblock %}
