Skip to content

Commit e880526

Browse files
chibicodechibicode
authored
Add vercel-tutor template (#995)
### Description [Internal] Adding the `vercel-tutor` template. See our Slack conversation for details. ### Type of Change - [x] New Example - [ ] Example updates (Bug fixes, new features, etc.) - [ ] Other (changes to the codebase, but not to examples)
1 parent 5d40d76 commit e880526

File tree

18 files changed

+4007
-4
lines changed

18 files changed

+4007
-4
lines changed

‎.github/CODEOWNERS‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@
22
# https://help.github.com/en/articles/about-code-owners
33

44
# Solutions Eng and Dev Rel are the default owners of everything
5-
* @okbel @lfades @goncy @dominiksipowicz @leerob @steven-tey @lpalmes
5+
* @okbel @lfades @goncy @dominiksipowicz @leerob @lpalmes
66

77
# For examples that are a Monorepo we add the Turbo team and some members
88
# from Solutions and Dev Rel
9-
solutions/monorepo @vercel/turbo-oss @goncy @lfades @leerob @steven-tey @lpalmes
10-
solutions/microfrontends @vercel/turbo-oss @goncy @lfades @leerob @steven-tey @lpalmes
11-
solutions/testing @vercel/turbo-oss @goncy @lfades @leerob @steven-tey @lpalmes
9+
solutions/monorepo @vercel/turbo-oss @goncy @lfades @leerob @lpalmes
10+
solutions/microfrontends @vercel/turbo-oss @goncy @lfades @leerob @lpalmes
11+
solutions/testing @vercel/turbo-oss @goncy @lfades @leerob @lpalmes
1212

1313
# For the build output API the engineering team takes care of it.
1414
# A member of Solutions and Dev Rel is also added
1515
build-output-api @tootallnate @EndangeredMassa @lfades @leerob @lpalmes
16+
17+
vercel-tutor @chibicode

‎vercel-tutor/.gitignore‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.*
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/versions
12+
13+
# testing
14+
/coverage
15+
16+
# next.js
17+
/.next/
18+
/out/
19+
20+
# production
21+
/build
22+
23+
# misc
24+
.DS_Store
25+
*.pem
26+
27+
# debug
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
.pnpm-debug.log*
32+
33+
# env files (can opt-in for committing if needed)
34+
.env*
35+
36+
# vercel
37+
.vercel
38+
39+
# typescript
40+
*.tsbuildinfo
41+
next-env.d.ts

‎vercel-tutor/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Vercel Tutor

‎vercel-tutor/app/favicon.ico‎

25.3 KB
Binary file not shown.

‎vercel-tutor/app/globals.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
:root {
6+
--background: #ffffff;
7+
--foreground: #171717;
8+
--secondary: #454545;
9+
}
10+
11+
@media (prefers-color-scheme: dark) {
12+
:root {
13+
--background: #0a0a0a;
14+
--foreground: #ededed;
15+
--secondary: #878787;
16+
}
17+
}
18+
19+
body {
20+
color: var(--foreground);
21+
background: var(--background);
22+
font-family: Arial, Helvetica, sans-serif;
23+
}

‎vercel-tutor/app/helpful-links/page.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
"use client";
2+
3+
import Image from "next/image";
4+
import vercelSvg from "@/app/vercel.svg";
5+
6+
function Circle() {
7+
return (
8+
<svg
9+
aria-hidden="true"
10+
width="16"
11+
height="16"
12+
viewBox="0 0 16 16"
13+
fill="none"
14+
xmlns="http://www.w3.org/2000/svg"
15+
>
16+
<path
17+
d="M15.25 8C15.25 12.0041 12.0041 15.25 8 15.25C3.99594 15.25 0.75 12.0041 0.75 8C0.75 3.99594 3.99594 0.75 8 0.75C12.0041 0.75 15.25 3.99594 15.25 8Z"
18+
stroke="var(--secondary)"
19+
strokeWidth="1.5"
20+
strokeLinecap="square"
21+
strokeLinejoin="round"
22+
/>
23+
</svg>
24+
);
25+
}
26+
27+
export default function Home() {
28+
return (
29+
<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">
30+
<main className="flex flex-col gap-10 row-start-2 max-w-2xl w-full font-[family-name:var(--font-geist-sans)]">
31+
<Image
32+
className="invert dark:invert-0"
33+
src={vercelSvg}
34+
alt="Vercel logo"
35+
width={50}
36+
height={50}
37+
priority
38+
/>
39+
<div className="text-left font-[family-name:var(--font-geist-sans)] leading-relaxed">
40+
<h1 className="mb-6 font-semibold">
41+
Let&apos;s ship things on Vercel.
42+
</h1>
43+
<ul>
44+
<li className="flex gap-3 items-start">
45+
<span className="inline-flex mt-[0.3rem]">
46+
<Circle />
47+
</span>
48+
<span className="text-secondary">
49+
Explore our plans and documentation to learn more.
50+
</span>
51+
</li>
52+
</ul>
53+
</div>
54+
<div className="flex gap-4 items-center flex-col sm:flex-row">
55+
<a
56+
className="w-full 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)]"
57+
href="https://vercel.com/pricing?utm_source=vercel-tutor&utm_medium=template&utm_campaign=vercel-tutor"
58+
target="_blank"
59+
rel="noopener noreferrer"
60+
>
61+
View Plans and Pricing
62+
</a>
63+
<a
64+
className="w-full rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent h-12"
65+
href="https://vercel.com/docs?utm_source=vercel-tutor&utm_medium=template&utm_campaign=vercel-tutor"
66+
target="_blank"
67+
rel="noopener noreferrer"
68+
>
69+
Read Documentation
70+
</a>
71+
</div>
72+
</main>
73+
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
74+
<a
75+
className="flex items-center gap-2 hover:underline hover:underline-offset-4 text-secondary"
76+
href="https://vercel.com/dashboard?utm_source=vercel-tutor&utm_medium=template&utm_campaign=vercel-tutor"
77+
target="_blank"
78+
rel="noopener noreferrer"
79+
>
80+
Go to Dashboard →
81+
</a>
82+
</footer>
83+
</div>
84+
);
85+
}

‎vercel-tutor/app/layout.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import type { Metadata } from "next";
2+
import { Geist } from "next/font/google";
3+
import "./globals.css";
4+
import React from "react";
5+
6+
const geistSans = Geist({
7+
variable: "--font-geist-sans",
8+
subsets: ["latin"],
9+
});
10+
11+
export const metadata: Metadata = {
12+
title: "Vercel Tutor",
13+
description: "Get started with Vercel.",
14+
};
15+
16+
export default function RootLayout({
17+
children,
18+
}: Readonly<{
19+
children: React.ReactNode;
20+
}>) {
21+
return (
22+
<html lang="en">
23+
<body className={`${geistSans.variable} antialiased`}>{children}</body>
24+
</html>
25+
);
26+
}

‎vercel-tutor/app/page.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
"use client";
2+
3+
import Image from "next/image";
4+
import { useState, useEffect } from "react";
5+
import vercelSvg from "@/app/vercel.svg";
6+
7+
function Circle() {
8+
return (
9+
<svg
10+
aria-hidden="true"
11+
width="16"
12+
height="16"
13+
viewBox="0 0 16 16"
14+
fill="none"
15+
xmlns="http://www.w3.org/2000/svg"
16+
>
17+
<path
18+
d="M15.25 8C15.25 12.0041 12.0041 15.25 8 15.25C3.99594 15.25 0.75 12.0041 0.75 8C0.75 3.99594 3.99594 0.75 8 0.75C12.0041 0.75 15.25 3.99594 15.25 8Z"
19+
stroke="var(--secondary)"
20+
strokeWidth="1.5"
21+
strokeLinecap="square"
22+
strokeLinejoin="round"
23+
/>
24+
</svg>
25+
);
26+
}
27+
28+
export default function Home() {
29+
const [nextUrl, setNextUrl] = useState("#");
30+
31+
useEffect(() => {
32+
const host = window.location.hostname;
33+
34+
if (host !== "localhost") {
35+
setNextUrl(
36+
`https://vercel.com/vercel-tutor/step?origin=${encodeURIComponent(
37+
host,
38+
)}&stepName=smaller-triangle`,
39+
);
40+
}
41+
}, []);
42+
43+
return (
44+
<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">
45+
<main className="flex flex-col gap-10 row-start-2 max-w-2xl w-full font-[family-name:var(--font-geist-sans)]">
46+
<Image
47+
className="invert dark:invert-0"
48+
src={vercelSvg}
49+
alt="Vercel logo"
50+
width={150}
51+
height={150}
52+
priority
53+
/>
54+
<div className="text-left font-[family-name:var(--font-geist-sans)] leading-relaxed">
55+
<h1 className="mb-6 font-semibold">
56+
Congratulations! You&apos;ve created your first production
57+
deployment.
58+
</h1>
59+
<ul>
60+
<li className="flex gap-3 items-start">
61+
<span className="inline-flex mt-[0.3rem]">
62+
<Circle />
63+
</span>
64+
<span className="text-secondary">
65+
Next, let&apos;s try to improve this page. Maybe the triangle
66+
logo is too big. To make it easy for you, we&apos;ve already
67+
created a pull request to make the triangle smaller. Check it
68+
out:
69+
</span>
70+
</li>
71+
</ul>
72+
</div>
73+
<div className="flex flex-col gap-4">
74+
<a
75+
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)]"
76+
href={nextUrl}
77+
>
78+
View Pull Request
79+
</a>
80+
<a
81+
className="font-[family-name:var(--font-geist-sans)] text-secondary hover:underline flex items-center justify-center h-12 font-medium"
82+
href="https://vercel.com/dashboard?utm_source=vercel-tutor&utm_medium=template&utm_campaign=vercel-tutor"
83+
target="_blank"
84+
rel="noopener noreferrer"
85+
>
86+
Go to Dashboard
87+
</a>
88+
</div>
89+
</main>
90+
</div>
91+
);
92+
}

0 commit comments

Comments
 (0)