Polish, random movie quote, credits (#10)

* Random movie quote (force dynamic)
* Content tweaks, use more Markdown

Author: eladroz

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-    "extends": "next/core-web-vitals"
+    "extends": "next/core-web-vitals",
+    "rules": {
+        "@next/next/no-img-element": "off"
+    }
 }

app/api/posts/random/route.js

@@ -1,20 +1,24 @@
-import { promises as fs } from 'fs';
-import Link from 'next/link';
-import { CodeBlock } from '../../components/code-block';
+import { Markdown } from "components/markdown";
 
-const edgeFunctionFile = './netlify/edge-functions/rewrite.js';
+const explainer = `
+This page is using a Netlify Edge Function (\`netlify/edge-functions/rewrite.js\`) to rewrite the URL based on visitor geography.
 
-export default async function EdgeFunctionExplainer() {
-    const code = (await fs.readFile(edgeFunctionFile)).toString();
-    return (
-        <>
-            <p className="mb-6">This page is using a Netlify Edge Function to rewrite the URL based on visitor geography.</p>
-            <CodeBlock lineNumbers lang="js" title={edgeFunctionFile} code={code} />
-            <p className="mt-8">
-                <Link href="https://edge-functions-examples.netlify.app" className="transition link hover:opacity-80">
-                    See more examples
-                </Link>
-            </p>
-        </>
-    );
+~~~js
+const rewrite = async (request, context) => {
+    const path = context.geo?.country?.code === 'AU' ? '/edge/australia' : '/edge/not-australia';
+    return new URL(path, request.url);
+};
+
+export const config = {
+    path: '/edge'
+};
+
+export default rewrite;
+~~~
+
+[See more examples](https://edge-functions-examples.netlify.app)
+`;
+
+export default function EdgeFunctionExplainer() {
+    return <Markdown content={explainer} />    
 }

app/edge/explainer.jsx

@@ -1,25 +1,27 @@
 import Link from 'next/link';
 import { Alert } from '../../components/alert';
+import { Markdown } from 'components/markdown';
 
 export const metadata = {
     title: 'Fallback'
 };
 
+const explainer = `
+This page is using a [Netlify Edge Function](https://docs.netlify.com/edge-functions/overview/) to rewrite the URL based on visitor geography.
+
+For it to be invoked, please either run this site locally with \`netlify dev\` or deploy it to Netlify.
+
+Edge Functions are framework-agnostic, but are also used behind the scenes to run Next.js Middleware on Netlify.
+There are advatanges to using Edge Functions directly, such as the ability to access & transform the response body.
+
+[See more examples](https://edge-functions-examples.netlify.app)
+`
+
 export default function FallbackPage() {
     return (
         <>
             <h1 className="mb-8 text-4xl font-bold tracking-tight sm:text-5xl sm:mb-12">You&apos;ve reached the fallback page.</h1>
-                <p className="mb-6 leading-7">
-                    This page is using a Netlify Edge Function to rewrite the URL based on visitor geography.
-                    <br />
-                    For it to be invoked, please either run this site locally with <code>netlify dev</code> or deploy to Netlify!
-                    <br /><br/>
-                    Alternatively, you can use Next.js Middleware, which is also automatically deployed on Netlify as an Edge Function.<br/>
-                    However, note that Edge Functions are more powerful (e.g., you can fully transform the response) and framework-agnostic.
-                </p>
-            <Link href="https://edge-functions-examples.netlify.app" className="transition link hover:opacity-80">
-                See more examples
-            </Link>
+            <Markdown content={explainer} />
         </>
     );
 }

app/edge/page.jsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { getResourceSize } from '../../utils';
+import { getResourceSize } from 'utils';
 
 export function ImageWithSizeOverlay({ src, srcSet, sizes, overlayPosition }) {
     const imageRef = useRef();
@@ -25,11 +25,13 @@ export function ImageWithSizeOverlay({ src, srcSet, sizes, overlayPosition }) {
         <div className="relative">
             {imgSize && (
                 <span
-                    className={`absolute py-1.5 px-2.5 text-sm rounded-lg bg-neutral-900/70 top-2.5 ${overlayPosition === 'right' ? 'right-2.5' : 'left-2.5'}`}
+                    className={`absolute py-1.5 px-2.5 text-sm rounded-lg bg-neutral-900/70 top-2.5 ${
+                        overlayPosition === 'right' ? 'right-2.5' : 'left-2.5'
+                    }`}
                 >{`Size: ${Math.ceil(imgSize / 1024)}KB`}</span>
             )}
-            
-                <img src={src} srcSet={srcSet} sizes={sizes} alt="Corgi" onLoad={handleImageLoad} ref={imageRef} />
+
+            <img src={src} srcSet={srcSet} sizes={sizes} alt="Corgi" onLoad={handleImageLoad} ref={imageRef} />
         </div>
     );
 }

