first commit

examples/with-cloudinary/utils/animationVariants.ts

@@ -0,0 +1,18 @@
+export const variants = {
+  enter: (direction: number) => {
+    return {
+      x: direction > 0 ? 1000 : -1000,
+      opacity: 0,
+    };
+  },
+  center: {
+    x: 0,
+    opacity: 1,
+  },
+  exit: (direction: number) => {
+    return {
+      x: direction < 0 ? 1000 : -1000,
+      opacity: 0,
+    };
+  },
+};

examples/with-cloudinary/utils/cachedImages.ts

@@ -0,0 +1,17 @@
+import cloudinary from "./cloudinary";
+
+let cachedResults;
+
+export default async function getResults() {
+  if (!cachedResults) {
+    const fetchedResults = await cloudinary.v2.search
+      .expression(`folder:${process.env.CLOUDINARY_FOLDER}/*`)
+      .sort_by("public_id", "desc")
+      .max_results(400)
+      .execute();
+
+    cachedResults = fetchedResults;
+  }
+
+  return cachedResults;
+}

examples/with-cloudinary/utils/cloudinary.ts

@@ -0,0 +1,10 @@
+import cloudinary from "cloudinary";
+
+cloudinary.v2.config({
+  cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
+  api_key: process.env.CLOUDINARY_API_KEY,
+  api_secret: process.env.CLOUDINARY_API_SECRET,
+  secure: true,
+});
+
+export default cloudinary;

examples/with-cloudinary/utils/downloadPhoto.ts

@@ -0,0 +1,24 @@
+function forceDownload(blobUrl: string, filename: string) {
+  let a: any = document.createElement("a");
+  a.download = filename;
+  a.href = blobUrl;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+}
+
+export default function downloadPhoto(url: string, filename: string) {
+  if (!filename) filename = url.split("\\").pop().split("/").pop();
+  fetch(url, {
+    headers: new Headers({
+      Origin: location.origin,
+    }),
+    mode: "cors",
+  })
+    .then((response) => response.blob())
+    .then((blob) => {
+      let blobUrl = window.URL.createObjectURL(blob);
+      forceDownload(blobUrl, filename);
+    })
+    .catch((e) => console.error(e));
+}

examples/with-cloudinary/utils/generateBlurPlaceholder.ts

@@ -0,0 +1,25 @@
+import imagemin from "imagemin";
+import imageminJpegtran from "imagemin-jpegtran";
+import type { ImageProps } from "./types";
+
+const cache = new Map<ImageProps, string>();
+
+export default async function getBase64ImageUrl(
+  image: ImageProps,
+): Promise<string> {
+  let url = cache.get(image);
+  if (url) {
+    return url;
+  }
+  const response = await fetch(
+    `https://res.cloudinary.com/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload/f_jpg,w_8,q_70/${image.public_id}.${image.format}`,
+  );
+  const buffer = await response.arrayBuffer();
+  const minified = await imagemin.buffer(Buffer.from(buffer), {
+    plugins: [imageminJpegtran()],
+  });
+
+  url = `data:image/jpeg;base64,${Buffer.from(minified).toString("base64")}`;
+  cache.set(image, url);
+  return url;
+}

examples/with-cloudinary/utils/range.ts

@@ -0,0 +1,11 @@
+export const range = (start: number, end: number) => {
+  let output = [];
+  if (typeof end === "undefined") {
+    end = start;
+    start = 0;
+  }
+  for (let i = start; i < end; i += 1) {
+    output.push(i);
+  }
+  return output;
+};

examples/with-cloudinary/utils/types.ts

@@ -0,0 +1,19 @@
+/* eslint-disable no-unused-vars */
+export interface ImageProps {
+  id: number;
+  height: string;
+  width: string;
+  public_id: string;
+  format: string;
+  blurDataUrl?: string;
+}
+
+export interface SharedModalProps {
+  index: number;
+  images?: ImageProps[];
+  currentPhoto?: ImageProps;
+  changePhotoId: (newVal: number) => void;
+  closeModal: () => void;
+  navigation: boolean;
+  direction?: number;
+}

examples/with-cloudinary/utils/useLastViewedPhoto.ts

@@ -0,0 +1,8 @@
+import { createGlobalState } from "react-hooks-global-state";
+
+const initialState = { photoToScrollTo: null };
+const { useGlobalState } = createGlobalState(initialState);
+
+export const useLastViewedPhoto = () => {
+  return useGlobalState("photoToScrollTo");
+};