Feature: Turn your ProtoSchool code into a gist on GitHub & share completion status on Twitter

[terichadbourne]

As suggested by @andrew, we could offer the user the opportunity to push a button that would take the current state of the code box and save it to a gist on their GitHub account.

@andrew were you envisioning this button being there all the time or just appearing when your code passes the validation? I think I might lean toward the latter.

@fsdiogo This isn't urgent but seems like a nice touch you might be able to add when you have some time. Thoughts?

[andrew]

I imagined that you’d prompt to save it after completion, perhaps along side sharing/twitter links?

[terichadbourne]

Ah, so you'd save the final code from the full tutorial (which all builds on each other) before moving on to the next one? I do like the idea of social sharing links also.

@fsdiogo Could we strip out the final slash and lesson number from the new next steps page and add a sharing link that refers to the URL of the landing page for that tutorial?

[fsdiogo]

@fsdiogo Could we strip out the final slash and lesson number from the new next steps page and add a sharing link that refers to the URL of the landing page for that tutorial?

We already have that (e.g. https://proto.school/#/mutable-file-system), or were you thinking of something else?

I don't think saving all the user code will be straightforward, what if we allow the creation of a gist with the solution code?

[andrew]

Solution code was what I had in mind 👍

[fsdiogo]

Solution code was what I had in mind 👍

Awesome!

@terichadbourne we should wrap up the work done in PR #226 so we can add this.

From what I remember, what's missing is basically the structure of the Next Steps page, so the user can edit it!

[terichadbourne]

Do we care whether it's the solution code that the tutorial author wrote or the passing solution code that the user wrote? As a user I'd rather have it be my own code if I found a different way to solve the challenge. Is that what you were saying would be hard to use @fsdiogo?

We already have that (e.g. https://proto.school/#/mutable-file-system), or were you thinking of something else?

Sorry for the confusion, what I'm asking is if the next steps page could include a sharing button (such as a Twitter logo) that generates a tweet and references the URL and has some message like "I completed the ___ tutorial on ProtoSchool!" with a link to the tutorial landing page, which is not the same URL as the next steps page that it would appear on.

[terichadbourne]

And yes, @fsdiogo, I owe you the structure for that page. Sorry for the delay!

[fsdiogo]

Do we care whether it's the solution code that the tutorial author wrote or the passing solution code that the user wrote? As a user I'd rather have it be my own code if I found a different way to solve the challenge. Is that what you were saying would be hard to use @fsdiogo?

Yes, if it's the code the user wrote, he must've passed all the lessons from the tutorial and we need some methodology to check that and save it.

If it's the solution code, we can just have a static string with the code there ready to go.

Sorry for the confusion, what I'm asking is if the next steps page could include a sharing button (such as a Twitter logo) that generates a tweet and references the URL and has some message like "I completed the ___ tutorial on ProtoSchool!" with a link to the tutorial landing page, which is not the same URL as the next steps page that it would appear on.

Yes, I don't see a problem with that!

[terichadbourne]

Once we merge #282 we will have an isTutorialPassed boolean that we can use to determine when to suggest the social sharing from the resources page.

[terichadbourne]

We now have the isTutorialPassed function/boolean available to us in the Lesson component that should unlock this.

@dominguesgm When you have some time, would you mind taking a look at the documentation for the Gist and Twitter APIs to see how we'd go about initiating posts on behalf of the user (noting that they may not be signed in at the time and we don't have their usernames)? This would then be a fun one for us to pair on for the implementation.
Gist API
Twitter API

[zebateira]

Looking at the Gist API it look like there is no way (that I could find) that would enable us to add a "Save Code" on gist button since that we would need to call the Github API with an auth token provided by the user.

Another solution would be to simply create all the code samples in gists and then we could add a link to the gist at the end of the tutorial and the user would then be able to go to the gist and fork the gist on github.

Let me know what you think @terichadbourne.

For now I'm going to focus only on the twitter share button.

[terichadbourne]

Thanks for the research @zebateira. If I'm understanding you correctly, we'd have to create a GitHub login on our own site in order to make the original plan feasible, which I agree isn't a workable option.

We certainly could copy our solution code into gists as you suggest, but I have two potential concerns:

• We'd have to remember to keep them up-to-date if we change the underlying solution code in a Vue file.
• It appears to me that gists can only be owned by users, not organizations. Given that contributors/maintainers will change over time, it would be much better to associate anything like this with the project itself.

I'm fine with dropping the gist idea if there's no clear path to simple execution and easy access for end users.

[zebateira]

@terichadbourne ok, dropping save code to gist for now 😕