Added support for AMP HTML

index.php

@@ -41,11 +41,13 @@
         'editor/h3'         => __DIR__ . '/snippets/h3.php',
         'editor/hr'         => __DIR__ . '/snippets/hr.php',
         'editor/image'      => __DIR__ . '/snippets/image.php',
+        'editor/image.amp'  => __DIR__ . '/snippets/image.amp.php',
         'editor/kirbytext'  => __DIR__ . '/snippets/kirbytext.php',
         'editor/ol'         => __DIR__ . '/snippets/ol.php',
         'editor/paragraph'  => __DIR__ . '/snippets/paragraph.php',
         'editor/ul'         => __DIR__ . '/snippets/ul.php',
         'editor/video'      => __DIR__ . '/snippets/video.php',
+        'editor/video.amp'  => __DIR__ . '/snippets/video.amp.php',
     ],
     'translations' => [
         'de'    => @include_once __DIR__ . '/i18n/de.php',

lib/Block.php

@@ -159,6 +159,27 @@ public function html(): string
         return snippet('editor/' . $this->type(), $this->controller(), true);
     }
 
+    /**
+     * Converts the block to AMP HTML
+     *
+     * @return string
+     */
+    public function ampHtml(): string
+    {
+        $snippetName = 'editor/' . $this->type();
+        return snippet([$snippetName . '.amp', $snippetName], $this->controller(), true);
+    }
+
+    /**
+     * Returns an array of custom AMP element scripts
+     *
+     * @return array
+     */
+    public function ampCustomElementScripts(): array
+    {
+        return [];
+    }
+
     /**
      * Convert inline html to markdown
      *
@@ -332,6 +353,16 @@ public function toHtml(): string
         return $this->html();
     }
 
+    /**
+     * Alias for ampHtml()
+     *
+     * @return string
+     */
+    public function toAmpHtml(): string
+    {
+        return $this->ampHtml();
+    }
+
     /**
      * Converts the block to markdown
      *

lib/Blocks.php

@@ -98,6 +98,52 @@ public function html(): string
         return implode($html);
     }
 
+    /**
+     * Convert all blocks to AMP HTML
+     *
+     * @return string
+     */
+    public function ampHtml(): string
+    {
+        $ampHtml = [];
+
+        foreach ($this->data as $block) {
+            $ampHtml[] = $block->ampHtml();
+        }
+
+        return implode($ampHtml);
+    }
+
+    /**
+     * Returns an array of custom AMP element scripts for all blocks
+     *
+     * @return array
+     */
+    public function ampCustomElementScripts(): array
+    {
+        $ampScripts = [];
+
+        foreach ($this->data as $block) {
+            $ampScripts = array_merge($ampScripts, $block->ampCustomElementScripts());
+        }
+
+        return $ampScripts;
+    }
+
+    /**
+     * Returns a string of custom AMP element script tags for all blcoks
+     *
+     * @return string
+     */
+    public function ampCustomElementScriptTags(): string
+    {
+        $tags = [];
+        foreach ($this->ampCustomElementScripts() as $customElement => $scriptSrc) {
+            $tags[] = '<script async custom-element="' . $customElement . '" src="' . $scriptSrc .'"></script>';
+        }
+        return implode("\n", $tags);
+    }
+
     /**
      * Converts the collection to markdown
      *
@@ -134,6 +180,16 @@ public function toHtml(): string
         return $this->html();
     }
 
+    /**
+     * Alias for ampHtml()
+     *
+     * @return string
+     */
+    public function toAmpHtml(): string
+    {
+        return $this->ampHtml();
+    }
+
     /**
      * Alias for markdown()
      *

lib/ImageBlock.php

@@ -9,8 +9,10 @@ class ImageBlock extends Block
     public function controller(): array
     {
         $data = parent::controller();
-        $data['image'] = $image = $this->image();
-        $data['src']   = $image ? $image->url() : $this->attrs()->src();
+        $data['image']  = $image = $this->image();
+        $data['src']    = $image ? $image->url() : $this->attrs()->src();
+        $data['width']  = $image ? $image->width() : null;
+        $data['height'] = $image ? $image->height() : null;
 
         return $data;
     }

lib/VideoBlock.php

@@ -10,6 +10,7 @@ public function controller(): array
     {
         $data = parent::controller();
         $data['iframe'] = $this->iframe();
+        $data['videoSourceType'] = $this->videoSourceType();
         return $data;
     }
 
@@ -22,11 +23,37 @@ public function iframe()
         }
     }
 
+    public function videoSourceType(): ?string
+    {
+        $src = $this->attrs()->src();
+        if (preg_match('!youtu!i', $src) === 1) {
+            return 'youtube';
+        }
+        elseif (preg_match('!vimeo!i', $src) === 1) {
+            return 'vimeo';
+        }
+        return null;
+    }
+
     public function isEmpty(): bool
     {
         return empty($this->iframe()) === true;
     }
 
+    public function ampCustomElementScripts(): array
+    {
+        $scripts = parent::ampCustomElementScripts();
+        switch ($this->videoSourceType()) {
+            case 'youtube':
+                $scripts['amp-youtube'] = 'https://cdn.ampproject.org/v0/amp-youtube-0.1.js';
+                break;
+            case 'vimeo':
+                $scripts['amp-vimeo'] = 'https://cdn.ampproject.org/v0/amp-vimeo-0.1.js';
+                break;
+        }
+        return $scripts;
+    }
+
     public function markdown(): string
     {
         $attrs = [

snippets/image.amp.php

@@ -0,0 +1,35 @@
+<?php if ($block->isNotEmpty()): ?>
+<figure<?= attr(['class' => $attrs->css()->value()], ' ') ?>>
+  <?php if ($attrs->link()->isNotEmpty()): ?>
+  <a href="<?= $attrs->link()->toUrl() ?>">
+    <amp-img
+      src="<?= $src ?>"
+      alt="<?= $attrs->alt() ?>"
+      layout="responsive"
+      width="<?= $width ?>"
+      height="<?= $height ?>">
+      <noscript>
+        <img src="<?= $src ?>" alt="<?= $attrs->alt() ?>" />
+      </noscript>
+    </amp-img>
+  </a>
+  <?php else: ?>
+  <amp-img
+    src="<?= $src ?>"
+    alt="<?= $attrs->alt() ?>"
+    layout="responsive"
+    width="<?= $width ?>"
+    height="<?= $height ?>">
+    <noscript>
+      <img src="<?= $src ?>" alt="<?= $attrs->alt() ?>" />
+    </noscript>
+  </amp-img>
+  <?php endif ?>
+
+  <?php if ($attrs->caption()->isNotEmpty()): ?>
+  <figcaption>
+    <?= $attrs->caption() ?>
+  </figcaption>
+  <?php endif ?>
+</figure>
+<?php endif ?>

snippets/video.amp.php

@@ -0,0 +1,43 @@
+<?php if ($iframe && $videoSourceType): ?>
+
+<figure<?= attr(['class' => $attrs->css()->value()], ' ') ?>>
+
+  <?php
+  preg_match('/src="([^"]+)"/', $iframe, $match);
+  $url = $match[1]; // grab from iframe because it's already been normalized (instead of $attrs->src())
+  ?>
+
+  <?php if ($videoSourceType === 'youtube'): ?>
+    <?php
+    $id = null;
+    if (preg_match('!' . '\/embed\/([a-zA-Z0-9_-]+)' . '!i', $url, $array) === 1) {
+      $id = $array[1];
+    }
+    ?>
+    <amp-youtube
+      data-videoid="<?= $id ?>"
+      layout="responsive"
+      width="480"
+      height="270"
+    ></amp-youtube>
+  <?php elseif ($videoSourceType === 'vimeo'): ?>
+    <?php
+    $id = null;
+    if (preg_match('!' . '\/video\/([0-9]+)' . '!i', $url, $array) === 1) {
+      $id = $array[1];
+    }
+    ?>
+    <amp-vimeo
+      data-videoid="<?= $id ?>"
+      layout="responsive"
+      width="480"
+      height="270"
+    ></amp-vimeo>
+  <?php endif ?>
+
+  <?php if ($attrs->caption()->isNotEmpty()): ?>
+  <figcaption><?= $attrs->caption() ?></figcaption>
+  <?php endif ?>
+</figure>
+
+<?php endif ?>