Skip to content

Commit dd4d7fe

Browse files
hasparushasparus
committed
Start working on Hero, upgrade Nextra to 3.3.1
1 parent f608c1a commit dd4d7fe

File tree

10 files changed

+831
-643
lines changed

10 files changed

+831
-643
lines changed

‎next.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import fs from "fs"
99
const vercelJSON = JSON.parse(fs.readFileSync("./vercel.json", "utf-8"))
1010

1111
const withNextra = nextra({
12+
autoImportThemeStyle: false,
1213
theme: "nextra-theme-docs",
1314
themeConfig: "./theme.config.tsx",
1415
mdxOptions: {

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@
4848
"next-query-params": "^5.0.1",
4949
"next-sitemap": "^4.2.3",
5050
"next-with-less": "^3.0.1",
51-
"nextra": "3.0.0-alpha.28",
52-
"nextra-theme-docs": "3.0.0-alpha.28",
51+
"nextra": "^3",
52+
"nextra-theme-docs": "^3",
5353
"numbro": "2.5.0",
5454
"p-limit": "^4.0.0",
5555
"parser-front-matter": "1.6.4",
@@ -97,7 +97,7 @@
9797
},
9898
"pnpm": {
9999
"patchedDependencies": {
100-
"nextra@3.0.0-alpha.28": "patches/nextra@3.0.0-alpha.22.patch"
100+
"nextra": "patches/nextra.patch"
101101
}
102102
}
103103
}

‎patches/nextra.patch

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
diff --git a/dist/client/components/image.js b/dist/client/components/image.js
2+
index 239d72f5921e2d1b7359e569ae5b74c12d7c9d8a..ebeb619da1e3ccb7722e9388c92c1e2192527027 100644
3+
--- a/dist/client/components/image.js
4+
+++ b/dist/client/components/image.js
5+
@@ -1,5 +1,5 @@
6+
import { jsx } from "react/jsx-runtime";
7+
-import NextImage from "next/image";
8+
+import NextImage from "next-image-export-optimizer";
9+
import { forwardRef } from "react";
10+
const Image = forwardRef((props, ref) => {
11+
const ComponentToUse = typeof props.src === "object" ? NextImage : "img";
12+
diff --git a/dist/client/normalize-pages.js b/dist/client/normalize-pages.js
13+
index 15afee0c1de26f47d781f423e5ec32e33ad925d3..a0cefcd27a794dcfa84f901734240adf9c1f30f4 100644
14+
--- a/dist/client/normalize-pages.js
15+
+++ b/dist/client/normalize-pages.js
16+
@@ -92,6 +92,7 @@ function normalizePages({
17+
item.items
18+
)) {
19+
if (!value.href && children.every((i) => i.name !== key)) {
20+
+ console.log({value})
21+
throw new Error(
22+
`Validation of "_meta" file has failed.
23+
The field key "${metaKey}.items.${key}" in \`_meta\` file refers to a page that cannot be found, remove this key from "_meta" file.`

‎patches/[email protected]

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎pnpm-lock.yaml

Lines changed: 754 additions & 543 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/conf/_design-system/pixelarticons/check.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/components/index-page/hero.tsx

Lines changed: 35 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,47 @@
11
import Link from "next/link"
2-
import { CodeA, CodeB, CodeC } from "../code-blocks"
32
import { GraphQLLogo } from "@/icons"
4-
import { clsx } from "clsx"
3+
import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
4+
import CheckIcon from "@/app/conf/_design-system/pixelarticons/check.svg?svgr"
5+
import { Button } from "@/app/conf/_design-system/button"
56

67
export function Hero() {
78
return (
8-
<div className="[background:url('/img/graph-wash.png'),#171e26_repeat_center_center] xl:py-20">
9-
<div className="conf-block container">
10-
<section
11-
className={clsx(
12-
"flex flex-wrap items-center justify-center gap-14 max-sm:flex-col",
13-
"[&_h3]:text-2xl [&_h3]:text-white max-lg:[&_h3]:text-center",
14-
"[&_pre]:!bg-transparent [&_pre]:ring-0 [&_pre_span]:text-[--shiki-dark]",
15-
"[&_h3]:font-extralight",
16-
"[&_code]:whitespace-pre-wrap" /* fix scroll on mobile for code-blocks */,
17-
)}
18-
>
19-
<div className="flex flex-col items-center gap-2 max-xl:w-full max-md:grow">
20-
<GraphQLLogo className="w-24" />
21-
<h1 className="text-3xl text-primary">GraphQL</h1>
22-
</div>
9+
<div className="relative min-h-screen bg-neu-0">
10+
<HeroStripes />
2311

24-
<div>
25-
<h3>Describe your data</h3>
26-
<CodeA />
27-
</div>
12+
<div className="flex max-w-4xl flex-col gap-10 py-24 pl-24 pr-10">
13+
<h1 className="typography-h1 max-w-3xl text-neu-900">
14+
The query language for modern APIs
15+
</h1>
2816

29-
<div>
30-
<h3>Ask for what you want</h3>
31-
<CodeB />
32-
</div>
17+
<ul className="flex flex-col gap-2">
18+
{[
19+
"Deliver high-performance user experience at scale",
20+
"Secure and stabilize your API with a strongly typed schema and validated queries",
21+
"Reduce dependencies through efficient, distributed development",
22+
].map((item, index) => (
23+
<li key={index} className="flex items-center gap-1">
24+
<CheckIcon className="size-6 shrink-0 text-pri-base" />
25+
<p className="typography-body-sm text-neu-800">{item}</p>
26+
</li>
27+
))}
28+
</ul>
3329

34-
<div>
35-
<h3>Get predictable results</h3>
36-
<CodeC />
37-
</div>
38-
</section>
39-
40-
<Link
41-
className="index-button mx-auto mt-10 block w-fit border-white text-white"
42-
href="/learn"
43-
>
44-
Get Started
45-
</Link>
30+
<div className="flex items-center gap-4">
31+
<Button href="/learn">Get Started</Button>
32+
</div>
4633
</div>
4734
</div>
4835
)
4936
}
37+
38+
function HeroStripes() {
39+
return (
40+
<div className="pointer-events-none absolute right-0 top-0 h-full overflow-hidden">
41+
<StripesDecoration
42+
stripeWidth="5px"
43+
oddClassName="bg-gradient-to-b from-sec-base to-pri-lighter"
44+
/>
45+
</div>
46+
)
47+
}

‎src/globals.css

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@layer l-base, l-nextra;
2+
3+
@import "tailwindcss/base" layer(l-base);
4+
@import "nextra-theme-docs/style.css" layer(l-nextra);
5+
@import "tailwindcss/utilities";
6+
@import "tailwindcss/components";
47

58
:root {
69
--foreground-rgb: 0, 0, 0;
@@ -286,20 +289,6 @@ div[id^="headlessui-menu-items"] {
286289
@apply rounded border border-current px-2.5 py-1 text-sm font-bold transition-colors;
287290
}
288291

289-
.index {
290-
p {
291-
@apply mb-5 max-w-2xl text-lg lg:text-xl/9;
292-
}
293-
294-
h2 {
295-
@apply mb-10 text-balance text-3xl font-bold lg:text-5xl;
296-
}
297-
298-
pre {
299-
@apply bg-white;
300-
}
301-
}
302-
303292
.add,
304293
.remove {
305294
@apply shadow-[2px_0_currentColor_inset];

‎src/pages/_app.tsx

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,12 @@ import type { AppProps } from "next/app"
22
import { Roboto_Flex, Roboto_Mono } from "next/font/google"
33
import { useRouter } from "next/router"
44
import { useEffect } from "react"
5-
import "@/globals.css"
6-
import "@/codemirror.less"
75

8-
const robotoFlex = Roboto_Flex({
9-
subsets: ["latin"],
10-
})
6+
import { NewFontsStyleTag } from "@/app/fonts"
117

12-
const robotoMono = Roboto_Mono({
13-
subsets: ["latin"],
14-
})
8+
import "@/globals.css"
9+
import "@/codemirror.less"
10+
import "@/app/colors.css"
1511

1612
const gaId = process.env.NEXT_PUBLIC_GA_ID
1713

@@ -32,15 +28,7 @@ export default function App({ Component, pageProps }: AppProps) {
3228

3329
return (
3430
<>
35-
<style jsx global>{`
36-
html {
37-
font-family: ${robotoFlex.style.fontFamily};
38-
}
39-
40-
.roboto-mono {
41-
font-family: ${robotoMono.style.fontFamily};
42-
}
43-
`}</style>
31+
<NewFontsStyleTag />
4432
<Component {...pageProps} />
4533
</>
4634
)

‎src/pages/_document.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Html, Head, Main, NextScript } from "next/document"
2+
23
export default function Document() {
34
return (
45
<Html lang="en">

0 commit comments

Comments
 (0)