search

jupyter / enhancement-proposals

Enhancement proposals for the Jupyter Ecosystem
https://jupyter.org/enhancement-proposals
BSD 3-Clause "New" or "Revised" License
115 stars 65 forks source link

New Jupyter.org Website Design #49

Open tgeorgeux opened 4 years ago

tgeorgeux commented 4 years ago

--

EDIT From Matthias, The diff has a text file, here is the content:

Jupyter Website Re-Design Implementation Process.

Item Value
JEP Number 10
Title Jupyter Website Re-Design Implementation Process.
Authors Tim George @tgeorgeux
Status Draft
Created 15 May, 2020
History 15 May, 2020

Problem

Technical: The existing Jupyter Website is a mix of Jekyll templates and bespoke hand-crafted Javascript. Over time the templates have experienced bit-rot and the website is difficult to update significantly without breaking it.

Design: The design of the existing Jupyter Website is dated, and doesn't reflect the complexity of the existing organization, nor does it help outsiders onboard to Jupyter's software or community sufficiently.

Proposed Enhancement

Over the summer of 2019 a team from UCI performed research then designed a new website including an MVP set of pages, templates for future pages, and a style guide for components.

I propose we use this design work as a template for a new Jupyter.org website using a stable static website generator, with a few hard-hitting interactive elements to help users discover Jupyter Projects that would be useful to them. I propose we use Gatsby.js to generate pages via a markdown converter, this will allow us to seemlessly integrate with the moreinteractive elements.

Detailed Explanation

Design details

The design of this new website is finished and be viewed here.

Here's some screenshots of the design:

Development details

Development is the next step. We need a static site generator. (@marwahaha made an initial prototype) There is (at least) one custom component in the current design that requires some custom Javascript. Preferably, we could write such components using a well-known framework like ReactJS.

I propose we use GatsbyJS to achieve this.

There is decent amount of developer time needed up front. This will pay-off in the long run as the maintenance cost is low after initial development.

Approach to rallying developer time+efforts:

tgeorgeux commented 4 years ago

I don't think the screenshots are rendering in the Diff, so here's the screenshots mentioned. Home Documentation Technologies JupyterHub

Carreau commented 4 years ago

Thanks @tgeorgeux, what kind of feedback are you looking for ? Is that a mockup that need to be coded, or is that screenshot of an existing prototype ?

Thanks !

Carreau commented 4 years ago

Misc comments, Personal thoughts not requests for changes (sorry I just saw that the diff have a text file in int) :

tgeorgeux commented 4 years ago

That's a mockup that needs to be coded. Some of the website has been prototyped here: https://guarded-sands-77993.herokuapp.com/ . That prototype isn't generated through any static generator, but it's a great proof of concept.

I want to push for development on this, I think it would be best if we could approve the design, and then moving forward the discussions would be around how to implement it most efficiently.

I think there may be institutional partners interested in helping out with this effort, but I think approaching them with a community and steering council approved design makes the proposal more interesting.

choldgraf commented 4 years ago

Just a quick thought from me:

I think in the spirit of JEPs, the vote here is not on the small details of the implementation (and as @Carreau notes, this is just a mock-up, not an implementation). The vote is on the initiative and the broad contours of the idea, and anyway the design team did a nice job of soliciting feedback already. (@tgeorgeux let me know if you disagree with that and I am happy to rescind the point).

I don't have a vote but I would +1 the JEP if I did.

That said, I think that there are at least 5 things involved in the website refactor

  1. Content
  2. Structure (of the website)
  3. Structure (of individual pages)
  4. Design
  5. Implementation (with a particular SSG etc)

Many of these points can be accomplished now, and with the current skillsets that we have available. Many of these points in-fact have different groups of people best-suited to tackle them. The design team did a great job knocking out some prototypes for 4, and I think that many of 1-3 could be done fairly quickly on the infra that we already have. Number 5 will be the most complex (if the decision is to switch to a new SSG) but then again much progress can be made before we get to it.

So, my suggestion is that we try to:

westurner commented 4 years ago

Maybe 'Apps' (or 'Products') instead of 'Technologies'?

Is there an SVG explaining the relation between the projects?

BinderHub = JupyterHub + repo2docker JupyterHub =

Resources for: (IDK) Data Analysts, Educators, Developers, System Administrators

On Fri, May 15, 2020, 6:44 PM T. George notifications@github.com wrote:

