From bd7e0b5f46d1daaf0a79dcd2742f2b130096019a Mon Sep 17 00:00:00 2001 From: Colby Fayock Date: Fri, 8 Sep 2023 16:42:34 -0400 Subject: [PATCH] examples --- docs/src/data/images.json | 16 ++++++++ docs/src/pages/examples/_meta.json | 5 --- docs/src/pages/examples/cdn-images.mdx | 30 ++++++++++++++ docs/src/pages/examples/client-images.mdx | 40 ++----------------- docs/src/pages/examples/cloudinary-images.mdx | 32 +++++++++++++++ docs/src/pages/examples/local-images.mdx | 28 ++----------- docs/src/pages/examples/next-image.mdx | 25 +----------- 7 files changed, 86 insertions(+), 90 deletions(-) delete mode 100644 docs/src/pages/examples/_meta.json create mode 100644 docs/src/pages/examples/cdn-images.mdx create mode 100644 docs/src/pages/examples/cloudinary-images.mdx diff --git a/docs/src/data/images.json b/docs/src/data/images.json index 866c282..efa99a7 100644 --- a/docs/src/data/images.json +++ b/docs/src/data/images.json @@ -3,48 +3,64 @@ "width": 2376, "height": 1574, "src": "/images/examples/beach.jpeg", + "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726174-aeca546d-1589-4dd2-90a7-b1e78867d196.jpeg", + "srcCloudinary": "images/examples/beach.jpeg", "title": "Beach" }, { "width": 1364, "height": 1705, "src": "/images/examples/city.jpeg", + "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726176-48c8b53d-1054-45e3-9311-71cf4947147f.jpeg", + "srcCloudinary": "images/examples/city.jpeg", "title": "City" }, { "width": 2344, "height": 1560, "src": "/images/examples/earth.jpeg", + "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726178-f2e89dba-b14b-49c1-8ef9-2e2c66a8b046.jpeg", + "srcCloudinary": "images/examples/earth.jpeg", "title": "Earth" }, { "width": 2340, "height": 1560, "src": "/images/examples/galaxy.jpeg", + "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726180-0ed180bc-4918-45b6-bda2-0c29538c19ac.jpeg", + "srcCloudinary": "images/examples/galaxy.jpeg", "title": "Galaxy" }, { "width": 2148, "height": 1611, "src": "/images/examples/iceberg.jpeg", + "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726182-4a0152df-fd79-4986-8459-e02f079aca6f.jpeg", + "srcCloudinary": "images/examples/iceberg.jpeg", "title": "Iceberg" }, { "width": 1364, "height": 1705, "src": "/images/examples/jungle.jpeg", + "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726185-801d9914-1208-48cc-95ab-8d8d2d63575f.jpeg", + "srcCloudinary": "images/examples/jungle.jpeg", "title": "Jungle" }, { "width": 2340, "height": 1561, "src": "/images/examples/mountain.jpeg", + "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726186-cc658080-15ea-45d3-a7f1-1ccff217f7c0.jpeg", + "srcCloudinary": "images/examples/mountain.jpeg", "title": "Mountain" }, { "width": 2340, "height": 1560, "src": "/images/examples/waterfall.jpeg", + "srcCdn": "https://github-production-user-asset-6210df.s3.amazonaws.com/1045274/266726189-51a8b091-931f-43fe-99ae-9f9d17942db5.jpeg", + "srcCloudinary": "images/examples/waterfall.jpeg", "title": "Waterfall" } ] diff --git a/docs/src/pages/examples/_meta.json b/docs/src/pages/examples/_meta.json deleted file mode 100644 index 53a922d..0000000 --- a/docs/src/pages/examples/_meta.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "client-images": "Client Images", - "local-images": "Local Images", - "next-image": "Next Image" -} \ No newline at end of file diff --git a/docs/src/pages/examples/cdn-images.mdx b/docs/src/pages/examples/cdn-images.mdx new file mode 100644 index 0000000..75f685d --- /dev/null +++ b/docs/src/pages/examples/cdn-images.mdx @@ -0,0 +1,30 @@ +import { getCldImageUrl } from 'next-cloudinary'; + +import images from '../../data/images.json'; + +# CDN Images + +Images that are being sourced from an external CDN. + +export const Grid = () => { + return ( + + ) +} + +## Demo + + \ No newline at end of file diff --git a/docs/src/pages/examples/client-images.mdx b/docs/src/pages/examples/client-images.mdx index 85ce46f..5d4fc74 100644 --- a/docs/src/pages/examples/client-images.mdx +++ b/docs/src/pages/examples/client-images.mdx @@ -4,7 +4,9 @@ import images from '../../data/images.json'; # Client Images -Images loaded in 1 second clientside after the application renders. +Images loaded in 1 second clientside after the application renders. Each image +is loaded from the local `/images`, which because it's not available in the initial +page output, hits a redirect to a Cloudinary image. export const Grid = () => { const [isLoaded, setIsLoaded] = useState(false); @@ -38,38 +40,4 @@ export const Grid = () => { ## Demo - - -## Code - -``` -export const Grid = () => { - const [isLoaded, setIsLoaded] = useState(false); - - useEffect(() => { - setTimeout(() => { - setIsLoaded(true); - }, 1000); - }, []); - - return ( -
    - {isLoaded && images.map((image) => { - return ( -
  • - {image.title} -
    • - ); - })} - {!isLoaded && ( -

    Loading...

    - )} -
- ) -} -``` \ No newline at end of file + \ No newline at end of file diff --git a/docs/src/pages/examples/cloudinary-images.mdx b/docs/src/pages/examples/cloudinary-images.mdx new file mode 100644 index 0000000..7345972 --- /dev/null +++ b/docs/src/pages/examples/cloudinary-images.mdx @@ -0,0 +1,32 @@ +import { getCldImageUrl } from 'next-cloudinary'; + +import images from '../../data/images.json'; + +# Cloudinary Images + +Images already being delivered from Cloudinary will not be replaced. + +export const Grid = () => { + return ( +
    + {images.map((image) => { + return ( +
  • + {image.title} +
    • + ); + })} +
+ ) +} + +## Demo + + \ No newline at end of file diff --git a/docs/src/pages/examples/local-images.mdx b/docs/src/pages/examples/local-images.mdx index 52555e3..6a2d18d 100644 --- a/docs/src/pages/examples/local-images.mdx +++ b/docs/src/pages/examples/local-images.mdx @@ -2,7 +2,8 @@ import images from '../../data/images.json'; # Local Images -Loaded from the default directory of `/images` +Images loaded from the default local directory of `/images` which +are then replaced in the page output. export const Grid = () => { return ( @@ -25,27 +26,4 @@ export const Grid = () => { ## Demo - - -## Code - -``` -export const Grid = () => { - return ( -
    - {images.map((image) => { - return ( -
  • - {image.title} -
    • - ); - })} -
- ) -} -``` \ No newline at end of file + \ No newline at end of file diff --git a/docs/src/pages/examples/next-image.mdx b/docs/src/pages/examples/next-image.mdx index 831d922..fe76f5b 100644 --- a/docs/src/pages/examples/next-image.mdx +++ b/docs/src/pages/examples/next-image.mdx @@ -27,27 +27,4 @@ export const Grid = () => { ## Demo - - -## Code - -``` -export const Grid = () => { - return ( -
    - {images.map((image) => { - return ( -
  • - {image.title} -
    • - ); - })} -
- ) -} -``` \ No newline at end of file + \ No newline at end of file