fix: metatags and embed templates (#1763)

Cecilapp · Aug 17, 2023 · cb66dae · cb66dae
1 parent 0efae89
commit cb66dae
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 38 deletions.
diff --git a/docs/3-Templates.md b/docs/3-Templates.md
@@ -157,7 +157,7 @@ Can be displayed in a template with:
 | `site.time`           | [_Timestamp_](https://wikipedia.org/wiki/Unix_time) of the last generation. |
 
 :::tip
-You can get any page, regardless of their language, with `site.pages['id']` where `id` is the _ID_ of a page.
+You can get any page, regardless of their language, with `site.allpages['id']` where `id` is the _ID_ of a page.
 :::
 
 #### site.menus

diff --git a/resources/layouts/_default/page.oembed.twig b/resources/layouts/_default/page.oembed.twig
@@ -1,25 +1,28 @@
+{% extends 'partials/metatags.html.twig' %}
+{% block content %}
 {
   "type": "video",
   "version": "1.0",
-  "url": "{{ url(page, {canonical: true}) }}",
-  "title": "{{ page.title }}",
-  "description": "{{ page.description|default|e }}",
-  {%- if page.image is defined ~%}
-  {%- set image_asset = asset(page.image) ~%}
-  "thumbnail_url": "{{ url(image_asset, {canonical: true}) }}",
-  "thumbnail_width": {{ image_asset.width }},
-  "thumbnail_height": {{ image_asset.height }},
-  "image": "{{ url(image_asset, {canonical: true}) }}",
+  "url": "{{ opengraph.url }}",
+  "title": "{{ opengraph.title }}",
+  "description": "{{ opengraph.description }}",
+  {%- if opengraph.image is defined ~%}
+  "thumbnail_url": "{{ url(opengraph.image, {canonical: true}) }}",
+  "thumbnail_width": {{ opengraph.image.width }},
+  "thumbnail_height": {{ opengraph.image.height }},
+  "image": "{{ url(opengraph.image, {canonical: true}) }}",
   {%- endif ~%}
-  {%- if page.videos is defined ~%}
-  {%- set video_asset = asset(page.videos[0]) ~%}
-  "html": "<iframe width=\"{{ video_asset.video.width }}\" height=\"{{ video_asset.video.height }}\" src=\"{{ url(page, {canonical: true, format:'iframe'}) }}\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen title=\"{{ page.title }}\"></iframe>",
-  "width": {{ video_asset.video.width }},
-  "height": {{ video_asset.video.height }},
+  {%- if opengraph.video is defined ~%}
+  "html": "<iframe width=\"{{ opengraph.video.video.width }}\" height=\"{{ opengraph.video.video.height }}\" src=\"{{ url(page, {canonical: true, format:'iframe'}) }}\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen title=\"{{ opengraph.title }}\"></iframe>",
+  "width": {{ opengraph.video.video.width }},
+  "height": {{ opengraph.video.video.height }},
+  {%- endif ~%}
+  "author_name": "{{ author.name }}",
+  {%- if author.url is defined ~%}
+  "author_url": "{{ author.url }}",
   {%- endif ~%}
-  "author_name": "{{ site.author.name }}",
-  "author_url": "{{ url('/', {canonical: true}) }}",
   "provider_name": "{{ site.title }}",
   "provider_url": "{{ url('/', {canonical: true}) }}",
   "cache_age": 3600
-}
+}
+{% endblock %}
diff --git a/resources/layouts/partials/feeds-from-section.html.twig b/resources/layouts/partials/feeds-from-section.html.twig
@@ -1,6 +1,6 @@
 {%- set feed_formats = ['atom', 'rss', 'jsonfeed'] -%}
 {%- if page.section|default and page.type == 'page' -%}
-  {%- set section_page = site.pages[page.section]|default -%}
+  {%- set section_page = site.page(page.section)|default -%}
   {%- if section_page -%}
     {%- include 'partials/alternates.html.twig' with {'title': section_page.title|e ~ ' - ' ~ site.title|e , 'page': section_page, 'alternates': section_page.alternates|filter(a => a.format in feed_formats)} only ~%}
   {%- endif -%}

diff --git a/resources/layouts/partials/jsonld.js.twig b/resources/layouts/partials/jsonld.js.twig
@@ -9,14 +9,12 @@
           "description": "{{ site.description }}",
           "url": "{{ url('/', {canonical: true}) }}"
           {%- if site.image is defined ~%},
-          "image": ["{{ url(site.image, {canonical: true}) }}"]
+          "image": ["{{ url(asset(site.image), {canonical: true}) }}"]
           {%- endif ~%}
-          {%- if site.social is defined ~%},
+          {%- if page.social|default(site.social|default) ~%},
           "sameAs": [
-            {%- for social in site.social ~%}
-              {%- if social.url is defined ~%}
+            {%- for social in page.social|default(site.social)|filter((v) => v['url'] is defined) ~%}
             "{{ social.url }}"{% if not loop.last %},{% endif %}
-              {%- endif ~%}
             {%- endfor ~%}
           ]
           {%- endif ~%}
@@ -31,23 +29,23 @@
             {
               "@type": "SiteNavigationElement",
               "position": {{ loop.index }},
-              "name": "{{ site.pages[item.id].title|default(item.name) }}",
-              "description": "{{ site.pages[item.id].description|default('') }}",
-              "url":"{{ url(item.url, {canonical: true}) }}"
+              "name": "{{ site.page(item.id).title|default(item.name) }}",
+              "description": "{{ site.pages(item.id).description|default('') }}",
+              "url": "{{ url(item.url, {canonical: true}) }}"
             }{%- if not loop.last %},{% endif -%}
             {%~ endfor ~%}
           ]
         }
