chore(embed): change extnames prop to types and update documentation

_includes/embed/audio.html

@@ -1,6 +1,6 @@
 {% assign src = include.src | strip %}
 {% assign title = include.title | strip %}
-{% assign extnames = include.extnames | default: '' | strip | split: '|' %}
+{% assign types = include.types | default: '' | strip | split: '|' %}
 
 {% unless src contains '://' %}
   {%- capture src -%}
@@ -12,25 +12,25 @@
   <audio class="embed-audio" controls>
     {% assign parts = src | split: '/' %}
     {% assign filename = parts | last %}
-    {% assign extname = filename | split: '.' | last %}
+    {% assign extension = filename | split: '.' | last %}
     {% assign basename = filename | split: '.' | pop | join: '.' %}
     {% assign path = parts | pop | join: '/' %}
 
-    {% assign media_item = site.data.media | find: 'extension', extname %}
+    {% assign media_item = site.data.media | find: 'extension', extension %}
     {% if media_item %}
       <source src="{{ src }}" type="audio/{{ media_item['mimeType'] }}">
     {% else %}
-      <source src="{{ src }}" type="audio/{{ extname }}">
+      <source src="{{ src }}" type="audio/{{ extension }}">
     {% endif %}
 
-    {% for extra_extname in extnames %}
-      {% assign filename = basename | append: '.' | append: extra_extname %}
+    {% for extra_type in types %}
+      {% assign filename = basename | append: '.' | append: extra_type %}
       {% assign extra_src = path | append: '/' | append: filename %}
-      {% assign media_item = site.data.media | find: 'extension', extra_extname %}
+      {% assign media_item = site.data.media | find: 'extension', extra_type %}
       {% if media_item %}
         <source src="{{ extra_src }}" type="audio/{{ media_item['mimeType'] }}">
       {% else %}
-        <source src="{{ extra_src }}" type="audio/{{ extra_extname }}">
+        <source src="{{ extra_src }}" type="audio/{{ extra_type }}">
       {% endif %}
     {% endfor %}
 

_includes/embed/video.html

@@ -1,7 +1,7 @@
 {% assign video_url = include.src %}
 {% assign title = include.title %}
 {% assign poster_url = include.poster %}
-{% assign extnames = include.extnames | default: '' | strip | split: '|' %}
+{% assign types = include.types | default: '' | strip | split: '|' %}
 
 {% unless video_url contains '://' %}
   {%- capture video_url -%}
@@ -36,25 +36,25 @@
   <video class="embed-video file" {{ poster }} {{ attributes }}>
     {% assign parts = video_url | split: '/' %}
     {% assign filename = parts | last %}
-    {% assign extname = filename | split: '.' | last %}
+    {% assign extension = filename | split: '.' | last %}
     {% assign basename = filename | split: '.' | pop | join: '.' %}
     {% assign path = parts | pop | join: '/' %}
 
-    {% assign media_item = site.data.media | find: 'extension', extname %}
+    {% assign media_item = site.data.media | find: 'extension', extension %}
     {% if media_item %}
-      <source src="{{ video_url }}" type="audio/{{ media_item['mimeType'] }}">
+      <source src="{{ video_url }}" type="video/{{ media_item['mimeType'] }}">
     {% else %}
-      <source src="{{ video_url }}" type="audio/{{ extname }}">
+      <source src="{{ video_url }}" type="video/{{ extension }}">
     {% endif %}
 
-    {% for extra_extname in extnames %}
-      {% assign filename = basename | append: '.' | append: extra_extname %}
+    {% for extra_type in types %}
+      {% assign filename = basename | append: '.' | append: extra_type %}
       {% assign extra_src = path | append: '/' | append: filename %}
-      {% assign media_item = site.data.media | find: 'extension', extra_extname %}
+      {% assign media_item = site.data.media | find: 'extension', extra_type %}
       {% if media_item %}
-        <source src="{{ extra_src }}" type="audio/{{ media_item['mimeType'] }}">
+        <source src="{{ extra_src }}" type="video/{{ media_item['mimeType'] }}">
       {% else %}
-        <source src="{{ extra_src }}" type="audio/{{ extra_extnames }}">
+        <source src="{{ extra_src }}" type="video/{{ extra_type }}">
       {% endif %}
     {% endfor %}
 

_posts/2019-08-08-write-a-new-post.md

@@ -472,15 +472,15 @@ You can also specify additional attributes for the embedded video file. Here is
 - `autoplay=true` - video automatically begins to play back as soon as it can
 - `loop=true` - automatically seek back to the start upon reaching the end of the video
 - `muted=true` - audio will be initially silenced
-- `extnames` - specify the extensions of additional video formats separated by `|`. Ensure these files exist in the same directory as your primary video file.
+- `types` - specify the extensions of additional video formats separated by `|`. Ensure these files exist in the same directory as your primary video file.
 
 Consider an example utilizing all of the above:
 
 ```liquid
 {%
   include embed/video.html
   src='/path/to/video/video.mp4'
-  extnames='ogg|mov'
+  types='ogg|mov'
   poster='poster.png'
   title='Demo video'
   autoplay=true
@@ -492,26 +492,32 @@ Consider an example utilizing all of the above:
 > Instead, use CDN to host video files. Alternatively, use a separate folder that is excluded from PWA (see `pwa.deny_paths` setting in `_config.yml`).
 {: .prompt-warning }
 
-## Audio
+## Audios
 
-### Basic Audio Embedding
+### Audio File
 
-To embed an audio file, use the following code snippet:
+If you want to embed a audio file directly, use the following syntax:
 
 ```liquid
-{% include embed/audio.html src='/path/to/audio/audio.mp3' title='Demo audio' %}
+{% include embed/audio.html src='{URL}' %}
 ```
-- `src`: The path to your audio file.
-- `title`: A descriptive title for your audio content.
+Where `URL` is an URL to a audio file e.g. `/assets/img/sample/audio.mp3`.
 
-### Adding Additional Audio Formats
+You can also specify additional attributes for the embedded audio file. Here is a full list of attributes allowed.
 
-For broader compatibility across browsers and devices, it's a good idea to provide your audio in multiple formats. You can specify additional audio formats using the extnames attribute.
+- `title='Text'` - title for a audio that appears below the audio and looks same as for images
+- `types` - specify the extensions of additional audio formats separated by `|`. Ensure these files exist in the same directory as your primary audio file.
+
+Consider an example utilizing all of the above:
 
 ```liquid
-{% include embed/audio.html src='/path/to/audio/audio.mp3' extnames='ogg|wav|aac' title='Demo audio' %}
+{% 
+  include embed/audio.html
+  src='/path/to/audio/audio.mp3'
+  types='ogg|wav|aac'
+  title='Demo audio'
+%}
 ```
-- `extnames`: Specify the extensions of additional audio formats separated by `|`. Ensure these files exist in the same directory as your primary audio file.
 
 > It's not recommended to host audio files in `assets` folder as they cannot be cached by PWA and may cause issues.
 > Instead, use CDN to host audio files. Alternatively, use a separate folder that is excluded from PWA (see `pwa.deny_paths` setting in `_config.yml`).