add listing feature for blogs

Author: jyoti-bhogal

blogs/blogs.yml

@@ -0,0 +1,10 @@
+- title: Blog 1 Title
+  path:
+  image: images/ilija-boshkov-0nI1DczRQAM-unsplash.jpg
+  description: >
+    This is description for Blog 1.
+    Photo by <a href="https://unsplash.com/@boshkov?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Ilija Boshkov</a> on
+    <a href="https://unsplash.com/photos/a-computer-screen-with-a-program-running-on-it-0nI1DczRQAM?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
+
+  categories: [shiny, Beginner]
+  date: 2025-04-01

blogs/images/ilija-boshkov-0nI1DczRQAM-unsplash.jpg

@@ -1,8 +1,6 @@
 ---
-title: "Blogs"
+title: Blogs
 listing:
-  contents: posts/*.qmd
-  sort: "date desc"
-  type: default
-  categories: true
+  contents: blogs.yml
+  type: grid
 ---

blogs/images/testing_research_code.jpg

@@ -15,7 +15,7 @@ With just a few lines of R code, you can create dashboards, visualize live data,
 ## **Why Use Shiny?**
 
 Here’s why Shiny is a game-changer for R programmers:\
-✅ **Easy to Get Started** – No need for web development skills, if you know coding in R that is enough to get started in Shiny. \
+✅ **Easy to Get Started** – No need for web development skills, if you know coding in R that is enough to get started in Shiny.\
 ✅ **Interactivity** – Users can manipulate data and see updates instantly\
 ✅ **Data Visualization** – Generate interactive plots and tables effortlessly\
 ✅ **Deploy Anywhere** – Publish apps online with platforms like ShinyApps.io which is easy to share with others.
@@ -31,7 +31,7 @@ Shiny apps are structured in three main ways:\
 
 Shiny’s **reactivity** makes apps dynamic. It works by updating outputs whenever inputs change.
 
-Reactivity in Shiny can be seen in different forms : \
+Reactivity in Shiny can be seen in different forms :\
 🔹 **Reactive Inputs** – User-provided values (e.g., text boxes, dropdowns)\
 🔹 **Reactive Expressions** – Automatically recalculates when inputs change\
 🔹 **Reactive Outputs** – Dynamically updates tables, plots, and text based on inputs\

blogs/index.qmd

@@ -146,7 +146,7 @@
 <span class="menu-text">Events</span></a>
   </li>  
   <li class="nav-item">
-    <a class="nav-link" href="./blogs/index.qmd"> 
+    <a class="nav-link" href="./blogs/index.html"> 
 <span class="menu-text">Blogs</span></a>
   </li>  
 </ul>

blogs/posts/intro-to-shiny.qmd

@@ -112,7 +112,7 @@
 <span class="menu-text">Events</span></a>
   </li>  
   <li class="nav-item">
-    <a class="nav-link" href="../blogs/index.qmd"> 
+    <a class="nav-link" href="../blogs/index.html"> 
 <span class="menu-text">Blogs</span></a>
   </li>  
 </ul>

docs/about.html

@@ -112,7 +112,7 @@
 <span class="menu-text">Events</span></a>
   </li>  
   <li class="nav-item">
-    <a class="nav-link" href="../blogs/index.qmd"> 
+    <a class="nav-link" href="../blogs/index.html"> 
 <span class="menu-text">Blogs</span></a>
   </li>  
 </ul>

docs/about/index.html

@@ -112,7 +112,7 @@
 <span class="menu-text">Events</span></a>
   </li>  
   <li class="nav-item">
-    <a class="nav-link" href="../blogs/index.qmd"> 
+    <a class="nav-link" href="../blogs/index.html"> 
 <span class="menu-text">Blogs</span></a>
   </li>  
 </ul>