add example app

shuding · Apr 14, 2024 · b753080 · b753080
1 parent 2bef883
commit b753080
Show file tree

Hide file tree

Showing 9 changed files with 360 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,53 @@
+# next-view-transitions
+
+Use [CSS View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) in Next.js App Router.
+
+[**Demo**](https://next-view-transitions.vercel.app).
+
+## Installation
+
+Use your favorite package manager to install the `next-view-transitions` package. For example:
+
+```bash
+pnpm install next-view-transitions
+```
+
+## Usage
+
+Wrap your content with the `<ViewTransitions>` component inside the layout file:
+
+```jsx
+import { ViewTransitions } from 'next-view-transitions'
+
+export default function Layout({ children }) {
+  return (
+    <ViewTransitions>
+      <html lang='en'>
+        <body>
+          {children}
+        </body>
+      </html>
+    </ViewTransitions>
+  )
+}
+```
+
+Then, use the `<Link>` component for links that need to trigger a view transition:
+
+```jsx
+import { Link } from 'next-view-transitions'
+
+export default function Component() {
+  return (
+    <div>
+      <Link href='/about'>Go to /about</Link>
+    </div>
+  )
+}
+```
+
+That's it!
+
+## License
+
+MIT.
diff --git a/example/app/demo/page.js b/example/app/demo/page.js
@@ -0,0 +1,13 @@
+import { Link } from 'next-view-transitions'
+
+export default function Page() {
+  return (
+    <div className='demo-box'>
+      <h2>
+        This is the <span className='demo'>Demo</span>
+      </h2>
+      <p>OK you just saw the demo :)</p>
+      <Link href='/'>Go back →</Link>
+    </div>
+  )
+}
diff --git a/example/app/icon.svg b/example/app/icon.svg
diff --git a/example/app/layout.js b/example/app/layout.js
@@ -0,0 +1,57 @@
+import { GeistSans } from 'geist/font/sans'
+import { GeistMono } from 'geist/font/mono'
+
+import { ViewTransitions } from 'next-view-transitions'
+import './style.css'
+
+export const metadata = {
+  title: 'Next.js View Transitions',
+  description: 'Using native CSS View Transitions API in Next.js App Router',
+  metadataBase: new URL('https://next-view-transitions.vercel.app'),
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <ViewTransitions>
+      <html lang='en' className={GeistSans.variable + ' ' + GeistMono.variable}>
+        <body>
+          <h1>Next.js View Transitions</h1>
+          <p>
+            Use{' '}
+            <a
+              href='https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API'
+              target='_blank'
+            >
+              CSS View Transitions API
+            </a>{' '}
+            in Next.js App Router.{' '}
+            <a
+              href='https://github.com/shuding/next-view-transitions'
+              target='_blank'
+            >
+              Source Code ↗
+            </a>
+          </p>
+          <p></p>
+          <div>{children}</div>
+          <footer>
+            <p>
+              Created by{' '}
+              <a href='https://twitter.com/shuding_' target='_blank'>
+                Shu Ding
+              </a>
+              . Source code on{' '}
+              <a
+                href='https://github.com/shuding/next-view-transitions'
+                target='_blank'
+              >
+                GitHub
+              </a>
+              . Licensed under MIT.
+            </p>
+          </footer>
+        </body>
+      </html>
+    </ViewTransitions>
+  )
+}
diff --git a/example/app/opengraph-image.png b/example/app/opengraph-image.png
diff --git a/example/app/page.js b/example/app/page.js
@@ -0,0 +1,64 @@
+import { Link } from 'next-view-transitions'
+
+export default function Page() {
+  return (
+    <div>
+      <h2>
+        <span className='demo'>Demo</span>
+      </h2>
+      <p>
+        <Link href='/demo'>Go to /demo →</Link>
+      </p>
+      <h2>Installation</h2>
+      <p>
+        Use your favorite package manager to install the{' '}
+        <code>next-view-transitions</code> package. For example:
+      </p>
+      <p>
+        <code>pnpm install next-view-transitions</code>
+      </p>
+      <h2>Usage</h2>
+      <p>
+        Wrap your content with the <code>&lt;ViewTransitions&gt;</code>{' '}
+        component inside the layout file:
+      </p>
+      <pre>
+        <code>
+          {`\
+import { ViewTransitions } from 'next-view-transitions'
+
+export default function Layout({ children }) {
+  return (
+    <ViewTransitions>
+      <html lang='en'>
+        <body>
+          {children}
+        </body>
+      </html>
+    </ViewTransitions>
+  )
+}`}
+        </code>
+      </pre>
+      <p>
+        Then, use the <code>&lt;Link&gt;</code> component for links that need to
+        trigger a view transition:
+      </p>
+      <pre>
+        <code>
+          {`\
+import { Link } from 'next-view-transitions'
+
+export default function Component() {
+  return (
+    <div>
+      <Link href='/about'>Go to /about</Link>
+    </div>
+  )
+}`}
+        </code>
+      </pre>
+      <p>That's it!</p>
+    </div>
+  )
+}
diff --git a/example/app/style.css b/example/app/style.css
@@ -0,0 +1,133 @@
+/** CSS Reset from https://www.joshwcomeau.com/css/custom-css-reset <3 */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+* {
+  margin: 0;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+/** Styles */
+body {
+  font-family: var(--font-geist-sans), system-ui, -apple-system,
+    BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
+    Noto Color Emoji;
+  font-feature-settings: 'liga', 'clig', 'calt';
+  font-variant: common-ligatures contextual;
+  letter-spacing: -0.01em;
+  font-size: 15px;
+  color: #111;
+  background-color: #f9f9f9;
+  padding: 2rem;
+  line-height: 1.5;
+}
+
+h1 {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+h2 {
+  font-size: 1.15rem;
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+p,
+pre {
+  margin-bottom: 0.75rem;
+}
+
+a {
+  color: #888;
+  text-decoration: underline solid currentColor;
+  text-underline-position: from-font;
+  text-decoration-thickness: from-font;
+}
+
+a:hover {
+  color: #333;
+}
+
+code {
+  font-family: var(--font-geist-mono), menlo, 'Courier New', Courier, monospace;
+  letter-spacing: 0;
+  background-color: #eee;
+  padding: 0.2em 0.3em;
+  border-radius: 3px;
+  font-size: 0.95em;
+  color: #565656;
+}
+
+pre {
+  display: inline-block;
+  background-color: #eee;
+  padding: 0.3em 0.5em;
+  border-radius: 3px;
+  width: 600px;
+  max-width: 100%;
+  white-space: pre-wrap;
+}
+
+pre code {
+  padding: 0;
+  background: none;
+  border-radius: 0;
+}
+
+footer {
+  margin-top: 2rem;
+  padding-top: 1rem;
+  border-top: 1px solid #ddd;
+  width: 600px;
+  max-width: 100%;
+}
+
+.demo {
+  view-transition-name: demo-title;
+  width: fit-content;
+}
+
+.demo-box {
+  padding: 1rem;
+  border: 1px solid #ddd;
+  width: 600px;
+  max-width: 100%;
+}
+
+.demo-box h2:first-child {
+  margin-top: 0;
+}
diff --git a/example/package.json b/example/package.json
@@ -2,5 +2,16 @@
   "name": "next-view-transitions-example",
   "version": "0.0.0",
   "private": true,
-  "scripts": {}
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "geist": "^1.3.0",
+    "next": "^14.2.1",
+    "next-view-transitions": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
 }