Skip to content

Commit 65a6499

Browse files
hasparushasparus
committed
Tweak colors
1 parent d1d7b60 commit 65a6499

File tree

5 files changed

+181
-160
lines changed

5 files changed

+181
-160
lines changed

‎src/components/code-blocks/index.tsx

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { Code } from "nextra/components"
2+
import { ComponentPropsWithoutRef } from "react"
3+
import { clsx } from "clsx"
24

35
import { Pre } from "@/components/pre"
46

@@ -10,11 +12,11 @@ import _Code1 from "./code1.mdx"
1012
import _Code2 from "./code2.mdx"
1113
import _Code3 from "./code3.mdx"
1214
import _Code4 from "./code4.mdx"
13-
import _V1 from "./v1.mdx"
14-
import _V2 from "./v2.mdx"
15-
import _V3 from "./v3.mdx"
16-
import _V4 from "./v4.mdx"
17-
import _V5 from "./v5.mdx"
15+
export { default as V1 } from "./v1.mdx"
16+
export { default as V2 } from "./v2.mdx"
17+
export { default as V3 } from "./v3.mdx"
18+
export { default as V4 } from "./v4.mdx"
19+
export { default as V5 } from "./v5.mdx"
1820
export { default as Query } from "./query.mdx"
1921
export { default as Schema } from "./schema.mdx"
2022
import _QueryHeroFriends from "./query.hero-friends.mdx"
@@ -26,6 +28,17 @@ const components = {
2628
code: Code,
2729
}
2830

31+
export const LandingPagePre = (props: ComponentPropsWithoutRef<typeof Pre>) => (
32+
<Pre
33+
{...props}
34+
className={clsx(
35+
props.className,
36+
"!bg-neu-0/[.48] backdrop-blur-[6px] [scrollbar-width:none] [&::-webkit-scrollbar]:size-0 max-xs:[&_span]:!text-xs",
37+
)}
38+
tabIndex={-1}
39+
/>
40+
)
41+
2942
// Since we use `layout: 'raw'` in index page, only `<a />` element will be replaced, but not
3043
// `<pre />` and `<code />`, for this reason we pass `components` to each MDX partial file.
3144
// This code could be removed in Nextra v4
@@ -38,11 +51,7 @@ export const Code4 = () => <_Code4 components={components} />
3851
export const CodeA = () => <_CodeA components={components} />
3952
export const CodeB = () => <_CodeB components={components} />
4053
export const CodeC = () => <_CodeC components={components} />
41-
export const V1 = () => <_V1 components={components} />
42-
export const V2 = () => <_V2 components={components} />
43-
export const V3 = () => <_V3 components={components} />
44-
export const V4 = () => <_V4 components={components} />
45-
export const V5 = () => <_V5 components={components} />
54+
4655
export const QueryHeroFriends = () => (
4756
<_QueryHeroFriends components={components} />
4857
)

‎src/components/index-page/graphql-advantages/consistency.tsx

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,10 @@
1-
import { ComponentPropsWithoutRef, useEffect, useRef } from "react"
2-
import { clsx } from "clsx"
1+
import { useEffect, useRef } from "react"
32
import { Code } from "nextra/components"
43

5-
import { Pre } from "@/components/pre"
6-
7-
import { Query, Schema } from "../../code-blocks"
4+
import { LandingPagePre, Query, Schema } from "../../code-blocks"
85

96
const components = {
10-
pre: (props: ComponentPropsWithoutRef<typeof Pre>) => (
11-
<Pre
12-
{...props}
13-
// todo: this bg style might need to become global for all code blocks
14-
className={clsx(
15-
props.className,
16-
"!bg-neu-0/[.48] backdrop-blur-[6px] [scrollbar-width:none] [&::-webkit-scrollbar]:size-0 max-xs:[&_span]:!text-xs",
17-
)}
18-
tabIndex={-1}
19-
/>
20-
),
7+
pre: LandingPagePre,
218
code: Code,
229
}
2310

