Landing page

[kof]

We definitely need a landing page. We need to highlight the values without making people read the entire documentation. Also we need to integrate react-jss and styled-jss and evtl. prejss into it.

Points

1. Examples
2. Who is using
3. User testimonials (if we can get some)
4. Theming
5. SSR

[kof]

I think we can show a landing page and move the current documentation to /docs

[typical000]

I can help with design. But need help with texts

[typical000]

We can use this as main screen http://cssinjs.org/404/ :)))) But with function values

[tutizaraz]

@kof great idea. but how about design/prototype or something stuff which needs for work?

[kof]

I am an awful designer, need help here.

[tutizaraz]

@kof if you have a free time to discuss it, let's do it

[kof]

Sure, ping me on gitter or twitter!

[kof]

also  @typical000 I can do the wording

[typical000]

I have planned to do some design in those days)))

[typical000]

Finally I had some time to make something :)

Dont know why, but I decided to make some original, 'vertical' design. Maybe because im tired by standart landings... Maybe it looks like a piece of shit... So dont judje strictly. :) All screens are adapted to 1920x1280px 24" monitor sizes. For 13"-15" will be less air around widgets :)

1. Home screen https://www.dropbox.com/s/s2pnue6zl57ctnc/landing_home_dark.jpg?dl=0 (or with white right part - https://www.dropbox.com/s/i69rwi30bflcojf/landing_home_light.jpg?dl=0) Left JSS logo can be static or with some dynamic like here - http://cssinjs.org/404/ 'Discover' more button scrolls down to first section 'See docs' redirects to full documentation

2. Benefits https://www.dropbox.com/s/vjt6jfwukqp43ve/landing_benefits.jpg?dl=0 After scrolling down from home screen left side will contract and content will be replaced with some pretty animation and stay fixed. It will change only when current section that is in viewport will change

3. Who is using https://www.dropbox.com/s/xqktzbbkjc6yc78/landing_who-is-using.jpg?dl=0

[typical000]

Anyway - in the next few days I'll try to make a more standard version of design

[tutizaraz]

@typical000 heey, I like this

[kof]

To me, it looks beautiful!

[tutizaraz]

@typical000 ping me please on twitter if you have a free time. I want to discuss with you some cases about design

my twitter

[typical000]

@kof Need to think what we need to describe and show in "theming", "ssr" and "migration strategies" sections. Because design will be determined by content :)

And some additional general questions:

1. I agree with idea to move docs to "docs/" subfolder and place landing as main. But what about development? We'll use separated and independent webpack builds for landing and docs, or use the same webpack config but split anything in 2 separated entry points?

2. What about texts? We can't use on landing MD files like on documentation site. Because there are too many places where we must put separated text keys (blocks).

3. Translations and internationalization. Did you thinked about translating landing to different languages? We can do EN, DEU, IT (yea, I know it and worked may years ago as interpreter :)) and RU translations. Maybe it will be a big plus in popularization of cssinjs?

4. SEO optimization. Meybe we need to optimize our future langins for it? It will be good if we search JSS and find this landing page :) But I have no experience in it :(

[typical000]

And what about "examples" section? What examples we'll show? Maybe we don't need pure examples and we can сut it and show only

1. Pure jss example
2. react-jss example
3. styled-jss example All of 3 section will be linked with 2 buttons - to docs site, and to webpackbin. But in this case name "examples" doesnt fit to content. Maybe "Basic syntax and abstractions"

[typical000]

Added more 2 examples

1. Testimonials section (if we can get them :)) https://www.dropbox.com/s/l4zkh2jnn36lu4n/landing_testimonials.jpg?dl=0

2. Examples (As described above, renamed them) https://www.dropbox.com/s/qig57v7xkl1cq0h/landing_examples.jpg?dl=0

[kof]

1. I think it makes sense to have a separarate build for landing, as we already have one for libs
2. Content could be probably inline in the components, lets see how it goes.
3. Translations - for now I would not do them, because its a burden to maintain, we would have to wait for someone to translate for each change, same for documentation. Maybe at a later stage.
4. I see us already in the first results when searching for cssinjs and jss.

[kof]

What if we use embedded https://codesandbox.io/ (scroll down for examples) at the very first screen. On top of it we could use tabs in order to show sandboxes with different wrappers like styled-jss react-jss etc.

I am thinking that examples should be the first section after the teaser.

[kof]

I was also looking again at styled-components landing page. I think it is too much text. On the landing we don't have to write tutorials. We have to make teasers and very briefly explain the benefits and use code playgrounds. Everything else should be on the docs pages.

[typical000]

Added new example with more 'regular' design https://www.dropbox.com/s/cdegwc6wztwidl6/design_landing_v2.jpg?dl=0

[tutizaraz]

@typical000 I like it better than others variant

[typical000]

Another update. https://www.dropbox.com/s/cdegwc6wztwidl6/design_landing_v2.jpg?dl=0 - added ssr, theming and animation sections + footer

