Feature: Different Note Boxes in Lesson Content

[ChargrilledChook]

Originally by @KevinMulhern

Why?

We are already using a standard note box which draws attention to important information https://www.theodinproject.com/lessons/foundations-installations#introduction

We could have different note boxes with different styles to give the information more context. For example
Tip - green icon/background
Warning - red icon/background
note - yellow or blue icon/background

Examples

JS Info

Warning box:

Note Box

[cleicar]

@KevinMulhern @ChargrilledChook @01zulfi can I work on this one next?

[KevinMulhern]

I think @01zulfi is working on this one @cleicar

[01zulfi]

I haven't started any substantial work on this one yet. I'm happy to let you tackle this one @cleicar 🚀

I don't think we had any note boxes set in stone, but below is a prototype of what I had in mind:

[JuanVqz]

Where can I find an example of the following lesson-note type?
1 Tip - green icon/background
2 Warning - red icon/background

[KevinMulhern]

We don't have anything in the system like those atm @JuanVqz. The couple of examples on this issue is the kind of thing we're looking for.

[01zulfi]

@JuanVqz Checking in to see if any progress has been made on this issue

[JuanVqz]

@JuanVqz Checking in to see if any progress has been made on this issue

Hey, I haven't made any progress on this one

[01zulfi]

@JuanVqz Are you willing to continue this issue? If not, that's fine as well.

[JuanVqz]

At this point, I cannot do it, sorry about that, and thanks for the heads up! Good day!

[KevinMulhern]

Thanks for letting us know @JuanVqz

[luuu-xu]

@KevinMulhern Hi, I would like to work on this issue if it is still open. I feel it is fairly easy add-on.

[KevinMulhern]

Thanks @luuu-xu, it's all yours 💪
If you need any support, please let me know.

[luuu-xu]

Thanks @KevinMulhern, since this will be my first open source contribution, I'd like to get some help from you.
So after reading the codebase and play it around with CSS in the browser, I learnt that the from app/javascript/stylesheets/lesson-content.css, I can make colour changes to .lesson-note, that's easy.

1. Since we are having Note, Extra, Warning, should I just add CSS classes accordingly in lesson-content.css? So when we change the .md files, by changing <div class="lesson-note" markdown="1"> to probably <div class="lesson-note warning" markdown="1">, the colour red will be applied?
2. And also, I suppose I should just grab the colour from the design screenshots by @01zulfi?
3. What about the corresponding icons, where can I grab them?
4. How should I go about adding the icon as the header of every note boxes, it seems like I can't find a component I can make changes to...
5. I also feel like if we are adding the icon as the header, it might not look as good as js.info's style where a header title follows the icon.
6. After these note boxes are done, should I also go ahead and make changes to the curriculum markdown files so each note box has a category?

Wow that's a lot of questions, I am sorry about asking every detail of this issue, I am just eager to make this PR my great first contribution!

[KevinMulhern]

No worries @luuu-xu, happy to help.

Since we are having Note, Extra, Warning, should I just add CSS classes accordingly in lesson-content.css? So when we change the .md files, by changing

to probably

, the colour red will be applied?

CSS classes sounds perfect, we're using BEM notation for our custom classes so we could add some modifier classes for each:

<div class="lesson-note lesson-note--warning" markdown="1"`

---

And also, I suppose I should just grab the colour from the design screenshots by @01zulfi?

We're using Tailwind color system on the site, you can find a full list of those here.

---

What about the corresponding icons, where can I grab them?

The easiest thing would be to use Fontawsome icons, we have it available in the app.

---

How should I go about adding the icon as the header of every note boxes, it seems like I can't find a component I can make changes to...

I think we'll be able to do this with a before pseudo class, Something like this should work:

.lesson-note--info > h4::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f05a";
    @apply mr-2;
  }

Markup to make this work:

<div class="lesson-note" markdown="1">
  <h4>title</h4>
</div>

---

I also feel like if we are adding the icon as the header, it might not look as good as js.info's style where a header title follows the icon.

Yep, I agree it looks odd with just the icon. Let's include a title after the icon like js.info are doing it.

---

After these note boxes are done, should I also go ahead and make changes to the curriculum markdown files so each note box has a category?

Instead of doing all three lesson notes in one PR, I'd approach it like this:

1. Focusing on just the existing note/info box styling in the first PR - It'll be easier to manage for you and easier for us to review/release.
2. Change the note boxes markup on the curriculum files to include titles

After that, it will be trivial to add the styling for warning and tip lesson notes since all the patterns will be established and agreed upon by everyone involved.

[luuu-xu]

@KevinMulhern Hi, after some frustrating hours of setting up the environment on the M1 iMac I have, I have added the CSS variations and requested PR.

During the works, I found out the markdown files are fetched from curriculum's github url directly so I couldn't find a way efficient enough for me to add the h4 title into the note box. But I have managed to finish the work, including colour choices for dark mode with WCAG contrast standards.

Now should I go ahead and request a PR for curriculum repo where h4 title is added to the lesson note in this PR, though I'm not sure what title would best suit it. I am thinking "Make sure your OS is supported".

[KevinMulhern]

Hey @luuu-xu, thanks for getting this done so quickly!

You can test out the styling locally using our markdown preview feature, you can access that by going to http://localhost:300/lessons/preview locally.

[luuu-xu]

Great feature!! I have made the changes from your suggestions and also added lesson-note--tip and lesson-note--warning to tailwind safelist so now they work great. Thank you for all the suggestions!