Skip to content

Commit

Permalink
[vercel-tutor] Update README, Add support for prUrl, check for loca…
Browse files Browse the repository at this point in the history 
…lhost (#1086)

### Description

- Update README to link to `/docs` instead
- Support for `prUrl` query parameter
- If running on localhost, show a message to deploy to Vercel

### Demo URL

<!--
Provide a URL to a live deployment where we can test your PR. If a demo
isn't possible feel free to omit this section.
-->

### Type of Change

- [ ] New Example
- [ ] Example updates (Bug fixes, new features, etc.)
- [ ] Other (changes to the codebase, but not to examples)

### New Example Checklist

- [ ] 🛫 `npm run new-example` was used to create the example
- [ ] 📚 The template wasn't used but I carefuly read the [Adding a new
example](https://github.com/vercel/examples#adding-a-new-example) steps
and implemented them in the example
- [ ] 📱 Is it responsive? Are mobile and tablets considered?
  • Loading branch information
@chibicode
chibicode authored Feb 24, 2025
1 parent f5b091a commit 3749e19
Show file tree
Hide file tree
Showing 3 changed files with 150 additions and 114 deletions.
2 changes: 1 addition & 1 deletion vercel-tutor/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Vercel Tutor

This is a [Next.js](https://nextjs.org/?utm_source=vercel-tutor&utm_medium=readme&utm_campaign=vercel-tutor) template that provides a step-by-step tutorial on how to use [Preview Deployments and Preview Comments](https://vercel.com/products/previews?utm_source=vercel-tutor&utm_medium=readme&utm_campaign=vercel-tutor) on [Vercel](https://vercel.com?utm_source=vercel-tutor&utm_medium=readme&utm_campaign=vercel-tutor). It is intended for users who are new to Vercel.
This is a [Next.js](https://nextjs.org/?utm_source=vercel-tutor&utm_medium=readme&utm_campaign=vercel-tutor) template that provides a step-by-step tutorial on how to use [Preview Deployments](https://vercel.com/docs/deployments/preview-deployments?utm_source=vercel-tutor&utm_medium=readme&utm_campaign=vercel-tutor) and [Comments](https://vercel.com/docs/workflow-collaboration/comments?utm_source=vercel-tutor&utm_medium=readme&utm_campaign=vercel-tutor) on [Vercel](https://vercel.com?utm_source=vercel-tutor&utm_medium=readme&utm_campaign=vercel-tutor). It is intended for users who are new to Vercel.

### Get Started

Expand Down
110 changes: 66 additions & 44 deletions vercel-tutor/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";

import Image from "next/image";
import { useSearchParams } from "next/navigation";
import { useState, useEffect } from "react";
import vercelSvg from "@/app/vercel.svg";

Expand All @@ -27,19 +28,30 @@ function Circle() {

export default function Home() {
const [nextUrl, setNextUrl] = useState("#");
const [isLocalhost, setIsLocalhost] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const searchParams = useSearchParams();
const prUrl = searchParams.get("prUrl");

useEffect(() => {
const host = window.location.hostname;

if (host !== "localhost") {
if (
prUrl?.match(
/^https:\/\/github.com\/[a-zA-Z0-9-]+\/vercel-tutor\/pull\/1$/,
)
) {
setNextUrl(prUrl);
} else if (host !== "localhost") {
setNextUrl(
`https://vercel.com/vercel-tutor/step?origin=${encodeURIComponent(
host,
)}&stepName=smaller-triangle`,
);
} else {
setIsLocalhost(true);
}
}, []);
}, [prUrl]);

return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
Expand All @@ -52,48 +64,58 @@ export default function Home() {
height={150}
priority
/>
<div className="text-left font-[family-name:var(--font-geist-sans)] leading-relaxed">
<h1 className="mb-6 font-semibold">
Congratulations! You&apos;ve created your first production
deployment.
</h1>
<ul>
<li className="flex gap-3 items-start">
<span className="inline-flex mt-[0.3rem]">
<Circle />
</span>
<span className="text-secondary">
Next, let&apos;s try to improve this page. Maybe the triangle
logo is too big. To make it easy for you, we&apos;ve already
created a pull request to make the triangle smaller. Check it
out:
</span>
</li>
</ul>
</div>
<div className="flex flex-col gap-4">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground font-medium text-background hover:bg-[#383838] dark:hover:bg-[#ccc] h-12 font-[family-name:var(--font-geist-sans)]"
href={nextUrl}
onClick={(e) => {
if (isLoading) {
e.preventDefault();
} else {
setIsLoading(true);
}
}}
>
{isLoading ? "Loading…" : "View Pull Request"}
</a>
<a
className="font-[family-name:var(--font-geist-sans)] text-secondary hover:underline flex items-center justify-center h-12 font-medium"
href="https://vercel.com/dashboard?utm_source=vercel-tutor&utm_medium=template&utm_campaign=vercel-tutor"
target="_blank"
rel="noopener noreferrer"
>
Go to Dashboard
</a>
</div>
{isLocalhost ? (
<div className="text-left font-[family-name:var(--font-geist-sans)] leading-relaxed">
<h1 className="mb-6 font-semibold">
Please deploy this template to Vercel to continue.
</h1>
</div>
) : (
<>
<div className="text-left font-[family-name:var(--font-geist-sans)] leading-relaxed">
<h1 className="mb-6 font-semibold">
Congratulations! You&apos;ve created your first production
deployment.
</h1>
<ul>
<li className="flex gap-3 items-start">
<span className="inline-flex mt-[0.3rem]">
<Circle />
</span>
<span className="text-secondary">
Next, let&apos;s try to improve this page. Maybe the
triangle logo is too big. To make it easy for you,
we&apos;ve already created a pull request to make the
triangle smaller. Check it out:
</span>
</li>
</ul>
</div>
<div className="flex flex-col gap-4">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground font-medium text-background hover:bg-[#383838] dark:hover:bg-[#ccc] h-12 font-[family-name:var(--font-geist-sans)]"
href={nextUrl}
onClick={(e) => {
if (isLoading) {
e.preventDefault();
} else {
setIsLoading(true);
}
}}
>
{isLoading ? "Loading…" : "View Pull Request"}
</a>
<a
className="font-[family-name:var(--font-geist-sans)] text-secondary hover:underline flex items-center justify-center h-12 font-medium"
href="https://vercel.com/dashboard?utm_source=vercel-tutor&utm_medium=template&utm_campaign=vercel-tutor"
target="_blank"
rel="noopener noreferrer"
>
Go to Dashboard
</a>
</div>
</>
)}
</main>
</div>
);
Expand Down
152 changes: 83 additions & 69 deletions vercel-tutor/app/smaller-triangle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ function Toolbar() {

export default function Home() {
const [nextUrl, setNextUrl] = useState("#");
const [isLocalhost, setIsLocalhost] = useState(false);
const [isLoading, setIsLoading] = useState(false);

useEffect(() => {
Expand All @@ -109,6 +110,8 @@ export default function Home() {
host,
)}&stepName=helpful-links`,
);
} else {
setIsLocalhost(true);
}
}, []);

Expand All @@ -123,75 +126,86 @@ export default function Home() {
height={50}
priority
/>
<div className="text-left font-[family-name:var(--font-geist-sans)] leading-relaxed">
<h1 className="mb-6 font-semibold">
Congratulations! You&apos;ve created your first preview deployment.
</h1>
<ul>
<li className="flex gap-3 items-start mb-6">
<span className="inline-flex mt-[0.3rem]">
<Check />
</span>
<span className="text-secondary">
<del>
Next, let&apos;s try to improve this page. Maybe the triangle
logo is too big. To make it easy for you, we&apos;ve already
created a pull request to make the triangle smaller. Check it
out:
</del>
</span>
</li>
<li className="flex gap-3 items-start mb-6">
<span className="inline-flex mt-[0.3rem]">
<Circle />
</span>
<span className="text-secondary">
Vercel lets you collaborate with others by commenting directly
on a preview deployment. First, click the Vercel Toolbar icon{" "}
<Toolbar /> on the page. Then, select{" "}
<span className="text-foreground">“Comment”</span> in the
toolbar menu. Now, click on the triangle logo at the top. Leave
a comment like{" "}
<span className="text-foreground">
“The triangle looks much better now!”
</span>
</span>
</li>
<li className="flex gap-3 items-start">
<span className="inline-flex mt-[0.3rem]">
<Circle />
</span>
<span className="text-secondary">
Once you&apos;re done commenting, let&apos;s push one more
commit to add some helpful links on this page, and then merge
the pull request.
</span>
</li>
</ul>
</div>
<div className="flex flex-col gap-4">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground font-medium text-background hover:bg-[#383838] dark:hover:bg-[#ccc] h-12 font-[family-name:var(--font-geist-sans)]"
href={nextUrl}
onClick={(e) => {
if (isLoading) {
e.preventDefault();
} else {
setIsLoading(true);
}
}}
>
{isLoading ? "Loading…" : "Push Commit and Merge Pull Request"}
</a>
<a
className="font-[family-name:var(--font-geist-sans)] text-secondary hover:underline flex items-center justify-center h-12 font-medium"
href="https://vercel.com/dashboard?utm_source=vercel-tutor&utm_medium=template&utm_campaign=vercel-tutor"
target="_blank"
rel="noopener noreferrer"
>
Go to Dashboard
</a>
</div>
{isLocalhost ? (
<div className="text-left font-[family-name:var(--font-geist-sans)] leading-relaxed">
<h1 className="mb-6 font-semibold">
Please deploy this template to Vercel to continue.
</h1>
</div>
) : (
<>
<div className="text-left font-[family-name:var(--font-geist-sans)] leading-relaxed">
<h1 className="mb-6 font-semibold">
Congratulations! You&apos;ve created your first preview
deployment.
</h1>
<ul>
<li className="flex gap-3 items-start mb-6">
<span className="inline-flex mt-[0.3rem]">
<Check />
</span>
<span className="text-secondary">
<del>
Next, let&apos;s try to improve this page. Maybe the
triangle logo is too big. To make it easy for you,
we&apos;ve already created a pull request to make the
triangle smaller. Check it out:
</del>
</span>
</li>
<li className="flex gap-3 items-start mb-6">
<span className="inline-flex mt-[0.3rem]">
<Circle />
</span>
<span className="text-secondary">
Vercel lets you collaborate with others by commenting
directly on a preview deployment. First, click the Vercel
Toolbar icon <Toolbar /> on the page. Then, select{" "}
<span className="text-foreground">“Comment”</span> in the
toolbar menu. Now, click on the triangle logo at the top.
Leave a comment like{" "}
<span className="text-foreground">
“The triangle looks much better now!”
</span>
</span>
</li>
<li className="flex gap-3 items-start">
<span className="inline-flex mt-[0.3rem]">
<Circle />
</span>
<span className="text-secondary">
Once you&apos;re done commenting, let&apos;s push one more
commit to add some helpful links on this page, and then
merge the pull request.
</span>
</li>
</ul>
</div>
<div className="flex flex-col gap-4">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground font-medium text-background hover:bg-[#383838] dark:hover:bg-[#ccc] h-12 font-[family-name:var(--font-geist-sans)]"
href={nextUrl}
onClick={(e) => {
if (isLoading) {
e.preventDefault();
} else {
setIsLoading(true);
}
}}
>
{isLoading ? "Loading…" : "Push Commit and Merge Pull Request"}
</a>
<a
className="font-[family-name:var(--font-geist-sans)] text-secondary hover:underline flex items-center justify-center h-12 font-medium"
href="https://vercel.com/dashboard?utm_source=vercel-tutor&utm_medium=template&utm_campaign=vercel-tutor"
target="_blank"
rel="noopener noreferrer"
>
Go to Dashboard
</a>
</div>
</>
)}
</main>
</div>
);
Expand Down

0 comments on commit 3749e19

Please sign in to comment.