React-pdf: React-pdf landing page

[diegomura]

We will need a landing page to promote the library.

I imagined it can have something like a repl, similar how babel does, where you can type code and see the rendered document on the right. Maybe react-playground can be used for that.

Design ideas and contributions will come very handy.

[cherta]

A playground can be great!

I just attended a conference talk about how to write great documentation and I think we can use that resource (I still need to get the slides) to improve the experience of people onboarding the site and really understanding the library.

UI will be hard for us but I think I can ping Marcelo Brum a friend of mine to help us with that, he is the guy who did the React and Ember logos we give in the React Meetup.

[jbovenschen]

Thanks for reaching out.

About the documentation it would be great if we have some pointers about how we can write at best. Do you already have some ideas about the structure? We can copy a lot from other react-renderers about the Stylesheet, View, Text and Image API's we would still have to describe the PDF specific stuff.

About UI it would be great if we got a real designer which could help with that, can you keep us updated about that?

[diegomura]

Thanks @cherta !!
We ~can~ should definitely use what you learned about docuentation! And if you can reach Marcelo, that would also be great, I love those stickers 😂

I'm having some issues with the renderer, so all my energy is on solving that, but it's great seeing this moving forward. The playground is a must-have. I'll be really cool to see the docuement changing while you type react code

[cherta]

Here's the relevant part of the presentation, I think we can use this guide to writing a complete documentation.

[cherta]

Hey @MarceBrum said he can help us with the landing page UI

[MarceBrum]

Hello guys, I'm really very excited to jump on board and give you a hand on from a design POV. Thanks @cherta for inviting me in!
Im a bit bussy right now, but will show up later, promise ;)

[diegomura]

Thanks @MarceBrum !! That's exactly what we need. I'm very excited about this

[MarceBrum]

Hi everyone, I was about to ask what this is all about.. but it was gonna be too general, so here I share a couple of quick questions that will help me get involved in the project:

1 - What are you guys trying to build here (I mean your pdf Idea)?
2 - Could you share some landing pages links as reference? If possible tell me what you like the most on each example.
3 - Could you make a really simple list of "must have" things on this page? Give the elements a hierarchy if possible.
4 - Do you need to create a brand identity for this project? (Define a brand name, logo, chroma palette, etc)

[jbovenschen]

1 - What are you guys trying to build here (I mean your pdf Idea)?

The main goal of this project is:
Creating PDF files using the things your used to when developing React applications. The benefits over other PDF generators are.

• Using flex-box inside PDF's
• Using a structured component approach inside PDF's
• Render PDF files everywhere.

2 - Could you share some landing pages links as reference? If possible tell me what you like the most on each example.

http://design-system.lostmy.name/
I do like the main structure within this page, great examples and great typography.

http://formidable.com/open-source/victory/guides/animations
Don't really like the designs here but it's awesome to have some way to play around with the examples.

Will let you now when I find more examples of docs.

3 - Could you make a really simple list of "must have" things on this page? Give the elements a hierarchy if possible.

• Goal of the project love to have it on the main page.
• How to use it, something like a quick start guide.
• Of course the documentation grouped like they did at the react-native docs. (http://facebook.github.io/react-native/docs/getting-started.html).
• A playground where you could play around with the DOM version of the renderer.

Nice to have:

• PDF version of the docs.

4 - Do you need to create a brand identity for this project? (Define a brand name, logo, chroma palette, etc)

Should be nice to have that. So we could use that in our examples, can you give us any idea around that?

@diegomura What is your opinion about this?

[MarceBrum]

Hi guys, really loved the firts example, "lost my name design system"... very polished... I also agree that It would bee great to have te ability of editing code, like in the second one, and see what happens right away... that'd be very cool.
The best aproach on this is for you guys to define a "brand name". That way I can come up with a logo, color scheme and typography palette to be used on the site. Once we have that defined, we can start making some quick wireframes until we all are happy with the general structure, and the way we have structured the info. Once those feel good, we can polish the final Ui, so it all looks nice and neat :)

