Add link previews on hover

_notes/consistency.md

@@ -4,4 +4,4 @@ title: Consistency is key
 
 Show up. Do the work. Be consistent.
 
-Then go take a look at the [first note](/your-first-note).
+Then go take a look at the [first note](/your-first-note){: .internal-link}.

_notes/your-first-note.md

@@ -3,14 +3,36 @@ title: Your first seed
 image: /assets/image.jpg
 ---
 
-This is your first note.
+### Welcome!
 
-To link to another note, use regular Markdown syntax for links, with a relative link to the other note, like this: [this is a link to a note about cats](/cats).
+This is your first note. You'll find it in the `notes/` directory.
 
-You can also use Roam-style link syntax by wrapping a note's title in double brackets, like this: [[A note about cats]]. If the Roam-style link does not point to a valid note's title, the double brackets will still be shown, like this: [[This note does not exist]].
+### Link syntax
+
+To link to another note, you can use regular [Markdown syntax](https://www.markdownguide.org/getting-started/) for links, with a relative link to the other note, like this: [this is a link to a note about cats](/cats){: .internal-link}. Don't forget to use the `.internal-link` class to make sure the link is styled as an internal link.
+
+Since the Web is all about HTML, you can always use plain HTML if you want, like this: <a class="internal-link" href="/cats">This is the same note about cats as above</a>.
+
+Of course, you can also link to external websites, like this: [this is a link to Wikipedia](https://wikipedia.org/). Again, you can use plain HTML if you prefer.
+
+Additionally, you can use Roam/wiki-style link syntax by wrapping a note's title in double brackets, like this: [[A note about cats]]. If the Roam-style link does not point to a valid note's title, the double brackets will still be shown, like this: [[There is no note with this title]].
+
+### Automatic bi-directional links
 
 Notice in the "Notes mentioning this note" section that there is another note linking to this note. This is a bi-directional link, and those are automatically created when you create links to other notes.
 
-You can display images using Markdown's image tag, like this:
+### Link previews
+
+If you're on a device with mouse support, try hovering your mouse on internal links to preview the notes: [[A note about cats]]
+
+### Images
+
+Finally, you can display images using Markdown syntax, like this:
 
 ![]({{page.image}})
+
+### Next steps
+
+If this template is useful to you in any way, consider [donating](https://github.com/sponsors/maximevaillancourt) to support my work.
+
+Go forth, have fun, and learn new something every day! ✌️