blurhash

Prototypr · May 9, 2024 · aeb0cfc · aeb0cfc
1 parent c66a80b
commit aeb0cfc
Show file tree

Hide file tree

Showing 8 changed files with 207 additions and 94 deletions.
diff --git a/components/new-index/gumletLoader.js b/components/new-index/gumletLoader.js
@@ -1,5 +1,4 @@
 const gumletLoader = ({ src, width, quality }) => {
-  console.log(src,width,quality)
   if(src.indexOf("prototypr-media.sfo2.digitaloceanspaces.com") > -1){
     src = src.replace("prototypr-media.sfo2.digitaloceanspaces.com", "prototyprio.gumlet.io")
     return `${src}?w=${width}&q=${quality || 70}&format=avif&compress=true&dpr=1`;

diff --git a/components/v4/card/ToolIconCard.js b/components/v4/card/ToolIconCard.js
@@ -2,6 +2,8 @@ import Link from "next/link";
 import { usePlausible } from "next-plausible";
 
 import Image from "next/image";
+const defaultBase64 = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAA`;
+
 const {
   default: gumletLoader,
 } = require("@/components/new-index/gumletLoader");
@@ -12,24 +14,25 @@ const ToolIconCard = ({ tool, withBackground, small }) => {
   if (!tags?.data?.length) {
     tags.data = tags;
   }
+
   const plausible = usePlausible();
 
   let coverImage =
     // tool.legacyMedia?.logoNew?tool.legacyMedia?.logoNew:
     // tool.legacyMedia?.mediaItemUrl?tool.legacyMedia?.mediaItemUrl:
     // tool.legacyMedia?.imgUrl?tool.legacyMedia?.imgUrl:
+    typeof tool.logo=="string"?tool.logo:
+    tool.logo?.data?.attributes?.url
+      ? tool.logo.data.attributes.url:
+      tool?.legacyMedia?.logoNew?tool?.legacyMedia?.logoNew:
     tool.featuredImage?.data?.attributes?.url
       ? tool.featuredImage.data.attributes.url
-      : tool.legacyFeaturedImage
-        ? tool.legacyFeaturedImage
+      : tool.legacyFeaturedImage?.mediaItemUrl
+        ? tool.legacyFeaturedImage?.mediaItemUrl
         : "https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png";
 
-  coverImage =
-    tool?.legacyMedia?.logoNew ||
-    coverImage?.logoNew ||
-    tool.legacyMedia?.mediaItemUrl ||
-    tool.legacyFeaturedImage?.mediaItemUrl;
-
+   const logoBase64 =tool.logo?.data?.attributes?.base64?tool.logo?.data?.attributes?.base64:tool.logoBase64?tool.logoBase64:defaultBase64
+
   return (
     <div>
       <Link
@@ -57,7 +60,8 @@ const ToolIconCard = ({ tool, withBackground, small }) => {
                   lazy={true}
                   loader={gumletLoader}
                   width="100"
-                  // placeholder="blur"
+                  placeholder="blur"
+                  blurDataURL={logoBase64}
                   height="100"
                   objectFit="cover"
                   src={

diff --git a/lib/api.js b/lib/api.js
@@ -45,6 +45,7 @@ import sponsoredPostByIdQuery from "./queries/sponsoredPostByIdQuery";
 import sponsoredPostByPaymentIdQuery from "./queries/sponsoredPostByPaymentIdQuery";
 import allNewsQuery from "./queries/allNewsQuery";
 import allProductsQuery from "./queries/allProductsQuery";
+import { addBase64s } from "./utils/blurHashToDataURL";
 
 /**
  * main fetch
@@ -201,7 +202,7 @@ export async function getCombinedPostsForHomeStatic(
  * @returns
  */
 export async function getAllToolsForHome(preview, limit, start, sort) {
-  const data = await fetchAPI(allToolQuery, {
+  let data = await fetchAPI(allToolQuery, {
     preview,
     variables: {
       ...(preview ? "" : "published"),
@@ -210,6 +211,8 @@ export async function getAllToolsForHome(preview, limit, start, sort) {
       sort,
     },
   });
+  data = addBase64s(data)
+
   return data?.posts;
 }
 
@@ -581,13 +584,17 @@ export async function getNewsAndMoreNews(slug, preview, type) {
 }
 
 export async function getTool(slug, preview) {
-  const data = await fetchAPI(singleToolQuery, {
+  let data = await fetchAPI(singleToolQuery, {
     preview,
     variables: {
       ...(preview ? "" : "published"),
       slug: slug,
     },
   });
+
+  //make function to check all arrays and objects for blurhash
+  data = addBase64s(data)
+
   return data;
 }
 export async function getToolById(id, preview) {

diff --git a/lib/queries/allToolQuery.js b/lib/queries/allToolQuery.js
@@ -32,11 +32,19 @@ export default `
                 imgUrl
                 logoNew
             }
+            logo{
+              data{
+                attributes{
+                  url
+                  blurhash
+                }
+              }
+            }
             featuredImage{
               data{
                 attributes{
                   url
-                  formats
+                  blurhash
                 }
               }
             }

diff --git a/lib/queries/commonQuery.js b/lib/queries/commonQuery.js
@@ -30,6 +30,15 @@ query commonQuery ($limit: Int, $start: Int, $tags:[String], $type: String, $sor
             data{
               attributes{
                 url
+                blurhash
+              }
+            }
+          }
+          logo{
+            data{
+              attributes{
+                url
+                blurhash
               }
             }
           }

diff --git a/lib/queries/singleToolQuery.js b/lib/queries/singleToolQuery.js
@@ -122,11 +122,19 @@ export default `
                 imgUrl
                 logoNew
             }
+            logo{
+              data{
+                attributes{
+                  blurhash
+                  url
+                }
+              }
+            }
             featuredImage{
               data{
                 attributes{
+                  blurhash
                   url
-                  formats
                 }
               }
             }