feat: add tufte css theme

[DamonsJ]

add tufte css theme
add sidenote and marginfigure

see alse :

https://github.com/edwardtufte/tufte-css

https://github.com/clayh53/tufte-jekyll

[netlify]

✅ Deploy Preview for relaxed-lollipop-b6bc17 ready!

Name	Link
🔨 Latest commit	bc0bd2c
🔍 Latest deploy log	https://app.netlify.com/sites/relaxed-lollipop-b6bc17/deploys/67d69ed7a000d7000873c53f
😎 Deploy Preview	https://deploy-preview-3077--relaxed-lollipop-b6bc17.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.

[george-gca]

Nice work porting the Jekyll solution. But I'll need more time to review this.

I think we should first understand why tufte-jekyll implemented a lot of stuff as plugins. Then we should check if we should do the same, or if there is a more elegant solution. Also idk if just importing the css file wouldn't clash with our current csses. Maybe it interferes with the current built-in posts or projects, then we should be more careful. Maybe we should create something like the solution we use for importing other libraries, like when doing plots, that we add some flag to the post front matter and that enables the importing of the css.

I'll take a deeper look at it, but it will take some time, since I have been busy with other stuff at hand.

[DamonsJ]

If there is a better solution, that would be great.
take your time, but please consider the sidenote stuff!

[george-gca]

I agree that the side note is really useful, and it would be a great addition. I am just afraid that simply importing the css might override some classes and mess with the styling of the site somewhere.

[abhilesh]

I am currently using sidenotes on my blog posts by using the distill template and assigning sidenotes using the <aside> tag. There might be some limitations for the use of <aside> but for most simple sidenotes it works very well.

[george-gca]

I am kind of in a tight schedule these days, so I haven't been able to review this just yet.

@abhilesh can you add some sidenotes to the distill template demo? It would be really useful.

[abhilesh]

@george-gca, added examples to the blog posts along with a few other features bringing parity between distill-style posts and blog posts #3103

@DamonsJ I appreciate that you want to implement the sidenotes for the "normal" al-folio style blog posts; your implementation puts the sidenotes outside the article container causing them to spill over (check attached screenshot). Is there a way you can implement the sidenotes to match the grid similar to distill-style posts?

[DamonsJ]

ok, let me check

[DamonsJ]

I saw your example for side note in distill posts, it's useful

btw, is there any chance to make the sidenote number countable automatically.

[abhilesh]

I saw your example for side note in distill posts, it's useful

btw, is there any chance to make the sidenote number countable automatically.

I believe sidenotes and footnotes have different intents in terms of the article content:

• Footnotes are best for expanding on a specific sentence, appearing as a superscript and revealing more information on hover.
• Citations work similarly but are styled differently to indicate references.
• Sidenotes are better for additional information relevant to the broader topic of the paragraph rather than a single sentence.

The side- and margin-notes in your example post can be fully achieved using the distill-style for blog posts. If the goal is to replicate the Tufte style exactly in standard blog posts, we could consider defining a separate layout and implementing a grid to create a default margin within the overflow box.

That said, since margin notes can already be implemented with the existing code, I’m hesitant to introduce another layout unless it enables something that isn’t possible with the current approach.

[DamonsJ]

I think you are right!

It is not necessary to add another layout if the distill-style post have similar effect.

[george-gca]

Is there any other gain in using tufte layout?

Also, I am not completely against it yet. For example, GitHub's CodeQL issues some warnings regarding the distill layout that I don't know how to fix.

Of course, these are only warnings. And the distill layout template isn't updated in years, while tufte seems to still be maintained.

[abhilesh]

Is there any other gain in using tufte layout?

We can keep the styles consistent across all blog post types in al-folio. Distill-style is great for academic-type articles, but still has some limitations (toc generation, non-sticky toc and a few others). I will have to look into it a bit more, but we could possibly use the same logic that we use to position the toc, to add sidenotes in the right margin.

Of course, these are only warnings. And the distill layout template isn't updated in years, while tufte seems to still be maintained.

It might be worthwhile to clone and maintain al-folio specific js scripts for distill given it's been a long time since distill has been updated.

So, we can fix CodeQL warnings for the distill templates and maintain that. Let me know if you would like me to do that.