Update Twitter shortcode oEmbed endpoint

The existing endpoint will be retired and removed on November 23, 2021.
References:

- https://twittercommunity.com/t/consolidating-the-oembed-functionality/154690
- https://developer.twitter.com/en/docs/twitter-for-websites/oembed-api#Embedded

This is a backward compatible change.

The existing endpoint requires a single parameter: the id of the tweet.

The new endpoint requires two parameters: the id of the tweet, and the
user with whom it is associated. For the moment, if you supply the wrong
user, the request will be redirected (with a small delay) to the correct
user/id pair. This behavior is undocumented, but we will take advantage
of it as Hugo site authors transition to the new syntax.

{{< tweet 1453110110599868418 >}} --> works, throws warning, deprecate at some point

{{< tweet user="SanDiegoZoo" id="1453110110599868418" >}} --> new syntax

Fixes #8130
This commit is contained in:
Joe Mooring 2021-10-31 03:56:36 -07:00 committed by Bjørn Erik Pedersen
parent ed6fd26ce8
commit 0cc39af682
8 changed files with 193 additions and 81 deletions

View file

@ -123,7 +123,7 @@ toLower
This feature has been in the back log and requested by many for a long time. The development got this recent kick start from this Twitter thread:
{{< tweet 898398437527363585 >}}
{{< tweet user="scott_lowe" id="898398437527363585" >}}
Scott S. Lowe removed the "Related Content" section built using the `intersect` template function on tags, and the build time dropped from 30 seconds to less than 2 seconds on his 1700 content page sized blog.

View file

@ -310,15 +310,15 @@ Assuming that standard Hugo pretty URLs are turned on.
You want to include a single tweet into your blog post? Everything you need is the URL of the tweet:
```
https://twitter.com/spf13/status/877500564405444608
https://twitter.com/SanDiegoZoo/status/1453110110599868418
```
#### Example `tweet` Input
Pass the tweet's ID from the URL as a parameter to the `tweet` shortcode:
Pass the tweet's user (case-insensitive) and id from the URL as parameters to the `tweet` shortcode.
{{< code file="example-tweet-input.md" >}}
{{</* tweet 877500564405444608 */>}}
{{</* tweet user="SanDiegoZoo" id="1453110110599868418" */>}}
{{< /code >}}
#### Example `tweet` Output
@ -326,14 +326,14 @@ Pass the tweet's ID from the URL as a parameter to the `tweet` shortcode:
Using the preceding `tweet` example, the following HTML will be added to your rendered website's markup:
{{< output file="example-tweet-output.html" >}}
{{< tweet 877500564405444608 >}}
{{< tweet user="SanDiegoZoo" id="1453110110599868418" >}}
{{< /output >}}
#### Example `tweet` Display
Using the preceding `tweet` example, the following simulates the displayed experience for visitors to your website. Naturally, the final display will be contingent on your stylesheets and surrounding markup.
{{< tweet 877500564405444608 >}}
{{< tweet user="SanDiegoZoo" id="1453110110599868418" >}}
### `vimeo`

View file

@ -9,7 +9,7 @@ byline: "[bep](https://github.com/bep), Hugo Lead"
The **Lets Encrypt website** has a common set of elements: A landing page and some other static info-pages, a document section, a blog, and a documentation section. Having it moved to Hugo was mostly motivated by a _simpler administration and Hugo's [multilingual support](/content-management/multilingual/)_. They already serve HTTPS to more than 60 million domains, and having the documentation available in more languages will increase that reach.[^1]
{{< tweet 971755920639307777 >}}
{{< tweet user="letsencrypt" id="971755920639307777" >}}
I helped them port the site from Jekyll to Hugo. There are usually very few surprises doing this. I know Hugo very well, but working on sites with a history usually comes up with something new.

View file