[diegomura]

Hi @MarceBrum !
I agree with most of what @jbovenschen said above.
I would just add:

3 - Could you make a really simple list of "must have" things on this page? Give the elements a hierarchy if possible.

• I think we should make use of what @cherta shared above about effective documentation. I read the slides, and the order of concerns that this proposes makes a god damn sense.
• I though that the playground feature (also called repl in some sites) would be very handy to issue report. Babel's repl does that. It saves the code content in the url, so you can share that ur and run the exactly same snippet that the user who created it. We will have issues in the future (hope not, but most certainly 😅 ) and that can be part of an issue policy. Something like asking for a _"minimal example to replicate the issue, using our repl"_

Also, thanks @MarceBrum for being so enthusiastic! What would be a _brand name_ ? Something like a motto?

[MarceBrum]

Hi @diegomura, by brand name I mean, if you have an specific name you'd like to give your project, it could be something elaborated, or you could simply go with "React-pdf", or "React to pdf". I need to know that, so I can come up with a logo for it 😬

[diegomura]

I think the name itself react-pdf works. React to pdf would be a bit misleading because it gives you the idea that you're transforming something _into_ a pdf. While we just create it.
I like the React renderer for creating PDF files on the browser, mobile and server phrase that it's on the README. You can use it as a motto or something if you feel that only react-pdf is too little

[MarceBrum]

Cool! I'm a bit busy lately, but will start making some drafts as soon as I get some spare time 😎

[MarceBrum]

Hey guys, just wanted to let you know that Im currently working on the landing page. Its been more than a month since my last iteration here, quite embarrassing, not gonna lie about it! Talked to @diegomura a few days ago, I've been working like crazy, and didn't have the chance to get hands on this as I wanted, so... my apologies... anyway, as I was saying, Im working, so will share progress as soon as possible 😬

[jbovenschen]

Don't worry to much about. Thank you for taking the time to create an landing page for react-pdf!

[diegomura]

Thanks @MarceBrum ! There's nothing to apologize for of feel embarrassed. We do this because we like it, and in our free time. I'm glad you are still willing to contribute! I can't wait to see your work!

[MarceBrum]

😊🙏

[MarceBrum]

Hello guys, here you can take a look at what Im working on:

https://invis.io/RWCJ582GH#/243127553_Stile_Sheet

• Please have in mind this is currently under consrtruction. Im working right know on achieving a solid Design System. Recently I found this "8pt Grid System" that would love to apply. Seems like it could improve not only the experience and Ui, but also, the building process...
  Gotta adjust the stuff I've got here according to the grid, but will keep you guys on the loop about it.

• The idea is to work thru Invision, once I add you guys on to the project you'll be able to see the Inspect feature (zeplin like) in order to see specifics on any given element.

• What you see on the test page is not a real "designed page", its a basic layout where I can test the elements I design on the DS. It also gives you a closer idea of what real thing will be, but... there will be changes...

• Also, one important thing that I want to define is how to land the play ground, or REPL. Im talking to a dev friend here at Ingenious, and he adviced me to go with something like babel (code to the left, render to the right) but in a full screen modal. You'd hit a CTA where needed on the page and that would pop up. The idea is that he/she can play around with the code in a confortable way, and then they can keep scrolling and looking around the page as they like...

Ok, that's all for know, tell me what you think, ideas, feedback, good, bad, its all good 😎

[diegomura]

@MarceBrum I loved it!!! Loved the minimalist design, and the use of the red color with the white and gray. Thank you very much for this amazing work. It's looking very good so far.

I had the same idea for the REPL (actually, I was inspired by the Babel REPL). I don't see yet how that fullscreen modal would work. I imagined the REPL to be one of the first things you see when enter the site. Like a easy and descriptive way of showing how the lib works. But not sure if there is enough space to do that in a neat way.