I don't think the screenshots are rendering in the Diff, so here's the screenshots mentioned. [image: Home] https://user-images.githubusercontent.com/22109376/82101975-e18a9900-96c2-11ea-8de5-61ef879b6577.png [image: Documentation] https://user-images.githubusercontent.com/22109376/82101980-e3ecf300-96c2-11ea-9fb7-bb651fca80a6.png [image: Technologies] https://user-images.githubusercontent.com/22109376/82101988-e7807a00-96c2-11ea-9dad-81d4038f3d78.png [image: JupyterHub] https://user-images.githubusercontent.com/22109376/82101994-e94a3d80-96c2-11ea-857b-2fbc866b7ce7.png

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/jupyter/enhancement-proposals/pull/49#issuecomment-629536848, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAMNS5V4Z4PF4ELJFSIRPLRRXAUPANCNFSM4NCT4DGQ .

westurner commented 4 years ago

Is there an audience profile for this design project?

... Linking to the awesome lists might be good:

On Fri, May 15, 2020, 9:32 PM Wes Turner wes.turner@gmail.com wrote:

Maybe 'Apps' (or 'Products') instead of 'Technologies'?

Is there an SVG explaining the relation between the projects?

BinderHub = JupyterHub + repo2docker JupyterHub =

Resources for: (IDK) Data Analysts, Educators, Developers, System Administrators

On Fri, May 15, 2020, 6:44 PM T. George notifications@github.com wrote:

I don't think the screenshots are rendering in the Diff, so here's the screenshots mentioned. [image: Home] https://user-images.githubusercontent.com/22109376/82101975-e18a9900-96c2-11ea-8de5-61ef879b6577.png [image: Documentation] https://user-images.githubusercontent.com/22109376/82101980-e3ecf300-96c2-11ea-9fb7-bb651fca80a6.png [image: Technologies] https://user-images.githubusercontent.com/22109376/82101988-e7807a00-96c2-11ea-9dad-81d4038f3d78.png [image: JupyterHub] https://user-images.githubusercontent.com/22109376/82101994-e94a3d80-96c2-11ea-857b-2fbc866b7ce7.png

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/jupyter/enhancement-proposals/pull/49#issuecomment-629536848, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAMNS5V4Z4PF4ELJFSIRPLRRXAUPANCNFSM4NCT4DGQ .

westurner commented 4 years ago

There were Twitter discussions about a hashtag and a verb form for

REES-compatible #BinderReady / #Repo2dockerReady repos:

https://twitter.com/westurner/status/1253915184877441028

That hashtag and verb form could be prominent?

Maybe also links to trending Jupyter notebooks on GH? https://github.com/trending/jupyter-notebook?since=daily

There are now a number of projects that work with jupyter-repo2docker/#REES-compatible repos; so maybe #BinderReady is not the most encompassing hashtag for the category?

...

This was succinct:

BinderHub builds containers with #repo2docker; which builds from any of

the config files that #REES (Reproducible Execution Environment Specification) supports: environment.yml, requirements.txt, postBuild, … https://t.co/L0VjA0WeJO Configuration Files: https://t.co/44pwC1Gmgh

Why are those on separate pages though? We can scroll through one long page on our mobile devices (which we're accessing jupyter.org from instead of gh or docs) most easily.

https://repo2docker.readthedocs.io/en/latest/specification.html https://repo2docker.readthedocs.io/en/latest/config_files.html (this list could be prominent in the BinderHub section of the page(s))

On Fri, May 15, 2020, 9:41 PM Wes Turner wes.turner@gmail.com wrote:

Is there an audience profile for this design project?

... Linking to the awesome lists might be good:

On Fri, May 15, 2020, 9:32 PM Wes Turner wes.turner@gmail.com wrote:

Maybe 'Apps' (or 'Products') instead of 'Technologies'?

Is there an SVG explaining the relation between the projects?

BinderHub = JupyterHub + repo2docker JupyterHub =

Resources for: (IDK) Data Analysts, Educators, Developers, System Administrators

On Fri, May 15, 2020, 6:44 PM T. George notifications@github.com wrote:

I don't think the screenshots are rendering in the Diff, so here's the screenshots mentioned. [image: Home] https://user-images.githubusercontent.com/22109376/82101975-e18a9900-96c2-11ea-8de5-61ef879b6577.png [image: Documentation] https://user-images.githubusercontent.com/22109376/82101980-e3ecf300-96c2-11ea-9fb7-bb651fca80a6.png [image: Technologies] https://user-images.githubusercontent.com/22109376/82101988-e7807a00-96c2-11ea-9dad-81d4038f3d78.png [image: JupyterHub] https://user-images.githubusercontent.com/22109376/82101994-e94a3d80-96c2-11ea-857b-2fbc866b7ce7.png

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/jupyter/enhancement-proposals/pull/49#issuecomment-629536848, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAMNS5V4Z4PF4ELJFSIRPLRRXAUPANCNFSM4NCT4DGQ .

westurner commented 4 years ago

(FWIW, as a dev, my preference is for line-height:1.2 and the links to the sources, docs, and blog/socialmedia above the fold)

Cool SVGs tho :)

