✨ feat(shortcodes): add 'aside' shortcode for side notes

[welpo]

Summary

Adds aside shortcode for supplementary content.

Users can set the margin on which to show the note. The content can be provided as a text parameter or using body within the shortcode tags (see docs).

Related issue

Resolves #444

Changes

• Adds shortcode
• Updates CSS
• Adds documentation

Accessibility

Uses semantic HTML (<aside>) and has good contrast for the mobile look.

Screenshots

Wide screen:

Mobile (or narrow screen):

Type of change

• Bug fix (fixes an issue without altering functionality)
• New feature (adds non-breaking functionality)
• Breaking change (alters existing functionality)
• UI/UX improvement (enhances user interface without altering functionality)
• Refactor (improves code quality without altering functionality)
• Documentation update
• Other (please describe below)

---

Checklist

• I have verified the accessibility of my changes
• I have tested all possible scenarios for this change
• I have updated theme.toml with a sane default for the feature
• I have updated config.toml in tabi-start
• I have made corresponding changes to the documentation:
  • Updated config.toml comments
  • Updated theme.toml comments
  • Updated "Mastering tabi" post in English
  • (Optional) Updated "Mastering tabi" post in Spanish
  • (Optional) Updated "Mastering tabi" post in Catalan

[netlify]

✅ Deploy Preview for tabi-demo ready!

Name	Link
🔨 Latest commit	7a8f99d
🔍 Latest deploy log	https://app.netlify.com/sites/tabi-demo/deploys/676a062447437300087d602f
😎 Deploy Preview	https://deploy-preview-452--tabi-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[stalkerGH]

Hello. I tried to use new aside feature - works good with default setting (text moved to left) but I can't move it to right. Documentation says:

The shortcode accepts two parameters:
position: Set to “right” to place in right margin (defaults to left)

So I tried this:

{{ aside(text="Sidenote text", position = right) }} [1]

and this:

{{ aside(text="Sidenote text", data-position = right) }} [2]

but none of them works.

[1] from documentation: https://welpo.github.io/tabi/blog/shortcodes/#aside-side-margin-note

[2] from sass/parts/_aside.scss file

[welpo]

Try

{{ aside(text="Sidenote text", position="right") }}

[welpo]

Just updated the docs (da1b6bb) to make it clearer!

Thanks~

[stalkerGH]

{{ aside(text="Sidenote text", position="right") }}

It works, thanks!

[stalkerGH]

I've noticed another things. Take a look into attached screenshot.

If I use {{ aside(text="Sidenote text", position="right") }}, it renders as part 1 on the screenshot. Looks good.

If I put aside shortcode in one line with paragraph, it renders as part 2 on the screenshot. Sidenote text has the same baseline as main text -it is good and expected. But main text is shown in sans-serif font - it is unexpected and unwanted.

f I put aside shortcode as separate line in index.md, then blank line and the paragraph itself, it renders as part 3 on the screenshot. Sidenote text hasn't the same baseline as main text, they are offset - it is unwanted. But main text is shown in serif font - it is expected and wanted.

What should I check?

[welpo]

This is all in one page/article?

Can you give me the page content (markdown with shortcode calls) so I can test the exact same setup on my end?

[stalkerGH]

This is all in one page/article?

Yes, one page.

Can you give me the page content (markdown with shortcode calls) so I can test the exact same setup on my end?

Of course. Please check your e-mail box.

[welpo]

Got it!

Make sure you call the shortcode on its own line, not inside a paragraph. That should fix it!

I've added a warning to the docs (1dcd615)

[stalkerGH]

Thank you for checking this.

[welpo]

Thank you for helping improve tabi!