Redesign examples/*html

[rexagod]

Hi, this is a first-timers-only issue. This means we've worked to make it more legible to folks who either haven't contributed to our codebase before, or even folks who haven't contributed to open source before.

If that's you, we're interested in helping you take the first step and can answer questions and help you out as you do. Note that we're especially interested in contributions from people from groups underrepresented in free and open source software!

We know that the process of creating a pull request is the biggest barrier for new contributors. This issue is for you 💝

If you have contributed before, consider leaving this one for someone new, and looking through our general help wanted issues. Thanks!

🤔 What you will need to know.

Nothing. This issue is meant to welcome you to Open Source :) We are happy to walk you through the process.

📋 Step by Step

• 🙋 Claim this issue: Comment below. If someone else has claimed it, ask if they've opened a pull request already and if they're stuck -- maybe you can help them solve a problem or move it along!

• 📝 Update: To complete this PR, you need to redesign the index.html and select.html files in order to provide a more engaging and vivid demo to the new comers. What you implement mostly depends on your own acumen, with the essential points that,

  • Subexamples provided in the html files should cover all cases, i.e., the different manipulations that ime has to offer.
  • Theme must match the colours used over at https://publiclab.org, i.e., a contrasting combination of black and white (invert maybe?)
  • You can read about color contrasts, text styling and other best practices here to get you started.

• 💾 Commit your changes

• 🔀 Start a Pull Request. There are two ways how you can start a pull request:

1. If you are familiar with the terminal or would like to learn it, here is a great tutorial on how to send a pull request using the terminal.

2. You can also edit files directly in your browser and open a pull request from there.

• 🏁 Done Ask in comments for a review :)

Please keep us updated

💬⏰ - We encourage contributors to be respectful to the community and provide an update within a week of claiming a first-timers-only issue. We're happy to keep it assigned to you as long as you need if you update us with a request for more time or help, but if we don't see any activity a week after you claim it we may reassign it to give someone else a chance. Thank you in advance!

If this happens to you, don't sweat it! Grab another open issue.

Is someone else already working on this?

🔗- We encourage contributors to link to the original issue in their pull request so all users can easily see if someone's already started on it.

👥- If someone seems stuck, offer them some help! Otherwise, take a look at some other issues you can help with. Thanks!

🤔❓ Questions?

Leave a comment below!

[ShivankSahai]

I wish to work on this issue.

[rexagod]

Sure, @ShivankSahai, go ahead!

[ShivankSahai]

Hi, I made changes to the index.html and wysiwyg.html files, and opened up a pull request, so please see if I did everything correctly. I wasn't able to understand the issue fully, so please tell me if I should have done anything else, or something more, and I'll work on it.

[rexagod]

@ShivankSahai Can you link your PR back here by adding a "Fixes #65" in its description (at the start)? I'll have a look. Thanks!

[rexagod]

Okay I skimmed through it and just wanted to confirm, did you test it out? Please make sure the inline editor works on all the examples in the index.html, also can you modify the css a bit (refer issue description above) Thanks!

[rain-light]

Are you still working on this?

[rexagod]

Pinging @ShivankSahai. @rain-light I guess you can go ahead with this. Let us know if you face any trouble along the way!

[rain-light]

Thank you, I started working on this. Anyways, npm found some high priority vulnerabilities and I run a "npm audit fix" to see what it could manage to fix alone. It then said that 2 of them would break something and I didn't continue.

Maybe you already know, but just in case I reported this here

[rain-light]

Alright, I went exploring around and now I have some questions.
I can see the application still is in a early phase of development and nothing is set on stone (correct me if I'm wrong). So:

• I see you include Bootstrap 3 in your dependencies, but not much of it is used. Is this mandatory? Or maybe I could use Bootstrap 4?

• I work best when I have a very high degree of freedom, aka no Bootstrap and coding the style from scratch; especially for 2 pages. This is also an option; if you'd choose this I would make a 'scss' folder inside of src following the 7-1 structure.

• If you would allow me to do so, I'd redesign the "Edit this section" form. To put it better I'd redesign everything, since the style would have to be consistent

• What does "(above, raw HTML blocks should be undisturbed)" stand for? If it's something related to avoiding messing with the DOM manipulation by the app, I could check what has to stay the same and what can change (can't do it right now, it's 10 PM in my country right now sorry)

• I have never used grunt, do you have some automated live server functionality such as with Gulp and browserSync?

EDIT:

• Oh and the icons! I could use a svg main file generated by icomoon.io (there's also FontAwesome if you want it) for better practice.

Thank you for the opportunity!

[rexagod]

Hi @rain-light! I appreciate your interest, and have tried to answer your questions below but feel free to ping me if you have any doubts whatsoever. Thanks!

I can see the application still is in a early phase of development and nothing is set on stone

This is actually a satellite library, and is used over at our plots2 repository for using markdown in comments. You can try it by commenting on any of the notes over at publiclab.org. It seems that that application is in an early phase as we haven't completely incorporated the set of APIs it has to offer inside the demo.

I see you include Bootstrap 3 in your dependencies, but not much of it is used. Is this mandatory? Or maybe I could use Bootstrap 4?

How about shifting the B3 code to B4 in a separate PR? Or maybe starting from scratch using B4?

I work best when I have a very high degree of freedom, aka no Bootstrap and coding the style from scratch; especially for 2 pages. This is also an option; if you'd choose this I would make a 'scss' folder inside of src following the 7-1 structure. If you would allow me to do so, I'd redesign the "Edit this section" form. To put it better I'd redesign everything, since the style would have to be consistent

Hmm, interesting. I'd be really excited to see some SCSS getting merged into this lib! Also, if you think this requires a complement revamp, go ahead!

What does "(above, raw HTML blocks should be undisturbed)" stand for?

It's actually the HTML blocks that are treated as examples for the demo to operate upon. Feel free to include it in your revamp if you feel like it!

I have never used grunt, do you have some automated live server functionality such as with Gulp and browserSync?

inline-markdown-editor/Gruntfile.js

Line 60 in 4b8ccf4

grunt.registerTask('default', ['watch']);

Sure! You can enable that by simply typing in grunt in your terminal.

Oh and the icons! I could use a svg main file generated by icomoon.io (there's also FontAwesome if you want it) for better practice.

Please do!

[rain-light]

Hello, I tried getting to work at this more than once this week, but unfortunately since I have to prepare Linear Algebra exam for the 1st of July and Java for the 10th I wouldn't have enough time to give this the amount of work it would need.

If someone else wants to do this, feel free to do it. If no one will have taken it when I'll have finished, I'll join again.
Sorry for the inconvenience and thank you!

[NitinBhasneria]

@rexagod If no one is working on this so can I do this?

[rexagod]

Sure, @NitinBhasneia!

[NitinBhasneria]

ok, thanks, @rexagod. I have seen that someone was already working on this so anything you want to add then, please.

[pankajkrbansal]

@rexagod I'd like to try this!