fix(demos/narcissus-astro): 💫 add lazy loading images to blog posts

rodneylab · Dec 10, 2021 · b236fa6 · b236fa6
1 parent 3d0fc61
commit b236fa6
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 47 deletions.
diff --git a/demos/narcissus-astro/package.json b/demos/narcissus-astro/package.json
@@ -45,6 +45,7 @@
     "react-hook-form": "^7.21.1",
     "react-share": "^4.4.0",
     "react-social-icons": "^5.6.1",
+    "vanilla-lazyload": "^17.5.0",
     "vite-imagetools": "^4.0.1"
   }
 }
diff --git a/demos/narcissus-astro/pnpm-lock.yaml b/demos/narcissus-astro/pnpm-lock.yaml
diff --git a/demos/narcissus-astro/src/components/BannerImage.tsx b/demos/narcissus-astro/src/components/BannerImage.tsx
@@ -1,5 +1,7 @@
 import { container } from '$components/BannerImage.css';
 import type { JSX } from 'react';
+import { useEffect } from 'react';
+import lazyload from 'vanilla-lazyload';
 
 interface BannerImageProps {
   imageData: {
@@ -15,6 +17,20 @@ interface BannerImageProps {
 const BannerImage = function BannerImage({ imageData }: BannerImageProps): JSX.Element {
   const { alt, width, height, src, sources, placeholder } = imageData;
   const sizes = '(max-width: 672px) calc(100vw - 32px), 672px';
+  const ssr = import.meta.env.SSR;
+
+  useEffect(() => {
+    if (!ssr && !window.document.lazyloadInstance) {
+      window.document.lazyloadInstance = new lazyload();
+    }
+  }, [ssr]);
+
+  useEffect(() => {
+    if (!ssr) {
+      document.lazyloadInstance.update();
+    }
+  }, [placeholder, sources, src, ssr]);
+
   return (
     <div className={container}>
       <picture>
@@ -40,8 +56,9 @@ const BannerImage = function BannerImage({ imageData }: BannerImageProps): JSX.E
           width={width}
           height={height}
           data-src={src}
-          src={src}
+          src={placeholder}
           objectFit="contain"
+          style={{ maxWidth: '100%' }}
         />
       </picture>
     </div>

diff --git a/demos/narcissus-astro/src/global.d.ts b/demos/narcissus-astro/src/global.d.ts
@@ -1,3 +1,10 @@
+import type { ILazyLoadInstance } from 'vanilla-lazyload';
+
+export interface HCaptchaExecuteResponse {
+  response: string;
+  key: string;
+}
+
 export declare global {
   interface Window {
     hcaptcha: {
@@ -8,4 +15,7 @@ export declare global {
       render(id: string, config: { sitekey: string; size: string; theme: string }): string;
     };
   }
+  interface Document {
+    lazyloadInstance: ILazyLoadInstance;
+  }
 }
diff --git a/demos/narcissus-astro/src/layouts/BlogPostLayout.astro b/demos/narcissus-astro/src/layouts/BlogPostLayout.astro
diff --git a/demos/narcissus-astro/src/pages/[slug].astro b/demos/narcissus-astro/src/pages/[slug].astro
@@ -1,19 +1,31 @@
 ---
 import Layout from '$components/Layout/index.tsx';
-import { lstatSync, readdirSync } from 'node:fs';
+import { lstatSync, readdirSync, readFileSync } from 'node:fs';
 import { join, resolve } from 'node:path';
 import { Markdown } from 'astro/components';
+import fm from 'front-matter';
+import BannerImage from '$components/BannerImage.tsx';
 
 export async function getStaticPaths() {
   const __dirname = resolve();
   const BLOG_PATH = join(__dirname, 'content/blog');
   const directories = readdirSync(BLOG_PATH).filter((element) =>
     lstatSync(`${BLOG_PATH}/${element}`).isDirectory(),
   );
-  return directories.map((element) => ({ params: { slug: element } }));
+
+  return directories.map((element) => {
+    const contentPath = `${BLOG_PATH}/${element}/index.md`;
+    const content = readFileSync(contentPath, { encoding: 'utf-8' });
+    const frontmatter = fm(content);
+    const { postTitle } = frontmatter.attributes;
+    return { params: { slug: element }, props: { title: postTitle } };
+  });
 }
+
 const { slug } = Astro.request.params;
+const { title } = Astro.props;
 const Content = (await import(`../../content/blog/${slug}/index.md`)).default;
+const imageData = (await import(`../generated/posts/${slug}.js`)).default;
 ---
 
 <html lang="en-GB">
@@ -24,6 +36,8 @@ const Content = (await import(`../../content/blog/${slug}/index.md`)).default;
   </head>
   <body>
     <Layout client:load {slug}>
+      <BannerImage client:load {imageData} />
+      <h1>{title}</h1>
       <Markdown>
         <Content />
       </Markdown>