Menu (will be fixed, not visible on first section): https://www.dropbox.com/s/r37tito4a4z8irh/design_landing_v2_menu.jpg?dl=0

psd source: https://www.dropbox.com/s/22y1jk8dg5132wy/design_landing_v2.psd?dl=0

[kof]

Just talked to @philpl, he brought me into thinking about one big problem: people who use react-jss and styled-jss don't care about core jss api. We have to structure the landing and the documentation in a way that allows user to go top-down.

Top-down means higher level API's first (react-jss/styled-jss), then JSON API, then core JSS api.

[kof]

Also we need a getting started page similar to SC' landing, though I think it is too much text for landing after we put all the examples first, it should be a separate page on the docs page.

[typical000]

After long silence, what is done: (cssinjs repo was forked and setuped gh-pages in my personal repo)

1. Created landing: https://typical000.github.io/cssinjs/ with adaptation to mobile devices
2. Moved DOCS in subfolder /docs
3. Updated all dependencies
4. Rewrited code to use ThemeProvider, JssProvider and so on
5. Refactored theme. Removed unused colors

What must be done before launch:

1. Review all texts. They are placed here: https://github.com/typical000/cssinjs/blob/master/src/landing/texts.json https://github.com/typical000/cssinjs/blob/master/src/landing/demos.json
2. Add proper examples here: https://github.com/typical000/cssinjs/blob/master/src/landing/demos.json Especially for SSR, Theming and animation. Because I have added random examples from codesanbox Maybe we must create new ones.
3. Think about whan we must remove, what we must add. For e.g. add separatedly 'function values' and 'observables' examples.
4. Report possible bugs :)

[kitten]

@typical000 looks amazing already :heart: just noticed that you're using codesandbox for the examples. I can only recommend you to take a look at https://github.com/FormidableLabs/react-live :wink:

Maybe changing those would also help to decrease the noise of the page. Some of the examples feel rather "busy" due to the CodeSandbox interface and because they look like windows (since they're just frames) taking up almost the entirety of the window. Hope that helps :+1:

[kof]

Lets take a look at react-live. The benefit of codesandbox is that it is a complete DX, many already know how to use it and you can do everything.

Maybe we can find a trick to not instantiate a full editor until user clicks into it? Or alternatively use react-live and provide a link to codesandbox for a full experience.

[kitten]

Or alternatively use react-live and provide a link to codesandbox for a full experience

@kof I'd consider this optimal for most examples that require "more playing around" from the user :smile: the benefit of integrating this stuff into your site is definitely startup time, responsiveness, design control, etc. A link to codesandbox then would be ace!

[typical000]

Or alternatively use react-live and provide a link to codesandbox for a full experience

@philpl good solution! Never seen before and I'll use it in my next projec! But I see some bad parts in our case (as I think):

1. We must take in sync on landing and what we show to user on codesandbox. And this was the main point so we made ajax loading of documentation from github :) Using only codesandbox it's a win because we can share links everywhere (in gitter, docs site, landing) and we'll be sure that is the same example. But it's a fail due to codesandbox bootstrap time (especially if you quickly scroll to bottom of page - all start bootstrapping and it's a mess :))

2. As I see we can't write inside react-live import statements. Or not? So, our examples will be like "cutted" without saying to user what he must import. And all will be imported in landings code Another point - in examples we use things, that are not used in landing (e.g. styled-jss). So we must install it and import in landing.

[kof]

Actually I will ask on codesandbox repo if we can have a light preview and only load the rest on click. Sort of a lazy option.

[EricSimons]

Hey all! Not sure if this is what you're looking for, but StackBlitz has the ability to run embeds on-click instead of on page load - for ex: https://stackblitz.com/edit/jss-example?ctl=1&embed=1&file=index.js (full project from here)

Happy to help you get this set up for your docs if desired!

[kof]

@EricSimons the embed itself would be an iframe with loading remote document, right?

[typical000]

Another reanimation post :)

Seems like codesandbox solved internal problems with bootstrapping inside iframe when we embed code on out pages. Now sandbox is loading but preview is available only by click check example here: https://typical000.github.io/cssinjs/

Still waiting for help with:

1. Texts
2. Demos

Because without this 2 points anything else is ready. Or we need to make any other additional work here?

@kof maybe transfer all the changes from my forked repo to centerl repo in some branch like "next" ? So anyone who wants from core team can make changes without creating pullrequest?

[kof]

yeah, next branch would be good.

Iframes is still not ideal, ideal would be using components of sandbox directly. Right now scrolling seems very heavy.

[kof]

This is another blocking issue https://github.com/cssinjs/jss/issues/647

[typical000]

Done, all code now is in new 'next' branch: https://github.com/cssinjs/cssinjs/tree/next

[kof]

Going to revisit this soon.

[kof]

Famous last words ... because of all the maintenance work and v10 work, I didn't have enough time.

[kof]

I just saw this https://www.strml.net ... thanks @tlakomy for sharing this, I could totally imagine this being an interactive intro/landing page for JSS.