-        {%- endif ~%}
-        {#- BreadcrumbList ~#}
+        {%- endif -%}
         {%- if page.section -%}
+          {#- BreadcrumbList -#}
         ,{
           "@context": "https://schema.org",
           "@type": "BreadcrumbList",
           "itemListElement": [{
             "@type": "ListItem",
             "position": 1,
-            "name": "{{ page.section|capitalize }}",
+            "name": "{{ site.page(page.section).title }}",
             "item": "{{ url(page.section, {canonical: true}) }}"
           },{
             "@type": "ListItem",
@@ -88,13 +86,32 @@
             {%- if favicon_asset and not favicon_asset.missing ~%},
             "logo": {
               "@type": "ImageObject",
-              "url": "{{ url(favicon_asset) }}"
+              "url": "{{ url(favicon_asset, {canonical: true}) }}"
             }
             {%- endif ~%}
           }
         }
           {%- endif ~%}
         {%- endif ~%}
+
+        {#- VideoObject ~#}
+        {%- if opengraph.video is defined -%}
+	      ,{
+          "@context": "https://schema.org",
+          "@type": "VideoObject",
+          "name": "{{ page.title }}",
+          "description": "{{ page.description }}",
+          {%- if page.poster is defined ~%}
+          "thumbnailUrl": [
+            "{{ url(asset(page.poster), {canonical: true}) }}"
+          ],
+          {%- endif ~%}
+          "uploadDate": "{{ page.date|date('Y-m-dTH:i:sP') }}",
+          "duration": "PT1M54S",
+          "contentUrl": "{{ url(opengraph.video, {canonical: true}) }}",
+          "embedUrl": "{{ url(page, {canonical: true, format: 'iframe'}) }}"
+        }
+        {%- endif ~%}
       ]
     {% endapply %}</script>
 {%- endif ~%}
diff --git a/resources/layouts/partials/metatags.html.twig b/resources/layouts/partials/metatags.html.twig
@@ -1,4 +1,4 @@
-{#- title ~#}
+{#- title -#}
 {% if title is not defined or title is empty %}
   {%- set title_divider = page.metatags.title.divider|default(site.metatags.title.divider|default(' &middot; ')) %}
   {%- set title_only = page.metatags.title.only|default(site.metatags.title.only|default(false)) %}
@@ -108,8 +108,8 @@
     {%- set twitter = twitter|merge(page.social.twitter|default(site.social.twitter)) %}
   {%- endif %}
 {% endif %}
-
-    {#- template #}
+{%- block content %}
+    {#~ template ~#}
     <title>{% block title %}{{ title }}{% endblock %}</title>
     <meta name="description" content="{% block description %}{{ description }}{% endblock %}" />
 {%- if keywords ~%}
@@ -153,23 +153,28 @@
 {%- include 'partials/feeds-from-section.html.twig' with {'title': title, 'page': page} only ~%}
 {#- template: alternates languages ~#}
 {%- include 'partials/alternates-languages.html.twig' with {'page': page} only ~%}
+{#- template: preload ~#}
+{%- if page.poster is defined ~%}
+    <link rel="preload" href="{{ url(asset(page.poster)) }}" as="image" type="{{ asset(page.poster).subtype }}" />
+{%- endif ~%}
+{%- if page.videos[0] is defined ~%}
+    <link rel="preload" href="{{ url(asset(page.videos[0])) }}" as="video" type="{{ asset(page.videos[0]).subtype }}" />
+{%- endif ~%}
 {#- template: Open Graph ~#}
     <meta property="og:locale" content="{{ opengraph.locale }}" />
     <meta property="og:site_name" content="{{ opengraph.site_name }}" />
     <meta property="og:type" content="{{ opengraph.type }}" />
     <meta property="og:title" content="{{ opengraph.title }}" />
     <meta property="og:description" content="{{ opengraph.description }}" />
-    <meta property="og:url" content="{{ url(page, {'canonical': true}) }}" />
+    <meta property="og:url" content="{{ opengraph.url }}" />
 {%- if opengraph.image is defined ~%}
-    <link rel="preload" href="{{ url(opengraph.image) }}" as="image" type="{{ opengraph.image.subtype }}" />
     <meta property="og:image" content="{{ url(opengraph.image, {'canonical': true}) }}" />
     <meta property="og:image:type" content="{{ opengraph.image.subtype }}" />
     <meta property="og:image:width" content="{{ opengraph.image.width }}" />
     <meta property="og:image:height" content="{{ opengraph.image.height }}" />
     <meta property="og:image:alt" content="{{ opengraph.title }}" />
 {%- endif ~%}
 {%- if opengraph.video is defined ~%}
-    <link rel="preload" href="{{ url(opengraph.video) }}" as="video" type="{{ opengraph.video.subtype }}" />
     <meta property="og:video" content="{{ url(opengraph.video, {'canonical': true}) }}" />
     <meta property="og:video:url" content="{{ url(opengraph.video, {'canonical': true}) }}" />
     <meta property="og:video:secure_url" content="{{ url(opengraph.video, {'canonical': true}) }}" />
@@ -214,4 +219,5 @@
     <meta name="twitter:creator" content="@{{ twitter.creator }}" />
 {%- endif ~%}
 {#- template: json-ld ~#}
-{%- include 'partials/jsonld.js.twig' with {'author': author, 'favicon_asset': favicon_asset|default} ~%}
+{%- include 'partials/jsonld.js.twig' with {'author': author, 'favicon_asset': favicon_asset|default} ~%}
+{%- endblock ~%}