On Fri, May 15, 2020, 9:58 PM Wes Turner wes.turner@gmail.com wrote:

There were Twitter discussions about a hashtag and a verb form for

REES-compatible #BinderReady / #Repo2dockerReady repos:

https://twitter.com/westurner/status/1253915184877441028

That hashtag and verb form could be prominent?

Maybe also links to trending Jupyter notebooks on GH? https://github.com/trending/jupyter-notebook?since=daily

There are now a number of projects that work with jupyter-repo2docker/#REES-compatible repos; so maybe #BinderReady is not the most encompassing hashtag for the category?

...

This was succinct:

BinderHub builds containers with #repo2docker; which builds from any

of the config files that #REES (Reproducible Execution Environment Specification) supports: environment.yml, requirements.txt, postBuild, … https://t.co/L0VjA0WeJO Configuration Files: https://t.co/44pwC1Gmgh

Why are those on separate pages though? We can scroll through one long page on our mobile devices (which we're accessing jupyter.org from instead of gh or docs) most easily.

https://repo2docker.readthedocs.io/en/latest/specification.html https://repo2docker.readthedocs.io/en/latest/config_files.html (this list could be prominent in the BinderHub section of the page(s))

On Fri, May 15, 2020, 9:41 PM Wes Turner wes.turner@gmail.com wrote:

Is there an audience profile for this design project?

... Linking to the awesome lists might be good:

On Fri, May 15, 2020, 9:32 PM Wes Turner wes.turner@gmail.com wrote:

Maybe 'Apps' (or 'Products') instead of 'Technologies'?

Is there an SVG explaining the relation between the projects?

BinderHub = JupyterHub + repo2docker JupyterHub =

Resources for: (IDK) Data Analysts, Educators, Developers, System Administrators

On Fri, May 15, 2020, 6:44 PM T. George notifications@github.com wrote:

I don't think the screenshots are rendering in the Diff, so here's the screenshots mentioned. [image: Home] https://user-images.githubusercontent.com/22109376/82101975-e18a9900-96c2-11ea-8de5-61ef879b6577.png [image: Documentation] https://user-images.githubusercontent.com/22109376/82101980-e3ecf300-96c2-11ea-9fb7-bb651fca80a6.png [image: Technologies] https://user-images.githubusercontent.com/22109376/82101988-e7807a00-96c2-11ea-9dad-81d4038f3d78.png [image: JupyterHub] https://user-images.githubusercontent.com/22109376/82101994-e94a3d80-96c2-11ea-857b-2fbc866b7ce7.png

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/jupyter/enhancement-proposals/pull/49#issuecomment-629536848, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAMNS5V4Z4PF4ELJFSIRPLRRXAUPANCNFSM4NCT4DGQ .

willingc commented 4 years ago

I'm a bit confused if we are approving the design as rendered (which is nice and clean) or the concept that we should refactor the website or something else entirely. If this is a JEP, shouldn't it have some prose to say "hey we want to do a website refactor" and what it will include (@choldgraf has mentioned).

I fully support the website refactor as a +1 as a JEP this would receive a -1 from me since it is missing clarity on what we are being asked to vote on.

PS Thanks for the work on this @tgeorgeux - nice design and @choldgraf on providing some helpful context.

Carreau commented 4 years ago

I think the problem is the following:

This pull request have a text file with is hard to spot with all the images.

I'll update Tim's messgae at the beginning with the content of this text.

Carreau commented 4 years ago

Thanks Chris and Carol for your comments.

I definitely agree that for me it's a +1 on having a general refactor and update of the website, though I want to understand what we are buying into.

I'm also worried if what you propose requires a JEP. And generally I would prefer to have a plan on how to progressively get from where we are now to where we want to be. I don't want to have this be a second version of getting JupyterLab 1.0 through the door with a big swap at the end.

I'm pretty sure we can avoid this "large upfront commitment" with a more progressive changes ALmost quasi static. Typically I would love a plan where each step is minimal and self contained where each step can be finished and deployed, for example:

It will also make it much easier to digest.

One thing which has also not been mentioned is compatibility with previous website. There are potentially a large number of link to current jupyter.org.

Will the URLs change ? Will some information already present be removed ? If so how will that be handled ?

If the project is "create the new website and on Jan 1st 2021 switch to the new design", then i'll 1) not trust you that this will happen 2) likely to be against it.

I'm happy to help with technical guidance and make sure we keep the complexity down. I'm not good at deciding whether the design or content is acceptable though.

THanks for working on this !