Skip to content

Commit 87b2321

Browse files
enZaneenZane
authored
✨ feat: Update next starter to latest version (#146)
* ✨ feat: Update next starter to latest version * ✨ feat: Update component props from shadcn
1 parent d27bd8e commit 87b2321

File tree

38 files changed

+2808
-2296
lines changed

38 files changed

+2808
-2296
lines changed

‎starters/next/app/[[...slug]]/page.tsx‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,23 @@ import { FragmentOf, readFragment } from 'gql.tada'
22
import { headers } from 'next/headers'
33
import { redirect } from 'next/navigation'
44

5-
import NodeArticleComponent from '@/integration/node/NodeArticle'
6-
import NodePageComponent from '@/integration/node/NodePage'
7-
import TermTagsComponent from '@/integration/taxonomy/TermTags'
8-
import {
9-
NodeArticleFragment,
10-
NodePageFragment,
11-
} from '@/graphql/fragments/node'
5+
import { NodeArticleFragment, NodePageFragment } from '@/graphql/fragments/node'
126
import { TermTagsFragment } from '@/graphql/fragments/terms'
137
import { graphql } from '@/graphql/gql.tada'
148
import { EntityFragmentType } from '@/graphql/types'
9+
import NodeArticleComponent from '@/integration/node/NodeArticle'
10+
import NodePageComponent from '@/integration/node/NodePage'
11+
import TermTagsComponent from '@/integration/taxonomy/TermTags'
1512
import { getClient } from '@/utils/client'
1613
import { calculatePath } from '@/utils/routes'
1714

18-
import { Header } from '@/components/blocks'
19-
import { Footer } from '@/components/blocks'
15+
import { PageProps } from '@/.next/types/app/layout'
16+
import { Footer, Header } from '@/components/blocks'
2017
import { MenuFragment, MenuItemFragment } from '@/graphql/fragments/menu'
2118

2219
async function getDrupalData({ params }: { params: { slug: string[] } }) {
2320
const pathFromParams = params.slug?.join('/') || '/home'
24-
const requestUrl = headers().get('x-url')
21+
const requestUrl = (await headers()).get('x-url')
2522
const path = calculatePath({
2623
path: pathFromParams,
2724
url: requestUrl!,
@@ -131,9 +128,9 @@ async function getDrupalData({ params }: { params: { slug: string[] } }) {
131128
}
132129
}
133130

134-
export default async function Page({ params }: { params: { slug: string[] } }) {
131+
export default async function Page({ params }: PageProps) {
135132
const { type, entity, environment, header, footer } = await getDrupalData({
136-
params,
133+
params: await params,
137134
})
138135
if (!type || !entity) {
139136
return null

‎starters/next/app/globals.css‎

Lines changed: 124 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,130 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
4-
@layer base {
5-
:root {
6-
--background: 0 0% 100%;
7-
--foreground: 0 0% 3.9%;
8-
--card: 0 0% 100%;
9-
--card-foreground: 0 0% 3.9%;
10-
--popover: 0 0% 100%;
11-
--popover-foreground: 0 0% 3.9%;
12-
--primary: 0 0% 9%;
13-
--primary-foreground: 0 0% 98%;
14-
--secondary: 0 0% 96.1%;
15-
--secondary-foreground: 0 0% 9%;
16-
--muted: 0 0% 96.1%;
17-
--muted-foreground: 0 0% 45.1%;
18-
--accent: 0 0% 96.1%;
19-
--accent-foreground: 0 0% 9%;
20-
--destructive: 0 84.2% 60.2%;
21-
--destructive-foreground: 0 0% 98%;
22-
--border: 0 0% 89.8%;
23-
--input: 0 0% 89.8%;
24-
--ring: 0 0% 3.9%;
25-
--chart-1: 12 76% 61%;
26-
--chart-2: 173 58% 39%;
27-
--chart-3: 197 37% 24%;
28-
--chart-4: 43 74% 66%;
29-
--chart-5: 27 87% 67%;
30-
--radius: 0.5rem;
1+
@import 'tailwindcss';
2+
3+
@import 'tw-animate-css';
4+
@plugin '@tailwindcss/typography';
5+
6+
@custom-variant dark (&:is(.dark *));
7+
8+
@theme inline {
9+
--color-background: var(--background);
10+
--color-foreground: var(--foreground);
11+
--font-sans: var(--font-geist-sans);
12+
--font-mono: var(--font-geist-mono);
13+
--color-sidebar-ring: var(--sidebar-ring);
14+
--color-sidebar-border: var(--sidebar-border);
15+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
16+
--color-sidebar-accent: var(--sidebar-accent);
17+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
18+
--color-sidebar-primary: var(--sidebar-primary);
19+
--color-sidebar-foreground: var(--sidebar-foreground);
20+
--color-sidebar: var(--sidebar);
21+
--color-chart-5: var(--chart-5);
22+
--color-chart-4: var(--chart-4);
23+
--color-chart-3: var(--chart-3);
24+
--color-chart-2: var(--chart-2);
25+
--color-chart-1: var(--chart-1);
26+
--color-ring: var(--ring);
27+
--color-input: var(--input);
28+
--color-border: var(--border);
29+
--color-destructive: var(--destructive);
30+
--color-accent-foreground: var(--accent-foreground);
31+
--color-accent: var(--accent);
32+
--color-muted-foreground: var(--muted-foreground);
33+
--color-muted: var(--muted);
34+
--color-secondary-foreground: var(--secondary-foreground);
35+
--color-secondary: var(--secondary);
36+
--color-primary-foreground: var(--primary-foreground);
37+
--color-primary: var(--primary);
38+
--color-popover-foreground: var(--popover-foreground);
39+
--color-popover: var(--popover);
40+
--color-card-foreground: var(--card-foreground);
41+
--color-card: var(--card);
42+
--radius-sm: calc(var(--radius) - 4px);
43+
--radius-md: calc(var(--radius) - 2px);
44+
--radius-lg: var(--radius);
45+
--radius-xl: calc(var(--radius) + 4px);
46+
}
47+
48+
@utility container {
49+
margin-inline: auto;
50+
padding-inline: 2rem;
51+
@media (width >= --theme(--breakpoint-sm)) {
52+
max-width: none;
3153
}
32-
.dark {
33-
--background: 0 0% 3.9%;
34-
--foreground: 0 0% 98%;
35-
--card: 0 0% 3.9%;
36-
--card-foreground: 0 0% 98%;
37-
--popover: 0 0% 3.9%;
38-
--popover-foreground: 0 0% 98%;
39-
--primary: 0 0% 98%;
40-
--primary-foreground: 0 0% 9%;
41-
--secondary: 0 0% 14.9%;
42-
--secondary-foreground: 0 0% 98%;
43-
--muted: 0 0% 14.9%;
44-
--muted-foreground: 0 0% 63.9%;
45-
--accent: 0 0% 14.9%;
46-
--accent-foreground: 0 0% 98%;
47-
--destructive: 0 62.8% 30.6%;
48-
--destructive-foreground: 0 0% 98%;
49-
--border: 0 0% 14.9%;
50-
--input: 0 0% 14.9%;
51-
--ring: 0 0% 83.1%;
52-
--chart-1: 220 70% 50%;
53-
--chart-2: 160 60% 45%;
54-
--chart-3: 30 80% 55%;
55-
--chart-4: 280 65% 60%;
56-
--chart-5: 340 75% 55%;
54+
@media (width >= 1400px) {
55+
max-width: 1400px;
5756
}
5857
}
58+
59+
:root {
60+
--radius: 0.625rem;
61+
--background: oklch(1 0 0);
62+
--foreground: oklch(0.145 0 0);
63+
--card: oklch(1 0 0);
64+
--card-foreground: oklch(0.145 0 0);
65+
--popover: oklch(1 0 0);
66+
--popover-foreground: oklch(0.145 0 0);
67+
--primary: oklch(0.205 0 0);
68+
--primary-foreground: oklch(0.985 0 0);
69+
--secondary: oklch(0.97 0 0);
70+
--secondary-foreground: oklch(0.205 0 0);
71+
--muted: oklch(0.97 0 0);
72+
--muted-foreground: oklch(0.556 0 0);
73+
--accent: oklch(0.97 0 0);
74+
--accent-foreground: oklch(0.205 0 0);
75+
--destructive: oklch(0.577 0.245 27.325);
76+
--border: oklch(0.922 0 0);
77+
--input: oklch(0.922 0 0);
78+
--ring: oklch(0.708 0 0);
79+
--chart-1: oklch(0.646 0.222 41.116);
80+
--chart-2: oklch(0.6 0.118 184.704);
81+
--chart-3: oklch(0.398 0.07 227.392);
82+
--chart-4: oklch(0.828 0.189 84.429);
83+
--chart-5: oklch(0.769 0.188 70.08);
84+
--sidebar: oklch(0.985 0 0);
85+
--sidebar-foreground: oklch(0.145 0 0);
86+
--sidebar-primary: oklch(0.205 0 0);
87+
--sidebar-primary-foreground: oklch(0.985 0 0);
88+
--sidebar-accent: oklch(0.97 0 0);
89+
--sidebar-accent-foreground: oklch(0.205 0 0);
90+
--sidebar-border: oklch(0.922 0 0);
91+
--sidebar-ring: oklch(0.708 0 0);
92+
}
93+
94+
.dark {
95+
--background: oklch(0.145 0 0);
96+
--foreground: oklch(0.985 0 0);
97+
--card: oklch(0.205 0 0);
98+
--card-foreground: oklch(0.985 0 0);
99+
--popover: oklch(0.205 0 0);
100+
--popover-foreground: oklch(0.985 0 0);
101+
--primary: oklch(0.922 0 0);
102+
--primary-foreground: oklch(0.205 0 0);
103+
--secondary: oklch(0.269 0 0);
104+
--secondary-foreground: oklch(0.985 0 0);
105+
--muted: oklch(0.269 0 0);
106+
--muted-foreground: oklch(0.708 0 0);
107+
--accent: oklch(0.269 0 0);
108+
--accent-foreground: oklch(0.985 0 0);
109+
--destructive: oklch(0.704 0.191 22.216);
110+
--border: oklch(1 0 0 / 10%);
111+
--input: oklch(1 0 0 / 15%);
112+
--ring: oklch(0.556 0 0);
113+
--chart-1: oklch(0.488 0.243 264.376);
114+
--chart-2: oklch(0.696 0.17 162.48);
115+
--chart-3: oklch(0.769 0.188 70.08);
116+
--chart-4: oklch(0.627 0.265 303.9);
117+
--chart-5: oklch(0.645 0.246 16.439);
118+
--sidebar: oklch(0.205 0 0);
119+
--sidebar-foreground: oklch(0.985 0 0);
120+
--sidebar-primary: oklch(0.488 0.243 264.376);
121+
--sidebar-primary-foreground: oklch(0.985 0 0);
122+
--sidebar-accent: oklch(0.269 0 0);
123+
--sidebar-accent-foreground: oklch(0.985 0 0);
124+
--sidebar-border: oklch(1 0 0 / 10%);
125+
--sidebar-ring: oklch(0.556 0 0);
126+
}
127+
59128
@layer base {
60129
* {
61130
@apply border-border;

‎starters/next/components/blocks/Article/Article.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export const Article = ({
6363
/>
6464
</div>
6565
<div className="mx-auto mb-8 max-w-4xl px-4 sm:px-6 lg:px-8">
66-
<h1 className="mb-6 text-4xl font-bold text-gray-900 dark:text-gray-100 sm:text-5xl md:text-6xl">
66+
<h1 className="mb-6 text-4xl font-bold text-gray-900 sm:text-5xl md:text-6xl dark:text-gray-100">
6767
{title}
6868
</h1>
6969
<div className="mb-8 flex items-center justify-between">
@@ -80,7 +80,7 @@ export const Article = ({
8080
))}
8181
</div>
8282
)}
83-
{summary && <p className="mb-8 italic text-gray-400">{summary}</p>}
83+
{summary && <p className="mb-8 text-gray-400 italic">{summary}</p>}
8484
<RichText content={content} />
8585
</div>
8686
</article>

‎starters/next/components/blocks/CTA/CTA.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,14 @@ export const CTA = ({
3131
return (
3232
<div className={cn(ctaVariants(), className)} {...props}>
3333
{subheading && (
34-
<h5 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100 sm:text-xl md:text-2xl">
34+
<h5 className="mb-4 text-lg font-semibold text-gray-900 sm:text-xl md:text-2xl dark:text-gray-100">
3535
{subheading}
3636
</h5>
3737
)}
38-
<h2 className="mb-5 text-3xl font-bold text-gray-900 dark:text-gray-100 sm:text-4xl md:text-5xl">
38+
<h2 className="mb-5 text-3xl font-bold text-gray-900 sm:text-4xl md:text-5xl dark:text-gray-100">
3939
{heading}
4040
</h2>
41-
<p className="mx-auto mb-4 max-w-2xl text-muted-foreground">
41+
<p className="text-muted-foreground mx-auto mb-4 max-w-2xl">
4242
{description}
4343
</p>
4444
{actions && actions.length > 0 && (

‎starters/next/components/blocks/CardGroup/CardGroup.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,17 +41,17 @@ export const CardGroup = ({
4141
<div className="container mx-auto">
4242
<div className="mb-12 text-center">
4343
{subheading && (
44-
<h5 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100 sm:text-xl md:text-2xl">
44+
<h5 className="mb-4 text-lg font-semibold text-gray-900 sm:text-xl md:text-2xl dark:text-gray-100">
4545
{subheading}
4646
</h5>
4747
)}
4848
{heading && (
49-
<h2 className="mb-5 text-3xl font-bold text-gray-900 dark:text-gray-100 sm:text-4xl md:text-5xl">
49+
<h2 className="mb-5 text-3xl font-bold text-gray-900 sm:text-4xl md:text-5xl dark:text-gray-100">
5050
{heading}
5151
</h2>
5252
)}
5353
{description && (
54-
<p className="mx-auto max-w-2xl text-muted-foreground">
54+
<p className="text-muted-foreground mx-auto max-w-2xl">
5555
{description}
5656
</p>
5757
)}

‎starters/next/components/blocks/FAQ/FAQ.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,11 @@ export const FAQ = ({
3333
}: FAQProps) => {
3434
return (
3535
<div className={cn(faqVariants(), className)} {...props}>
36-
<h2 className="mb-5 text-center text-3xl font-bold text-gray-900 dark:text-gray-100 sm:text-4xl md:text-5xl">
36+
<h2 className="mb-5 text-center text-3xl font-bold text-gray-900 sm:text-4xl md:text-5xl dark:text-gray-100">
3737
{heading}
3838
</h2>
3939
{description && (
40-
<p className="mb-8 text-center text-lg text-muted-foreground">
40+
<p className="text-muted-foreground mb-8 text-center text-lg">
4141
{description}
4242
</p>
4343
)}

‎starters/next/components/blocks/Footer/Footer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,11 @@ export const Footer = ({
5252
<FooterColumn key={index} {...column} />
5353
))}
5454
</div>
55-
<div className="mt-12 flex flex-col items-center justify-between border-t border-border pt-8 md:flex-row">
55+
<div className="border-border mt-12 flex flex-col items-center justify-between border-t pt-8 md:flex-row">
5656
<div className="mb-4 md:mb-0">
5757
<img src={logo.src} alt={logo.alt} className="h-8 w-auto" />
5858
</div>
59-
<div className="text-sm text-muted-foreground">{copyrightText}</div>
59+
<div className="text-muted-foreground text-sm">{copyrightText}</div>
6060
</div>
6161
</div>
6262
</footer>

‎starters/next/components/blocks/Header/Header.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,17 +42,17 @@ const MobileNavItem = ({ item }: { item: NavigationMenuItemProps }) => {
4242
<div>
4343
<button
4444
onClick={() => setIsOpen(!isOpen)}
45-
className="flex w-full items-center justify-between px-4 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground"
45+
className="text-foreground hover:bg-accent hover:text-accent-foreground flex w-full items-center justify-between px-4 py-2 text-sm font-medium"
4646
>
4747
{item.label}
4848
{isOpen ? (
49-
<ChevronUp className="h-4 w-4" />
49+
<ChevronUp className="size-4" />
5050
) : (
51-
<ChevronDown className="h-4 w-4" />
51+
<ChevronDown className="size-4" />
5252
)}
5353
</button>
5454
{isOpen && (
55-
<ul className="ml-4 border-l border-border">
55+
<ul className="border-border ml-4 border-l">
5656
{item.children.map((child, index) => (
5757
<MobileNavItem key={index} item={child} />
5858
))}
@@ -62,7 +62,7 @@ const MobileNavItem = ({ item }: { item: NavigationMenuItemProps }) => {
6262
) : (
6363
<a
6464
href={item.href ?? undefined}
65-
className="block w-full px-4 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground"
65+
className="text-foreground hover:bg-accent hover:text-accent-foreground block w-full px-4 py-2 text-sm font-medium"
6666
>
6767
{item.label}
6868
</a>
@@ -110,9 +110,9 @@ export const Header = ({
110110
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
111111
>
112112
{mobileMenuOpen ? (
113-
<X className="h-6 w-6" />
113+
<X className="size-6" />
114114
) : (
115-
<Menu className="h-6 w-6" />
115+
<Menu className="size-6" />
116116
)}
117117
</MobileMenuButton>
118118
</div>

‎starters/next/components/blocks/Hero/Hero.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,10 @@ export const Hero = ({
3434
<div className={cn(heroVariants(), className)} {...props}>
3535
<div className="container mx-auto grid items-center gap-8 lg:grid-cols-2">
3636
<div className="space-y-4 text-center lg:text-left">
37-
<h1 className="mb-6 text-4xl font-bold text-gray-900 dark:text-gray-100 sm:text-5xl md:text-6xl">
37+
<h1 className="mb-6 text-4xl font-bold text-gray-900 sm:text-5xl md:text-6xl dark:text-gray-100">
3838
{heading}
3939
</h1>
40-
<p className="mx-auto max-w-2xl text-lg text-muted-foreground lg:mx-0">
40+
<p className="text-muted-foreground mx-auto max-w-2xl text-lg lg:mx-0">
4141
{description}
4242
</p>
4343
{actions && actions.length > 0 && (

‎starters/next/components/blocks/LogoGroup/LogoGroup.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const LogoGroup = ({
3434
return (
3535
<div className={cn(logoGroupVariants(), className)} {...props}>
3636
<div className="container mx-auto">
37-
<h2 className="mb-5 text-3xl font-bold text-gray-900 dark:text-gray-100 sm:text-4xl md:text-5xl">
37+
<h2 className="mb-5 text-3xl font-bold text-gray-900 sm:text-4xl md:text-5xl dark:text-gray-100">
3838
{heading}
3939
</h2>
4040
<div className="flex flex-wrap items-center justify-center gap-8 md:gap-12">

0 commit comments

Comments
 (0)