‎src/components/index-page/graphql-advantages/versionless.css

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
.add,
2+
.remove {
3+
@apply shadow-[2px_0_currentColor_inset];
4+
}
5+
6+
.add {
7+
@apply !bg-green-200/35 text-green-300 dark:!bg-green-200/15;
8+
9+
&::before {
10+
@apply absolute start-1.5 content-['+'];
11+
}
12+
}
13+
14+
.remove {
15+
@apply !bg-red-200/35 text-red-300 dark:!bg-red-200/15;
16+
17+
&::before {
18+
@apply absolute start-1.5 content-['-'];
19+
}
20+
}
21+
22+
.versionless-figure {
23+
@apply relative left-0 flex h-full select-none;
24+
25+
& pre,
26+
& code,
27+
.v1,
28+
.v2,
29+
.v3,
30+
.v4,
31+
.v5 {
32+
@apply h-full;
33+
}
34+
35+
& pre {
36+
@apply border-none;
37+
background: none !important;
38+
}
39+
40+
& code {
41+
grid-auto-rows: min-content;
42+
}
43+
44+
.v1,
45+
.v2,
46+
.v3,
47+
.v4 {
48+
@apply w-1/2 shrink-0 border-r border-neu-200 dark:border-neu-50;
49+
}
50+
51+
.v5 {
52+
@apply w-full shrink-0;
53+
}
54+
55+
&[data-step="1"] {
56+
.v2 {
57+
opacity: 1;
58+
transition: opacity 0.5s ease-in-out;
59+
}
60+
}
61+
62+
&[data-step="2"] {
63+
left: calc(-1 * 50%);
64+
transition: left 0.5s ease-in-out;
65+
}
66+
67+
&[data-step="3"] {
68+
left: calc(-2 * 50%);
69+
transition: left 0.5s ease-in-out;
70+
}
71+
72+
&[data-step="4"] {
73+
left: calc(-3 * 50%);
74+
transition: left 0.5s ease-in-out;
75+
}
76+
77+
&[data-step="5"] {
78+
left: calc(-4 * 50%);
79+
transition: left 0.5s ease-in-out;
80+
}
81+
82+
&[data-step="6"] {
83+
.v5 {
84+
left: calc(-4 * 50%);
85+
opacity: 0;
86+
transition: opacity 0.5s ease-in-out;
87+
}
88+
}
89+
90+
&[data-step="0"],
91+
&[data-step="6"] {
92+
.v2 {
93+
@apply opacity-0;
94+
}
95+
}
96+
97+
&[data-step="1"] .v2 code > span:nth-child(5) {
98+
@apply add;
99+
}
100+
101+
&[data-step="2"] .v3 code > span:nth-child(6) {
102+
@apply add;
103+
}
104+
105+
&[data-step="3"] .v4 code > {
106+
span:nth-child(7),
107+
span:nth-last-child(-n + 5) {
108+
@apply add;
109+
}
110+
}
111+
112+
&[data-step="4"] {
113+
.v4 code > span:nth-child(6) {
114+
@apply remove;
115+
}
116+
117+
.v5 code > span:nth-child(6) {
118+
@apply add;
119+
}
120+
}
121+
}

‎src/components/index-page/graphql-advantages/versionless.tsx

Lines changed: 38 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
import { useEffect, useRef } from "react"
2+
import { Code } from "nextra/components"
23
import { clsx } from "clsx"
34

4-
import { V1, V2, V3, V4, V5 } from "../../code-blocks"
5+
import { LandingPagePre, V1, V2, V3, V4, V5 } from "../../code-blocks"
6+
7+
import "./versionless.css"
8+
9+
const components = {
10+
pre: LandingPagePre,
11+
code: Code,
12+
}
513

614
export function VersionlessFigure() {
715
const ref = useRef<HTMLDivElement>(null)
@@ -12,7 +20,7 @@ export function VersionlessFigure() {
1220

1321
function move() {
1422
i = (i + 1) % 7
15-
inView.className = "step" + i
23+
inView.dataset.step = i.toString()
1624
}
1725

1826
move()
@@ -23,54 +31,36 @@ export function VersionlessFigure() {
2331
}, [])
2432

2533
return (
26-
<div className="index-gradient">
27-
<section
28-
className="conf-block container flex justify-around gap-14 max-lg:flex-col lg:flex-row-reverse lg:*:w-1/2"
29-
id="without-versions"
34+
<section
35+
className="flex w-full bg-gradient-to-b from-pri-lighter/[.05] to-pri-lighter/40 px-[14px] py-[30px] dark:from-sec-darker/[.01] dark:to-pri-light/10 xl:px-[46px]"
36+
id="without-versions"
37+
>
38+
<div
39+
className={clsx(
40+
"mx-auto w-full overflow-hidden",
41+
"[&_div.nextra-code]:h-full",
42+
"rounded-md border border-neu-200 bg-neu-0/[.64] dark:border-neu-50 dark:bg-neu-0/40 [&_pre]:h-full [&_pre]:rounded-none [&_pre]:ring-0",
43+
)}
44+
aria-hidden
3045
>
31-
<div className="max-lg:text-center">
32-
<h2>
33-
Evolve your API <br className="max-lg:hidden" />
34-
without versions
35-
</h2>
36-
{/* Illustration showing more legs added to a graph? Or a type evolving over time? */}
37-
<p>
38-
Add new fields and types to your GraphQL API without impacting
39-
existing queries. Aging fields can be deprecated and hidden from
40-
tools. By using a single evolving version, GraphQL APIs give apps
41-
continuous access to new features and encourage cleaner, more
42-
maintainable server code.
43-
</p>
44-
</div>
45-
<div
46-
className={clsx(
47-
"type-evolution mx-auto",
48-
"[&_div.nextra-code]:h-full",
49-
"rounded-md border border-gray-300 dark:border-neutral-700 [&_pre]:h-full [&_pre]:rounded-none [&_pre]:ring-0",
50-
// Set background as nextra code block bg color
51-
"_bg-white dark:_bg-black",
52-
)}
53-
aria-hidden
54-
>
55-
<div id="typeEvolveView" ref={ref}>
56-
<div className="v1">
57-
<V1 />
58-
</div>
59-
<div className="v2">
60-
<V2 />
61-
</div>
62-
<div className="v3">
63-
<V3 />
64-
</div>
65-
<div className="v4">
66-
<V4 />
67-
</div>
68-
<div className="v5">
69-
<V5 />
70-
</div>
46+
<div className="versionless-figure" ref={ref}>
47+
<div className="v1">
48+
<V1 components={components} />
49+
</div>
50+
<div className="v2">
51+
<V2 components={components} />
52+
</div>
53+
<div className="v3">
54+
<V3 components={components} />
55+
</div>
56+
<div className="v4">
57+
<V4 components={components} />
58+
</div>
59+
<div className="v5">
60+
<V5 components={components} />
7161
</div>
7262
</div>
73-
</section>
74-
</div>
63+
</div>
64+
</section>
7565
)
7666
}

0 commit comments

Comments
 (0)