Skip to content

Commit d800165

Browse files
SaraVieiraCompuIves
SaraVieira
authored and
CompuIves
committed
Companies Logos (codesandbox#1552)
Creates a /users and adds some users to the hompage too
1 parent 4609d08 commit d800165

File tree

10 files changed

+313
-1
lines changed

10 files changed

+313
-1
lines changed

‎packages/homepage/.eslintrc‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,8 @@
22
"globals": {
33
"graphql": true
44
},
5-
"rules": { "jsx-a11y/href-no-hash": 0 }
5+
"rules": {
6+
"jsx-a11y/href-no-hash": 0,
7+
"react/no-unescaped-entities": 0
8+
}
69
}

‎packages/homepage/content/users.json‎

Lines changed: 92 additions & 0 deletions
Large diffs are not rendered by default.

‎packages/homepage/gatsby-config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ module.exports = {
2020
path: `${__dirname}/content/`,
2121
},
2222
},
23+
`gatsby-transformer-json`,
2324
{
2425
resolve: `gatsby-transformer-remark`,
2526
options: {

‎packages/homepage/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"gatsby-remark-prismjs": "^1.2.11",
2727
"gatsby-source-airtable": "^2.0.2",
2828
"gatsby-source-filesystem": "^2.0.10",
29+
"gatsby-transformer-json": "^2.1.8",
2930
"gatsby-transformer-remark": "^2.1.15",
3031
"gatsby-transformer-sharp": "^2.1.9",
3132
"gsap": "^1.20.3",

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import shuffleArray from '../utils/shuffleArray';
4+
5+
const Grid = styled.section`
6+
display: grid;
7+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
8+
grid-gap: 30px;
9+
align-items: center;
10+
margin-top: 60px;
11+
12+
img {
13+
display: block;
14+
max-width: 80%;
15+
margin: auto;
16+
}
17+
`;
18+
19+
export default ({ companies }) => (
20+
<Grid>
21+
{shuffleArray(companies).map(({ node: company }) => (
22+
<div>
23+
<a href={company.link} target="_blank" rel="noopener noreferrer">
24+
<img height="150" src={company.logoURL} alt={company.name} />
25+
</a>
26+
</div>
27+
))}
28+
</Grid>
29+
);

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import CycleFeature from '../screens/home/CycleFeature';
66
import ExtraFeatures from '../screens/home/ExtraFeatures';
77
import RecentPublications from '../screens/home/RecentPublications';
88
import Patron from '../screens/home/Patron';
9+
import Users from '../screens/home/Users';
910
import TitleAndMetaTags from '../components/TitleAndMetaTags';
1011
import Layout from '../components/layout';
1112

@@ -42,6 +43,7 @@ export default class HomePage extends React.Component {
4243
<ExtraFeatures />
4344
<RecentPublications />
4445
<Patron />
46+
<Users />
4547
</Layout>
4648
);
4749
}

‎packages/homepage/src/pages/who-uses-codesandbox.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React from 'react';
2+
import { graphql } from 'gatsby';
3+
import styled from 'styled-components';
4+
import TitleAndMetaTags from '../components/TitleAndMetaTags';
5+
import PageContainer from '../components/PageContainer';
6+
import { Heading2 } from '../components/headings';
7+
import Layout from '../components/layout';
8+
import { Container } from './_explore.elements';
9+
10+
import Companies from '../components/Companies';
11+
12+
const Button = styled.a`
13+
transition: 0.3s ease all;
14+
color: white;
15+
background-color: ${props => props.theme.secondary};
16+
text-decoration: none;
17+
padding: 0.5rem 12px;
18+
text-align: center;
19+
border-radius: 4px;
20+
display: block;
21+
width: 200px;
22+
23+
margin: auto;
24+
margin-top: 1rem;
25+
margin-bottom: 2rem;
26+
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
27+
28+
&:hover {
29+
box-shadow: 0 7px 12px rgba(0, 0, 0, 0.3);
30+
}
31+
`;
32+
33+
export default ({
34+
data: {
35+
allUsersJson: { edges },
36+
},
37+
}) => (
38+
<Layout>
39+
<Container>
40+
<TitleAndMetaTags
41+
description="Some of the people using codesandbox"
42+
title="Who is using CodeSandbox? - CodeSandbox"
43+
/>
44+
<PageContainer as="main" width={1440}>
45+
<Heading2
46+
css={`
47+
text-align: center;
48+
`}
49+
>
50+
Who's using CodeSandbox?
51+
</Heading2>
52+
<p
53+
css={`
54+
text-align: center;
55+
color: white;
56+
`}
57+
>
58+
Some amazing companies and projects using CodeSandbox
59+
</p>
60+
<Companies companies={edges} />
61+
<p
62+
css={`
63+
margin-top: 4rem;
64+
text-align: center;
65+
color: white;
66+
`}
67+
>
68+
Are you using CodeSandbox?
69+
</p>
70+
<Button
71+
href="
72+
https://github.com/CompuIves/codesandbox-client/blob/master/packages/homepage/content/users.json"
73+
target="_blank"
74+
rel="noopener noreferrer"
75+
>
76+
Add your company
77+
</Button>
78+
</PageContainer>
79+
</Container>
80+
</Layout>
81+
);
82+
export const query = graphql`
83+
{
84+
allUsersJson {
85+
edges {
86+
node {
87+
id
88+
name
89+
link
90+
logoURL
91+
link
92+
}
93+
}
94+
}
95+
}
96+
`;

‎packages/homepage/src/screens/home/Users/index.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import { StaticQuery, graphql, Link } from 'gatsby';
4+
5+
import MaxWidth from 'common/components/flex/MaxWidth';
6+
import Companies from '../../../components/Companies';
7+
8+
const Container = styled.div`
9+
background-color: ${({ theme }) => theme.background2};
10+
11+
padding: 6rem 0;
12+
`;
13+
14+
const Title = styled.h3`
15+
font-weight: 200;
16+
font-size: 2rem;
17+
text-align: center;
18+
margin-bottom: 0.5rem;
19+
color: white;
20+
`;
21+
22+
const Button = styled(Link)`
23+
transition: 0.3s ease all;
24+
color: white;
25+
background-color: ${props => props.theme.secondary};
26+
text-decoration: none;
27+
padding: 0.5rem 12px;
28+
text-align: center;
29+
border-radius: 4px;
30+
display: block;
31+
width: 200px;
32+
33+
margin: auto;
34+
margin-top: 3rem;
35+
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
36+
37+
&:hover {
38+
box-shadow: 0 7px 12px rgba(0, 0, 0, 0.3);
39+
}
40+
`;
41+
42+
export default () => (
43+
<StaticQuery
44+
query={graphql`
45+
query {
46+
allUsersJson(filter: { pinned: { eq: true } }) {
47+
edges {
48+
node {
49+
id
50+
link
51+
logoURL
52+
link
53+
pinned
54+
}
55+
}
56+
}
57+
}
58+
`}
59+
render={({ allUsersJson: { edges } }) => (
60+
<Container>
61+
<MaxWidth width={1280}>
62+
<Title>Who's using CodeSandbox?</Title>
63+
<Companies companies={edges} />
64+
<Button to="/who-uses-codesandbox">More Users</Button>
65+
</MaxWidth>
66+
</Container>
67+
)}
68+
/>
69+
);

‎packages/homepage/src/utils/shuffleArray.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
function shuffleArray(array) {
2+
for (let i = array.length - 1; i > 0; i--) {
3+
const j = Math.floor(Math.random() * (i + 1));
4+
[array[i], array[j]] = [array[j], array[i]];
5+
}
6+
7+
return array;
8+
}
9+
10+
export default shuffleArray;

‎yarn.lock‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9983,6 +9983,14 @@ gatsby-source-medium@^2.0.2:
99839983
"@babel/runtime" "^7.0.0"
99849984
axios "^0.18.0"
99859985

9986+
gatsby-transformer-json@^2.1.8:
9987+
version "2.1.8"
9988+
resolved "https://registry.yarnpkg.com/gatsby-transformer-json/-/gatsby-transformer-json-2.1.8.tgz#bc424941f0bd72b05f80b1449f6e14e5de0e02c8"
9989+
integrity sha512-iFb+dXL4Q6dlnpxEJxWPZUxRZqh5ETg9V3WaclGGpFpv/QbabPIe+qEvcYPsbRPqcFgoLgKorNkDVPgmbrT7rg==
9990+
dependencies:
9991+
"@babel/runtime" "^7.0.0"
9992+
bluebird "^3.5.0"
9993+
99869994
gatsby-transformer-remark@^2.1.15:
99879995
version "2.1.15"
99889996
resolved "https://registry.yarnpkg.com/gatsby-transformer-remark/-/gatsby-transformer-remark-2.1.15.tgz#c744bebdcb94017409826011a3f78af8c1e0ff1c"
@@ -21840,6 +21848,7 @@ terser-webpack-plugin@^1.0.2, terser-webpack-plugin@^1.1.0:
2184021848
worker-farm "^1.5.2"
2184121849

2184221850
terser@3.16.1, uglify-es@^3.3.4, uglify-es@^3.3.7, uglify-es@^3.3.9, "uglify-es@npm:terser":
21851+
name uglify-es
2184321852
version "3.16.1"
2184421853
resolved "https://registry.yarnpkg.com/terser/-/terser-3.16.1.tgz#5b0dd4fa1ffd0b0b43c2493b2c364fd179160493"
2184521854
integrity sha512-JDJjgleBROeek2iBcSNzOHLKsB/MdDf+E/BOAJ0Tk9r7p9/fVobfv7LMJ/g/k3v9SXdmjZnIlFd5nfn/Rt0Xow==

0 commit comments

Comments
 (0)