From 7f61c809e981b84d9337b01dbc81a0ef99fcad3d Mon Sep 17 00:00:00 2001 From: shadcn Date: Thu, 10 Nov 2022 12:38:41 +0400 Subject: [PATCH 1/5] feat: implement responsive styles for marketing pages --- app/(auth)/layout.tsx | 2 +- app/(auth)/login/page.tsx | 30 ++--- app/(auth)/register/page.tsx | 10 +- app/(marketing)/blog/[...slug]/page.tsx | 17 ++- app/(marketing)/blog/page.tsx | 36 ++--- app/(marketing)/layout.tsx | 37 ++++-- app/(marketing)/page.tsx | 168 ++++++++++++++++++++---- components/icons.tsx | 2 + tailwind.config.js | 4 + 9 files changed, 226 insertions(+), 80 deletions(-) diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx index c0b534d..ca7d2eb 100644 --- a/app/(auth)/layout.tsx +++ b/app/(auth)/layout.tsx @@ -5,5 +5,5 @@ interface AuthLayoutProps { } export default function RootLayout({ children }: AuthLayoutProps) { - return
{children}
+ return
{children}
} diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx index a3da97c..042421c 100644 --- a/app/(auth)/login/page.tsx +++ b/app/(auth)/login/page.tsx @@ -5,32 +5,30 @@ import { UserAuthForm } from "@/components/user-auth-form" export default function LoginPage() { return ( -
+
<> Back -
-
-
- -

Welcome back

-

- Enter your email to sign in to your account -

-
- -

- - Don't have an account? Sign Up - +

+
+ +

Welcome back

+

+ Enter your email to sign in to your account

+ +

+ + Don't have an account? Sign Up + +

) diff --git a/app/(auth)/register/page.tsx b/app/(auth)/register/page.tsx index 30898b7..8489bf0 100644 --- a/app/(auth)/register/page.tsx +++ b/app/(auth)/register/page.tsx @@ -5,16 +5,16 @@ import { UserAuthForm } from "@/components/user-auth-form" export default function RegisterPage() { return ( -
+
Login -
-
-
+
+
+

Create an account

diff --git a/app/(marketing)/blog/[...slug]/page.tsx b/app/(marketing)/blog/[...slug]/page.tsx index 0e21fa2..b5e3164 100644 --- a/app/(marketing)/blog/[...slug]/page.tsx +++ b/app/(marketing)/blog/[...slug]/page.tsx @@ -31,23 +31,26 @@ export default async function PostPage({ params }: PostPageProps) { const mdx = await serialize(post.content) return ( -
-
-

+
+
+

{post.frontMatter.title}

{post.frontMatter.date && ( -

- {formatDate(post.frontMatter.date)} -

+

{formatDate(post.frontMatter.date)}

)}
-
+
+
+
{mdx && (
)} +
+
+
) } diff --git a/app/(marketing)/blog/page.tsx b/app/(marketing)/blog/page.tsx index f9e4562..c4ba1a5 100644 --- a/app/(marketing)/blog/page.tsx +++ b/app/(marketing)/blog/page.tsx @@ -2,29 +2,33 @@ import Link from "next/link" import { Blog } from "@/lib/mdx/sources" import { formatDate } from "@/lib/utils" -import { Icons } from "@/components/icons" export default async function BlogPage() { const posts = await Blog.getAllMdxNodes() return ( -
-

- Blog -

-

- A blog built using MDX content. I copied some sample blog posts from my{" "} - - personal site - - . -

-
+
+
+

+ Blog +

+

+ A blog built using MDX content. I copied some sample blog posts from + my{" "} + + personal site + + . +

+
+
+
+
{posts.map((post) => (
-

+

{post.frontMatter.title}

@@ -37,7 +41,9 @@ export default async function BlogPage() { {post.frontMatter.excerpt && (

{post.frontMatter.excerpt}

)} -
+
+
+
))}
diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx index 65b4a0d..39c7a74 100644 --- a/app/(marketing)/layout.tsx +++ b/app/(marketing)/layout.tsx @@ -7,24 +7,41 @@ interface MarketingLayoutProps { export default function MarketingLayout({ children }: MarketingLayoutProps) { return ( -
-
-
+
+
+
- Taxonomy + Taxonomy -
-
- Login -
+
-
{children}
+
{children}
) } diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx index a23c564..fd432bf 100644 --- a/app/(marketing)/page.tsx +++ b/app/(marketing)/page.tsx @@ -1,33 +1,149 @@ -import { Icons } from "@/components/icons" -import Image from "next/image" import Link from "next/link" +import { Icons } from "@/components/icons" + export default function IndexPage() { return ( -
-
-

- Publishing Platform for Everyone -

-

- A Next.js 13 application built using layouts, server components and - everything new in React 18. -

- - Get Started - - + <> +
+
+ + Follow the development on Twitter + + + + +

+ Publishing Platform for Everyone +

+

+ An open source application built using the new router, server + components and everything new in Next.js 13. +

+
+
+ + Get Started + + + + GitHub + +
+
+
+
- Next.js logo -
+
+
+

+ Features +

+

+ This project is as an experiment to see how a modern app, with + features like authentication, subscriptions, API routes, and static + pages, would work in Next.js 13. +

+
+
+
+
+ + + +
+

Next.js 13

+

+ App dir, Routing, Layouts, Loading UI and API routes. +

+
+
+
+
+
+ + + +
+

React 18

+

+ Server and Client Components. Use hook. +

+
+
+
+
+
+ + + +
+

Database

+

+ ORM using Prisma and deployed on PlanetScale. +

+
+
+
+
+
+ + + +
+

Components

+

+ UI components built using Radix UI and styled with Tailwind + CSS. +

+
+
+
+
+
+ + + +
+

Authentication

+

+ Authentication using NextAuth.js and middlewares. +

+
+
+
+
+
+ + + +
+

Subscriptions

+

+ Free and paid subscriptions using Stripe. +

+
+
+
+
+
+ ) } diff --git a/components/icons.tsx b/components/icons.tsx index a9027a0..4500cc4 100644 --- a/components/icons.tsx +++ b/components/icons.tsx @@ -5,6 +5,7 @@ import { Command, File, FileText, + Github, HelpCircle, Image, Loader2, @@ -35,4 +36,5 @@ export const Icons = { arrowRight: ArrowRight, help: HelpCircle, pizza: Pizza, + gitHub: Github, } diff --git a/tailwind.config.js b/tailwind.config.js index 360faf7..158b7d1 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -8,6 +8,10 @@ module.exports = { "./ui/**/*.{ts,tsx}", ], theme: { + container: { + center: true, + padding: "1.5rem", + }, extend: { colors: { ...colors, From ff1d728882e10907078d3895ae49d225531aa5bf Mon Sep 17 00:00:00 2001 From: shadcn Date: Thu, 10 Nov 2022 12:40:11 +0400 Subject: [PATCH 2/5] fix: minor updates --- app/(marketing)/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx index fd432bf..e74669f 100644 --- a/app/(marketing)/page.tsx +++ b/app/(marketing)/page.tsx @@ -11,7 +11,7 @@ export default function IndexPage() { href="https://twitter.com/shadcn" className="group inline-flex items-center space-x-2 rounded-full px-1 text-sm font-medium" > - Follow the development on Twitter + Follow development on Twitter @@ -116,7 +116,7 @@ export default function IndexPage() { viewBox="0 0 24 24" fill="none" stroke="currentColor" - stroke-width="1" + strokeWidth="1" className="h-12 w-12" > From 219ecbbe21f1f298b4f88a41c9d94f579ee8caa8 Mon Sep 17 00:00:00 2001 From: shadcn Date: Thu, 10 Nov 2022 13:23:07 +0400 Subject: [PATCH 3/5] fix: add spacing to bottom of page --- app/(marketing)/page.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx index e74669f..bcd0f38 100644 --- a/app/(marketing)/page.tsx +++ b/app/(marketing)/page.tsx @@ -144,6 +144,9 @@ export default function IndexPage() {
+
+
+
) } From 074d5814ba3d2cb298ce094f3df161518cc624c1 Mon Sep 17 00:00:00 2001 From: shadcn Date: Thu, 10 Nov 2022 18:56:09 +0400 Subject: [PATCH 4/5] feat: add footer --- app/(marketing)/page.tsx | 57 ++++++++++++++++++++++++++++++++++++++-- package.json | 1 + yarn.lock | 5 ++++ 3 files changed, 61 insertions(+), 2 deletions(-) diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx index bcd0f38..8597400 100644 --- a/app/(marketing)/page.tsx +++ b/app/(marketing)/page.tsx @@ -1,15 +1,34 @@ import Link from "next/link" +import { toWords } from "number-to-words" import { Icons } from "@/components/icons" -export default function IndexPage() { +async function getGitHubStars(): Promise { + const response = await fetch("https://api.github.com/repos/shadcn/taxonomy", { + next: { + revalidate: 60, + }, + }) + + if (!response?.ok) { + return null + } + + const json = await response.json() + + return toWords(json["stargazers_count"]) +} + +export default async function IndexPage() { + const stars = await getGitHubStars() + return ( <>
Follow development on Twitter @@ -147,6 +166,40 @@ export default function IndexPage() {
+
+
+

+ Proudly Open Source +

+

+ Taxonomy is open source and powered by open source software. The + code is available on{" "} + + GitHub + + . I copied this footer from{" "} + + dub.sh + +

+
+

+ {stars} stars on GitHub +

+
+
+
+
) } diff --git a/package.json b/package.json index 3d37e2a..5294d44 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "next-mdx-remote": "^4.1.0", "node-cache": "^5.1.2", "nodemailer": "^6.8.0", + "number-to-words": "^1.2.4", "postmark": "^3.0.14", "prop-types": "^15.8.1", "react": "^18.2.0", diff --git a/yarn.lock b/yarn.lock index 3e33872..06c10d4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2821,6 +2821,11 @@ normalize-range@^0.1.2: resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942" integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA== +number-to-words@^1.2.4: + version "1.2.4" + resolved "https://registry.yarnpkg.com/number-to-words/-/number-to-words-1.2.4.tgz#e0f124de9628f8d86c4eeb89bac6c07699264501" + integrity sha512-/fYevVkXRcyBiZDg6yzZbm0RuaD6i0qRfn8yr+6D0KgBMOndFPxuW10qCHpzs50nN8qKuv78k8MuotZhcVX6Pw== + oauth@^0.9.15: version "0.9.15" resolved "https://registry.yarnpkg.com/oauth/-/oauth-0.9.15.tgz#bd1fefaf686c96b75475aed5196412ff60cfb9c1" From eccfb1b027ef73a314869cd5667bd6f32e6fbf72 Mon Sep 17 00:00:00 2001 From: shadcn Date: Thu, 10 Nov 2022 19:16:04 +0400 Subject: [PATCH 5/5] fix: update github stars --- .env.example | 2 ++ app/(marketing)/page.tsx | 33 ++++++++++++++++++++++++++++----- package.json | 1 - yarn.lock | 5 ----- 4 files changed, 30 insertions(+), 11 deletions(-) diff --git a/.env.example b/.env.example index f6d545b..8bc1dfe 100644 --- a/.env.example +++ b/.env.example @@ -7,6 +7,8 @@ NEXTAUTH_SECRET= GITHUB_CLIENT_ID= GITHUB_CLIENT_SECRET= +GITHUB_ACCESS_TOKEN= + # ----------------------------------------------------------------------------- # Database (MySQL - PlanetScale) # ----------------------------------------------------------------------------- diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx index 8597400..bdf0706 100644 --- a/app/(marketing)/page.tsx +++ b/app/(marketing)/page.tsx @@ -1,10 +1,13 @@ import Link from "next/link" -import { toWords } from "number-to-words" import { Icons } from "@/components/icons" async function getGitHubStars(): Promise { const response = await fetch("https://api.github.com/repos/shadcn/taxonomy", { + headers: { + Accept: "application/vnd.github+json", + Authorization: `Bearer ${process.env.GITHUB_ACCESS_TOKEN}`, + }, next: { revalidate: 60, }, @@ -16,7 +19,7 @@ async function getGitHubStars(): Promise { const json = await response.json() - return toWords(json["stargazers_count"]) + return parseInt(json["stargazers_count"]).toLocaleString() } export default async function IndexPage() { @@ -193,9 +196,29 @@ export default async function IndexPage() {

-

- {stars} stars on GitHub -

+ +
+ + + +
+
+
+
+ {stars} stars on GitHub +
+
+
diff --git a/package.json b/package.json index 5294d44..3d37e2a 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,6 @@ "next-mdx-remote": "^4.1.0", "node-cache": "^5.1.2", "nodemailer": "^6.8.0", - "number-to-words": "^1.2.4", "postmark": "^3.0.14", "prop-types": "^15.8.1", "react": "^18.2.0", diff --git a/yarn.lock b/yarn.lock index 06c10d4..3e33872 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2821,11 +2821,6 @@ normalize-range@^0.1.2: resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942" integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA== -number-to-words@^1.2.4: - version "1.2.4" - resolved "https://registry.yarnpkg.com/number-to-words/-/number-to-words-1.2.4.tgz#e0f124de9628f8d86c4eeb89bac6c07699264501" - integrity sha512-/fYevVkXRcyBiZDg6yzZbm0RuaD6i0qRfn8yr+6D0KgBMOndFPxuW10qCHpzs50nN8qKuv78k8MuotZhcVX6Pw== - oauth@^0.9.15: version "0.9.15" resolved "https://registry.yarnpkg.com/oauth/-/oauth-0.9.15.tgz#bd1fefaf686c96b75475aed5196412ff60cfb9c1"