Generate first feed pages, images

CHDataManagement/Page Elements/FeedEntry.swift

@@ -8,25 +8,26 @@ struct FeedEntry {
         self.data = data
     }
 
-    func addContent(to result: inout String) {
+    var content: String {
         #warning("TODO: Select CSS classes based on existence of link (hover effects, mouse pointer")
-        result += "<div class='card'>"
+        var result = "<div class='card'>"
         ImageGallery(id: data.entryId, images: data.images)
             .addContent(to: &result)
 
         if let url = data.link?.url {
-            result += "<div class=\"card-content\" onclick=\"window.location.href='\(url)'\">"
+            result += "<div class='card-content' onclick=\"window.location.href='\(url)'\">"
         } else {
-            result += "<div class=\"card-content\">"
+            result += "<div class='card-content'>"
         }
         result += "<h3>\(data.textAboveTitle)</h3>"
         if let title = data.title {
             result += "<h2>\(title.htmlEscaped())</h2>"
         }
         if !data.tags.isEmpty {
-            result += "<div class=\"tags\">"
+            result += "<div class='tags'>"
             for tag in data.tags {
-                result += "<a class=\"tag\" href=\"\(tag.url)\">\(tag.name)</a>"
+                result += "<span class='tag' onclick=\"location.href='\(tag.url)'; event.stopPropagation();\">\(tag.name)</span>"
+                //result += "<a class='tag' href='\(tag.url)'>\(tag.name)</a>"
             }
             result += "</div>"
         }
@@ -34,8 +35,9 @@ struct FeedEntry {
             result += "<p>\(paragraph)</p>"
         }
         if let url = data.link {
-            result += "<div class=\"link-center\"><div class=\"link\">\(url.text)</div></div>"
+            result += "<div class='link-center'><div class='link'>\(url.text)</div></div>"
         }
         result += "</div></div>" // Closes card-content and card
+        return result
     }
 }

CHDataManagement/Page Elements/FeedEntryData.swift

@@ -43,9 +43,19 @@ struct FeedEntryData {
 
     struct Image {
 
-        let mainImageUrl: String
-
         let altText: String
 
+        let avif1x: String
+
+        let avif2x: String
+
+        let webp1x: String
+
+        let webp2x: String
+
+        let jpg1x: String
+
+        let jpg2x: String
+
     }
 }

CHDataManagement/Page Elements/ImageGallery.swift

@@ -6,42 +6,64 @@ struct ImageGallery {
 
     let images: [FeedEntryData.Image]
 
+    private var htmlSafeId: String {
+        ImageGallery.htmlSafe(id)
+    }
+
     init(id: String, images: [FeedEntryData.Image]) {
         self.id = id
         self.images = images
     }
 
+    private func imageCode(_ image: FeedEntryData.Image) -> String {
+        //return "<img src='\(image.mainImageUrl)' loading='lazy' alt='\(image.altText.htmlEscaped())'>"
+        var result = "<picture>"
+        result += "<source type='image/avif' srcset='\(image.avif1x) 1x, \(image.avif2x) 2x'/>"
+        result += "<source type='image/webp' srcset='\(image.webp1x) 1x, \(image.webp2x) 2x'/>"
+        result += "<img srcset='\(image.jpg2x) 2x' src='\(image.jpg1x)' loading='lazy' alt='\(image.altText.htmlEscaped())'/>"
+        result += "</picture>"
+        return result
+    }
+
     func addContent(to result: inout String) {
         guard !images.isEmpty else {
             return
         }
 
-        result += "<div id=\"s\(id)\" class=\"swiper\"><div class=\"swiper-wrapper\">"
+        result += "<div id='\(htmlSafeId)' class='swiper'><div class='swiper-wrapper'>"
 
         guard images.count > 1 else {
-            let image = images[0]
-            result += "<div class=\"swiper-slide\"><img src=\(image.mainImageUrl) loading=\"lazy\" alt=\"\(image.altText.htmlEscaped())\"></div>"
+            result += imageCode(images[0])
             result += "</div></div>" // Close swiper, swiper-wrapper
             return
         }
 
         for image in images {
             // TODO: Use different images based on device
-            result += "<div class=\"swiper-slide\">"
-            result += "<img src=\(image.mainImageUrl) loading=\"lazy\" alt=\"\(image.altText.htmlEscaped())\">"
-            result += "<div class=\"swiper-lazy-preloader swiper-lazy-preloader-white\"></div>"
+            result += "<div class='swiper-slide'>"
+
+            result += imageCode(image)
+
+            result += "<div class='swiper-lazy-preloader swiper-lazy-preloader-white'></div>"
+
             result += "</div>" // Close swiper-slide
         }
 
-        result += "<div class=\"swiper-button-next\"></div>"
-        result += "<div class=\"swiper-button-prev\"></div>"
-        result += "<div class=\"swiper-pagination\"></div>"
-        result += "</div></div>" // Close swiper, swiper-wrapper
+        result += "</div>" // Close swiper-wrapper
+        result += "<div class='swiper-button-next'></div>"
+        result += "<div class='swiper-button-prev'></div>"
+        result += "<div class='swiper-pagination'></div>"
+        result += "</div>" // Close swiper
+    }
+
+    private static func htmlSafe(_ id: String) -> String {
+        id.replacingOccurrences(of: "-", with: "_")
     }
 
     static func swiperInit(id: String) -> String {
-        """
-        var swiper\(id) = new Swiper("#\(id)", {
+        let id = htmlSafe(id)
+        return """
+        var swiper_\(id) = new Swiper("#\(id)", {
               loop: true,
               slidesPerView: 1,
               spaceBetween: 30,

CHDataManagement/Page Elements/NavigationBar.swift

@@ -42,6 +42,7 @@ struct NavigationBar {
 
         result += "<a id=\"nav-image\" href=\"/\">"
         result += "<img class=\"navbar-icon\" src=\"\(data.navigationIconPath)\" alt=\"\(data.iconDescription)\">"
+        result += "</a>"
 
         for item in rightNavigationItems {
             result += "<a class=\"nav-animate\" href=\"\(item.url)\">\(item.text)</a>"