Skip to content

Commit df614dd

Browse files
CompuIvesCompuIves
authored
Optimize homepage (codesandbox#315)
* Optimize homepage * Remove console.log * Move babelrc back * Add 'Current User' * Fix button hover state
1 parent 522add2 commit df614dd

File tree

12 files changed

+1128
-97
lines changed

12 files changed

+1128
-97
lines changed

‎packages/homepage/.eslintrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"globals": {
3+
"graphql": true
4+
}
5+
}

‎packages/homepage/gatsby-config.js

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
module.exports = {
22
siteMetadata: {
3-
title: `Gatsby Default Starter`,
3+
title: `CodeSandbox`,
44
},
55
plugins: [
6+
{
7+
resolve: `gatsby-source-filesystem`,
8+
options: {
9+
name: `src`,
10+
path: `${__dirname}/src/`,
11+
},
12+
},
13+
`gatsby-transformer-sharp`,
614
`gatsby-plugin-styled-components`,
715
`gatsby-plugin-react-helmet`,
816
{
@@ -11,5 +19,11 @@ module.exports = {
1119
id: 'GTM-T3L6RFK',
1220
},
1321
},
22+
{
23+
resolve: `gatsby-plugin-google-fonts`,
24+
options: {
25+
fonts: [`source sans pro:300,400,600,700`],
26+
},
27+
},
1428
],
1529
};

