From 6944656923bc562ba093fab45a382331de8e7474 Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Fri, 2 Jun 2023 08:32:34 -0400
Subject: [PATCH 1/9] Add time page

---
 app/time/page.tsx | 52 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 app/time/page.tsx

diff --git a/app/time/page.tsx b/app/time/page.tsx
new file mode 100644
index 0000000..513430e
--- /dev/null
+++ b/app/time/page.tsx
@@ -0,0 +1,52 @@
+//
+
+import Link from 'next/link';
+
+async function getTime(): Promise<Time> {
+  await sleep();
+  const res = await fetch(
+    'http://worldtimeapi.org/api/timezone/America/New_York'
+  );
+  const json = await res.json();
+
+  return json;
+}
+
+export const metadata = {
+  title: 'Time',
+};
+
+export function sleep(ms = 2000) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+export type Time = {
+  abbreviation: string;
+  client_ip: string;
+  datetime: string;
+  day_of_week: number;
+  day_of_year: number;
+  dst: boolean;
+  dst_from: string;
+  dst_offset: number;
+  dst_until: string;
+  raw_offset: number;
+  timezone: string;
+  unixtime: number;
+  utc_datetime: string;
+  utc_offset: string;
+  week_number: number;
+};
+
+export default async function Page() {
+  const time = await getTime();
+
+  return (
+    <div className="prose">
+      <h1>The current time is:</h1>
+      <p>{new Date(time.datetime).toLocaleTimeString()}</p>
+    </div>
+  );
+}

From 5682090d365c6bd6c36b9a61f3652bd6628fe4a6 Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Fri, 2 Jun 2023 08:45:04 -0400
Subject: [PATCH 2/9] update import

---
 app/time/page.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/app/time/page.tsx b/app/time/page.tsx
index 513430e..0becd71 100644
--- a/app/time/page.tsx
+++ b/app/time/page.tsx
@@ -1,6 +1,6 @@
 //
 
