bskyweb: re-work HTML meta tags, for share cards (#596)

zio/stable
bnewbold 2023-05-08 13:03:03 -07:00 committed by GitHub
parent 6d9e23b1be
commit 249d166811
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 64 additions and 50 deletions

View File

@ -134,30 +134,18 @@
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"/> <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="32x32" href="/static/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png"/> <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png"/>
{% block head_page_meta -%} {% block html_head_extra -%}{%- endblock %}
<meta property="og:title" content="Bluesky Social"/> <meta name="application-name" name="Bluesky">
<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 -->
<meta name="generator" name="bskyweb"> <meta name="generator" name="bskyweb">
{% block head_metadata %}{% endblock %}
</head> </head>
<body> <body>
{%- block body_all %} {%- block body_all %}
<div id="root"></div> <div id="root"></div>
<noscript> <noscript>
{%- block noscript_extra %}{% endblock -%}
<h1>Javascript Required</h1> <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>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>. <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> </noscript>
{% endblock -%} {% endblock -%}
</body> </body>

View File

@ -2,6 +2,18 @@
{% block head_title %}Bluesky{% endblock %} {% 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 %} {% block noscript_extra %}
<p>This is the home page. <p>This is the home page.
{% endblock %} {% endblock %}

View File

@ -1,25 +1,32 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block head_page_meta -%} {# TODO: link rel=canonical #}
<!-- TODO: "same as" indication with at:// URI? --> {# TODO: "same as" #}
{%- if postView -%} {% block html_head_extra -%}
{%- if postView %}
<meta property="og:type" content="article"/> <meta property="og:type" content="article"/>
<meta name="twitter:card" content="summary"/> <meta name="twitter:card" content="summary"/>
{%- if postView.Author.DisplayName -%} <meta property="og:title" content="{{ postView.Author.Handle }} - Bluesky"/>
<meta property="og:title" content="{{ postView.Author.DisplayName }} / {{ postView.Author.Handle }}"/> <meta name="twitter:title" content="{{ postView.Author.Handle }} - Bluesky"/>
<meta name="twitter:title" content="{{ postView.Author.DisplayName }} / {{ postView.Author.Handle }}"/> {%- if postView.Author.Avatar %}
{%- else -%} <meta property="og:image" content="{{ postView.Author.Avatar }}"/>
<meta property="og:title" content="{{ postView.Author.Handle }}"/> <meta name="twitter:image" content="{{ postView.Author.Avatar }}"/>
<meta name="twitter:title" content="{{ postView.Author.Handle }}"/> {% endif -%}
{%- endif -%} {%- if postView.Record.Text %}
{%- if postView.Record.Text -%} <meta property="og:description" content="{{ postView.Record.Text }}"/>
<meta name="twitter:description" content="{{ postView.Record.Text }}"/> <meta name="twitter:description" content="{{ postView.Record.Text }}"/>
<!-- TODO: could put any images in here, or author avatar --> {% endif -%}
{%- endif -%} <meta name="twitter:label1" content="Author DID">
{%- endif -%} <meta name="twitter:value1" content="{{ postView.Author.Did }}">
{% endif -%}
{%- endblock %} {%- endblock %}
{% block noscript_extra -%} {% block noscript_extra -%}
<p>{{ postView.Author.DisplayName }} / {{ postView.Author.Handle }} <div id="bsky_post_summary">
<p>{{ postView.Record.Text }} <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 %} {%- endblock %}

View File

@ -1,25 +1,32 @@
{% extends "base.html" %} {% 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 -%} {%- if profileView -%}
<meta property="og:type" content="article"/> <meta property="og:type" content="article"/>
<meta name="twitter:card" content="summary"/> <meta name="twitter:card" content="summary"/>
{%- if profileView.DisplayName -%} <meta property="og:title" content="{{ profileView.Handle }} - Bluesky"/>
<meta property="og:title" content="{{ profileView.DisplayName }} / {{ profileView.Handle }}"/> <meta name="twitter:title" content="{{ profileView.Handle}} - Bluesky"/>
<meta name="twitter:title" content="{{ profileView.DisplayName }} / {{ profileView.Handle }}"/> {%- if profileView.Description %}
{%- else -%} <meta property="og:description" content="{{ profileView.Description }}"/>
<meta property="og:title" content="{{ profileView.Handle }}"/>
<meta name="twitter:title" content="{{ profileView.Handle }}"/>
{%- endif -%}
<meta name="twitter:description" content="{{ profileView.Description }}"/> <meta name="twitter:description" content="{{ profileView.Description }}"/>
{%- if profileView.Avatar -%} {% endif -%}
{%- if profileView.Avatar %}
<meta property="og:image" content="{{ profileView.Avatar }}"/>
<meta name="twitter: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 -%} {%- endif -%}
{%- endblock %} {%- endblock %}
{% block noscript_extra -%} {% block noscript_extra -%}
<p>{{ profileView.DisplayName }} / {{ profileView.Handle }} <div id="bsky_profile_summary">
<p>{{ profileView.Description }} <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 %} {%- endblock %}