diff --git a/_includes/footer.html b/_includes/footer.html index 496018c..1a304a6 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1 +1 @@ -This is the footer. Include anything you'd like here, like a link to an About page. \ No newline at end of file +This is the footer. Include anything you'd like here, like a link to an About page. diff --git a/_includes/link-previews.html b/_includes/link-previews.html new file mode 100644 index 0000000..ee22632 --- /dev/null +++ b/_includes/link-previews.html @@ -0,0 +1,119 @@ + + + + + + + + diff --git a/_includes/nav.html b/_includes/nav.html index 295f5e3..5ed31df 100644 --- a/_includes/nav.html +++ b/_includes/nav.html @@ -1,3 +1,3 @@
- {{ site.title }} + {{ site.title }}
diff --git a/_layouts/default.html b/_layouts/default.html index bc4c022..dc74478 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -7,5 +7,7 @@
{{ content }}
+ + {% include link-previews.html wrapperQuerySelector="content" %} diff --git a/_layouts/note.html b/_layouts/note.html index 0e1c8a1..0d04671 100644 --- a/_layouts/note.html +++ b/_layouts/note.html @@ -22,7 +22,7 @@ layout: default
{% for backlink in page.backlinks %}
- {{ backlink.title }}
+ {{ backlink.title }}
{{ backlink.excerpt | strip_html | truncatewords: 20 }}
{% endfor %} @@ -37,5 +37,5 @@ layout: default {% endif %}
- + diff --git a/_layouts/page.html b/_layouts/page.html new file mode 100644 index 0000000..c8c70f5 --- /dev/null +++ b/_layouts/page.html @@ -0,0 +1,7 @@ +--- +layout: default +--- + + + {{ content }} + diff --git a/_notes/consistency.md b/_notes/consistency.md index 4fb3985..e97fb5e 100644 --- a/_notes/consistency.md +++ b/_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). \ No newline at end of file +Then go take a look at the [first note](/your-first-note){: .internal-link}. diff --git a/_notes/your-first-note.md b/_notes/your-first-note.md index 6f44142..c1cf5a5 100644 --- a/_notes/your-first-note.md +++ b/_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: This is the same note about cats as above. + +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! ✌️ diff --git a/_pages/about.md b/_pages/about.md index e6b0634..7796486 100644 --- a/_pages/about.md +++ b/_pages/about.md @@ -1,9 +1,9 @@ --- -layout: default +layout: page title: About permalink: /about --- *This is an about page.* -Feel free to tell the world about what you love! 😍 \ No newline at end of file +Feel free to tell the world about what you love! 😍 diff --git a/_pages/index.md b/_pages/index.md index 3704360..0e2396b 100644 --- a/_pages/index.md +++ b/_pages/index.md @@ -1,11 +1,10 @@ --- -layout: default +layout: page title: Home id: home permalink: / --- -
-

Welcome! 🌱

-

This is your digital garden. Here's [[Your first seed]] to get started on your exploration.

-
+# Welcome! 🌱 + +This is your digital garden. Here's [[Your first seed]] to get started on your exploration. diff --git a/_sass/_style.scss b/_sass/_style.scss index 46c98a2..ada0b02 100644 --- a/_sass/_style.scss +++ b/_sass/_style.scss @@ -83,6 +83,16 @@ a { color: black !important; background: #fffaf1; } + &:after { + position: relative; + top: -0.5em; + font-size: 0.7em; + content: "↗"; + color: #aaaaaa; + } + &.internal-link:after { + content: ""; + } } *:focus { @@ -116,3 +126,9 @@ ul { padding: 1em; border-radius: $border-radius; } + +code { + background: #f5f5f5; + padding: 0.1em 0.2em; + border-radius: 4px; +}