-import Link from 'next/link';
+import sleep from '@/util/sleep';
 
 async function getTime(): Promise<Time> {
   await sleep();
@@ -16,12 +16,6 @@ export const metadata = {
   title: 'Time',
 };
 
-export function sleep(ms = 2000) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, ms);
-  });
-}
-
 export type Time = {
   abbreviation: string;
   client_ip: string;

From c28afa2e5999b83a62af900df0e28a5eb9c7929d Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Fri, 2 Jun 2023 08:46:37 -0400
Subject: [PATCH 3/9] Revert "Add star wars"

This reverts commit 3b44c0ce95f23d508b226b42ed5e6057a908bae3.
---
 app/star-wars/page.tsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 app/star-wars/page.tsx

diff --git a/app/star-wars/page.tsx b/app/star-wars/page.tsx
deleted file mode 100644
index e69de29..0000000

From 118fc7c97123c08a685bdaa54e42fe19cb241082 Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Fri, 2 Jun 2023 10:03:01 -0400
Subject: [PATCH 4/9] add more examples

---
 app/time/dynamic/loading.tsx    | 32 ++++++++++++++++++++++++
 app/time/dynamic/page.tsx       | 20 +++++++++++++++
 app/time/get-time.tsx           | 16 ++++++++++++
 app/time/layout.tsx             | 43 +++++++++++++++++++++++++++++++++
 app/time/no-store/loading.tsx   | 32 ++++++++++++++++++++++++
 app/time/no-store/page.tsx      | 20 +++++++++++++++
 app/time/page.tsx               | 36 +++------------------------
 app/time/revalidate/loading.tsx | 32 ++++++++++++++++++++++++
 app/time/revalidate/page.tsx    | 22 +++++++++++++++++
 app/time/types.tsx              | 17 +++++++++++++
 10 files changed, 237 insertions(+), 33 deletions(-)
 create mode 100644 app/time/dynamic/loading.tsx
 create mode 100644 app/time/dynamic/page.tsx
 create mode 100644 app/time/get-time.tsx
 create mode 100644 app/time/layout.tsx
 create mode 100644 app/time/no-store/loading.tsx
 create mode 100644 app/time/no-store/page.tsx
 create mode 100644 app/time/revalidate/loading.tsx
 create mode 100644 app/time/revalidate/page.tsx
 create mode 100644 app/time/types.tsx

diff --git a/app/time/dynamic/loading.tsx b/app/time/dynamic/loading.tsx
new file mode 100644
index 0000000..3c7c113
--- /dev/null
+++ b/app/time/dynamic/loading.tsx
@@ -0,0 +1,32 @@
+export default function Loading() {
+  return (
+    <div className="prose max-w-none">
+      <h1>
+        The current time is: (<code>force-dynamic</code>)
+      </h1>
+      <div className="flex gap-2 items-center">
+        <svg
+          className="animate-spin h-5 w-5 text-sky-500"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          ></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
+        </svg>
+        Loading...
+      </div>
+    </div>
+  );
+}
diff --git a/app/time/dynamic/page.tsx b/app/time/dynamic/page.tsx
new file mode 100644
index 0000000..c845d0a
--- /dev/null
+++ b/app/time/dynamic/page.tsx
@@ -0,0 +1,20 @@
+import { getTime } from '../get-time';
+
+export const metadata = {
+  title: 'Dynamic Time',
+};
+
+export const dynamic = 'force-dynamic';
+
+export default async function Page() {
+  const time = await getTime();
+
+  return (
+    <div className="prose max-w-none">
+      <h1>
+        The current time is: (<code>force-dynamic</code>)
+      </h1>
+      <p>{time}</p>
+    </div>
+  );
+}
diff --git a/app/time/get-time.tsx b/app/time/get-time.tsx
new file mode 100644
index 0000000..08f6318
--- /dev/null
+++ b/app/time/get-time.tsx
@@ -0,0 +1,16 @@
+import sleep from '@/util/sleep';
+import { type Time } from './types';
+import { RequestInit } from 'next/dist/server/web/spec-extension/request';
+
+export async function getTime(requestInit?: RequestInit): Promise<string> {
+  await sleep();
+
+  const res = await fetch(
+    'http://worldtimeapi.org/api/timezone/America/New_York',
+    requestInit
+  );
+
+  const json: Time = await res.json();
+
+  return new Date(json.datetime).toLocaleTimeString();
+}
diff --git a/app/time/layout.tsx b/app/time/layout.tsx
new file mode 100644
index 0000000..8a77164
--- /dev/null
+++ b/app/time/layout.tsx
@@ -0,0 +1,43 @@
+import Link from 'next/link';
+import { getTime } from './get-time';
+
+const navigation = [
+  { name: 'Static', href: '/time' },
+  { name: 'Dynamic', href: '/time/dynamic' },
+  { name: 'No-Store', href: '/time/no-store' },
+  { name: 'Revalidate', href: '/time/revalidate' },
+];
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const time = await getTime();
+  return (
+    <div className="outline-2 outline-emerald-500 outline-dotted rounded-lg p-4 -mx-4">
+      <div className="p-4 -m-4 sm:flex sm:items-center sm:justify-between">
+        <h2 className="text-base font-semibold leading-6 text-emerald-500">
+          It&apos;s Time Time!
+        </h2>
+        <div className="mt-3 flex sm:ml-4 sm:mt-0">
+          <span className="text-lg font-medium">{time}</span>
+        </div>
+      </div>
+      <nav className="flex gap-4 py-2 mb-4" aria-label="Global">
+        {navigation.map((item) => (
+          <Link
+            key={item.name}
+            href={item.href}
+            className={
+              'text-sky-500 underline hover:text-sky-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-sky-500'
+            }
+          >
+            {item.name}
+          </Link>
+        ))}
+      </nav>
+      {children}
+    </div>
+  );
+}
diff --git a/app/time/no-store/loading.tsx b/app/time/no-store/loading.tsx
new file mode 100644
index 0000000..91111fe
--- /dev/null
+++ b/app/time/no-store/loading.tsx
@@ -0,0 +1,32 @@
+export default function Loading() {
+  return (
+    <div className="prose max-w-none">
+      <h1>
+        The current time is: (<code>cache: no-store</code>)
+      </h1>
+      <div className="flex gap-2 items-center">
+        <svg
+          className="animate-spin h-5 w-5 text-sky-500"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          ></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
+        </svg>
+        Loading...
+      </div>
+    </div>
+  );
+}
diff --git a/app/time/no-store/page.tsx b/app/time/no-store/page.tsx
new file mode 100644
index 0000000..c9f636f
--- /dev/null
+++ b/app/time/no-store/page.tsx
@@ -0,0 +1,20 @@
+import { getTime } from '../get-time';
+
+export const metadata = {
+  title: 'cache: no-store time',
+};
+
+export default async function Page() {
+  const time = await getTime({
+    cache: 'no-store',
+  });
+
+  return (
+    <div className="prose max-w-none">
+      <h1>
+        The current time is: (<code>cache: no-store</code>)
+      </h1>
+      <p>{time}</p>
+    </div>
+  );
+}
diff --git a/app/time/page.tsx b/app/time/page.tsx
index 0becd71..345e420 100644
--- a/app/time/page.tsx
+++ b/app/time/page.tsx
@@ -1,46 +1,16 @@
-//
-
-import sleep from '@/util/sleep';
-
-async function getTime(): Promise<Time> {
-  await sleep();
-  const res = await fetch(
-    'http://worldtimeapi.org/api/timezone/America/New_York'
-  );
-  const json = await res.json();
-
-  return json;
-}
+import { getTime } from './get-time';
 
 export const metadata = {
   title: 'Time',
 };
 