@ -37,7 +37,7 @@ How to automate the "publish at intervals" part depends on your situation:
Also see this Twitter thread:
{{< tweet 962380712027590657 >}}
{{< tweet user="ChrisShort" id="962380712027590657" >}}
[^date-hierarchy]: See [Configure Dates](https://gohugo.io/getting-started/configuration/#configure-dates) for the order in which the different date variables are complemented by each other when not explicitly set.

View file

@ -304,7 +304,7 @@ func TestShortcodeTweet(t *testing.T) {
},
},
`{{< tweet 666616452582129664 >}}`,
`{"url":"https:\/\/twitter.com\/spf13\/status\/666616452582129664","author_name":"Steve Francia","author_url":"https:\/\/twitter.com\/spf13","html":"\u003Cblockquote class=\"twitter-tweet\"\u003E\u003Cp lang=\"en\" dir=\"ltr\"\u003EHugo 0.15 will have 30%+ faster render times thanks to this commit \u003Ca href=\"https:\/\/t.co\/FfzhM8bNhT\"\u003Ehttps:\/\/t.co\/FfzhM8bNhT\u003C\/a\u003E \u003Ca href=\"https:\/\/twitter.com\/hashtag\/gohugo?src=hash\"\u003E#gohugo\u003C\/a\u003E \u003Ca href=\"https:\/\/twitter.com\/hashtag\/golang?src=hash\"\u003E#golang\u003C\/a\u003E \u003Ca href=\"https:\/\/t.co\/ITbMNU2BUf\"\u003Ehttps:\/\/t.co\/ITbMNU2BUf\u003C\/a\u003E\u003C\/p\u003E&mdash; Steve Francia (@spf13) \u003Ca href=\"https:\/\/twitter.com\/spf13\/status\/666616452582129664\"\u003ENovember 17, 2015\u003C\/a\u003E\u003C\/blockquote\u003E\n\u003Cscript async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"\u003E\u003C\/script\u003E","width":550,"height":null,"type":"rich","cache_age":"3153600000","provider_name":"Twitter","provider_url":"https:\/\/twitter.com","version":"1.0"}`,
`{"author_name":"Steve Francia","author_url":"https://twitter.com/spf13","cache_age":"3153600000","height":null,"html":"\u003cblockquote class=\"twitter-tweet\"\u003e\u003cp lang=\"en\" dir=\"ltr\"\u003eHugo 0.15 will have 30%+ faster render times thanks to this commit \u003ca href=\"https://t.co/FfzhM8bNhT\"\u003ehttps://t.co/FfzhM8bNhT\u003c/a\u003e \u003ca href=\"https://twitter.com/hashtag/gohugo?src=hash\u0026amp;ref_src=twsrc%5Etfw\"\u003e#gohugo\u003c/a\u003e \u003ca href=\"https://twitter.com/hashtag/golang?src=hash\u0026amp;ref_src=twsrc%5Etfw\"\u003e#golang\u003c/a\u003e \u003ca href=\"https://t.co/ITbMNU2BUf\"\u003ehttps://t.co/ITbMNU2BUf\u003c/a\u003e\u003c/p\u003e\u0026mdash; Steve Francia (@spf13) \u003ca href=\"https://twitter.com/spf13/status/666616452582129664?ref_src=twsrc%5Etfw\"\u003eNovember 17, 2015\u003c/a\u003e\u003c/blockquote\u003e\n\u003cscript async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\n","provider_name":"Twitter","provider_url":"https://twitter.com","type":"rich","url":"https://twitter.com/spf13/status/666616452582129664","version":"1.0","width":550}`,
`.twitter-tweet a`,
},
{
@ -314,8 +314,18 @@ func TestShortcodeTweet(t *testing.T) {
},
},
`{{< tweet 666616452582129664 >}}`,
`{"url":"https:\/\/twitter.com\/spf13\/status\/666616452582129664","author_name":"Steve Francia","author_url":"https:\/\/twitter.com\/spf13","html":"\u003Cblockquote class=\"twitter-tweet\"\u003E\u003Cp lang=\"en\" dir=\"ltr\"\u003EHugo 0.15 will have 30%+ faster render times thanks to this commit \u003Ca href=\"https:\/\/t.co\/FfzhM8bNhT\"\u003Ehttps:\/\/t.co\/FfzhM8bNhT\u003C\/a\u003E \u003Ca href=\"https:\/\/twitter.com\/hashtag\/gohugo?src=hash\"\u003E#gohugo\u003C\/a\u003E \u003Ca href=\"https:\/\/twitter.com\/hashtag\/golang?src=hash\"\u003E#golang\u003C\/a\u003E \u003Ca href=\"https:\/\/t.co\/ITbMNU2BUf\"\u003Ehttps:\/\/t.co\/ITbMNU2BUf\u003C\/a\u003E\u003C\/p\u003E&mdash; Steve Francia (@spf13) \u003Ca href=\"https:\/\/twitter.com\/spf13\/status\/666616452582129664\"\u003ENovember 17, 2015\u003C\/a\u003E\u003C\/blockquote\u003E\n\u003Cscript async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"\u003E\u003C\/script\u003E","width":550,"height":null,"type":"rich","cache_age":"3153600000","provider_name":"Twitter","provider_url":"https:\/\/twitter.com","version":"1.0"}`,
`(?s)^<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Hugo 0.15 will have 30%. faster render times thanks to this commit <a href="https://t.co/FfzhM8bNhT">https://t.co/FfzhM8bNhT</a> <a href="https://twitter.com/hashtag/gohugo.src=hash">#gohugo</a> <a href="https://twitter.com/hashtag/golang.src=hash">#golang</a> <a href="https://t.co/ITbMNU2BUf">https://t.co/ITbMNU2BUf</a></p>&mdash; Steve Francia .@spf13. <a href="https://twitter.com/spf13/status/666616452582129664">November 17, 2015</a></blockquote>.*?<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>`,
`{"author_name":"Steve Francia","author_url":"https://twitter.com/spf13","cache_age":"3153600000","height":null,"html":"\u003cblockquote class=\"twitter-tweet\"\u003e\u003cp lang=\"en\" dir=\"ltr\"\u003eHugo 0.15 will have 30%+ faster render times thanks to this commit \u003ca href=\"https://t.co/FfzhM8bNhT\"\u003ehttps://t.co/FfzhM8bNhT\u003c/a\u003e \u003ca href=\"https://twitter.com/hashtag/gohugo?src=hash\u0026amp;ref_src=twsrc%5Etfw\"\u003e#gohugo\u003c/a\u003e \u003ca href=\"https://twitter.com/hashtag/golang?src=hash\u0026amp;ref_src=twsrc%5Etfw\"\u003e#golang\u003c/a\u003e \u003ca href=\"https://t.co/ITbMNU2BUf\"\u003ehttps://t.co/ITbMNU2BUf\u003c/a\u003e\u003c/p\u003e\u0026mdash; Steve Francia (@spf13) \u003ca href=\"https://twitter.com/spf13/status/666616452582129664?ref_src=twsrc%5Etfw\"\u003eNovember 17, 2015\u003c/a\u003e\u003c/blockquote\u003e\n\u003cscript async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\n","provider_name":"Twitter","provider_url":"https://twitter.com","type":"rich","url":"https://twitter.com/spf13/status/666616452582129664","version":"1.0","width":550}`,
`(?s)<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Hugo 0.15 will have 30%\+ faster render times thanks to this commit <a href="https://t.co/FfzhM8bNhT">https://t.co/FfzhM8bNhT</a> <a href="https://twitter.com/hashtag/gohugo\?src=hash&amp;ref_src=twsrc%5Etfw">#gohugo</a> <a href="https://twitter.com/hashtag/golang\?src=hash&amp;ref_src=twsrc%5Etfw">#golang</a> <a href="https://t.co/ITbMNU2BUf">https://t.co/ITbMNU2BUf</a></p>&mdash; Steve Francia \(@spf13\) <a href="https://twitter.com/spf13/status/666616452582129664\?ref_src=twsrc%5Etfw">November 17, 2015</a></blockquote>\s*<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>`,
},
{
map[string]interface{}{
"twitter": map[string]interface{}{
"simple": false,
},
},
`{{< tweet user="SanDiegoZoo" id="1453110110599868418" >}}`,
`{"author_name":"San Diego Boo 👻 Wildlife Alliance","author_url":"https://twitter.com/sandiegozoo","cache_age":"3153600000","height":null,"html":"\u003cblockquote class=\"twitter-tweet\"\u003e\u003cp lang=\"en\" dir=\"ltr\"\u003eOwl bet you\u0026#39;ll lose this staring contest 🦉 \u003ca href=\"https://t.co/eJh4f2zncC\"\u003epic.twitter.com/eJh4f2zncC\u003c/a\u003e\u003c/p\u003e\u0026mdash; San Diego Boo 👻 Wildlife Alliance (@sandiegozoo) \u003ca href=\"https://twitter.com/sandiegozoo/status/1453110110599868418?ref_src=twsrc%5Etfw\"\u003eOctober 26, 2021\u003c/a\u003e\u003c/blockquote\u003e\n\u003cscript async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\n","provider_name":"Twitter","provider_url":"https://twitter.com","type":"rich","url":"https://twitter.com/sandiegozoo/status/1453110110599868418","version":"1.0","width":550}`,
`(?s)<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Owl bet you&#39;ll lose this staring contest 🦉 <a href="https://t.co/eJh4f2zncC">pic.twitter.com/eJh4f2zncC</a></p>&mdash; San Diego Boo 👻 Wildlife Alliance \(@sandiegozoo\) <a href="https://twitter.com/sandiegozoo/status/1453110110599868418\?ref_src=twsrc%5Etfw">October 26, 2021</a></blockquote>\s*<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>`,
},
} {
// overload getJSON to return mock API response from Twitter

View file

@ -590,28 +590,79 @@ if (!doNotTrack) {
{`shortcodes/twitter.html`, `{{- $pc := .Page.Site.Config.Privacy.Twitter -}}
{{- if not $pc.Disable -}}
{{- if $pc.Simple -}}
{{ template "_internal/shortcodes/twitter_simple.html" . }}
{{- template "_internal/shortcodes/twitter_simple.html" . -}}
{{- else -}}
{{- $url := printf "https://api.twitter.com/1/statuses/oembed.json?id=%v&dnt=%t" (index .Params 0) $pc.EnableDNT -}}
{{- $json := getJSON $url -}}
{{ $json.html | safeHTML }}
{{- $msg1 := "The %q shortcode requires two named parameters: user and id. See %s" -}}
{{- $msg2 := "The %q shortcode will soon require two named parameters: user and id. See %s" -}}
{{- if .IsNamedParams -}}
{{- $id := .Get "id" -}}
{{- $user := .Get "user" -}}
{{- if and $id $user -}}
{{- template "render-tweet" (dict "id" $id "user" $user "dnt" $pc.EnableDNT) -}}
{{- else -}}
{{- errorf $msg1 .Name .Position -}}
{{- end -}}
{{- end -}}`},
{{- else -}}
{{- $id := .Get 1 -}}
{{- $user := .Get 0 -}}
{{- if eq 1 (len .Params) -}}
{{- $id = .Get 0 -}}
{{- $user = "x" -}} {{/* This triggers a redirect. It works, but may not work forever. */}}
{{- warnf $msg2 .Name .Position -}}
{{- end -}}
{{- template "render-tweet" (dict "id" $id "user" $user "dnt" $pc.EnableDNT) -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{- define "render-tweet" -}}
{{- $url := printf "https://twitter.com/%v/status/%v" .user .id -}}
{{- $query := querify "url" $url "dnt" .dnt -}}
{{- $request := printf "https://publish.twitter.com/oembed?%s" $query -}}
{{- $json := getJSON $request -}}
{{- $json.html | safeHTML -}}
{{- end -}}
`},
{`shortcodes/twitter_simple.html`, `{{- $pc := .Page.Site.Config.Privacy.Twitter -}}
{{- $sc := .Page.Site.Config.Services.Twitter -}}
{{- if not $pc.Disable -}}
{{- $id := .Get 0 -}}
{{- $json := getJSON "https://api.twitter.com/1/statuses/oembed.json?id=" $id "&omit_script=true" -}}
{{- if not $sc.DisableInlineCSS -}}
{{ template "__h_simple_twitter_css" $ }}
{{- $msg1 := "The %q shortcode requires two named parameters: user and id. See %s" -}}
{{- $msg2 := "The %q shortcode will soon require two named parameters: user and id. See %s" -}}
{{- if .IsNamedParams -}}
{{- $id := .Get "id" -}}
{{- $user := .Get "user" -}}
{{- if and $id $user -}}
{{- template "render-simple-tweet" (dict "id" $id "user" $user "dnt" $pc.EnableDNT "disableInlineCSS" $sc.DisableInlineCSS "ctx" .) -}}
{{- else -}}
{{- errorf $msg1 .Name .Position -}}
{{- end -}}
{{- else -}}
{{- $id := .Get 1 -}}
{{- $user := .Get 0 -}}
{{- if eq 1 (len .Params) -}}
{{- $id = .Get 0 -}}
{{- $user = "x" -}} {{/* This triggers a redirect. It works, but may not work forever. */}}
{{- warnf $msg2 .Name .Position -}}
{{- end -}}
{{- template "render-simple-tweet" (dict "id" $id "user" $user "dnt" $pc.EnableDNT "disableInlineCSS" $sc.DisableInlineCSS "ctx" .) -}}
{{- end -}}
{{ $json.html | safeHTML }}
{{- end -}}
{{ define "__h_simple_twitter_css" }}
{{ if not (.Page.Scratch.Get "__h_simple_twitter_css") }}
{{- define "render-simple-tweet" -}}
{{- $url := printf "https://twitter.com/%v/status/%v" .user .id -}}
{{- $query := querify "url" $url "dnt" .dnt "omit_script" true -}}
{{- $request := printf "https://publish.twitter.com/oembed?%s" $query -}}
{{- $json := getJSON $request -}}
{{- if not .disableInlineCSS -}}
{{- template "__h_simple_twitter_css" .ctx -}}
{{- end }}
{{ $json.html | safeHTML -}}
{{- end -}}
{{- define "__h_simple_twitter_css" -}}
{{- if not (.Page.Scratch.Get "__h_simple_twitter_css") -}}
{{/* Only include once */}}
{{ .Page.Scratch.Set "__h_simple_twitter_css" true }}
{{- .Page.Scratch.Set "__h_simple_twitter_css" true }}
<style type="text/css">
.twitter-tweet {
font: 14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
@ -628,8 +679,9 @@ if (!doNotTrack) {
text-decoration: underline;
}
</style>
{{ end }}
{{ end }}`},
{{- end -}}
{{- end -}}
`},
{`shortcodes/vimeo.html`, `{{- $pc := .Page.Site.Config.Privacy.Vimeo -}}
{{- if not $pc.Disable -}}
{{- if $pc.Simple -}}

View file

@ -1,10 +1,35 @@
{{- $pc := .Page.Site.Config.Privacy.Twitter -}}
{{- if not $pc.Disable -}}
{{- if $pc.Simple -}}
{{ template "_internal/shortcodes/twitter_simple.html" . }}
{{- template "_internal/shortcodes/twitter_simple.html" . -}}
{{- else -}}
{{- $url := printf "https://api.twitter.com/1/statuses/oembed.json?id=%v&dnt=%t" (index .Params 0) $pc.EnableDNT -}}
{{- $json := getJSON $url -}}
{{ $json.html | safeHTML }}
{{- $msg1 := "The %q shortcode requires two named parameters: user and id. See %s" -}}
{{- $msg2 := "The %q shortcode will soon require two named parameters: user and id. See %s" -}}
{{- if .IsNamedParams -}}
{{- $id := .Get "id" -}}
{{- $user := .Get "user" -}}
{{- if and $id $user -}}
{{- template "render-tweet" (dict "id" $id "user" $user "dnt" $pc.EnableDNT) -}}
{{- else -}}
{{- errorf $msg1 .Name .Position -}}
{{- end -}}
{{- else -}}
{{- $id := .Get 1 -}}
{{- $user := .Get 0 -}}
{{- if eq 1 (len .Params) -}}
{{- $id = .Get 0 -}}
{{- $user = "x" -}} {{/* This triggers a redirect. It works, but may not work forever. */}}
{{- warnf $msg2 .Name .Position -}}
{{- end -}}
{{- template "render-tweet" (dict "id" $id "user" $user "dnt" $pc.EnableDNT) -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{- define "render-tweet" -}}
{{- $url := printf "https://twitter.com/%v/status/%v" .user .id -}}
{{- $query := querify "url" $url "dnt" .dnt -}}
{{- $request := printf "https://publish.twitter.com/oembed?%s" $query -}}
{{- $json := getJSON $request -}}
{{- $json.html | safeHTML -}}
{{- end -}}

View file

@ -1,18 +1,43 @@
{{- $pc := .Page.Site.Config.Privacy.Twitter -}}
{{- $sc := .Page.Site.Config.Services.Twitter -}}
{{- if not $pc.Disable -}}
{{- $id := .Get 0 -}}
{{- $json := getJSON "https://api.twitter.com/1/statuses/oembed.json?id=" $id "&omit_script=true" -}}
{{- if not $sc.DisableInlineCSS -}}
{{ template "__h_simple_twitter_css" $ }}
{{- $msg1 := "The %q shortcode requires two named parameters: user and id. See %s" -}}
{{- $msg2 := "The %q shortcode will soon require two named parameters: user and id. See %s" -}}
{{- if .IsNamedParams -}}
{{- $id := .Get "id" -}}
{{- $user := .Get "user" -}}
{{- if and $id $user -}}
{{- template "render-simple-tweet" (dict "id" $id "user" $user "dnt" $pc.EnableDNT "disableInlineCSS" $sc.DisableInlineCSS "ctx" .) -}}
{{- else -}}
{{- errorf $msg1 .Name .Position -}}
{{- end -}}
{{- else -}}
{{- $id := .Get 1 -}}
{{- $user := .Get 0 -}}
{{- if eq 1 (len .Params) -}}
{{- $id = .Get 0 -}}
{{- $user = "x" -}} {{/* This triggers a redirect. It works, but may not work forever. */}}
{{- warnf $msg2 .Name .Position -}}
{{- end -}}
{{- template "render-simple-tweet" (dict "id" $id "user" $user "dnt" $pc.EnableDNT "disableInlineCSS" $sc.DisableInlineCSS "ctx" .) -}}
{{- end -}}
{{ $json.html | safeHTML }}
{{- end -}}
{{ define "__h_simple_twitter_css" }}
{{ if not (.Page.Scratch.Get "__h_simple_twitter_css") }}
{{- define "render-simple-tweet" -}}
{{- $url := printf "https://twitter.com/%v/status/%v" .user .id -}}
{{- $query := querify "url" $url "dnt" .dnt "omit_script" true -}}
{{- $request := printf "https://publish.twitter.com/oembed?%s" $query -}}
{{- $json := getJSON $request -}}
{{- if not .disableInlineCSS -}}
{{- template "__h_simple_twitter_css" .ctx -}}
{{- end }}
{{ $json.html | safeHTML -}}
{{- end -}}
{{- define "__h_simple_twitter_css" -}}
{{- if not (.Page.Scratch.Get "__h_simple_twitter_css") -}}
{{/* Only include once */}}
{{ .Page.Scratch.Set "__h_simple_twitter_css" true }}
{{- .Page.Scratch.Set "__h_simple_twitter_css" true }}
<style type="text/css">
.twitter-tweet {
font: 14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
@ -29,5 +54,5 @@
text-decoration: underline;
}
</style>
{{ end }}
{{ end }}
{{- end -}}
{{- end -}}