app/image-cdn/image-with-size-overlay.jsx

@@ -1,21 +1,22 @@
-import { Alert } from '../../components/alert';
-import { getNetlifyContext } from '../../utils';
-import { ImageWithSizeOverlay } from './image-with-size-overlay';
-import { Markdown } from '../../components/markdown';
 import Image from 'next/image';
+import { Alert } from 'components/alert';
+import { Markdown } from 'components/markdown';
+import { getNetlifyContext } from 'utils';
+import { ImageWithSizeOverlay } from './image-with-size-overlay';
 
 export const metadata = {
     title: 'Image CDN'
 };
 
-const sampleImage = "/images/corgi.jpg";
-const sampleImageSizes = "(max-width: 1024px) 100vw, 1024px";
+const sampleImage = '/images/corgi.jpg';
 
 const ctx = getNetlifyContext();
 const forceWebP = ctx === 'dev';
-const sampleImageSrcSet = [640, 1280, 2048].map(size => {
-    return `/.netlify/images?url=${sampleImage}&w=${size}${forceWebP ? '&fm=webp' : ''} ${size}w`
-}).join(', ')
+const sampleImageSrcSet = [640, 1280, 2048]
+    .map((size) => {
+        return `/.netlify/images?url=${sampleImage}&w=${size}${forceWebP ? '&fm=webp' : ''} ${size}w`;
+    })
+    .join(', ');
 
 const nextImageSnippet = `
 When running on Netlify, \`next/image\` is automatically set-up to use Netlify Image CDN for optimized images.
@@ -61,7 +62,8 @@ export default function Page() {
                 {ctx === 'dev' && (
                     <Alert>
                         <p>
-                            Running in local development mode. Image optimization is run locally without format detection, so format is fixed to WebP.
+                            Running in local development mode. Image optimization is run locally without format
+                            detection, so format is fixed to WebP.
                             <br />
                             Run this site on Netlify for automatic format detection!
                         </p>
@@ -71,7 +73,10 @@ export default function Page() {
             <section className="mb-16 sm:gap-8 sm:mb-24">
                 <h2 className="mb-6 text-2xl font-bold sm:text-3xl">Using next/image component</h2>
                 <Markdown content={nextImageSnippet} />
-                <div className="mt-8 overflow-hidden border-2 border-white rounded-lg relative max-w-screen-lg" style={{ aspectRatio: '3/2' }}>
+                <div
+                    className="mt-8 overflow-hidden border-2 border-white rounded-lg relative max-w-screen-lg"
+                    style={{ aspectRatio: '3/2' }}
+                >
                     <Image
                         src="/images/corgi.jpg"
                         priority
@@ -81,10 +86,22 @@ export default function Page() {
                         alt="Corgi"
                     />
                 </div>
+                <span className="text-sm italic">
+                    Credit: photo by{' '}
+                    <a href="https://unsplash.com/@alvannee?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">
+                        Alvan Nee
+                    </a>{' '}
+                    on{' '}
+                    <a href="https://unsplash.com/photos/long-coated-white-and-brown-dog-lvFlpqEvuRM?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">
+                        Unsplash
+                    </a>
+                </span>
             </section>
 
             <section className="mb-16 sm:gap-8 sm:mb-24">
-                <h2 className="mb-6 text-2xl font-bold sm:text-3xl">Original vs. optimized image: can you tell the difference?</h2>
+                <h2 className="mb-6 text-2xl font-bold sm:text-3xl">
+                    Original vs. optimized image: can you tell the difference?
+                </h2>
                 <Markdown content={originalVsCdnSnippet} />
                 <div className="diff aspect-[3/2] rounded-lg border-2 border-white mt-8">
                     <div className="diff-item-1">
@@ -107,7 +124,3 @@ export default function Page() {
         </>
     );
 }
-
-/*
-/.netlify/images?url=images/corgi.jpg?w=640 640w, /.netlify/images?url=images/corgi.jpg?w=1024 1024w, /.netlify/images?url=images/corgi.jpg?w=2048 2048w, "
-*/

app/image-cdn/page.jsx

@@ -1,36 +1,54 @@
 import Link from 'next/link';
-import { Card } from '../components/card';
-import { CardsGrid } from '../components/cards-grid';
-import { RandomPostId } from '../components/random-post-id';
-import { getNetlifyContext } from '../utils';
-import { Alert } from '../components/alert';
+import { Card } from 'components/card';
+import { RandomQuote } from 'components/random-quote';
+import { Alert } from 'components/alert';
+import { Markdown } from 'components/markdown';
+import { getNetlifyContext } from 'utils';
 
 const cards = [
-    /*{
-        text: 'Hello',
-        linkText: 'someLink',
-        href: '/'
-    }*/
+    //{ text: 'Hello', linkText: 'someLink', href: '/' }
 ];
 
-const currentEnv = process.env.NODE_ENV;
+const contextExplainer = `
+The card below is rendered on the server based on the value of \`process.env.CONTEXT\` 
+([docs](https://docs.netlify.com/configure-builds/environment-variables/#build-metadata)):
+`;
+
+const preDynamicContentExplainer = `
+The card content below is fetched by the client-side from \`/quotes/random\` (see file \`app/quotes/random/route.js\`) with a different quote shown on each page load:
+`;
+
+const postDynamicContentExplainer = `
+On Netlify, Next.js Route Handlers are automatically deployed as [Serverless Functions](https://docs.netlify.com/functions/overview/).
+Alternatively, you can add Serverless Functions to any site regardless of framework, with acccess to the [full context data](https://docs.netlify.com/functions/api/).
+
+And as always with dynamic content, beware of layout shifts & flicker! (here, we aren't...)
+`;
 
 export default function Page() {
     return (
-        <>
-            <section className="flex flex-col items-start gap-6 mb-16 sm:gap-8 sm:mb-24">
+        <main className="flex flex-col gap-8 sm:gap-16">
+            <section className="flex flex-col items-start gap-4 sm:gap-6">
                 <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Netlify Platform Starter - Next.js</h1>
                 <p className="text-lg">Get started with Next.js and Netlify in seconds.</p>
-                <Link href="https://docs.netlify.com/frameworks/next-js/overview/" className="btn btn-lg btn-primary sm:btn-wide">
+                <Link
+                    href="https://docs.netlify.com/frameworks/next-js/overview/"
+                    className="btn btn-lg btn-primary sm:btn-wide"
+                >
                     Read the Docs
                 </Link>
             </section>
-            <section className="flex flex-col gap-8">
+            <section className="flex flex-col gap-4">
+                <Markdown content={contextExplainer} />
                 <RuntimeContextCard />
-                {!!cards?.length && <CardsGrid cards={cards} />}
-                <RandomPostId />
             </section>
-        </>
+            <section className="flex flex-col gap-4">
+                <Markdown content={preDynamicContentExplainer} />
+                <RandomQuote />
+                <Markdown content={postDynamicContentExplainer} />
+            </section>
+            { /* !!cards?.length && <CardsGrid cards={cards} /> */}
+        </main>
     );
 }
 

