diff --git a/src/components/sprite/flying-sprite.jsx b/src/components/sprite/flying-sprite.jsx
index 291a1f3..e369f1f 100644
--- a/src/components/sprite/flying-sprite.jsx
+++ b/src/components/sprite/flying-sprite.jsx
@@ -223,7 +223,7 @@ function startAnimationFlyingSprite(
const SPRITE_DIMENSION = { x: 130, y: 134 }
function FlyingSprite({ style }) {
- const imgSrc = "/img/bulin.png" // Static asset path
+ const imgSrc = "/img/bulin.webp" // Static asset path
const spriteRef = useRef(null)
// const context = useLayoutContext();
diff --git a/src/lib/images/jumbotron-generated-images.json b/src/lib/images/jumbotron-generated-images.json
new file mode 100644
index 0000000..9db4b7d
--- /dev/null
+++ b/src/lib/images/jumbotron-generated-images.json
@@ -0,0 +1,34 @@
+{
+ "/img/home-jumbotron.webp": {
+ "alt": "",
+ "widths": [
+ 640,
+ 960,
+ 1280,
+ 1600,
+ 1920
+ ],
+ "placeholderDataUrl": "data:image/webp;base64,UklGRlIAAABXRUJQVlA4IEYAAABQAwCdASogABIAPuFapE6sJSOiN+gBgBwJZwDQVD9oFGc+AAD+7zZ8676wY170ohxEAT6TUs463Bkq6bYobgMFRrC2iRwA"
+ },
+ "/img/blog-jumbotron.webp": {
+ "alt": "",
+ "widths": [
+ 640,
+ 960,
+ 1280
+ ],
+ "placeholderDataUrl": "data:image/webp;base64,UklGRlgAAABXRUJQVlA4IEwAAACwBACdASogABIAPwFqrE6rJi2mMBgMAbAgCWcAzjgQlyTqdOT4rKBpynpcDnbQAPCmMyMkY4f9F6dr1JHS61Na1iE3Ydl9Hpv4IAAA"
+ },
+ "/img/about-jumbotron.webp": {
+ "alt": "",
+ "widths": [
+ 640,
+ 960,
+ 1280,
+ 1600,
+ 1920,
+ 2560
+ ],
+ "placeholderDataUrl": "data:image/webp;base64,UklGRmYAAABXRUJQVlA4IFoAAACwBACdASogABoAPvVuqU6qpyQiMAwBUB6JaQAA78/RH4XgSVupUjXXdV0DTTTAAP76GrOvHD1RV27K3WXTyFgec1eJSBSejMTRfNPDLO9ivL3vcUYYDjAAAAA="
+ }
+}
diff --git a/src/lib/images/jumbotron-image-variants.json b/src/lib/images/jumbotron-image-variants.json
new file mode 100644
index 0000000..bd18d62
--- /dev/null
+++ b/src/lib/images/jumbotron-image-variants.json
@@ -0,0 +1,14 @@
+{
+ "widths": [640, 960, 1280, 1600, 1920, 2560],
+ "images": {
+ "/img/home-jumbotron.webp": {
+ "alt": ""
+ },
+ "/img/blog-jumbotron.webp": {
+ "alt": ""
+ },
+ "/img/about-jumbotron.webp": {
+ "alt": ""
+ }
+ }
+}
diff --git a/src/lib/images/jumbotron-images.js b/src/lib/images/jumbotron-images.js
new file mode 100644
index 0000000..b05ccd3
--- /dev/null
+++ b/src/lib/images/jumbotron-images.js
@@ -0,0 +1,29 @@
+import generatedJumbotronImages from "./jumbotron-generated-images.json"
+
+function buildGeneratedImagePath(imagePath, width, format) {
+ const filename = imagePath.split("/").pop()
+ const basename = filename.replace(/\.[^.]+$/, "")
+ return `/img/generated/${basename}-${width}.${format}`
+}
+
+function buildSrcSet(imagePath, widths, format) {
+ return widths
+ .map(width => `${buildGeneratedImagePath(imagePath, width, format)} ${width}w`)
+ .join(", ")
+}
+
+export function getJumbotronResponsiveImage(imagePath) {
+ const imageConfig = generatedJumbotronImages[imagePath]
+ if (!imageConfig) return null
+
+ return {
+ alt: imageConfig.alt || "",
+ sizes: "100vw",
+ avifSrcSet: buildSrcSet(imagePath, imageConfig.widths, "avif"),
+ webpSrcSet: buildSrcSet(imagePath, imageConfig.widths, "webp"),
+ fallbackSrc: imagePath,
+ placeholderDataUrl: imageConfig.placeholderDataUrl,
+ }
+}
+
+export { generatedJumbotronImages }
diff --git a/src/templates/blog-page-template.jsx b/src/templates/blog-page-template.jsx
index c42d5dd..0e8ef5b 100644
--- a/src/templates/blog-page-template.jsx
+++ b/src/templates/blog-page-template.jsx
@@ -1,13 +1,17 @@
/* eslint-disable react/prop-types */
'use client'
import React, { useEffect, useState } from "react"
+import { useSearchParams } from 'next/navigation'
import { debounce } from "../lib/performance/throttle"
import CardTable from "../components/thumbnail/card-table"
+import useBlogPostCards from "../components/others/use-blog-post-cards"
import PageContainer from "../components/page-scroll/container"
import Section from "../components/page-scroll/section"
import HeaderContainer from "../components/header/header-container"
import Footer from "../components/footer/footer"
import ParallaxSection from "../components/sections/parallax-section"
+import { setComponentState } from "../lib/contexts/use-restore-component-state"
+import useLayoutContext from "../lib/contexts/use-layout-context"
import { calcViewportHeight } from "../lib/dom/viewport"
function BlogPagePreview({ jumbotronProps }) {
@@ -19,8 +23,46 @@ function BlogPagePreview({ jumbotronProps }) {
)
}
-function BlogPageTemplate({
- jumbotronProps,
+function BlogPageFrame({ jumbotronProps, children }) {
+ return (
+
+ )
+}
+
+function BlogCardsLoadingSection() {
+ return (
+
+
+
+ Loading posts...
+
+
+
+ )
+}
+
+function BlogCardsSection({
uri,
blogRollData,
tableName = "blogTable",
@@ -46,31 +88,55 @@ function BlogPageTemplate({
}, [])
return (
-
+
+ )
+}
+
+function BlogPostsSection({ posts, uri, tableName = "blogTable" }) {
+ const searchParams = useSearchParams()
+ const tags = searchParams.get('tags')
+ const context = useLayoutContext()
+
+ if (tags) {
+ setComponentState([uri, tableName, "keywords"], tags, context)
+ }
+
+ const blogRollData = useBlogPostCards(posts)
+
+ return (
+
+ )
+}
+
+function BlogPageTemplate({
+ jumbotronProps,
+ uri,
+ blogRollData,
+ tableName = "blogTable",
+}) {
+ return (
+
+
+
)
}
-export { BlogPageTemplate, BlogPagePreview }
+export { BlogCardsLoadingSection, BlogCardsSection, BlogPageFrame, BlogPageTemplate, BlogPagePreview, BlogPostsSection }
export default BlogPageTemplate