-export type Time = {
-  abbreviation: string;
-  client_ip: string;
-  datetime: string;
-  day_of_week: number;
-  day_of_year: number;
-  dst: boolean;
-  dst_from: string;
-  dst_offset: number;
-  dst_until: string;
-  raw_offset: number;
-  timezone: string;
-  unixtime: number;
-  utc_datetime: string;
-  utc_offset: string;
-  week_number: number;
-};
-
 export default async function Page() {
   const time = await getTime();
 
   return (
-    <div className="prose">
+    <div className="prose max-w-none">
       <h1>The current time is:</h1>
-      <p>{new Date(time.datetime).toLocaleTimeString()}</p>
+      <p>{time}</p>
     </div>
   );
 }
diff --git a/app/time/revalidate/loading.tsx b/app/time/revalidate/loading.tsx
new file mode 100644
index 0000000..bbde865
--- /dev/null
+++ b/app/time/revalidate/loading.tsx
@@ -0,0 +1,32 @@
+export default function Loading() {
+  return (
+    <div className="prose max-w-none">
+      <h1>
+        The current time is: (<code>revalidate: 30</code>)
+      </h1>
+      <div className="flex gap-2 items-center">
+        <svg
+          className="animate-spin h-5 w-5 text-sky-500"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          ></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
+        </svg>
+        Loading...
+      </div>
+    </div>
+  );
+}
diff --git a/app/time/revalidate/page.tsx b/app/time/revalidate/page.tsx
new file mode 100644
index 0000000..4420fee
--- /dev/null
+++ b/app/time/revalidate/page.tsx
@@ -0,0 +1,22 @@
+import { getTime } from '../get-time';
+
+export const metadata = {
+  title: 'revalidate time',
+};
+
+export default async function Page() {
+  const time = await getTime({
+    next: {
+      revalidate: 30,
+    },
+  });
+
+  return (
+    <div className="prose max-w-none">
+      <h1>
+        The current time is: (<code>revalidate: 30</code>)
+      </h1>
+      <p>{time}</p>
+    </div>
+  );
+}
diff --git a/app/time/types.tsx b/app/time/types.tsx
new file mode 100644
index 0000000..5ae5816
--- /dev/null
+++ b/app/time/types.tsx
@@ -0,0 +1,17 @@
+export type Time = {
+  abbreviation: string;
+  client_ip: string;
+  datetime: string;
+  day_of_week: number;
+  day_of_year: number;
+  dst: boolean;
+  dst_from: string;
+  dst_offset: number;
+  dst_until: string;
+  raw_offset: number;
+  timezone: string;
+  unixtime: number;
+  utc_datetime: string;
+  utc_offset: string;
+  week_number: number;
+};

