Skip to content

Commit 22cef29

Browse files
CompuIvesCompuIves
authored
Changelog page (codesandbox#383)
* Changelog page * Responsiveness
1 parent edf75c9 commit 22cef29

22 files changed

+1071
-118
lines changed

‎packages/homepage/LICENSE

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

‎packages/homepage/content/changelog/2017-12-01-redesign.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
title: "Editor Redesign"
3+
authors: ["CompuIves"]
4+
---
5+
6+
![Editor Redesign](images/redesign.png)
7+
8+
Multiple visual improvements to the editor, including:
9+
10+
* Tab support
11+
* More compact sidebar
12+
* New file icons
13+
* Project info cleanup
14+
15+
This is a preparation of the bigger redesign that we have planned for December.

‎packages/homepage/content/changelog/2017-12-05-revamped-npm-dependencies.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: "Add Dependency Wizard"
3+
authors: ["tansongyang", "CompuIves"]
4+
---
5+
6+
![Revamped Dependency Flow](images/revamped-dependencies.png)
7+
8+
You can now search for dependencies and their examples before adding them to
9+
your sandbox.

‎packages/homepage/content/changelog/2017-12-07-zen-mode.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
title: "Zen Mode"
3+
authors: ["CompuIves"]
4+
---
5+
6+
![Zen Mode](images/zen-mode.png)
7+
8+
Zen Mode is a special editor layout that hides all distracting elements. It's
9+
perfect for small screens, course videos and presentations. You can enable it by
10+
pressing (CMD/Alt)+K+Z or by enabling it in the preferences.

‎packages/homepage/content/changelog/2017-12-08-key-bindings.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
title: "Key Bindings Support"
3+
authors: ["CompuIves"]
4+
---
5+
6+
![Key Bindings](images/key-bindings.png)
7+
8+
You can now specify custom key bindings in the preferences. You can add new key
9+
binding actions
10+
[here](https://github.com/CompuIves/codesandbox-client/blob/master/packages/app/src/app/store/preferences/keybindings.js).

‎packages/homepage/content/changelog/2017-12-09-quick-actions.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: "Quick Actions"
3+
authors: ["CompuIves"]
4+
---
5+
6+
![Quick Actions](images/quick-actions.png)
7+
8+
With Quick Actions you can activate actions without remembering the key stroke.
9+
Just open up the Action Menu by pressing (CMD/Alt)+Shift+P!

‎packages/homepage/content/changelog/2017-12-10-changelog.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
title: "Recent Updates"
3+
authors: ["CompuIves"]
4+
---
5+
6+
You're reading it now! I decided to build this page to make it easier for
7+
everyone to keep up with our updates.

‎packages/homepage/content/changelog/images/key-bindings.png

137 KB
Loading

‎packages/homepage/content/changelog/images/quick-actions.png

79.5 KB
Loading

‎packages/homepage/content/changelog/images/redesign.png

164 KB
Loading

‎packages/homepage/content/changelog/images/revamped-dependencies.png

239 KB
Loading

‎packages/homepage/content/changelog/images/zen-mode.png

170 KB
Loading

‎packages/homepage/gatsby-config.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,45 @@ module.exports = {
1010
path: `${__dirname}/src/`,
1111
},
1212
},
13+
{
14+
resolve: 'gatsby-source-filesystem',
15+
options: {
16+
name: 'content',
17+
path: `${__dirname}/content/`,
18+
},
19+
},
20+
{
21+
resolve: `gatsby-transformer-remark`,
22+
options: {
23+
plugins: [
24+
{
25+
resolve: `gatsby-remark-images`,
26+
options: {
27+
// It's important to specify the maxWidth (in pixels) of
28+
// the content container as this plugin uses this as the
29+
// base for generating different widths of each image.
30+
maxWidth: 740,
31+
// Remove the default behavior of adding a link to each
32+
// image.
33+
linkImagesToOriginal: true,
34+
// Analyze images' pixel density to make decisions about
35+
// target image size. This is what GitHub is doing when
36+
// embedding images in tickets. This is a useful setting
37+
// for documentation pages with a lot of screenshots.
38+
// It can have unintended side effects on high pixel
39+
// density artworks.
40+
//
41+
// Example: A screenshot made on a retina screen with a
42+
// resolution of 144 (e.g. Macbook) and a width of 100px,
43+
// will be rendered at 50px.
44+
//
45+
// Defaults to false.
46+
sizeByPixelDensity: true,
47+
},
48+
},
49+
],
50+
},
51+
},
1352
`gatsby-transformer-sharp`,
1453
`gatsby-plugin-styled-components`,
1554
`gatsby-plugin-react-helmet`,

‎packages/homepage/gatsby-node.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
const { createFilePath } = require('gatsby-source-filesystem');
2+
3+
// Parse date information out of post filename.
4+
const BLOG_POST_FILENAME_REGEX = /([0-9]+)\-([0-9]+)\-([0-9]+)\-(.+)\.md$/;
5+
6+
function dateToLocalJSON(date) {
7+
function addZ(n) {
8+
return (n < 10 ? '0' : '') + n;
9+
}
10+
return (
11+
date.getFullYear() +
12+
'-' +
13+
addZ(date.getMonth() + 1) +
14+
'-' +
15+
addZ(date.getDate())
16+
);
17+
}
18+
19+
exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
20+
const { createNodeField } = boundActionCreators;
21+
22+
if (node.internal.type === `MarkdownRemark`) {
23+
const { relativePath } = getNode(node.parent);
24+
25+
if (relativePath.includes('changelog')) {
26+
// The date portion comes from the file name: <date>-<title>.md
27+
const match = BLOG_POST_FILENAME_REGEX.exec(relativePath);
28+
const year = match[1];
29+
const month = match[2];
30+
const day = match[3];
31+
const slug = match[4];
32+
33+
const date = new Date(year, month - 1, day, 0, 0);
34+
35+
// Blog posts are sorted by date and display the date in their header.
36+
createNodeField({
37+
node,
38+
name: 'date',
39+
value: dateToLocalJSON(date),
40+
});
41+
createNodeField({
42+
node,
43+
name: `slug`,
44+
value: slug,
45+
});
46+
}
47+
}
48+
};