app/page.jsx

@@ -0,0 +1,16 @@
+import { NextResponse } from 'next/server';
+import data from 'data/quotes.json';
+
+export const dynamic = 'force-dynamic'; // Otherwise, Next.js will cache this handler's output
+
+const dataSource = 'https://en.wikipedia.org/wiki/AFI%27s_100_Years...100_Movie_Quotes';
+
+export async function GET() {
+    const randomId = Math.floor(Math.random() * data.length);
+    const item = data[randomId];
+    
+    return NextResponse.json({
+        ...item,
+        dataSource
+    });
+}

app/quotes/random/route.js

@@ -1,13 +1,13 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import netlifyLogo from '../public/netlify-logo.svg';
+import netlifyLogo from 'public/netlify-logo.svg';
 
 const navItems = [
     { linkText: 'Home', href: '/' },
     { linkText: 'Revalidation', href: '/revalidation' },
     { linkText: 'Image CDN', href: '/image-cdn' },
     { linkText: 'Edge Function', href: '/edge' },
-    { linkText: 'Blobs (TBD)', href: '/blobs' }
+    { linkText: 'Blobs', href: '/blobs' }
 ];
 
 export function Header() {
@@ -20,7 +20,10 @@ export function Header() {
                 <ul className="flex flex-wrap gap-x-4 gap-y-1">
                     {navItems.map((item, index) => (
                         <li key={index}>
-                            <Link href={item.href} className="inline-block px-1.5 py-1 transition hover:opacity-80 sm:px-3 sm:py-2">
+                            <Link
+                                href={item.href}
+                                className="inline-block px-1.5 py-1 transition hover:opacity-80 sm:px-3 sm:py-2"
+                            >
                                 {item.linkText}
                             </Link>
                         </li>
@@ -29,4 +32,4 @@ export function Header() {
             )}
         </nav>
     );
-};
+}