‎packages/homepage/package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,16 @@
66
"dependencies": {
77
"algoliasearch": "^3.24.5",
88
"gatsby": "^1.9.73",
9+
"gatsby-image": "^1.0.24",
910
"gatsby-link": "^1.6.22",
11+
"gatsby-plugin-google-fonts": "^0.0.3",
1012
"gatsby-plugin-google-tagmanager": "^1.0.8",
1113
"gatsby-plugin-react-helmet": "^1.0.8",
14+
"gatsby-plugin-sharp": "^1.6.21",
1215
"gatsby-plugin-styled-components": "^1.0.5",
1316
"gatsby-react-router-scroll": "^1.0.3",
17+
"gatsby-source-filesystem": "^1.5.8",
18+
"gatsby-transformer-sharp": "^1.6.14",
1419
"gsap": "^1.20.3",
1520
"react-media": "^1.6.1",
1621
"react-transition-group": "^2.2.1",

‎packages/homepage/src/components/Navigation.js

Lines changed: 85 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ const StyledLogo = styled(Logo)`
2929
`;
3030

3131
const Item = styled.a`
32+
display: inline-flex;
33+
align-items: center;
3234
transition: 0.2s ease color;
3335
font-size: 1.125rem;
3436
text-decoration: none;
@@ -47,6 +49,7 @@ const Item = styled.a`
4749
${media.phone`
4850
display: none;
4951
`};
52+
transition: 0.3s ease all;
5053
padding: 0.35rem 0.8rem;
5154
border-radius: 4px;
5255
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
@@ -57,7 +60,7 @@ const Item = styled.a`
5760
);
5861
5962
&:hover {
60-
transform: translateY(-10px);
63+
transform: translateY(-3px);
6164
color: white;
6265
}
6366
`};
@@ -68,33 +71,84 @@ const Item = styled.a`
6871
`};
6972
`;
7073

71-
const Right = styled.div``;
72-
73-
export default () => (
74-
<MaxWidth width={1280}>
75-
<Container>
76-
<Left>
77-
<StyledLogo title="CodeSandbox" width={50} height={50} />
78-
</Left>
79-
<Right>
80-
<Item
81-
href="https://medium.com/@compuives"
82-
target="_blank"
83-
rel="noopener noreferrer"
84-
>
85-
Blog
86-
</Item>
87-
<Item
88-
href="https://github.com/CompuIves/codesandbox-client"
89-
target="_blank"
90-
rel="noopener noreferrer"
91-
>
92-
GitHub
93-
</Item>
94-
<Item href="/s" target="_blank" rel="noopener noreferrer" button>
95-
Create Sandbox
96-
</Item>
97-
</Right>
98-
</Container>
99-
</MaxWidth>
100-
);
74+
const Right = styled.div`
75+
display: flex;
76+
align-items: center;
77+
`;
78+
79+
const Image = styled.img`
80+
width: 1.75em;
81+
height: 1.75em;
82+
border-radius: 4px;
83+
margin-left: 0.75rem;
84+
margin-bottom: 0;
85+
`;
86+
87+
export default class Navigation extends React.PureComponent {
88+
state = {
89+
user: null,
90+
};
91+
92+
fetchCurrentUser = async () => {
93+
try {
94+
const jwt = JSON.parse(localStorage.getItem('jwt'));
95+
96+
const BASE =
97+
process.env.NODE_ENV === 'development' ? 'https://codesandbox.dev' : '';
98+
99+
const { data } = await window
100+
.fetch(BASE + '/api/v1/users/current', {
101+
headers: { Authorization: `Bearer ${jwt}` },
102+
})
103+
.then(x => x.json());
104+
105+
this.setState({ user: data });
106+
} catch (e) {
107+
// fail silently
108+
}
109+
};
110+
111+
componentDidMount() {
112+
if (localStorage.getItem('jwt')) {
113+
this.fetchCurrentUser();
114+
}
115+
}
116+
117+
render() {
118+
const { user } = this.state;
119+
return (
120+
<MaxWidth width={1280}>
121+
<Container>
122+
<Left>
123+
<StyledLogo title="CodeSandbox" width={50} height={50} />
124+
</Left>
125+
<Right>
126+
<Item
127+
href="https://medium.com/@compuives"
128+
target="_blank"
129+
rel="noopener noreferrer"
130+
>
131+
Blog
132+
</Item>
133+
<Item
134+
href="https://github.com/CompuIves/codesandbox-client"
135+
target="_blank"
136+
rel="noopener noreferrer"
137+
>
138+
GitHub
139+
</Item>{' '}
140+
<Item href="/s" rel="noopener noreferrer" button={!user}>
141+
Create Sandbox
142+
</Item>
143+
{user && (
144+
<Item href={`/u/${user.username}`} rel="noopener noreferrer">
145+
{user.username}
146+
<Image alt={user.username} src={user.avatar_url} />
147+
</Item>
148+
)}
149+
</Right>
150+
</Container>
151+
</MaxWidth>
152+
);
153+
}
154+
}

‎packages/homepage/src/html.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,6 @@ class Html extends Component {
7575
/>
7676
<meta property="twitter:image:width" content="1200" />
7777
<meta property="twitter:image:height" content="630" />
78-
<link
79-
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700"
80-
rel="stylesheet"
81-
/>
8278
<TypographyStyle typography={typography} />
8379
{css}
8480
</head>

‎packages/homepage/src/pages/404.js

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

‎packages/homepage/src/pages/index.js

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,27 @@ export default class HomePage extends React.PureComponent {
3737
<NPMFeature />
3838
<CycleFeature />
3939
<ExtraFeatures />
40-
<RecentPublications />
40+
<RecentPublications sizes={this.props.data.publicationImages.edges} />
4141
<Patron />
4242
<Footer />
4343
</div>
4444
);
4545
}
4646
}
47+
48+
export const query = graphql`
49+
query ImageSizesQuery {
50+
publicationImages: allImageSharp(
51+
filter: { id: { regex: "/RecentPublications/" } }
52+
) {
53+
edges {
54+
node {
55+
id
56+
sizes(maxWidth: 400) {
57+
...GatsbyImageSharpSizes
58+
}
59+
}
60+
}
61+
}
62+
}
63+
`;

‎packages/homepage/src/screens/home/RecentPublications/codesandbox2.png renamed to ‎packages/homepage/src/screens/home/RecentPublications/1-codesandbox2.png

File renamed without changes.

‎packages/homepage/src/screens/home/RecentPublications/zeit-talk.jpg renamed to ‎packages/homepage/src/screens/home/RecentPublications/2-zeit-talk.jpg

File renamed without changes.

‎packages/homepage/src/screens/home/RecentPublications/npm-article.png renamed to ‎packages/homepage/src/screens/home/RecentPublications/3-npm-article.png

File renamed without changes.

0 commit comments

Comments
 (0)