Better UX for the project introduction

[helfi92]

Having the project introduction closed by default is not optimal because it requires the user to do an extra click every time they navigate to a project to have a quick summary of the project. Instead, we should be able to show the first section of the markdown and have a "See more" or "..." button that expands the introduction and a "Show less" button when the introduction is expanded.

To implement this, you could perhaps take the markdown content and take everything up until the second <h2> element. Once the user clicks on "See more", we can show the rest.

[helfi92]

@fiennyangeln How is this one coming along? Is there anything I can help you with?

[fiennyangeln]

Still trying to do the separation using Regex before it turned into DOM nodes.. Or is it possible to do it on DOM nodes?

[helfi92]

What do you mean by "before it turned into DOM nodes"? Are you able to console log the full content of the project introduction?

[fiennyangeln]

Yup! its all the markdown in a string format like

"## About Taskcluster\n\nTaskcluster is a distributed platform for executing tasks, such as running tests.\nEvery day, it runs hundreds of thousands of tasks to support Firefox and lots of other projects at Mozilla.\nIt is written in Javascript and Go and has lots of opportunities to help out.\n\nYou can learn a bit about Taskcluster in its [documentation](http://docs.taskcluster.net/) -- the tutorial makes a good place to start.\n\n## Who Works on Taskcluster?\n\nMany of the project participants, past and present, are listed on [our people page](https://docs.taskcluster.net/docs/people).\nThe team assigned to work on Taskcluster at Mozilla is about 10 people, distributed around Europe, North America, and South America.\nYou will likely see the names of team members listed as mentors in the bugs and issues on this site.↵We are always excited to meet new Mozillians!\n\n## How Do I Get Started?\n\nIf you are working on a bug (in Bugzilla), you may need to [create a new account](https://bugzilla.mozilla.org/createaccount.cgi).\nIf you are working on an issue (in Github), you will need a Github account.\n\nComment in the bug or issue to say that you are working on it, and ask any questions that you have at that time.\nBut do your research!\nLook the other comments, look at the documentation and source code, and try to figure out as much as you can first.\nThis helps you learn more about Taskcluster and understand better the bug you're fixing or feature you're adding.↵↵### How Do I Write the Code?↵↵All of the Taskcluster code is in Github repositories in the [taskcluster organization](https://github.com/taskcluster).↵For example, the queue service is in the [taskcluster-queue](https://github.com/taskcluster/taskcluster-queue) repository.↵Once you've figured out which repository to use, clone it and -- before you change anything -- run the tests.↵The repository's README file will describe how to set up and run tests.↵↵From there, follow the Github pull-request process: make a fork of the repository, make your changes on a branch, and then create a pull request from that branch.↵The Internet is full of guides for this process, and of course we are happy to help as well.↵↵## How Do I Get Help?↵↵The best place to talk about a bug or issue is in the comments.↵Don't be afraid to ask questions or describe how you are solving the problem.↵That way, anyone watching the bug can answer your questions or offer useful advice.↵Each bug has a mentor, and that person will usually be the one to reply.↵↵We are also available on [irc](https://wiki.mozilla.org/IRC) in the `#taskcluster-contributors` channel.↵That's a great place to get quick help or work through issues with Git or Node.↵"

[helfi92]

Have you tried something like markdownContent.split(/##\s/)[1]? This should give you the first paragraph. At load time, we can display that and then once the user clicks on "Show More", we render the initial markdown content.

[fiennyangeln]

Ok

[helfi92]

@vaishnavipamulapati This would be a fun task to work on. Happy to help along the way :) Let me know if you're interested.

[vaishnavipamulapati]

It does look interesting! Yes, I would like to work on this.

[helfi92]

Go for it. Let me know if you have any questions :)