From 0bc0dcba221ee47c76f1c4d7393e4fec52441ae7 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 19 Sep 2023 22:07:07 +0800
Subject: [PATCH] docs: view transition api

---
 .../.vitepress/theme/layout/MainLayout.vue    |  56 +++++---
 apps/www/.vitepress/theme/style.css           |   5 +
 .../new-york/example/TypographyBlockquote.vue |   6 +
 .../new-york/example/TypographyDemo.vue       | 135 ++++++++++++++++++
 .../new-york/example/TypographyH1.vue         |   5 +
 .../new-york/example/TypographyH2.vue         |   7 +
 .../new-york/example/TypographyH3.vue         |   5 +
 .../new-york/example/TypographyH4.vue         |   5 +
 .../new-york/example/TypographyInlineCode.vue |   7 +
 .../new-york/example/TypographyLarge.vue      |   5 +
 .../new-york/example/TypographyLead.vue       |   6 +
 .../new-york/example/TypographyList.vue       |   7 +
 .../new-york/example/TypographyMuted.vue      |   5 +
 .../registry/new-york/example/TypographyP.vue |   6 +
 .../new-york/example/TypographySmall.vue      |   5 +
 .../new-york/example/TypographyTable.vue      |  58 ++++++++
 16 files changed, 304 insertions(+), 19 deletions(-)
 create mode 100644 apps/www/src/lib/registry/new-york/example/TypographyBlockquote.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TypographyDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TypographyH1.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TypographyH2.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TypographyH3.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TypographyH4.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TypographyInlineCode.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TypographyLarge.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TypographyLead.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TypographyList.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TypographyMuted.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TypographyP.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TypographySmall.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TypographyTable.vue

diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index d108a057..272fa0c8 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useToggle } from '@vueuse/core'
 import { Content, useData, useRoute } from 'vitepress'
-import { onMounted } from 'vue'
+import { onMounted, watch } from 'vue'
 import { docsConfig } from '../config/docs'
 import Logo from '../components/Logo.vue'
 import MobileNav from '../components/MobileNav.vue'
@@ -30,15 +30,25 @@ const toggleDark = useToggle(isDark)
 const links = [
   {
     name: 'GitHub',
-    href: 'https://github.com/radix-vue',
+    href: 'https://github.com/radix-vue/shadcn-vue',
     icon: RadixIconsGithubLogo,
   },
-  {
-    name: 'X',
-    href: 'https://x.com',
-    icon: TablerBrandX,
-  },
+  // {
+  //   name: 'X',
+  //   href: 'https://x.com',
+  //   icon: TablerBrandX,
+  // },
 ]
+
+watch(() => $route.path, (n) => {
+  // @ts-expect-error View Transition API not supported by all the browser yet
+  if (document.startViewTransition) {
+    // @ts-expect-error View Transition API not supported by all the browser yet
+    document.startViewTransition(() => {
+      console.log('soft navigating to: ', n)
+    })
+  }
+})
 </script>
 
 <template>
