Skip to content

Commit 0cc3f3d

Browse files
CompuIvesCompuIves
committed
Tweaks
1 parent cea5d49 commit 0cc3f3d

File tree

8 files changed

+112
-133
lines changed

8 files changed

+112
-133
lines changed

‎packages/app/integration-tests/tests/__image_snapshots__/pm79km5lmj-snap.png‎

5.49 KB
Loading

‎packages/app/integration-tests/tests/sandboxes.test.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const SANDBOXES = [
3131
'github/algolia/doc-onboarding/tree/master/demos/angular/media', // algolia angular demo
3232
{ id: 'ymjwwrw2rj', threshold: 0.05 }, // empty path
3333
{ id: '98o3k45m8p', threshold: 0.05 }, // direct path test
34+
'pm79km5lmj', // babel macros with styled components
3435
];
3536

3637
function pageLoaded(page) {

‎packages/app/src/app/pages/common/UserMenu/Menu/index.js‎

Lines changed: 92 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -15,96 +15,103 @@ import {
1515
} from 'common/utils/url-generator';
1616
import PatronBadge from 'common/utils/badges/PatronBadge';
1717
import InfoIcon from 'app/pages/Sandbox/Editor/Navigation/InfoIcon';
18+
import track from 'common/utils/analytics';
1819

1920
import { Container, Item, Icon, Separator } from './elements';
2021
import FeedbackIcon from './FeedbackIcon';
2122

22-
function Menu({
23-
username,
24-
curator,
25-
openPreferences,
26-
openStorageManagement,
27-
openFeedback,
28-
signOut,
29-
}) {
30-
return (
31-
<Container>
32-
<Item as={Link} to={profileUrl(username)}>
33-
<Icon>
34-
<UserIcon />
35-
</Icon>
36-
My Profile
37-
</Item>
38-
39-
<Separator />
40-
41-
<Item as={Link} to={dashboardUrl()}>
42-
<Icon>
43-
<InfoIcon />
44-
</Icon>
45-
Dashboard
46-
</Item>
47-
48-
<Item as="a" href="/docs">
49-
<Icon>
50-
<BookIcon />
51-
</Icon>
52-
Documentation
53-
</Item>
54-
55-
{curator && (
56-
<Item as={Link} to={curatorUrl()}>
23+
export default class Menu extends React.PureComponent {
24+
componentDidMount() {
25+
track('User Menu Open');
26+
}
27+
28+
render() {
29+
const {
30+
username,
31+
curator,
32+
openPreferences,
33+
openStorageManagement,
34+
openFeedback,
35+
signOut,
36+
} = this.props;
37+
38+
return (
39+
<Container>
40+
<Item as={Link} to={profileUrl(username)}>
5741
<Icon>
58-
<span css={{ width: 14 }} role="img" aria-label="Star">
59-
✨
60-
</span>
42+
<UserIcon />
6143
</Icon>
62-
Curator Dashboard
44+
My Profile
6345
</Item>
64-
)}
65-
66-
<Item as={Link} to={patronUrl()}>
67-
<Icon>
68-
<PatronBadge style={{ width: 24, margin: '-6px -5px' }} size={24} />
69-
</Icon>
70-
Patron Page
71-
</Item>
72-
73-
<Separator />
74-
75-
<Item onClick={openStorageManagement}>
76-
<Icon>
77-
<FolderIcon />
78-
</Icon>
79-
Storage Management
80-
</Item>
81-
82-
<Item onClick={openPreferences}>
83-
<Icon>
84-
<SettingsIcon />
85-
</Icon>
86-
Preferences
87-
</Item>
88-
89-
<Separator />
90-
91-
<Item onClick={openFeedback}>
92-
<Icon>
93-
<FeedbackIcon />
94-
</Icon>
95-
Submit Feedback
96-
</Item>
97-
98-
<Separator />
99-
100-
<Item onClick={signOut}>
101-
<Icon>
102-
<ExitIcon />
103-
</Icon>
104-
Sign out
105-
</Item>
106-
</Container>
107-
);
108-
}
10946

110-
export default Menu;
47+
<Separator />
48+
49+
<Item as={Link} to={dashboardUrl()}>
50+
<Icon>
51+
<InfoIcon />
52+
</Icon>
53+
Dashboard
54+
</Item>
55+
56+
<Item as="a" href="/docs">
57+
<Icon>
58+
<BookIcon />
59+
</Icon>
60+
Documentation
61+
</Item>
62+
63+
{curator && (
64+
<Item as={Link} to={curatorUrl()}>
65+
<Icon>
66+
<span css={{ width: 14 }} role="img" aria-label="Star">
67+
✨
68+
</span>
69+
</Icon>
70+
Curator Dashboard
71+
</Item>
72+
)}
73+
74+
<Item as={Link} to={patronUrl()}>
75+
<Icon>
76+
<PatronBadge style={{ width: 24, margin: '-6px -5px' }} size={24} />
77+
</Icon>
78+
Patron Page
79+
</Item>
80+
81+
<Separator />
82+
83+
<Item onClick={openStorageManagement}>
84+
<Icon>
85+
<FolderIcon />
86+
</Icon>
87+
Storage Management
88+
</Item>
89+
90+
<Item onClick={openPreferences}>
91+
<Icon>
92+
<SettingsIcon />
93+
</Icon>
94+
Preferences
95+
</Item>
96+
97+
<Separator />
98+
99+
<Item onClick={openFeedback}>
100+
<Icon>
101+
<FeedbackIcon />
102+
</Icon>
103+
Submit Feedback
104+
</Item>
105+
106+
<Separator />
107+
108+
<Item onClick={signOut}>
109+
<Icon>
110+
<ExitIcon />
111+
</Icon>
112+
Sign out
113+
</Item>
114+
</Container>
115+
);
116+
}
117+
}

‎packages/app/static/img/explore.png‎

250 KB
Loading

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Helmet from 'react-helmet';
44
export default ({
55
title = 'CodeSandbox: Online Code Editor Tailored for Web Application Development',
66
description = 'CodeSandbox is an online code editor with a focus on creating and sharing web application projects',
7+
image = 'https://codesandbox.io/static/img/banner.png',
78
}: {
89
title: string,
910
description: string,
@@ -15,11 +16,25 @@ export default ({
1516
{ name: 'description', content: description },
1617
{ name: 'og:description', content: description },
1718
{ name: 'twitter:description', content: description },
19+
{ name: 'og:image', content: image },
20+
{ name: 'twitter:image:src', content: image },
1821
{
1922
name: 'keywords',
2023
content:
2124
'react, codesandbox, editor, code, javascript, playground, sharing, spa, single, page, application, web, application, frontend, front, end',
2225
},
26+
27+
{ name: 'referrer', content: 'origin' },
28+
{ property: 'og:type', content: 'website' },
29+
{ property: 'og:author', content: 'https://codesandbox.io' },
30+
{ name: 'theme-color', content: '#6CAEDD' },
31+
{ property: 'og:image:width', content: '1200' },
32+
{ property: 'og:image:height', content: '630' },
33+
{ property: 'twitter:card', content: 'summary_large_image' },
34+
{ property: 'twitter:site', content: '@codesandbox' },
35+
{ property: 'twitter:creator', content: '@codesandbox' },
36+
{ property: 'twitter:image:width', content: '1200' },
37+
{ property: 'twitter:image:height', content: '630' },
2338
]}
2439
/>
2540
);

‎packages/homepage/src/html.js‎

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

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ export default class Explore extends React.PureComponent {
119119
<Layout>
120120
<Container>
121121
<TitleAndMetaTags
122+
image="https://codesandbox.io/static/img/explore.png"
122123
description="You can find the most interesting sandboxes created on CodeSandbox here. Explore examples of JavaScript and frameworks like React, Vue and Angular!"
123124
title="Explore Sandboxes - CodeSandbox"
124125
/>

‎packages/homepage/src/screens/explore/SandboxModal.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import getTemplate from 'common/templates';
1111
import GithubBadge from 'common/components/GithubBadge';
1212

1313
import Tags from 'common/components/Tags';
14+
import track from 'common/utils/analytics';
1415

1516
import Modal from './Modal';
1617
import EmbedSkeleton from './EmbedSkeleton';
@@ -39,6 +40,8 @@ export default class SandboxModal extends React.PureComponent {
3940
loadedSandboxes = {};
4041

4142
getSandbox = (sandboxId: string) => {
43+
track('Explore Sandbox Open', { sandboxId });
44+
4245
if (this.loadedSandboxes[sandboxId]) {
4346
return Promise.resolve(this.loadedSandboxes[sandboxId]);
4447
}

0 commit comments

Comments
 (0)