What font are you using?

Thanks again, and sorry for my late response. Please tell me if you need something or if you are blocked, but I see you are in the right path!

[MarceBrum]

😄 Glad you like it @diegomura !! I'm happy to contribute man, thank you guys for letting me in!

About the REPL, I've been doing some research, and what I've found is that those that are put into the page, as part of the content, some how or another end up being uncofortable to use, as when you want to scroll down the page, you are stock scrolling inside the repl... In the case of Babel they handled it really nice, you have that cool editable thing at the landing page https://babeljs.io/ and then, separated you have the repl... something like that I'd like to achieve...
We don't have to copy the landing idea (witch is awesome!!) but, I really like the fact of having the repln on its own tab, separated from the content, full screen, so you can play with it, as long as you want, and then come back and keep reeding along... We could have it on a tab, or launch it from a CTA right at top...

So, moving along... how to proceed:

• Im gonna be landing the 8pt grid and how it will affect the elements I've done (gonna have to adjust everything to it).
• Gonna define the missing assets (txt fields, code bloques, etc)
• Then Im gonna start with the actual design of the site: general structure, sections, repl, etc
  What I need from you guys is to deliver a doc with all the specific data you want to display (at least an apporach): confirm the sections, their name, is any section missing?
  Basicly we need to define the information's architecture, I need you guys to give me a hand on that since I have no idea whats on your mind 😬

• Im gonna be adding you @diegomura and @jbovenschen to the Invision prototype, there you'll be able to leave comments directly on the proto, as well as get accesss to all measurements and specifics in the Inspect mode (Zeplin like)

Ok, thats all for now 😎🤘

[MarceBrum]

Forgot to answer your question @diegomura the fonts are: Taviraj for headers, Source Sans Pro for P (both Google Fonts), and Ico Moon Free for icons. You can see their details on the first page of the guide

[ferdinandsalis]

@MarceBrum this looks great!

[MarceBrum]

Ok, finally here is the stuff you need to start building up the front end:

• Design Guide: https://invis.io/RWCJ582GH#/243127553_Stile_Sheet
• Landing proto v1: https://invis.io/RWCJ582GH#/244714498_Landing_V1

There you'll find key elements to start building the site, please have in mind that all data I put in is all place holders, everything here works just an example.

• Will add you guys now to to the Invision project, so you can have access to the proto it self, make comments on top of it and access the Inspect mode, from where you can have more detailed specs and also the final assets

Hope you like it ☺️

[MarceBrum]

@jbovenschen can't find your email here, please let me know if you'd like me to add you to the invision project

[diegomura]

@MarceBrum you killed it here!
I love the design, very clean. And the REPL is awesome. I did many times, but thanks again for contributing on this way!

I'll try to work on this asap. I'm going to vacations in a week, but maybe I can at least start the project.

I can't wait to see it live. thanks man!

[jbovenschen]

@MarceBrum I like it! You nailed it absolutely on the REPL, thanks for doing this!

[MarceBrum]

thanks @diegomura and @jbovenschen, awesome to hear you like it
It might need some twitches here and there, but the idea is to give you guys the basics to start building the page, whish I was able to have it sooner!
Anyway, glad to be helpful, anything you guys need just let me know! 😉

[diegomura]

I just created a new branch in the project called site (https://github.com/diegomura/react-pdf/tree/site) where I plan to start developing the landing page. Not sure if this is the best way to go, but we can then move this to somewhere else in the future. It would be cool to have the content in markdown format and parse it within webpack in a /docs folder for instance.

@MarceBrum, last week I talked to @cherta about the amazing work you did here. Thanks again man!

[pedroteixeira]

Hello, is the source for the repl site also open? I could not find from the link above tree/site

Just curious to see it

[diegomura]

Hey @pedroteixeira !
Of course it is. You can find it here: https://github.com/react-pdf/site
Any particular reason you want to see it? 😄

[pedroteixeira]

Great work, Diego!
I wanted to check out which library was used for rendering the pdf on the browser :)