@@ -110,18 +120,26 @@ const links = [
     </header>
 
     <div class="flex-1  bg-background">
-      <component :is="'docs'" v-if="$route.path.includes('docs')">
-        <Content />
-      </component>
-      <component :is="'examples'" v-else-if="$route.path.includes('examples')">
-        <Content />
-      </component>
-      <component :is="frontmatter.layout" v-else-if="frontmatter.layout">
-        <slot />
-      </component>
-      <main v-else class="container">
-        <Content />
-      </main>
+      <Transition name="fade" mode="out-in">
+        <component :is="'docs'" v-if="$route.path.includes('docs')">
+          <Transition name="fade" mode="out-in">
+            <Content :key="$route.path" />
+          </Transition>
+        </component>
+        <component :is="'examples'" v-else-if="$route.path.includes('examples')">
+          <Transition name="fade" mode="out-in">
+            <Content :key="$route.path" />
+          </Transition>
+        </component>
+        <component :is="frontmatter.layout" v-else-if="frontmatter.layout">
+          <slot />
+        </component>
+        <main v-else class="container">
+          <Transition name="fade" mode="out-in">
+            <Content :key="$route.path" />
+          </Transition>
+        </main>
+      </Transition>
     </div>
 
     <footer class="py-6 md:px-8 md:py-0">
diff --git a/apps/www/.vitepress/theme/style.css b/apps/www/.vitepress/theme/style.css
index 454eb5a9..c1b2d159 100644
--- a/apps/www/.vitepress/theme/style.css
+++ b/apps/www/.vitepress/theme/style.css
@@ -145,3 +145,8 @@ pre code .line {
 .line-number {
 	@apply min-h-[1.375rem] !text-sm !inline-block text-muted-foreground;
 }
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 0.3s;
+}
\ No newline at end of file
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyBlockquote.vue b/apps/www/src/lib/registry/new-york/example/TypographyBlockquote.vue
new file mode 100644
index 00000000..c3bb658b
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TypographyBlockquote.vue
@@ -0,0 +1,6 @@
+<template>
+  <blockquote class="mt-6 border-l-2 pl-6 italic">
+    "After all," he said, "everyone enjoys a good joke, so it's only fair that
+    they should pay for the privilege."
+  </blockquote>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyDemo.vue b/apps/www/src/lib/registry/new-york/example/TypographyDemo.vue
new file mode 100644
index 00000000..55020f33
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TypographyDemo.vue
@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+      The Joke Tax Chronicles
+    </h1>
+    <p class="leading-7 [&:not(:first-child)]:mt-6">
+      Once upon a time, in a far-off land, there was a very lazy king who
+      spent all day lounging on his throne. One day, his advisors came to him
+      with a problem: the kingdom was running out of money.
+    </p>
+    <h2
+      class="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
+    >
+      The King's Plan
+    </h2>
+    <p class="leading-7 [&:not(:first-child)]:mt-6">
+      The king thought long and hard, and finally came up with
+      <a
+        href="#"
+        class="font-medium text-primary underline underline-offset-4"
+      >
+        a brilliant plan
+      </a>
+      : he would tax the jokes in the kingdom.
+    </p>
+    <blockquote class="mt-6 border-l-2 pl-6 italic">
+      "After all," he said, "everyone enjoys a good joke, so it's only fair
+      that they should pay for the privilege."
+    </blockquote>
+    <h3 class="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
+      The Joke Tax
+    </h3>
+    <p class="leading-7 [&:not(:first-child)]:mt-6">
+      The king's subjects were not amused. They grumbled and complained, but
+      the king was firm:
+    </p>
+    <ul class="my-6 ml-6 list-disc [&>li]:mt-2">
+      <li>1st level of puns: 5 gold coins</li>
+      <li>2nd level of jokes: 10 gold coins</li>
+      <li>3rd level of one-liners : 20 gold coins</li>
+    </ul>
+    <p class="leading-7 [&:not(:first-child)]:mt-6">
+      As a result, people stopped telling jokes, and the kingdom fell into a
+      gloom. But there was one person who refused to let the king's
+      foolishness get him down: a court jester named Jokester.
+    </p>
+    <h3 class="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
+      Jokester's Revolt
+    </h3>
+    <p class="leading-7 [&:not(:first-child)]:mt-6">
+      Jokester began sneaking into the castle in the middle of the night and
+      leaving jokes all over the place: under the king's pillow, in his soup,
+      even in the royal toilet. The king was furious, but he couldn't seem to
+      stop Jokester.
+    </p>
+    <p class="leading-7 [&:not(:first-child)]:mt-6">
+      And then, one day, the people of the kingdom discovered that the jokes
+      left by Jokester were so funny that they couldn't help but laugh. And
+      once they started laughing, they couldn't stop.
+    </p>
+    <h3 class="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
+      The People's Rebellion
+    </h3>
+    <p class="leading-7 [&:not(:first-child)]:mt-6">
+      The people of the kingdom, feeling uplifted by the laughter, started to
+      tell jokes and puns again, and soon the entire kingdom was in on the
+      joke.
+    </p>
+    <div class="my-6 w-full overflow-y-auto">
+      <table class="w-full">
+        <thead>
+          <tr class="m-0 border-t p-0 even:bg-muted">
+            <th
+              class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+            >
+              King's Treasury
+            </th>
+            <th
+              class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+            >
+              People's happiness
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="m-0 border-t p-0 even:bg-muted">
+            <td
+              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            >
+              Empty
+            </td>
+            <td
+              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            >
+              Overflowing
+            </td>
+          </tr>
+          <tr class="m-0 border-t p-0 even:bg-muted">
+            <td
+              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            >
+              Modest
+            </td>
+            <td
+              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            >
+              Satisfied
+            </td>
+          </tr>
+          <tr class="m-0 border-t p-0 even:bg-muted">
+            <td
+              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            >
+              Full
+            </td>
+            <td
+              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            >
+              Ecstatic
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <p class="leading-7 [&:not(:first-child)]:mt-6">
+      The king, seeing how much happier his subjects were, realized the error
+      of his ways and repealed the joke tax. Jokester was declared a hero, and
+      the kingdom lived happily ever after.
+    </p>
+    <p class="leading-7 [&:not(:first-child)]:mt-6">
+      The moral of the story is: never underestimate the power of a good laugh
+      and always be careful of bad ideas.
+    </p>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyH1.vue b/apps/www/src/lib/registry/new-york/example/TypographyH1.vue
new file mode 100644
index 00000000..7b5b66b3
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TypographyH1.vue
@@ -0,0 +1,5 @@
+<template>
+  <h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+    Taxing Laughter: The Joke Tax Chronicles
+  </h1>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyH2.vue b/apps/www/src/lib/registry/new-york/example/TypographyH2.vue
new file mode 100644
index 00000000..1da502de
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TypographyH2.vue
@@ -0,0 +1,7 @@
+<template>
+  <h2
+    class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
+  >
+    The People of the Kingdom
+  </h2>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyH3.vue b/apps/www/src/lib/registry/new-york/example/TypographyH3.vue
new file mode 100644
index 00000000..ac223748
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TypographyH3.vue
@@ -0,0 +1,5 @@
+<template>
+  <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">
+    The Joke Tax
+  </h3>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyH4.vue b/apps/www/src/lib/registry/new-york/example/TypographyH4.vue
new file mode 100644
index 00000000..b5a45117
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TypographyH4.vue
@@ -0,0 +1,5 @@
+<template>
+  <h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
+    People stopped telling jokes
+  </h4>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyInlineCode.vue b/apps/www/src/lib/registry/new-york/example/TypographyInlineCode.vue
new file mode 100644
index 00000000..0de2e7c3
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TypographyInlineCode.vue
@@ -0,0 +1,7 @@
+<template>
+  <code
+    class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"
+  >
+    radix-vue
+  </code>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyLarge.vue b/apps/www/src/lib/registry/new-york/example/TypographyLarge.vue
new file mode 100644
index 00000000..9f927311
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TypographyLarge.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="text-lg font-semibold">
+    Are you sure absolutely sure?
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyLead.vue b/apps/www/src/lib/registry/new-york/example/TypographyLead.vue
new file mode 100644
index 00000000..b0d38e7e
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TypographyLead.vue
@@ -0,0 +1,6 @@
+<template>
+  <p class="text-xl text-muted-foreground">
+    A modal dialog that interrupts the user with important content and expects a
+    response.
+  </p>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyList.vue b/apps/www/src/lib/registry/new-york/example/TypographyList.vue
new file mode 100644
index 00000000..a9a2d09f
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TypographyList.vue
@@ -0,0 +1,7 @@
+<template>
+  <ul class="my-6 ml-6 list-disc [&>li]:mt-2">
+    <li>1st level of puns: 5 gold coins</li>
+    <li>2nd level of jokes: 10 gold coins</li>
+    <li>3rd level of one-liners : 20 gold coins</li>
+  </ul>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyMuted.vue b/apps/www/src/lib/registry/new-york/example/TypographyMuted.vue
new file mode 100644
index 00000000..fe650179
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TypographyMuted.vue
@@ -0,0 +1,5 @@
+<template>
+  <p class="text-sm text-muted-foreground">
+    Enter your email address.
+  </p>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyP.vue b/apps/www/src/lib/registry/new-york/example/TypographyP.vue
new file mode 100644
index 00000000..04b31452
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TypographyP.vue
@@ -0,0 +1,6 @@
+<template>
+  <p class="leading-7 [&:not(:first-child)]:mt-6">
+    The king, seeing how much happier his subjects were, realized the error of
+    his ways and repealed the joke tax.
+  </p>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TypographySmall.vue b/apps/www/src/lib/registry/new-york/example/TypographySmall.vue
new file mode 100644
index 00000000..77383955
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TypographySmall.vue
@@ -0,0 +1,5 @@
+<template>
+  <small class="text-sm font-medium leading-none">
+    Email address
+  </small>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyTable.vue b/apps/www/src/lib/registry/new-york/example/TypographyTable.vue
new file mode 100644
index 00000000..87609006
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TypographyTable.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="my-6 w-full overflow-y-auto">
+    <table class="w-full">
+      <thead>
+        <tr class="m-0 border-t p-0 even:bg-muted">
+          <th
+            class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+          >
+            King's Treasury
+          </th>
+          <th
+            class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+          >
+            People's happiness
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="m-0 border-t p-0 even:bg-muted">
+          <td
+            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+          >
+            Empty
+          </td>
+          <td
+            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+          >
+            Overflowing
+          </td>
+        </tr>
+        <tr class="m-0 border-t p-0 even:bg-muted">
+          <td
+            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+          >
+            Modest
+          </td>
+          <td
+            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+          >
+            Satisfied
+          </td>
+        </tr>
+        <tr class="m-0 border-t p-0 even:bg-muted">
+          <td
+            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+          >
+            Full
+          </td>
+          <td
+            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+          >
+            Ecstatic
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>