Updates to design + next.js implementation #7

aulneau · 2017-03-14T21:09:31Z

This is a large update to the homepage, abstracting much of it out into separate, smaller components. In addition to the components, we will now have additional pages.

This still needs some refinements and improvements before merging.

You can see the latest version here:

https://nteract.ineffable.digital

Next Steps

Global

decide on / implement mobile menu with help from @rgbkrk
Abstract out page color into prop @rgbkrk
abstract other elements into components
- social media buttons
- buttons
- Sections

Pages

Misc

create a custom _error.js page for redirecting to nteract.github.io
refactor miscellaneous non-pages out of pages/
do some final browser testing

rgbkrk · 2017-03-14T21:11:10Z

Hoorah!

rgbkrk · 2017-03-14T21:19:21Z

components/content-section/content-section.js

+                el.classList.add("showing");
+            }
+        })
+    }


If we listen to events we'll want to remove the event listener on unmount.

rgbkrk · 2017-03-14T21:20:32Z

components/footer/footer.js

+import SocialButtons from '../navigation/social-buttons'
+
+
+class Footer extends React.Component {


This can be a stateless component:

export default () => ( <div> ...

rgbkrk · 2017-03-14T21:21:30Z

components/header/header.js

+import NavigationRight from '../navigation/navigation-right'
+import SocialButtons from '../navigation/social-buttons'
+
+class Header extends React.Component {


This can also be a stateless function () => <div />

rgbkrk · 2017-03-14T21:21:53Z

components/navigation/navigation-left.js

+class NavigationLeft extends React.Component {
+
+
+    constructor(props) {


This can also be a stateless function () => <div />

rgbkrk · 2017-03-14T21:23:35Z

components/navigation/navigation.js

+                    <div className="icon-buttons buttons">
+                        <a href="https://slackin-nteract.now.sh/" target="_blank" className="button button-secondary button-icon-only" title="Join us on Slack!">
+                            <div className="button-wrapper">
+                                <div className="button-icon">


To make this easier for reading, it would be cool to make each of the svgs into individual named functions:

const GitHubIcon = () => <svg> ...

rgbkrk · 2017-03-14T21:24:49Z

components/navigation/social-buttons.js

+                        <svg viewBox="0 0 24 24">
+                            <path fill="#000000"
+                                  d="M10.23,11.16L12.91,10.27L13.77,12.84L11.09,13.73L10.23,11.16M17.69,13.71C18.23,13.53 18.5,12.94 18.34,12.4C18.16,11.86 17.57,11.56 17.03,11.75L15.73,12.18L14.87,9.61L16.17,9.17C16.71,9 17,8.4 16.82,7.86C16.64,7.32 16.05,7 15.5,7.21L14.21,7.64L13.76,6.3C13.58,5.76 13,5.46 12.45,5.65C11.91,5.83 11.62,6.42 11.8,6.96L12.25,8.3L9.57,9.19L9.12,7.85C8.94,7.31 8.36,7 7.81,7.2C7.27,7.38 7,7.97 7.16,8.5L7.61,9.85L6.31,10.29C5.77,10.47 5.5,11.06 5.66,11.6C5.8,12 6.19,12.3 6.61,12.31L6.97,12.25L8.27,11.82L9.13,14.39L7.83,14.83C7.29,15 7,15.6 7.18,16.14C7.32,16.56 7.71,16.84 8.13,16.85L8.5,16.79L9.79,16.36L10.24,17.7C10.38,18.13 10.77,18.4 11.19,18.41L11.55,18.35C12.09,18.17 12.38,17.59 12.2,17.04L11.75,15.7L14.43,14.81L14.88,16.15C15,16.57 15.41,16.84 15.83,16.85L16.19,16.8C16.73,16.62 17,16.03 16.84,15.5L16.39,14.15L17.69,13.71M21.17,9.25C23.23,16.12 21.62,19.1 14.75,21.17C7.88,23.23 4.9,21.62 2.83,14.75C0.77,7.88 2.38,4.9 9.25,2.83C16.12,0.77 19.1,2.38 21.17,9.25Z"/>
+                        </svg>


Re: my comment about the SVGs -- we could use the icons here too, might as well pull them as individual components.

rgbkrk · 2017-03-14T21:30:54Z

pages/home/hero/hero.js

+                    <h1>Take your computing experience to the next level.</h1>
+                    <p>nteract is a desktop application that allows you to develop rich documents that contain prose,
+                        executable
+                        code (in almost any language!), and images. Whether you're a developer, data scientist,


because there's a singlequote in here, we may want to make this:

<p>{` nteract is a desktop application... `}</p>

rgbkrk · 2017-03-14T21:37:06Z

One of the main reasons I'd like to use next's styled-jsx is so that people can use components standalone without having to know the class structure.

rgbkrk · 2017-03-14T21:37:31Z

I'll go ahead and adapt all the components that can be stateless and a few other nits here.

rgbkrk · 2017-03-14T21:37:57Z

I'll add in Flow to a bunch of these as well.

rgbkrk · 2017-03-14T21:57:29Z

I've done a few things in the last commit, namely:

Prefer stateless functional components as much as possible
Turn flow on when possible (doesn't work on scss imports)
Run prettier through the codebase

rgbkrk · 2017-03-14T22:37:18Z

Current site demo:

* Prefer stateless functional components as much as possible * Turn flow on when possible (doesn't work on scss imports) * Run prettier through the codebase * Set prefetch on <Link /> to kernels * Rely on https://nteract.github.io for static assets * Simplify by using just next, no express+proxy * On 404, redirect to nteract.github.io * Create a desktop page

rgbkrk · 2017-03-15T01:06:52Z

Rebased and squashed commits down. Sample site: https://nteractio-rhjshmenhv.now.sh

remove "jekyll" as the generator

rgbkrk · 2017-03-15T08:19:32Z

I just noticed why the social media buttons were repeated twice - components/navigation/navigation.js is not used, seems like something that got refactored away. Deleted the unused page and extracted the buttons that were used anyways.

…or the page header

aulneau · 2017-03-17T22:32:59Z

pages/kernels/index.js

+    <Layout pageTitle=": The nteract Desktop App">
+        <PageHeader />
+        <ContentSection>
+            <Python />


@rgbkrk would you be able to adjust the work you did to allow for the subheader to transition the content here but keep the page the same?

Yeah, I see what you're talking about here. Will do!

Check out the changes in 3e65232. It primarily came down to extracting the base page setup into the KernelPage component so they inherited from the same base.

aulneau · 2017-03-17T22:37:14Z

components/head/head.js

+      content="https://nteract.io/static/images/opengraph.png"
+    />
+
+    <meta name="theme-color" content="#334865" />


@rgbkrk can you connect this to the page color prop you're adding?

Done. Pushed a commit with the themeColor prop as part of the head component.

…ates-next

rgbkrk · 2017-03-17T23:45:18Z

components/kernels/kernel-page.js

@@ -18,9 +18,8 @@ export const kernels = [
 ];

 export default (props: KernelPageProps) => (
-  <Layout pageTitle=": The nteract Desktop App is cool">
+  <Layout pageTitle={`: kernels - ${props.language}`}>


Thanks for fixing this. 😉

aulneau · 2017-03-29T16:55:48Z

pages/about.js

 } from "../components/page-header/page-header";

+const contributorsData = [


I've added a place where we can add contributors @rgbkrk :)

rgbkrk · 2017-03-29T17:41:30Z

pages/about.js

 } from "../components/page-header/page-header";

+const contributorsData = [
+    {


Ok, cool. We can handle this dynamically server side.

rgbkrk · 2017-03-29T18:36:06Z

pages/about.js

+    PageHeaderRight
+} from "../components/page-header/page-header";
+
+const contributorsData = [


We can use https://api.github.com/orgs/nteract/members here.

Created fetch-github-organization for this -- we can use it in getInitialProps since it returns a promise. Needs error handling, works as a first pass for now. 😄

Admittedly though, because of rate limiting it might make more sense to fetch the user list before npm run start and rely on that data being available as the cached version. 😉

rgbkrk · 2017-04-27T20:02:04Z

I'm going to go ahead and ship this as is on Friday if no one has any additions before then.

rgbkrk · 2017-04-27T21:46:01Z

Awesome, I see the commits flowing in. 😄 I've adapted the nteract members data, I can provide more for that in a moment.

…ates-next

recorded on a normal screen, to improve performance

rgbkrk · 2017-04-27T23:19:28Z

This looks pretty well situated. A more recent link: https://nteractio-kdixcprglm.now.sh/about

rgbkrk · 2017-04-28T00:24:57Z

@aulneau -- @lgeiger made some PRs to this branch you can review and merge: #9, #10

Clean up R segment

Fix social media button position

Contributors: Show github login if name is not available

rgbkrk · 2017-04-28T19:26:39Z

Alright, let's

integrate updates and refinements

272d813

rgbkrk reviewed Mar 14, 2017

View reviewed changes

rgbkrk mentioned this pull request Mar 15, 2017

[WIP] create a desktop page #6

Closed

rgbkrk force-pushed the updates-next branch from ba05be1 to 9f95df9 Compare March 15, 2017 00:54

rgbkrk force-pushed the updates-next branch from 9f95df9 to 8a6e234 Compare March 15, 2017 00:58

rgbkrk added 2 commits March 14, 2017 18:03

remove unused dependencies

8dc837b

bump dependencies

89c239e

rgbkrk added 3 commits March 15, 2017 01:00

prefetch nteract.github.io, move up

8e2a2a1

remove "jekyll" as the generator

remove unused navigation component

42e5c3e

extract buttons as components

7eee94f

rgbkrk mentioned this pull request Mar 17, 2017

Prefetch over http for https version. #8

Closed

built out kernels, desktop pages and abstracted out a new component f…

db1a690

…or the page header

aulneau commented Mar 17, 2017

View reviewed changes

rgbkrk and others added 6 commits March 17, 2017 15:41

Extract a themeColor property for c/head/head

187a85f

make kernels pages all keep the same header

3e65232

created a working mobile menu

93a995f

Merge branch 'updates-next' of github.com:nteract/nteract.io into upd…

ded85f9

…ates-next

fix mobile menu bugs and adjust kernel page titles

5b78b8d

minor mobile menu bugs

8a721b0

rgbkrk reviewed Mar 17, 2017

View reviewed changes

aulneau commented Mar 29, 2017

View reviewed changes

rgbkrk reviewed Mar 29, 2017

View reviewed changes

lgeiger mentioned this pull request Apr 9, 2017

Create a new to programming section nteract/hydrogen#702

Open

updates to kernels page and more testing

2f4a002

Thomas Osmonson and others added 11 commits April 27, 2017 17:02

update deps and about page for deployment"

19010fe

include the raw data from github

4f0b799

create single pages for kernels

e98de7c

Merge branch 'updates-next' of github.com:nteract/nteract.io into upd…

58b8d9b

…ates-next

refine kernels sub-pages

253274d

update button class

467d558

bump nteract members

86073e0

take out overexplanatory text

52c3e0b

bump nteract-members

23ddb16

update about page

594fbcd

Atom: Use lower res videos

754fc29

recorded on a normal screen, to improve performance

lgeiger added 2 commits April 28, 2017 01:23

Contributors: Show github login if name is not available

1f8334d

Fix social media button position

8744b02

rgbkrk added 4 commits April 27, 2017 18:26

Clean up R segment

c567fb5

Merge pull request #11 from nteract/update-r-text

4ce0656

Clean up R segment

Merge pull request #10 from lgeiger/social-buttons

35d878d

Fix social media button position

Merge pull request #9 from lgeiger/gh-login

a46f3d6

Contributors: Show github login if name is not available

rgbkrk merged commit 2070739 into master Apr 28, 2017

rgbkrk deleted the updates-next branch April 28, 2017 19:26

arielsvn mentioned this pull request Feb 7, 2020

Migrating to nextjs arielsvn/arielsvn.github.io#7

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Updates to design + next.js implementation #7

Updates to design + next.js implementation #7

aulneau commented Mar 14, 2017 •

edited by rgbkrk

Loading

rgbkrk commented Mar 14, 2017

rgbkrk Mar 14, 2017

rgbkrk Mar 14, 2017

rgbkrk Mar 14, 2017

rgbkrk Mar 14, 2017

rgbkrk Mar 14, 2017

rgbkrk Mar 14, 2017

rgbkrk Mar 14, 2017

rgbkrk commented Mar 14, 2017

rgbkrk commented Mar 14, 2017

rgbkrk commented Mar 14, 2017

rgbkrk commented Mar 14, 2017

rgbkrk commented Mar 14, 2017

rgbkrk commented Mar 15, 2017 •

edited

Loading

rgbkrk commented Mar 15, 2017 •

edited

Loading

aulneau Mar 17, 2017

rgbkrk Mar 17, 2017

rgbkrk Mar 17, 2017

aulneau Mar 17, 2017

rgbkrk Mar 17, 2017

rgbkrk Mar 17, 2017

aulneau Mar 29, 2017

rgbkrk Mar 29, 2017

rgbkrk Mar 29, 2017

rgbkrk Mar 30, 2017

rgbkrk commented Apr 27, 2017

rgbkrk commented Apr 27, 2017

rgbkrk commented Apr 27, 2017

rgbkrk commented Apr 28, 2017

rgbkrk commented Apr 28, 2017

		import SocialButtons from '../navigation/social-buttons'


		class Footer extends React.Component {

		class NavigationLeft extends React.Component {


		constructor(props) {

		} from "../components/page-header/page-header";

		const contributorsData = [

Updates to design + next.js implementation #7

Updates to design + next.js implementation #7

Conversation

aulneau commented Mar 14, 2017 • edited by rgbkrk Loading

Next Steps

Global

Pages

Misc

rgbkrk commented Mar 14, 2017

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

rgbkrk commented Mar 14, 2017

rgbkrk commented Mar 14, 2017

rgbkrk commented Mar 14, 2017

rgbkrk commented Mar 14, 2017

rgbkrk commented Mar 14, 2017

rgbkrk commented Mar 15, 2017 • edited Loading

rgbkrk commented Mar 15, 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

Choose a reason for hiding this comment

rgbkrk commented Apr 27, 2017

rgbkrk commented Apr 27, 2017

rgbkrk commented Apr 27, 2017

rgbkrk commented Apr 28, 2017

rgbkrk commented Apr 28, 2017

aulneau commented Mar 14, 2017 •

edited by rgbkrk

Loading

rgbkrk commented Mar 15, 2017 •

edited

Loading

rgbkrk commented Mar 15, 2017 •

edited

Loading