Skip to content

Commit 69153c0

Browse files
andimarekandimarek
authored
Merge pull request #203 from graphql-java/rework-landing-page
Rework landing page
2 parents 6846903 + 1efe9d3 commit 69153c0

7 files changed

Lines changed: 608 additions & 37 deletions

File tree

‎docusaurus.config.js‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,29 @@ const config = {
3636
attributes: {},
3737
innerHTML: plausibleInitScript,
3838
},
39+
{
40+
tagName: 'link',
41+
attributes: {
42+
rel: 'preconnect',
43+
href: 'https://fonts.googleapis.com',
44+
crossorigin: 'anonymous',
45+
},
46+
},
47+
{
48+
tagName: 'link',
49+
attributes: {
50+
rel: 'preconnect',
51+
href: 'https://fonts.gstatic.com',
52+
crossorigin: 'anonymous',
53+
},
54+
},
55+
{
56+
tagName: 'link',
57+
attributes: {
58+
rel: 'stylesheet',
59+
href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@600&display=swap',
60+
},
61+
},
3962
],
4063
presets: [
4164
[
@@ -86,8 +109,9 @@ const config = {
86109
position: 'left',
87110
label: 'Documentation',
88111
},
89-
{to: 'https://leanpub.com/graphql-java/', label: 'Book', position: 'left'},
112+
{href: 'https://leanpub.com/graphql-java/', label: 'Book', position: 'left'},
90113
{to: '/tutorials/getting-started-with-spring-boot', label: 'Tutorial', position: 'left'},
114+
{href: 'https://feddi.dev', label: 'Federation', position: 'left', className: 'navbar-federation-link'},
91115
{to: '/blog', label: 'Blog', position: 'left'},
92116
{to: '/security', label: 'Security', position: 'left'},
93117
{to: '/about', label: 'About', position: 'left'},

‎src/components/ExtIcon.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import IconExternalLink from '@theme/Icon/ExternalLink';
3+
4+
const baseStyle = {
5+
display: 'inline-flex',
6+
alignItems: 'center',
7+
verticalAlign: 'middle',
8+
marginLeft: '3px',
9+
position: 'relative',
10+
};
11+
12+
export default function ExtIcon({ style }) {
13+
return (
14+
<span style={style ? { ...baseStyle, ...style } : baseStyle}>
15+
<IconExternalLink />
16+
</span>
17+
);
18+
}

‎src/css/custom.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,33 @@
2626
html[data-theme='dark'] .docusaurus-highlight-code-line {
2727
background-color: rgba(0, 0, 0, 0.3);
2828
}
29+
30+
.navbar-federation-link {
31+
color: #E91E8C !important;
32+
font-weight: 500 !important;
33+
background: rgba(233, 30, 140, 0.07) !important;
34+
border-radius: 6px;
35+
padding: 4px 10px !important;
36+
}
37+
38+
.navbar-federation-link:hover {
39+
background: rgba(233, 30, 140, 0.13) !important;
40+
}
41+
42+
.navbar__link svg {
43+
position: relative;
44+
top: 1px;
45+
}
46+
47+
/* Version badge pill */
48+
.navbar__items--right .dropdown > .navbar__link {
49+
font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
50+
background: #f4f4f4;
51+
border-radius: 4px;
52+
padding: 3px 8px;
53+
font-size: 0.8rem;
54+
}
55+
56+
html[data-theme='dark'] .navbar__items--right .dropdown > .navbar__link {
57+
background: rgba(255, 255, 255, 0.08);
58+
}

‎src/pages/index.js‎

Lines changed: 79 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,94 @@
11
import React from 'react';
2-
import clsx from 'clsx';
32
import Layout from '@theme/Layout';
43
import Link from '@docusaurus/Link';
5-
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
4+
import ExtIcon from '../components/ExtIcon';
65
import styles from './index.module.css';
76

8-
function HomepageHeader() {
9-
const {siteConfig} = useDocusaurusContext();
7+
const EXT_LINK = { target: '_blank', rel: 'noopener noreferrer' };
8+
9+
function Hero() {
1010
return (
11-
<header className={clsx('hero hero--primary', styles.heroBanner)}>
12-
<div className="container">
13-
<h1 className="hero__title">{siteConfig.title}</h1>
14-
<p className="hero__subtitle">{siteConfig.tagline}</p>
15-
<div className={styles.buttons}>
16-
<Link
17-
className="button button--secondary button--lg"
18-
to="https://leanpub.com/graphql-java/">
19-
Buy the GraphQL Java book now
20-
</Link>
21-
</div>
11+
<section className={styles.hero}>
12+
<h1 className={styles.heroTitle}>GraphQL Java</h1>
13+
<p className={styles.heroSubtitle}>The Java implementation of GraphQL</p>
14+
<div className={styles.trustBar}>
15+
<span>Spring GraphQL</span>
16+
<span className={styles.dot}>·</span>
17+
<span>Netflix DGS</span>
18+
<span className={styles.dot}>·</span>
19+
<span>Atlassian</span>
20+
<span className={styles.dot}>·</span>
21+
<span>1M+ downloads/month</span>
22+
</div>
23+
<div className={styles.ctaRow}>
24+
<Link className={styles.ctaPrimary} to="/documentation/getting-started">
25+
Get started →
26+
</Link>
27+
<a className={styles.ctaSecondary} href="https://feddi.dev" {...EXT_LINK}>
28+
JVM-native GraphQL federation <ExtIcon />
29+
</a>
30+
</div>
31+
</section>
32+
);
33+
}
34+
35+
function Card({ title, description, to, href, external }) {
36+
const content = (
37+
<>
38+
<div className={styles.cardTitle}>
39+
{title}{external && <ExtIcon />}
2240
</div>
23-
</header>
41+
<div className={styles.cardDesc}>{description}</div>
42+
</>
43+
);
44+
if (to) {
45+
return <Link className={styles.card} to={to}>{content}</Link>;
46+
}
47+
return (
48+
<a className={styles.card} href={href} {...(external ? EXT_LINK : {})}>
49+
{content}
50+
</a>
2451
);
2552
}
2653

2754
export default function Home() {
28-
const {siteConfig} = useDocusaurusContext();
2955
return (
30-
<Layout
31-
title={`Hello from ${siteConfig.title}`}
32-
description="GraphQL Java home page">
33-
<HomepageHeader />
56+
<Layout title="GraphQL Java" description="The Java implementation of GraphQL">
57+
<Hero />
58+
<main className={styles.content}>
59+
<section className={styles.section}>
60+
<div className={styles.sectionLabel}>Documentation</div>
61+
<div className={styles.cardGrid}>
62+
<Card title="Documentation" description="Full reference for GraphQL Java" to="/documentation/getting-started" />
63+
<Card title="3 min tutorial" description="Get a GraphQL server running fast" to="/tutorials/getting-started-with-spring-boot" />
64+
<Card title="GraphQL with Java and Spring" description="Book from the maintainers" href="https://leanpub.com/graphql-java/" external />
65+
<Card title="JavaDoc" description="Full API reference" href="https://javadoc.io/doc/com.graphql-java/graphql-java/" external />
66+
</div>
67+
</section>
68+
69+
<section className={styles.section}>
70+
<div className={styles.sectionLabel}>Federation</div>
71+
<div className={styles.federationCard}>
72+
<div className={styles.federationText}>
73+
<div className={styles.federationTitle}>JVM-native GraphQL federation</div>
74+
<div className={styles.federationBody}>
75+
Andreas Marek, creator of GraphQL Java, is building feddi — a JVM-native federation gateway for any team running GraphQL on the JVM.
76+
</div>
77+
</div>
78+
<a className={styles.federationBtn} href="https://feddi.dev" {...EXT_LINK}>
79+
feddi.dev <ExtIcon />
80+
</a>
81+
</div>
82+
</section>
83+
84+
<section className={styles.section}>
85+
<div className={styles.sectionLabel}>Community</div>
86+
<div className={styles.cardGrid}>
87+
<Card title="GitHub Discussions" description="Ask questions, share ideas" href="https://github.com/graphql-java/graphql-java/discussions" external />
88+
<Card title="Releases" description="Changelog and release notes" href="https://github.com/graphql-java/graphql-java/releases" external />
89+
</div>
90+
</section>
91+
</main>
3492
</Layout>
3593
);
3694
}

0 commit comments

Comments
 (0)