Merge pull request #26 from paiindustries/fix/blog-view

applied blog list page fixes

Author: zainforbjs

app/config/routes.cfm

@@ -10,7 +10,7 @@
 		.namespace("api")
 			.namespace("v1")
 				.get(name = "get_blog_posts", pattern = "blog", to = "api.BlogController##Index")
-				.get(name = "get_blog_post", pattern = "blog/:id", to = "api.BlogController##Show")
+				.get(name = "get_blog_post", pattern = "blog/[:id]", to = "api.BlogController##Show")
 
 				.get(name = "get_downloads", pattern = "downloads", to = "api.DownloadsController##Index")
 			.end()

app/views/web/BlogController/index.cfm

@@ -53,13 +53,24 @@
         </div>
         <div class="row justify-content-center justify-content-lg-between">
             <cfoutput>
-                <div id="blogsContainer" class="row mt-lg-0 mt-3 col-lg-12 col-12 h-max row-cols-lg-2 row-cols-1"
-                <cfif isDefined("params.filterType") and isDefined("params.filterValue")>
-                    hx-get="/blog/list/#params.filterType#/#params.filterValue#"
-                <cfelse>
-                    hx-get="/blog/list"
+                <!-- Detect if filtering via route (e.g. blog/year/month or blog/category/tag) -->
+                <cfset isFiltered = structKeyExists(params, "year") or structKeyExists(params, "filterType")>
+
+                <!-- wrapper that triggers the HTMX call -->
+                <cfif NOT isFiltered>
+                    <div 
+                        id="hxLoader"
+                        hx-get="/blog/list"
+                        hx-trigger="load"
+                        hx-target="##blogsContainer"
+                        hx-swap="innerHTML">
+                    </div>
                 </cfif>
-                    hx-trigger="load" hx-target="##blogsContainer" hx-swap="innerHTML">
+
+                <!-- blog list container -->
+                <div 
+                    id="blogsContainer" 
+                    class="row mt-lg-0 mt-3 col-lg-12 col-12 h-max row-cols-lg-2 row-cols-1">
                 </div>
             </cfoutput>
             <div id="filtersContainer" class="col-lg-2 order-lg-0 order-first col-12 p-lg-0 d-none">
@@ -72,21 +83,22 @@
                 <cfset months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]>
 
                 <div class="d-none bg-white p-3 text-center rounded-18 no-scrollbar h-70vh overflow-y-auto" id="Archives">
+                    <!-- Archives Button -->
                     <cfoutput>
-                        <cfloop index="year" from="#currentYear#" to="#startYear#" step="-1">
-                            <cfset monthLimit = (year EQ currentYear) ? currentMonth : 12>
-                            <cfset startLimit = (year EQ startYear) ? startMonth : 1>
+                            <cfloop index="year" from="#currentYear#" to="#startYear#" step="-1">
+                                <cfset monthLimit = (year EQ currentYear) ? currentMonth : 12>
+                                <cfset startLimit = (year EQ startYear) ? startMonth : 1>
 
-                            <cfloop index="month" from="#monthLimit#" to="#startLimit#" step="-1">
-                                <p class="fs-14 border-bottom mb-0 py-2 cursor-pointer fw-normal text--iris"
-                                    hx-get="/blog/monthyear/#NumberFormat(month, '00')##year#"
-                                    hx-trigger="click"
-                                    hx-target="##blogsContainer"
-                                    hx-swap="innerHTML">
-                                    #months[month]# #year#
-                                </p>
+                                <cfloop index="month" from="#monthLimit#" to="#startLimit#" step="-1">
+                                    <p
+                                        hx-get="/blog/#year#/#NumberFormat(month, '00')#" 
+                                        hx-target="##blogsContainer" 
+                                        hx-swap="innerHTML"
+                                        class="fs-14 border-bottom mb-0 py-2 cursor-pointer fw-normal text--iris">
+                                        #months[month]# #year#
+                                    </p>
+                                </cfloop>
                             </cfloop>
-                        </cfloop>
                     </cfoutput>
                 </div>