renamed page to talks

_data/navigation.yml

@@ -13,9 +13,9 @@
   link : "/examples"
   icon : "https://ghicons.github.com/assets/images/blue/svg/Collection.svg"
 
-- title: Tutorials
+- title: Talks
   info : Recorded talks, demos and tutorials.
-  link : "/tutorials"
+  link : "/talks"
   icon : "https://ghicons.github.com/assets/images/blue/svg/Enterprise%20Observability.svg" 
 
 - title: Docs

talks.html

@@ -0,0 +1,42 @@
+---
+layout      : default
+title       : "Tutorials"
+description : "Recorded demos and tutorials on GitHub Actions and MLOps."
+image       : "/assets/images/Enterprise-Observability.png"
+---
+<section class="intro blog_intro">
+  <div class="image_box">
+    <img src="{{page.image}}" alt="demos">
+  </div>
+  <div class="text_box">
+    <h1>{{page.title}}</h1>
+    <p>{{page.description}}</p>
+
+    <!-- tags filter -->
+    <div class="tags">
+      {% assign tags =  site.data.demos | map: 'tags' | uniq %}
+      <button class="tag_filter active" data-tag="all">All</button>
+      {%- assign s = tags | size | minus: 2 -%}
+      {%- for i in (0..s) -%}
+      <button class="tag_filter" data-tag="{{tags[i] | replace: ' ', '_'}}">{{tags[i]}}</button>
+      {%- endfor -%}
+    </div>
+
+    <div class="posts_list">
+      {%- for item in site.data.demos -%}
+      {% assign t = item.tags | join: "%%" | replace: " ", "_"| replace: "%%", " " %}
+      <div class="blog content_item {{t}}">
+        <a href="{{item.link}}">
+          <h2>{{item.title}}</h2>
+        </a>
+        <h3>{{item.subtitle}}</h3>
+        <p>{{item.info}}</p>
+        <iframe class="y_video" width="600" height="400" src="https://www.youtube.com/embed/{{item.video_id}}"
+          frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen>
+        </iframe>
+      </div>
+      {%- endfor -%}
+    </div>
+  </div>
+</section>