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.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[george-gca]

For the time being, I accepted #3103 since it adds sidenote example and also some other missing features to the distill template. Do you still think it is worthwhile add tufte to the template @abhilesh @DamonsJ? Also I like your idea @abhilesh of extracting the distill template to another repo, and keeping it updated with some changes introduced here. Best case scenario would be to fork the distill template and keep updating it, or even find a newer academic template like distill to add to our template. What do you think?

[abhilesh]

@george-gca Sorry things got hectic on my end!
Distill does have pretty opinionated formatting and hasn't seen many updates in the recent years. If there is demand for this (which in the academic sphere there seems to be), we could fork the distill template and modify it to integrate it better with the rest of al-folio. I will also look into some alternatives in the meanwhile to see if there is something else than better suits our purposes

[george-gca]

Any updates on this matter are really welcome o/

[abhilesh]

Any updates on this matter are really welcome o/

I looked into alternatives, Quarto is the direct successor to Distill, though integrating it with Jekyll just for a certain aesthetic for our blog posts would be cumbersome and laborious.

I think the easiest solution would be to fork the distill template and maintain a copy with our customizations on top as that's already been integrated with the current codebase.

[george-gca]

I will also take a second thought about the tufte theme in the template.

[abhilesh]

I will also take a second thought about the tufte theme in the template.

I see, sorry missed out on the context earlier. I agree with you that adding the tufte theme alongside the distill-template will be worthwhile. The tufte theme presented here aligns better with the other kinds of blog posts we have, so overall better consistency.

I haven't done a deep-dive into the code here to check for inconsistencies, but agree with you that we should be careful with the variable scoping here by importing an extra css. I also like the idea of enabling sidenotes with a flag so that we don't interfere with the other styles.

[george-gca]

My main issue with this is to keep the visuals consistent. But if tufte can be integrated in a way that the overall look makes sense (e.g. colors and other styles from the main css are kept the same), I don't see why not including it as an option, even though the tufte-cs was updated a year ago, at least is closer in time than distill.

[abhilesh]

My main issue with this is to keep the visuals consistent. But if tufte can be integrated in a way that the overall look makes sense (e.g. colors and other styles from the main css are kept the same), I don't see why not including it as an option, even though the tufte-cs was updated a year ago, at least is closer in time than distill.

The tufte style blog post in this PR seems to work well in the deploy preview and doesn't seem to interfere with the rest of the codebase's theming. The blog post mentions that the tufte-css files were converted to sass for better support with site-wide theming and while these seem to be implemented okay in the deploy, I can't find a sass file in the PR.

I think the way forward would be to refactor this PR similar to the distill functionality implemented in al-folio, via the use of a layout: tufte flag in the front matter of the blog post that'll load the relevant styling only for the blog post and not globally.

You might be more familiar with the codebase than I am, but I think the refactoring would need:

• _layouts/tufte.liquid -> wraps content with tufte-theme specific tags similar to _layouts/distill.liquid
• _sass/tufte.scss -> converted from tufte-note.css and uses _sass/themes.scss and _sass/variables.scss variable definitions
• _plugins/tufte_tags.rb -> keeps all tufte related tags together

This would also ensure that the tufte styles are not loaded globally but only for the posts with the layout: tufte flag specified in the front matter

[george-gca]

@DamonsJ are you still willing to add the needed changes for this PR? I can walk you through the steps if you need help.