[diegomura]

@MarceBrum hey man! How are you?
Just wanted to tell you that we are VERY close of officially release the new v1.0.0 (finally!)
The page is also quite finished:

• DOCS: http://react-pdf.diegomura.com
• REPL: http://react-pdf.diegomura.com/repl

I don't know how are you with times now, but I wanted to ask for a last favor/contribution 😬
If you see, we don't have a color palette for code, both on the REPL or docs examples. Do you think you can provide one? I would do it myself (I actually tried) but I sucked at it.

Please feel free to say no if you can't. This is not supposed to be an obligation, but a fun project.

Btw, I forgot to add credits to your work on the page, but I will (regarding if you can do the code stuff or not). You deserve it for your awesome work!

[Marce-Brum]

Hello, @diegomura please excuse my late response, I've been a bit busy these last few days!
Sure, no problem at all, this is the very first project that I've made a contribution, and to be honest I really look forward to helping in any way I can, so... yeah, I'm in... 😎
I'll be taking care of this probably on Thursday, I'have no idea how you guys handle colors in your code... I mean... I bet you have some pretty elaborated criteria for that right?

• Anyway, I'll be looking up into it, and let you guys know as soon as I have something ready.

[diegomura]

Thanks @Marce-Brum ! I really appreciate the effort 😄
Yes, we have code in two places (docs and REPL) and both are styled differently. But I think it's better to not expose you to the styling complexities, but focus on the colors itself. I can then take care of replicate that as accurate as those platforms enable me.
Please don't forget about string literals now that we support styled-components!

Thanks again!

[MarceBrum]

Hey Diego, how are you?
Sorry for the big, fat delay, I took a few days off, away from all screens
and completely forgot about this request, my bad!
Please find here the chroma palette, hope this is helpful to you:

https://invis.io/Z9NEY6GRG3F#/313304754_Chroma_Palette_-_Code_-_1
https://invis.io/Z9NEY6GRG3F#/313304753_Chroma_Palette_-_Code_-_2

Best regards,
Marce.-

El mar., 24 jul. 2018 a las 0:15, Diego Muracciole (<
[email protected]>) escribió:

Thanks @Marce-Brum https://github.com/Marce-Brum ! I really appreciate
the effort 😄
Yes, we have code in two places (docs and REPL) and both are styled
differently. But I think it's better to not expose you to the styling
complexities, but focus on the colors itself. I can then take care of
replicate that as accurate as those platforms enable me.
Please don't forget about string literals now that we support
styled-components!

Thanks again!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/diegomura/react-pdf/issues/58#issuecomment-407266984,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ablnn_SXj9bcl5td0FIVxL8ZYV2shHZaks5uJpE0gaJpZM4NhgMa
.

[diegomura]

Thanks @Marce-Brum !!! You rock. I totally love how it looks!!
I'll try to implement it soon. The new site is (finally!) coming together. Can wait to have it online

[Marce-Brum]

😎

[diegomura]

@Marce-Brum While implementing these, I notice that the docs and repl code styles are not exactly equal. Is there any reason for this? Just curious 😄

[MarceBrum]

Hi Diego, I'm sorry if that happened, please stick to what says on page one
(Chroma Palette - Code - 1).
That's probably because I had to paint every word by "hand", one by one...
kind of... and probably in that process, as I used the dropper tool,
probably missed the right spot on some colors... 😬

El sáb., 11 ago. 2018 a las 19:02, Diego Muracciole (<
[email protected]>) escribió:

@Marce-Brum https://github.com/Marce-Brum While implementing these, I
notice that the docs and repl code styles are not exactly equal. Is there
any reason for this? Just curious 😄

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/diegomura/react-pdf/issues/58#issuecomment-412304176,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AblnnzkxGWhRoovCi468LSfbZirxoyqaks5uP1R9gaJpZM4NhgMa
.