‎packages/homepage/package.json

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,36 +11,42 @@
1111
"gatsby-plugin-google-fonts": "^0.0.3",
1212
"gatsby-plugin-google-tagmanager": "^1.0.8",
1313
"gatsby-plugin-react-helmet": "^1.0.8",
14-
"gatsby-plugin-sharp": "^1.6.21",
14+
"gatsby-plugin-sharp": "^1.6.23",
1515
"gatsby-plugin-styled-components": "^1.0.5",
1616
"gatsby-react-router-scroll": "^1.0.3",
17+
"gatsby-remark-images": "^1.5.34",
1718
"gatsby-source-filesystem": "^1.5.8",
18-
"gatsby-transformer-sharp": "^1.6.14",
19+
"gatsby-transformer-remark": "^1.7.24",
20+
"gatsby-transformer-sharp": "^1.6.16",
1921
"gsap": "^1.20.3",
2022
"react-media": "^1.6.1",
2123
"react-transition-group": "^2.2.1",
2224
"react-typography": "^0.16.5",
23-
"styled-components": "^2.2.2",
25+
"styled-components": "^2.2.4",
2426
"three": "^0.87.1",
2527
"typography": "^0.16.6",
2628
"typography-breakpoint-constants": "^0.15.10"
2729
},
28-
"keywords": ["gatsby"],
30+
"keywords": [
31+
"gatsby"
32+
],
2933
"license": "MIT",
3034
"main": "n/a",
3135
"scripts": {
32-
"patch":
33-
"sed -i -e 's/if(c\\.initial) return;/if(!c||c.initial) return;/g' ../../node_modules/extract-text-webpack-plugin/index.js",
36+
"patch": "sed -i -e 's/if(c\\.initial) return;/if(!c||c.initial) return;/g' ../../node_modules/extract-text-webpack-plugin/index.js",
3437
"build": "gatsby build",
3538
"start": "gatsby develop",
3639
"lint": "echo TODO && exit 0",
37-
"format":
38-
"prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'",
40+
"format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'",
3941
"test": "echo \"Todo: no test specified\" && exit 0"
4042
},
4143
"devDependencies": {
4244
"gatsby-cli": "^1.1.20",
4345
"prettier": "^1.7.4"
4446
},
45-
"browserslist": ["> 1%", "IE >= 11", "last 2 versions"]
47+
"browserslist": [
48+
"> 1%",
49+
"IE >= 11",
50+
"last 2 versions"
51+
]
4652
}

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React from 'react';
22
import styled, { css } from 'styled-components';
33

4+
import Link from 'gatsby-link';
5+
46
import Logo from 'common/components/Logo';
57
import MaxWidth from 'common/components/flex/MaxWidth';
68

@@ -71,6 +73,8 @@ const Item = styled.a`
7173
`};
7274
`;
7375

76+
const ItemLink = Item.withComponent(Link);
77+
7478
const Right = styled.div`
7579
display: flex;
7680
align-items: center;
@@ -120,7 +124,9 @@ export default class Navigation extends React.PureComponent {
120124
<MaxWidth width={1280}>
121125
<Container>
122126
<Left>
123-
<StyledLogo title="CodeSandbox" width={50} height={50} />
127+
<Link to="/">
128+
<StyledLogo title="CodeSandbox" width={50} height={50} />
129+
</Link>
124130
</Left>
125131
<Right>
126132
<Item
@@ -136,7 +142,8 @@ export default class Navigation extends React.PureComponent {
136142
rel="noopener noreferrer"
137143
>
138144
GitHub
139-
</Item>{' '}
145+
</Item>
146+
<ItemLink to="/changelog">Recent Updates</ItemLink>
140147
<Item href="/s" rel="noopener noreferrer" button={!user}>
141148
Create Sandbox
142149
</Item>

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import * as React from 'react';
2+
3+
import MaxWidth from 'common/components/flex/MaxWidth';
4+
import Padding from 'common/components/spacing/Padding';
5+
6+
export default ({ children, ...props }: { children: React.Node }) => (
7+
<MaxWidth {...props}>
8+
<Padding top={8}>{children}</Padding>
9+
</MaxWidth>
10+
);

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import styled from 'styled-components';
22

3+
export const Heading1 = styled.h1`
4+
font-size: 2.25rem;
5+
color: white;
6+
font-weight: 200;
7+
`;
8+
39
export const Heading3 = styled.h3`
410
color: ${props => props.theme.secondary};
511
font-size: 2rem;

0 commit comments

Comments
 (0)