From 3af705bc78030861b1fad189f2091f55bcea583b Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Fri, 2 Jun 2023 11:01:59 -0400
Subject: [PATCH 5/9] update timings

---
 app/layout.tsx                                |  3 ++
 app/time/dynamic/page.tsx                     |  2 +-
 app/time/get-time.tsx                         | 14 +++++---
 app/time/layout.tsx                           |  3 +-
 app/time/no-store/page.tsx                    |  2 +-
 app/time/page.tsx                             |  4 +--
 .../{revalidate => revalidate-0}/loading.tsx  |  2 +-
 .../{revalidate => revalidate-0}/page.tsx     | 16 ++++++----
 app/time/revalidate-5/loading.tsx             | 32 +++++++++++++++++++
 app/time/revalidate-5/page.tsx                | 26 +++++++++++++++
 10 files changed, 88 insertions(+), 16 deletions(-)
 rename app/time/{revalidate => revalidate-0}/loading.tsx (93%)
 rename app/time/{revalidate => revalidate-0}/page.tsx (52%)
 create mode 100644 app/time/revalidate-5/loading.tsx
 create mode 100644 app/time/revalidate-5/page.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index 38a8237..b787dfd 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -39,6 +39,9 @@ export default function RootLayout({
                 <li>
                   <Link href="/">Home</Link>
                 </li>
+                <li>
+                  <Link href="/time">Time</Link>
+                </li>
                 <li>
                   <Link href="/star-wars/people">Star Wars</Link>
                 </li>
diff --git a/app/time/dynamic/page.tsx b/app/time/dynamic/page.tsx
index c845d0a..ca627e7 100644
--- a/app/time/dynamic/page.tsx
+++ b/app/time/dynamic/page.tsx
@@ -7,7 +7,7 @@ export const metadata = {
 export const dynamic = 'force-dynamic';
 
 export default async function Page() {
-  const time = await getTime();
+  const time = await getTime('America/Glace_Bay');
 
   return (
     <div className="prose max-w-none">
diff --git a/app/time/get-time.tsx b/app/time/get-time.tsx
index 08f6318..6c95f9e 100644
--- a/app/time/get-time.tsx
+++ b/app/time/get-time.tsx
@@ -2,15 +2,21 @@ import sleep from '@/util/sleep';
 import { type Time } from './types';
 import { RequestInit } from 'next/dist/server/web/spec-extension/request';
 
-export async function getTime(requestInit?: RequestInit): Promise<string> {
-  await sleep();
+export async function getTime(
+  timezone: string = 'America/New_York',
+  requestInit?: RequestInit,
+  shouldSleep: boolean = true
+): Promise<string> {
+  if (shouldSleep) {
+    await sleep();
+  }
 
   const res = await fetch(
-    'http://worldtimeapi.org/api/timezone/America/New_York',
+    `https://worldtimeapi.org/api/timezone/America/New_York?x=${timezone}`,
     requestInit
   );
 
   const json: Time = await res.json();
 
-  return new Date(json.datetime).toLocaleTimeString();
+  return `${new Date(json.datetime).toLocaleTimeString()}`;
 }
diff --git a/app/time/layout.tsx b/app/time/layout.tsx
index 8a77164..24cc45c 100644
--- a/app/time/layout.tsx
+++ b/app/time/layout.tsx
@@ -5,7 +5,8 @@ const navigation = [
   { name: 'Static', href: '/time' },
   { name: 'Dynamic', href: '/time/dynamic' },
   { name: 'No-Store', href: '/time/no-store' },
-  { name: 'Revalidate', href: '/time/revalidate' },
+  { name: 'Revalidate:0', href: '/time/revalidate-0' },
+  { name: 'Revalidate:5', href: '/time/revalidate-5' },
 ];
 
 export default async function Layout({
diff --git a/app/time/no-store/page.tsx b/app/time/no-store/page.tsx
index c9f636f..53ab420 100644
--- a/app/time/no-store/page.tsx
+++ b/app/time/no-store/page.tsx
@@ -5,7 +5,7 @@ export const metadata = {
 };
 
 export default async function Page() {
-  const time = await getTime({
+  const time = await getTime('Asia/Bangkok', {
     cache: 'no-store',
   });
 
diff --git a/app/time/page.tsx b/app/time/page.tsx
index 345e420..2d1dca5 100644
--- a/app/time/page.tsx
+++ b/app/time/page.tsx
@@ -1,11 +1,11 @@
 import { getTime } from './get-time';
 
 export const metadata = {
-  title: 'Time',
+  title: 'Static Time',
 };
 
 export default async function Page() {
-  const time = await getTime();
+  const time = await getTime('Africa/Lagos');
 
   return (
     <div className="prose max-w-none">
diff --git a/app/time/revalidate/loading.tsx b/app/time/revalidate-0/loading.tsx
similarity index 93%
rename from app/time/revalidate/loading.tsx
rename to app/time/revalidate-0/loading.tsx
index bbde865..0ad2c33 100644
--- a/app/time/revalidate/loading.tsx
+++ b/app/time/revalidate-0/loading.tsx
@@ -2,7 +2,7 @@ export default function Loading() {
   return (
     <div className="prose max-w-none">
       <h1>
-        The current time is: (<code>revalidate: 30</code>)
+        The current time is: (<code>revalidate: 0</code>)
       </h1>
       <div className="flex gap-2 items-center">
         <svg
diff --git a/app/time/revalidate/page.tsx b/app/time/revalidate-0/page.tsx
similarity index 52%
rename from app/time/revalidate/page.tsx
rename to app/time/revalidate-0/page.tsx
index 4420fee..ee6946b 100644
--- a/app/time/revalidate/page.tsx
+++ b/app/time/revalidate-0/page.tsx
@@ -1,20 +1,24 @@
 import { getTime } from '../get-time';
 
 export const metadata = {
-  title: 'revalidate time',
+  title: 'revalidate:0 time',
 };
 
 export default async function Page() {
-  const time = await getTime({
-    next: {
-      revalidate: 30,
+  const time = await getTime(
+    'Europe/Moscow',
+    {
+      next: {
+        revalidate: 0,
+      },
     },
-  });
+    false
+  );
 
   return (
     <div className="prose max-w-none">
       <h1>
-        The current time is: (<code>revalidate: 30</code>)
+        The current time is: (<code>revalidate: 0</code>)
       </h1>
       <p>{time}</p>
     </div>
diff --git a/app/time/revalidate-5/loading.tsx b/app/time/revalidate-5/loading.tsx
new file mode 100644
index 0000000..d6486ab
--- /dev/null
+++ b/app/time/revalidate-5/loading.tsx
@@ -0,0 +1,32 @@
+export default function Loading() {
+  return (
+    <div className="prose max-w-none">
+      <h1>
+        The current time is: (<code>revalidate: 5</code>)
+      </h1>
+      <div className="flex gap-2 items-center">
+        <svg
+          className="animate-spin h-5 w-5 text-sky-500"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          ></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
+        </svg>
+        Loading...
+      </div>
+    </div>
+  );
+}
diff --git a/app/time/revalidate-5/page.tsx b/app/time/revalidate-5/page.tsx
new file mode 100644
index 0000000..a97df0b
--- /dev/null
+++ b/app/time/revalidate-5/page.tsx
@@ -0,0 +1,26 @@
+import { getTime } from '../get-time';
+
+export const metadata = {
+  title: 'revalidate:5 time',
+};
+
+export default async function Page() {
+  const time = await getTime(
+    'Pacific/Pago_Pago',
+    {
+      next: {
+        revalidate: 5,
+      },
+    },
+    false
+  );
+
+  return (
+    <div className="prose max-w-none">
+      <h1>
+        The current time is: (<code>revalidate: 5</code>)
+      </h1>
+      <p>{time}</p>
+    </div>
+  );
+}

From 38d022d6744fbcb4172414cd8ed944364a8839ff Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Fri, 2 Jun 2023 11:03:54 -0400
Subject: [PATCH 6/9] add back in time zone

---
 app/time/get-time.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/time/get-time.tsx b/app/time/get-time.tsx
index 6c95f9e..0e5edc9 100644
--- a/app/time/get-time.tsx
+++ b/app/time/get-time.tsx
@@ -12,11 +12,11 @@ export async function getTime(
   }
 
   const res = await fetch(
-    `https://worldtimeapi.org/api/timezone/America/New_York?x=${timezone}`,
+    `https://worldtimeapi.org/api/timezone/${timezone}`,
     requestInit
   );
 
   const json: Time = await res.json();
 
-  return `${new Date(json.datetime).toLocaleTimeString()}`;
+  return `${new Date(json.datetime).toLocaleTimeString()} (${json.timezone})`;
 }

From fdb867ac5009c0adeaaacb2bcbd9ee1ad9ce2b3d Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Fri, 2 Jun 2023 11:04:01 -0400
Subject: [PATCH 7/9] add static + revalidate

---
 app/time/static-revalidate-route/loading.tsx | 32 ++++++++++++++++++++
 app/time/static-revalidate-route/page.tsx    | 20 ++++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 app/time/static-revalidate-route/loading.tsx
 create mode 100644 app/time/static-revalidate-route/page.tsx

diff --git a/app/time/static-revalidate-route/loading.tsx b/app/time/static-revalidate-route/loading.tsx
new file mode 100644
index 0000000..afacc56
--- /dev/null
+++ b/app/time/static-revalidate-route/loading.tsx
@@ -0,0 +1,32 @@
+export default function Loading() {
+  return (
+    <div className="prose max-w-none">
+      <h1>
+        The current time is: (<code>Static + Revalidate Route</code>)
+      </h1>
+      <div className="flex gap-2 items-center">
+        <svg
+          className="animate-spin h-5 w-5 text-sky-500"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          ></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
+        </svg>
+        Loading...
+      </div>
+    </div>
+  );
+}
diff --git a/app/time/static-revalidate-route/page.tsx b/app/time/static-revalidate-route/page.tsx
new file mode 100644
index 0000000..0e65b99
--- /dev/null
+++ b/app/time/static-revalidate-route/page.tsx
@@ -0,0 +1,20 @@
+import { getTime } from '../get-time';
+
+export const metadata = {
+  title: 'Static + Revalidate Route Time',
+};
+
+export const revalidate = 0;
+
+export default async function Page() {
+  const time = await getTime('Europe/Prague');
+
+  return (
+    <div className="prose max-w-none">
+      <h1>
+        The current time is: (<code>Static + Revalidate Route</code>)
+      </h1>
+      <p>{time}</p>
+    </div>
+  );
+}

From ece33cdf674a0cf6874a4b3eb37b4c0ebef0c555 Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Fri, 2 Jun 2023 11:07:15 -0400
Subject: [PATCH 8/9] add link

---
 app/time/layout.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/time/layout.tsx b/app/time/layout.tsx
index 24cc45c..583fa54 100644
--- a/app/time/layout.tsx
+++ b/app/time/layout.tsx
@@ -7,6 +7,7 @@ const navigation = [
   { name: 'No-Store', href: '/time/no-store' },
   { name: 'Revalidate:0', href: '/time/revalidate-0' },
   { name: 'Revalidate:5', href: '/time/revalidate-5' },
+  { name: 'Static + Route Revalidate', href: '/time/static-revalidate-route' },
 ];
 
 export default async function Layout({

From 98f6c5ebfafc6629101be1b740d0999e673ee2b8 Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Fri, 2 Jun 2023 11:07:18 -0400
Subject: [PATCH 9/9] update design

---
 app/time/dynamic/loading.tsx                 | 5 ++++-
 app/time/dynamic/page.tsx                    | 5 ++++-
 app/time/no-store/loading.tsx                | 5 ++++-
 app/time/no-store/page.tsx                   | 5 ++++-
 app/time/revalidate-0/loading.tsx            | 5 ++++-
 app/time/revalidate-0/page.tsx               | 5 ++++-
 app/time/revalidate-5/loading.tsx            | 5 ++++-
 app/time/revalidate-5/page.tsx               | 5 ++++-
 app/time/static-revalidate-route/loading.tsx | 5 ++++-
 app/time/static-revalidate-route/page.tsx    | 5 ++++-
 10 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/app/time/dynamic/loading.tsx b/app/time/dynamic/loading.tsx
index 3c7c113..dad7d5f 100644
--- a/app/time/dynamic/loading.tsx
+++ b/app/time/dynamic/loading.tsx
@@ -2,7 +2,10 @@ export default function Loading() {
   return (
     <div className="prose max-w-none">
       <h1>
-        The current time is: (<code>force-dynamic</code>)
+        The current time is:{' '}
+        <span className="text-base">
+          (<code>force-dynamic</code>)
+        </span>
       </h1>
       <div className="flex gap-2 items-center">
         <svg
diff --git a/app/time/dynamic/page.tsx b/app/time/dynamic/page.tsx
index ca627e7..ec45ee6 100644
--- a/app/time/dynamic/page.tsx
+++ b/app/time/dynamic/page.tsx
@@ -12,7 +12,10 @@ export default async function Page() {
   return (
     <div className="prose max-w-none">
       <h1>
-        The current time is: (<code>force-dynamic</code>)
+        The current time is:{' '}
+        <span className="text-base">
+          (<code>force-dynamic</code>)
+        </span>
       </h1>
       <p>{time}</p>
     </div>
diff --git a/app/time/no-store/loading.tsx b/app/time/no-store/loading.tsx
index 91111fe..283884c 100644
--- a/app/time/no-store/loading.tsx
+++ b/app/time/no-store/loading.tsx
@@ -2,7 +2,10 @@ export default function Loading() {
   return (
     <div className="prose max-w-none">
       <h1>
-        The current time is: (<code>cache: no-store</code>)
+        The current time is:{' '}
+        <span className="text-base">
+          (<code>cache: no-store</code>)
+        </span>
       </h1>
       <div className="flex gap-2 items-center">
         <svg
diff --git a/app/time/no-store/page.tsx b/app/time/no-store/page.tsx
index 53ab420..0b40629 100644
--- a/app/time/no-store/page.tsx
+++ b/app/time/no-store/page.tsx
@@ -12,7 +12,10 @@ export default async function Page() {
   return (
     <div className="prose max-w-none">
       <h1>
-        The current time is: (<code>cache: no-store</code>)
+        The current time is:{' '}
+        <span className="text-base">
+          (<code>cache: no-store</code>)
+        </span>
       </h1>
       <p>{time}</p>
     </div>
diff --git a/app/time/revalidate-0/loading.tsx b/app/time/revalidate-0/loading.tsx
index 0ad2c33..657bcf9 100644
--- a/app/time/revalidate-0/loading.tsx
+++ b/app/time/revalidate-0/loading.tsx
@@ -2,7 +2,10 @@ export default function Loading() {
   return (
     <div className="prose max-w-none">
       <h1>
-        The current time is: (<code>revalidate: 0</code>)
+        The current time is:{' '}
+        <span className="text-base">
+          (<code>revalidate: 0</code>)
+        </span>
       </h1>
       <div className="flex gap-2 items-center">
         <svg
diff --git a/app/time/revalidate-0/page.tsx b/app/time/revalidate-0/page.tsx
index ee6946b..dad0815 100644
--- a/app/time/revalidate-0/page.tsx
+++ b/app/time/revalidate-0/page.tsx
@@ -18,7 +18,10 @@ export default async function Page() {
   return (
     <div className="prose max-w-none">
       <h1>
-        The current time is: (<code>revalidate: 0</code>)
+        The current time is:{' '}
+        <span className="text-base">
+          (<code>revalidate: 0</code>)
+        </span>
       </h1>
       <p>{time}</p>
     </div>
diff --git a/app/time/revalidate-5/loading.tsx b/app/time/revalidate-5/loading.tsx
index d6486ab..0b405fd 100644
--- a/app/time/revalidate-5/loading.tsx
+++ b/app/time/revalidate-5/loading.tsx
@@ -2,7 +2,10 @@ export default function Loading() {
   return (
     <div className="prose max-w-none">
       <h1>
-        The current time is: (<code>revalidate: 5</code>)
+        The current time is:{' '}
+        <span className="text-base">
+          (<code>revalidate: 5</code>)
+        </span>
       </h1>
       <div className="flex gap-2 items-center">
         <svg
diff --git a/app/time/revalidate-5/page.tsx b/app/time/revalidate-5/page.tsx
index a97df0b..f3bec31 100644
--- a/app/time/revalidate-5/page.tsx
+++ b/app/time/revalidate-5/page.tsx
@@ -18,7 +18,10 @@ export default async function Page() {
   return (
     <div className="prose max-w-none">
       <h1>
-        The current time is: (<code>revalidate: 5</code>)
+        The current time is:{' '}
+        <span className="text-base">
+          (<code>revalidate: 5</code>)
+        </span>
       </h1>
       <p>{time}</p>
     </div>
diff --git a/app/time/static-revalidate-route/loading.tsx b/app/time/static-revalidate-route/loading.tsx
index afacc56..c902eec 100644
--- a/app/time/static-revalidate-route/loading.tsx
+++ b/app/time/static-revalidate-route/loading.tsx
@@ -2,7 +2,10 @@ export default function Loading() {
   return (
     <div className="prose max-w-none">
       <h1>
-        The current time is: (<code>Static + Revalidate Route</code>)
+        The current time is:{' '}
+        <span className="text-base">
+          (<code>Static + Revalidate Route</code>)
+        </span>
       </h1>
       <div className="flex gap-2 items-center">
         <svg
diff --git a/app/time/static-revalidate-route/page.tsx b/app/time/static-revalidate-route/page.tsx
index 0e65b99..2ab48c7 100644
--- a/app/time/static-revalidate-route/page.tsx
+++ b/app/time/static-revalidate-route/page.tsx
@@ -12,7 +12,10 @@ export default async function Page() {
   return (
     <div className="prose max-w-none">
       <h1>
-        The current time is: (<code>Static + Revalidate Route</code>)
+        The current time is:{' '}
+        <span className="text-base">
+          (<code>Static + Revalidate Route</code>)
+        </span>
       </h1>
       <p>{time}</p>
     </div>