Code Monkey home page Code Monkey logo

org-tufte's Introduction

Org file to beautiful Tufte html with one command

I really like the design of Edward Tufte’s handouts. However, there is no single command for just exporting a org file to the Tufte-like html for lazy people like me or newbie who don’t know too much about org mode setups. Although there is ox-tufte intending to do the job, it didn’t solve that the org-exported html template is not totally compatible with the Tufte CSS and the generated page is not responsive on mobile device. Also, its configuration makes it hard to use for newbie. Based on my own taste, I added some nice features by tweaking the html template and curating my CSS.

Features

  • modern responsive html page.
  • embed image in exported html so that its self-contained!
  • one command M-x export-org-tufte-html just give me what I want
  • use fast and powerful katex instead of mathjax to render math.
  • nice source code display by using et-book-ligatures font
  • just works without having any org options, eg. #+html_head:
  • go to top of page

Installation

manual

Just fetch org-tufte.el and save it somewhere. Then load it

(add-to-list 'load-path "/path/to/org-tufte")
(require 'org-tufte)

use-package

(use-package org-tufte
  :ensure nil
  :load-path "PATH"
  :config
  (setq org-tufte-htmlize-code t  ;; htmlize and beautify source code!
        org-tufte-embed-images nil ;; do not embed images. faster!
        org-tufte-goto-top-button t ;; add go-to-top button in html
        )
  )

Customization

highlighting source code

I feel being distracted by too many colors when reading blogs. Although the highlight of code block is not enabled, you can get this feature by the following configuration.

(setq org-tufte-htmlize-code t)

embedding images in html

The default org html-export does not embed images. Hence, you have to send archives including images when you share your html page to other people. I feel it is very convenient to just share a single self-contained html, so org-tufte enables embedding images in html by default. But it may be a bit slow if there are too many large images. If you don’t like it, you can disable it by the following configuration.

(setq org-tufte-embed-images nil)

Screenshot

see the example page here and the org file.

example-1.jpg example-4.jpg example-3.jpg example-2.jpg

Changelog

v0.6.0

  • Make export-org-tufte-html command as function

v0.5.0

  • Make figure caption a marginnote. #5
  • New option: org-tufte-posted-string. #4
  • New option: org-tufte-goto-top-button.

v0.4.0

  • add button to go to top of page [fn:1]

v0.3.0

  • show date and author under title if #+date: is defined

v0.2.0

  • embed images in html!

v0.1.0

  • first release

Footnotes

[fn:1] user can custmoize this

Credits

some codes are copied from

org-tufte's People

Contributors

romeov avatar zilong-li avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

alphapapa romeov

org-tufte's Issues

Inherit attachments DIR

Hi

It doesn't inherith the path for attachments, at least if it is in a superior level than the exported tree.

Under H1 HTML displays Posted on (timestamp...

Thanks for a super easy way to implement tufte css. Hopefully a quick question:

Under H1 and above the TOC, I'm getting:

Posted on (timestamp (:type inactive :raw-value [2024-03-03 Sun 21:03] :year-start 2024 :month-start 3 :day-start 3 :hour-start 21 :minute-start 3 :year-end 2024 :month-end 3 :day-end 3 :hour-end 21 :minute-end 3 :begin 1 :end 23 :post-blank 0 :parent (#0)))

Is this a feature? Is there something wrong with the formatting of my org-mode file? I'm currently using denote which adds some front matter, but it doesn't seem to be causing this.

A way to run it locally

Hi! Very good and handy package.

But I'm having a hard time to replace this line "<link rel=\"stylesheet\" href=\"https://zilongli.org/code/tufte.css\" type=\"text/css\" />\n" with a local file on my computer. I'm basically copying all the content in https://zilongli.org/code/tufte.css\, saving it locally as tufte.css in the same folder where org-tufte.el is located and then replacing that line of code with "<link rel=\"stylesheet\" href=\"tufte.css\" type=\"text/css\" />\n".

It doesn't work properly; all sidenotes are rendered weirdly, as check-boxes and not rightly aligned to the side, but rather embedded in the text.

I just want a way to run it locally and not depend upon your files. I'm not really familiar with HTML, rather an amateur; so I would be glad if you could help me.

In HTML export, all footnotes read as 1

Here's the relevant source:

** Introduction
This is the time to establish credibility, and empathy. Here is an example introduction.[fn:1]
#+BEGIN_QUOTE
I'm working on an NIH project (*credibility*) to track and stop overdoses. We're talking to treatment centers all over the country to understand them better. Is there anyone I can talk to for 10 minutes to learn more about your program?
#+END_QUOTE
** Target
Who is involved in decision process, and getting an understanding of the org chart. We've started understanding the market, now it's time to understand the inside of each organization as well.
- When it comes to decisions to purchase, who is involved in the decision process?
- Who has the final say in purchase decisions? Is there anyone else who influences the decision? Do the final users make or influence the decision?
- How does the decision process work? How long does it usually take for a purchase decision to be made?
- What do you see your role being within that decision process?
- When you or your team are researching solutions, how do you find information to make a decision? Where do you hang out?
- How are they funded?
- Where does funding come from?
- Target Segmentation: Volume, Frequency, Probability, Recurring
  We're essentially trying to understand who, financially are our best customers:
|             | low freq | high freq |
|-------------+----------+-----------|
| high volume |          |           |
| low  volume |          |           |
** Value
What they value in our offering?
- What are the priorities of the organization?
- What keeps you up at night (3-5)?
- What is the best thing we could do to address one or more of the things that keeps you up at night?
- what are 3 qualities of a business that enables addressing issues, for example, if they write grants to get naloxone, will they need help writing grants for our product? Do we need to provide copy that they can insert into those grant proposals? When they write grants, are they just for naloxone or is there a suite a services they are trying to fund?
- how important is each quality?
- what would you tell us to stop doing? start doing? How can we change the product to better fit their circumstances?
- who would you say are our competitors for your business?
- How do we differ from those competitors, in your view?
** Offer
If we were eventually to try to sell, how do we find companies like this one? When would be the best time to contact them in the year based on funding cycles, etc.
- Where do they hang out?
- What messaging resonates with them?
- When would be the best time to get the product into their hands? What are the funding cycles and what resources to do they use to secure funding?
- What is the Burning Platform[fn:2]?
** Wrap Up
This is the time to repeat what you heard, ask clarifying questions to make sure you understand what was said, and to leave with some takeaways and a happy feeling at the end.
- Clarifying Questions
- Is there anyone else I should talk to so that I can better understand the space?
- Thank you so much for your time, we're going to be working on this for the next year, and we'd love to get more feedback as we move towards production, would you like to be kept up to date about our progress?

And later in the document:

* Footnotes
[fn:1] /Burning Platform/. Even if our product is better, there will be some effort to make a switch. What's the criteria needed to make that switch? A Burning Platform is a concept from B2B sales where the potential customer is standing on a platform that is literally on fire... what does it take to make them jump? In our situation, it might be something like "our funding requires us to have a recovery rate of 25 percent. Currently we're losing 40 percent to ODs and if this continues, we're going to have to shut down".
[fn:2] Testing this with a few hurried people, I've shortened this as much as possible, and have removed any notion of empathy.

I'm wondering if there is some specific formatting I'm not including to get the footnote numbers to increase.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.