Refactor home page #150

yangshun · 2017-10-12T18:23:07Z

This PR is part one of the refactoring of the home page issue #97 . I didn't want the PR to become too big so I left out refactoring of the examples section. I wanted to get some opinions on the current approach before starting on the examples section as well.

This PR does a few things:

Shift templates/home.js to pages/index.js
Transfer the content of content/index.md into pages/index.js
Break up the home page marketing content into markdown files and load the data via GraphQL
Remove hardcoded class names from home page marketing section

I have removed most of the hardcoded class names. There are some leftover styles because I have yet to refactor the examples section. I intend to refactor that part in a similar fashion and extract out the text into Markdown files and also load them via GraphQL. Will follow up with another PR for the examples section later.

cc @bvaughn

reactjs-bot · 2017-10-12T18:27:50Z

Deploy preview ready!

Built with commit 65f1ced

https://deploy-preview-150--reactjs.netlify.com

yangshun · 2017-10-12T18:24:30Z

content/marketing/component-based.md

@@ -0,0 +1,8 @@
+---
+title: Component-Based
+order: 1


Used to decide the ordering of the 3-column marketing content. order might not be the best name for this and suggestions are welcome! I briefly considered rank.

I think order works for this. Kind of like flexbox order.

yangshun · 2017-10-12T18:25:22Z

gatsby-node.js

