altf4arnold/datatracker
1
0
Fork 0
Code Issues Pull requests Actions 3 Packages Projects Releases Wiki Activity

feat: Add opengraph information to document pages (#4207)

Browse source 
* feat: Add opengraph information to document pages

* Apply suggestions from code review

Co-authored-by: Mark Nottingham <mnot@mnot.net>

* Add IRTF and IAB logo and make card PNGs for all

* Use the cards and restore stuff that somehow got dropped

* Try and make Twitter use the "large image" card format

Co-authored-by: Mark Nottingham <mnot@mnot.net>
This commit is contained in:
Lars Eggert 2022-07-23 13:07:04 -04:00 committed by GitHub
parent 9e55ec1fd4
commit e94614e0a8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 51 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
ietf/static/images/iab-logo-card.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 31 KiB

1
ietf/static/images/iab-logo-shadow.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

1
ietf/static/images/iab-logo.svg Normal file
View file

@ -0,0 +1 @@
<svg width="201.333" height="155.949" xmlns="http://www.w3.org/2000/svg"><path d="m131.984 101.1 16.918-16.918a1.998 1.998 0 0 0 0-2.828l-33.836-33.84a2 2 0 0 0-2.828 0l-33.84 33.84a2 2 0 0 0 0 2.828l33.84 33.836a2 2 0 0 0 2.828 0z" style="fill:#183f80;fill-opacity:1;fill-rule:nonzero;stroke:#000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="matrix(1.33333 0 0 -1.33333 -2.183 158.801)"/><path d="m95.316 101.1 16.922-16.918a1.998 1.998 0 0 0 0-2.828l-33.84-33.84a2 2 0 0 0-2.828 0l-33.84 33.84a2 2 0 0 0 0 2.828l33.84 33.836a2 2 0 0 0 2.828 0z" style="fill:#999;fill-opacity:1;fill-rule:nonzero;stroke:#000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="matrix(1.33333 0 0 -1.33333 -2.183 158.801)"/><path d="M58.652 101.1 75.57 84.182a1.998 1.998 0 0 0 0-2.828v0l-33.836-33.84a2 2 0 0 0-2.828 0v0l-33.84 33.84a2 2 0 0 0 0 2.828v0l33.84 33.836a2 2 0 0 0 2.828 0z" style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:#000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="matrix(1.33333 0 0 -1.33333 -2.183 158.801)"/><path d="m4.77 84.662-2.633-2.753 19.582-19.332L40.098 80.85l18.703-18.641 36.668 36.325 18.613-18.325 18.148 17.957 17.086-16.992 2.821 2.754-19.907 19.606s-18.195-17.864-18.195-18c0-.137-18.75 18.414-18.609 18.414.136 0-36.625-36.461-36.625-36.461l-18.61 18.414-18.382-17.906Z" style="fill:#ff0;fill-opacity:1;fill-rule:nonzero;stroke:#000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="matrix(1.33333 0 0 -1.33333 -2.183 158.801)"/><path d="M109.223 32.963h18.414s6.508-.414 7.062-6.785c.555-6.367-5.539-7.336-5.539-7.336s7.617-.14 7.34-7.617c-.277-7.477-9-8.445-9-8.445l-3.047-.141h-15.371zm8.722-6.367v-5.402h5.125s2.629.832 2.629 2.91c0 2.074-2.769 2.492-2.769 2.492zm0-11.769v-5.68h5.953s2.911.832 2.911 2.91c0 2.074-3.047 2.77-3.047 2.77h-5.403z" style="fill:#183f80;fill-opacity:1;fill-rule:nonzero;stroke:#000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="matrix(1.33333 0 0 -1.33333 -2.183 158.801)"/><path d="M71.758 33.1h10.25L93.684 2.776h-9.825L82 7.756H71.48l-1.714-4.832-9.825.133Zm5.105-8.258-3.113-9.75h6.09zM27 33.1h8.527V2.776H27Z" style="fill:#183f80;fill-opacity:1;fill-rule:nonzero;stroke:#000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="matrix(1.33333 0 0 -1.33333 -2.183 158.801)"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
ietf/static/images/ietf-logo-card.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
ietf/static/images/irtf-logo-card.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

1
ietf/static/images/irtf-logo.svg Normal file
View file

@ -0,0 +1 @@
<svg width="765" height="990" style="display:inline" xmlns="http://www.w3.org/2000/svg"><g style="display:inline"><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;line-height:0%;font-family:'Arial Black';-inkscape-font-specification:'Arial Black,';text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#fff;fill-opacity:1;stroke:#000;stroke-width:1.908;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" x="250.217" y="565.473" transform="translate(0 -62.362)"><tspan x="250.217" y="565.473" style="font-size:102.5px;line-height:1.25">R</tspan></text><path style="fill:#bdbcbc;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m134.869 273.355-44.033 44.031 44.033 44.034 44.032-44.034-44.032-44.03m519.185-.001-44.032 44.031 44.032 44.034 44.031-44.034-44.03-44.03m-311.778-.001-44.032 44.031 44.032 44.034 44.032-44.034-44.032-44.03m103.693-.001-44.032 44.031 44.032 44.034 44.032-44.034-44.032-44.03m103.693-.001-44.032 44.031 44.032 44.034 44.033-44.034-44.033-44.03M290.8 325.407l-44.032 44.032 44.032 44.032 44.032-44.032-44.032-44.032m-52.217-52.052-44.033 44.031 44.033 44.034 44.033-44.034-44.033-44.03m155.911 52.051-44.032 44.032 44.032 44.032 44.032-44.032-44.032-44.032m103.693 0-44.032 44.032 44.032 44.032 44.032-44.032-44.032-44.032M290.8 221.827l-44.032 44.03 44.032 44.034 44.032-44.033-44.032-44.031m103.694 0-44.032 44.03 44.032 44.034 44.032-44.033-44.032-44.031m103.693 0-44.032 44.03 44.032 44.034 44.032-44.033-44.032-44.031" transform="translate(0 -62.362)"/><path style="fill:#fccf34;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M98.431 312.254h90.633l49.886 49.886 51.52-51.52 51.807 51.807 104.12-104.12 52.06 52.059 51.52-51.52 53.948 53.949H692.4v10.248h-92.79l-49.903-49.901-51.79 51.79-51.79-51.79-103.58 103.581-51.79-51.792-51.52 51.522-54.22-54.22H97.89l.54-9.98" transform="translate(0 -62.362)"/><path style="fill:none;stroke:#0c0a08;stroke-width:1.90799999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" d="M98.431 312.254h90.633l49.886 49.886 51.52-51.52 51.807 51.807 104.12-104.12 52.06 52.059 51.52-51.52 53.948 53.949H692.4v10.248h-92.79l-49.903-49.901-51.79 51.79-51.79-51.79-103.58 103.581-51.79-51.792-51.52 51.522-54.22-54.22H97.89l.54-9.98z" transform="translate(0 -62.362)"/><path style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M79.997 327.492h21.04v-19.421h-21.04v19.421zm606.244 0h21.04v-19.421h-21.04v19.421zM98.468 565.473h25.715v-73.378H98.468v73.378zm341.277-54.979v-18.399h71.55v18.399h-22.919v54.979h-25.714v-54.98h-22.917m200.334-18.398h53.58v15.494h-27.867v13.34h26.145v15.495h-26.145v29.049H640.08v-73.378" transform="translate(0 -62.362)"/><path style="fill:#fff;fill-opacity:1;stroke:#000;stroke-width:1.90800011;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" d="m446.283 169.434-29.062 29.06 29.062 29.062 29.06-29.062-29.06-29.06m-111.179 7.485-29.061 29.06 29.06 29.062 29.062-29.062-29.061-29.06m-148.231 44.032-29.061 29.06 29.061 29.063 29.061-29.062-29.061-29.06m37.408 171.686-29.061 29.06 29.061 29.063 29.061-29.062-29.06-29.06m222.358-14.971-29.061 29.06 29.06 29.062 29.062-29.062-29.061-29.06m155.211-22.201-29.061 29.06 29.061 29.062 29.061-29.062-29.061-29.06M224.145 184.184l-14.531 14.53 14.53 14.531 14.531-14.53-14.53-14.531m52.217-22.027-14.53 14.53 14.53 14.531 14.53-14.531-14.53-14.53m14.751-44.252-14.531 14.53 14.53 14.531 14.531-14.53-14.53-14.531m74.192 29.501-14.531 14.53 14.531 14.53 14.53-14.53-14.53-14.53m118.444-14.751-14.531 14.53 14.53 14.531 14.532-14.53-14.531-14.53m29.501 29.501-14.53 14.53 14.53 14.531 14.53-14.531-14.53-14.53m51.477 22.027-14.531 14.53 14.53 14.531 14.531-14.53-14.53-14.531M201.855 369.897l-14.531 14.53 14.53 14.531 14.531-14.53-14.53-14.531m89.615 59.823-14.531 14.53 14.531 14.53L306 444.25l-14.53-14.53m103.693 0-14.53 14.53 14.53 14.53 14.53-14.53-14.53-14.53m140.42-37.302-14.531 14.53 14.53 14.531 14.531-14.53-14.53-14.53m-36.726 37.301-14.531 14.53 14.53 14.53 14.531-14.53-14.53-14.53m-140.94-37.082-29.06 29.06 29.06 29.063 29.062-29.062-29.062-29.06m243.488-171.688-14.531 14.53 14.53 14.532 14.531-14.531-14.53-14.53m-28.713-73.546-14.531 14.53 14.53 14.53 14.531-14.53-14.53-14.53" transform="translate(0 -62.362)"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 4.3 KiB

2
ietf/templates/base.html
View file

@ -6,7 +6,7 @@
{% origin %}
{% load django_bootstrap5 %}
{% load django_vite %}
<html lang="en">
<html lang="en" {% block html_attrs %}{% endblock %}>
<head>
{% analytical_head_top %}
<meta charset="utf-8">

2
ietf/templates/doc/document_draft.html
View file

@ -5,7 +5,9 @@
{% load ietf_filters %}
{% load person_filters %}
{% load textfilters %}
{% block html_attrs %}prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#"{% endblock %}
{% block pagehead %}
{% include "doc/opengraph.html" %}
<link rel="alternate"
type="application/atom+xml"
title="Document changes"

42
ietf/templates/doc/opengraph.html Normal file
View file

@ -0,0 +1,42 @@
{# Copyright The IETF Trust 2016-2020, All Rights Reserved #}
{% load origin %}
{% load static %}
{% load ietf_filters %}
{% origin %}
<meta property="og:title" content="{% if doc.get_state_slug == 'rfc' and not snapshot %}RFC {{ rfc_number }}: {% endif %}{{ doc.title }}">
<meta property="og:url" content="{{ settings.IDTRACKER_BASE_URL }}{{ request.path }}">
<link rel="canonical" href="{{ settings.IDTRACKER_BASE_URL }}{{ request.path }}">
<meta property="og:site_name" content="IETF Datatracker">
<meta property="og:description" content="{{ doc.abstract|clean_whitespace }}">
<meta property="og:type" content="article">
{% if doc.stream.slug == "ietf" or doc.name|startswith:"draft-ietf" %}
<meta property="og:image" content="{{ settings.IDTRACKER_BASE_URL }}{% static 'ietf/images/ietf-logo-card.png' %}">
<meta property="og:image:alt" content="Logo of the IETF">
<meta property="article:section" content="IETF - Internet Engineering Task Force">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
{% elif doc.stream.slug == "irtf" or doc.name|startswith:"draft-irtf" %}
<meta property="og:image" content="{{ settings.IDTRACKER_BASE_URL }}{% static 'ietf/images/irtf-logo-card.png' %}">
<meta property="og:image:alt" content="Logo of the IRTF">
<meta property="article:section" content="IRTF - Internet Research Task Force">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
{% elif doc.stream.slug == "iab" or doc.name|startswith:"draft-iab" %}
<meta property="og:image" content="{{ settings.IDTRACKER_BASE_URL }}{% static 'ietf/images/iab-logo-card.png' %}">
<meta property="og:image:alt" content="Logo of the IAB">
<meta property="article:section" content="IRTF - Internet Architecture Board">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
{% else %}{# TODO: We need a card image for individual I-Ds. #}
<meta property="article:section" content="Individual Internet-Draft">
{% endif %}
{% for author in doc.documentauthor_set.all %}<meta property="article:author" content="{{ author.person.name}}">
{% endfor %}
{% if published %}<meta property="article:published_time" content="{{ published.time|date:'Y-m-d' }}">{% endif %}
{% if expires %}<meta property="article:expiration_time" content="{{ expires.time|date:'Y-m-d' }}">{% endif %}

3
package.json
View file

@ -81,7 +81,9 @@
"ietf/static/css/list.scss",
"ietf/static/css/select2.scss",
"ietf/static/images/arrow-ani.webp",
"ietf/static/images/iab-logo-card.png",
"ietf/static/images/iesg-draft-state-diagram.png",
"ietf/static/images/ietf-logo-card.png",
"ietf/static/images/ietf-logo-nor-16-dev.png",
"ietf/static/images/ietf-logo-nor-16.png",
"ietf/static/images/ietf-logo-nor-180-dev.png",
@ -95,6 +97,7 @@
"ietf/static/images/ietf-logo-nor-mask.svg",
"ietf/static/images/ietf-logo-nor.svg",
"ietf/static/images/ietf-logo.svg",
"ietf/static/images/irtf-logo-card.png",
"ietf/static/js/agenda_filter.js",
"ietf/static/js/agenda_materials.js",
"ietf/static/js/agenda_personalize.js",