@@ -60,15 +60,7 @@ exports.createPages = async ({graphql, boundActionCreators}) => {
  allMarkdown.data.allMarkdownRemark.edges.forEach(edge => {
    const slug = edge.node.fields.slug;

-    if (slug === '/index.html') {


No longer need to programatically create home page because it is now within the pages directory.

yangshun · 2017-10-12T18:26:01Z

src/pages/index.js

@@ -6,7 +6,7 @@

 'use strict';

-import ButtonLink from './components/ButtonLink';
+import ButtonLink from '../templates/components/ButtonLink';


Should <ButtonLink> be moved to src/components?

yangshun · 2017-10-12T18:26:55Z

src/pages/index.js

+              border: 'none',
+              borderBottom: `1 solid ${colors.divider}`,
+            }} />
+            <section className="home-section">


Will refactor the examples section in a later PR. Please bear with the hardcoding of class names for now.

yangshun · 2017-10-12T18:29:02Z

src/types.js

@@ -23,6 +23,7 @@ export type Node = {
    next?: string,
    prev?: string,
    title: string,
+    order?: number,


Not sure whether this is necessary.

Not really, since the order frontmatter field is only used in the GraphQL query (and not in any Flow-covered code).

yangshun · 2017-10-13T17:20:05Z

content/marketing/component-based.md

@@ -0,0 +1,8 @@
+---
+title: Component-Based


I considered putting the title inside the content instead but I think putting it in the frontmatter makes more sense so we leave the formatting of the title outside this file.

Sounds reasonable to me.

yangshun · 2017-10-16T15:16:03Z

@bvaughn Have fixed according to your comments. Do have a look again 😄

bvaughn

Sorry it took me so long to get back to this. I had less time during the work week this week to review website PRs.

I left some thoughts. Also it looks like we have a merge conflict now that needs to be addressed. Maybe you could rebase or merge master into this branch?

Let's talk more if any of my comments are unclear. The biggest remaining "TODO" really is to move the remaining hard-coded content into markdown files. Otherwise I dig this 👍

bvaughn · 2017-10-21T22:48:04Z

content/marketing/component-based.md

@@ -0,0 +1,8 @@
+---
+title: Component-Based


Sounds reasonable to me.

bvaughn · 2017-10-21T22:48:13Z

content/marketing/component-based.md

@@ -0,0 +1,8 @@
+---
+title: Component-Based
+order: 1


I think order works for this. Kind of like flexbox order.

bvaughn · 2017-10-21T22:48:39Z

gatsby-node.js

@@ -60,15 +60,7 @@ exports.createPages = async ({graphql, boundActionCreators}) => {
  allMarkdown.data.allMarkdownRemark.edges.forEach(edge => {
    const slug = edge.node.fields.slug;

-    if (slug === '/index.html') {


bvaughn · 2017-10-21T22:50:07Z

src/pages/index.js

@@ -6,7 +6,7 @@



This works for the / route but not for /index.html

We need to add an explicit redirect to gatsby-node.js to handle this:

// Without this, /index.html won't redirect to root. createRedirect({ fromPath: '/index.html', redirectInBrowser: true, toPath: '/', });

Good catch, thanks for this!

bvaughn · 2017-10-21T22:57:26Z

src/pages/index.js

+                <div className="example">
+                  <h3>A Simple Component</h3>
+                  <p>
+                    React components implement a `render()` method that takes


The content for these sections also needs to come from markdown files (so it can be localized).

bvaughn · 2017-10-21T22:59:21Z

src/pages/index.js

+                      JSX is optional and not required to use React.
+                    </strong>{' '}
+                    Try the{' '}
+                    <a href="http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&code_lz=MYGwhgzhAEASCmIQHsCy8pgOb2vAHgC7wB2AJjAErxjCEB0AwsgLYAOyJph0A3gFABIAE6ky8YQAoAlHyEj4hAK7CS0ADxkAlgDcAfAiTI-hABZaI9NsORtLJMC3gBfdQHpt-gNxDn_P_zUtIQAIgDyqPSi5BKS6oYo6Jg40A5OALwARCHwOlokmdBuegA00CzISiSEAHLI4tJeQA&debug=false&circleciRepo=&evaluate=false&lineWrap=false&presets=react&prettier=true&targets=&version=6.26.0">


You know what might be cool? To auto-generate the URL for this from the actual code example (so the two will always stay in-sync). Babel's REPL just uses the lz-string module to serialize and deserialize code so we could copy it. 😁 It isn't likely to change because it's important to Babel to maintain backwards compatibility.

If this link will be part of the markdown, how do we generate the URL for this? Do we generate after render and modify the href in the markup?

yangshun · 2017-10-23T17:14:33Z

Thanks for the review @bvaughn! I fixed the index.html redirect issue and rebased on master.

Regarding the content for the examples, I intend to address and fix them in a follow up PR so that this PR does not get too big. As for the refactoring of the marketing content, I think they are good to be merged. WDYT?

bvaughn · 2017-10-23T17:19:51Z

As for the refactoring of the marketing content, I think they are good to be merged. WDYT?

I think we should do it all as one PR, to be honest. We have localization/translation efforts going on right now and I don't want to temporarily pull a bunch of home page content out of the pipeline and cause confusion.

Also cc @ericnakagawa about this change.

yangshun · 2017-10-23T17:34:13Z

I see. Ok I'll continue on this branch then 😄

yangshun · 2017-10-23T20:11:07Z

@bvaughn I extracted out the examples content into markdown files following the same approach for the marketing content. I intend to also move the code out into separate files but I'm not too sure how the mountCodeExample hacks can be improved on. Could you provide more guidance regarding how to fix the TODOs tagged to renderExamplePlaceholder and mountCodeExample?

As far as the localization/translation efforts goes, this PR should be ok given that I have extracted out both the marketing and examples content into markdown files.

yangshun · 2017-10-23T20:15:52Z

You know what might be cool? To auto-generate the URL for this from the actual code example (so the two will always stay in-sync). Babel's REPL just uses the lz-string module to serialize and deserialize code so we could copy it. 😁 It isn't likely to change because it's important to Babel to maintain backwards compatibility.

If this link will be part of the markdown, how do we generate the URL for this? Do we generate after render and modify the href in the markup?

bvaughn · 2017-10-25T23:02:48Z

I dig the general direction this PR is heading 😁 Thanks for driving this!

Could we move the new directories content/marketing and content/examples into a shared parent folder, content/home (just to more clearly organize the content). Particularly given other efforts like #138 and #162, I'm concerned "examples" might be confusing and "marketing" is a bit ambiguous.

I intend to also move the code out into separate files but I'm not too sure how the mountCodeExample hacks can be improved on. Could you provide more guidance regarding how to fix the TODOs tagged to renderExamplePlaceholder and mountCodeExample?

Maybe we should ignore the TODO about moving the hard-coded examples, for now, at least pending the outcome of #138 and #162.

What I was thinking was that we could move the example JS snippets near the markdown, but if we did that we wouldn't be able to import/require them in the template without either (a) passing them through via markdown (kind of hacky) or (b) overriding the Webpack config to allow it to resolve paths within content (since it's outside of source) and both seem kind of blah.

Maybe for now, we should just rename the code snippet constant names to better match the names of their corresponding markdown files.

If this link will be part of the markdown, how do we generate the URL for this? Do we generate after render and modify the href in the markup?

It's fine to do this as a follow-up. Actually I'd be happy to do it b'c it sounds fun. 😄 The idea though is that we could come up with a new syntax for linking to an example file and then we could maybe write a custom Remark transform plugin that generates the actual link (with lz compression) from it during build time so they were guaranteed to stay in sync.

bvaughn · 2017-10-31T22:29:39Z

Friendly follow up with @yangshun 😄

Also cc @ericnakagawa

bvaughn · 2017-11-05T15:16:22Z

One last friendly follow up 😄

If I don't hear back in a day or so, I'm going to take over this PR and implement my own requested changes. (This is totally okay, of course.)

yangshun · 2017-11-05T15:37:10Z

@bvaughn Very sorry for the delay! This PR slipped my mind. I shifted the files into /home/marketing/ and /home/examples/. Is there anything else you want me to do in this PR?

bvaughn · 2017-11-06T11:34:44Z

No worries at all. Let me take a look.

bvaughn · 2017-11-06T13:02:58Z

Thank you!

I've added to this PR by moving the example JavaScript code into /home/content as well (see f5aaf4c) and tying it together with a new local plugin, gatsby-transformer-home-example-code.

…s#150)

facebook-github-bot added the CLA Signed label Oct 12, 2017

yangshun commented Oct 12, 2017

View reviewed changes

yangshun commented Oct 13, 2017

View reviewed changes

bvaughn requested changes Oct 21, 2017

View reviewed changes

yangshun added 8 commits October 24, 2017 01:05

Embed content into home template

1de3b18

Shift home into pages

60dab36

Split up marketing content into Markdown files

1e6151e

Use glamor styles for home page

a1cb7af

Minor formatting fixes

137f0ff

Fix styling

505efa0

Fix for comments

405e7c5

Add redirect to root

7a44e5b

Shift out examples content

57baeb1

bvaughn mentioned this pull request Nov 3, 2017

Link to Babeljs.io repl incorrect. #240

Closed

Shift into home folder

65f1ced

bvaughn merged commit 65f1ced into reactjs:master Nov 6, 2017

bvaughn mentioned this pull request Nov 7, 2017

Remove hard-coded HTML/CSS from index.md #97

Closed

BetterZxx pushed a commit to BetterZxx/react.dev that referenced this pull request Mar 21, 2023

docs(cn): translate src/components/CodeExample/CodeExample.js (reactj…

53939dd

…s#150)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor home page #150

Refactor home page #150

yangshun commented Oct 12, 2017 •

edited

Loading

reactjs-bot commented Oct 12, 2017 •

edited

Loading

yangshun Oct 12, 2017

bvaughn Oct 21, 2017

yangshun Oct 12, 2017 •

edited

Loading

bvaughn Oct 21, 2017

yangshun Oct 12, 2017

bvaughn Oct 16, 2017

yangshun Oct 12, 2017

yangshun Oct 12, 2017

bvaughn Oct 16, 2017

yangshun Oct 13, 2017

bvaughn Oct 21, 2017

yangshun commented Oct 16, 2017

bvaughn left a comment

bvaughn Oct 21, 2017

bvaughn Oct 21, 2017

bvaughn Oct 21, 2017

bvaughn Oct 21, 2017

yangshun Oct 23, 2017

bvaughn Oct 21, 2017

bvaughn Oct 21, 2017

yangshun Oct 23, 2017

yangshun commented Oct 23, 2017 •

edited

Loading

bvaughn commented Oct 23, 2017

yangshun commented Oct 23, 2017

yangshun commented Oct 23, 2017

yangshun commented Oct 23, 2017

bvaughn commented Oct 25, 2017

bvaughn commented Oct 31, 2017

bvaughn commented Nov 5, 2017 •

edited

Loading

yangshun commented Nov 5, 2017

bvaughn commented Nov 6, 2017

bvaughn commented Nov 6, 2017 •

edited

Loading

Refactor home page #150

Refactor home page #150

Conversation

yangshun commented Oct 12, 2017 • edited Loading

reactjs-bot commented Oct 12, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yangshun Oct 12, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yangshun commented Oct 16, 2017

bvaughn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yangshun commented Oct 23, 2017 • edited Loading

bvaughn commented Oct 23, 2017

yangshun commented Oct 23, 2017

yangshun commented Oct 23, 2017

yangshun commented Oct 23, 2017

bvaughn commented Oct 25, 2017

bvaughn commented Oct 31, 2017

bvaughn commented Nov 5, 2017 • edited Loading

yangshun commented Nov 5, 2017

bvaughn commented Nov 6, 2017

bvaughn commented Nov 6, 2017 • edited Loading

yangshun commented Oct 12, 2017 •

edited

Loading

reactjs-bot commented Oct 12, 2017 •

edited

Loading

yangshun Oct 12, 2017 •

edited

Loading

yangshun commented Oct 23, 2017 •

edited

Loading

bvaughn commented Nov 5, 2017 •

edited

Loading

bvaughn commented Nov 6, 2017 •

edited

Loading