Git Product home page Git Product logo

hugo-tufte's Introduction

Tufte Hugo Theme

Contributor Covenant Test Build Netlify Status

History of this project

Hugo-Tufte is a minimalist blog-like theme for the static site generator Hugo that attempts to be a faithful implementation of the Tufte-css project. The current version supports mathematical typesetting via KaTeX.

Quickstart

Prerequisite: Hugo Extended

You'll need to install Hugo Extended for this theme to test it locally, since this theme uses SCSS.

  • On Windows:
    • Using Chocolatey:
      choco install hugo-extended # remember, you might need admin privs
  • On macOS:

Check out the example site

git clone https://github.com/loikein/hugo-tufte.git
cd hugo-tufte/exampleSite
hugo server --buildDrafts --disableFastRender

Then open localhost:1313 or wherever it says in browser.

The showcase posts are:

  • The big old test page
  • Tufte CSS

For a new site

hugo new site <your-site-name>
cd <your-site-name>/themes/
git clone https://github.com/loikein/hugo-tufte.git

Add theme: 'hugo-tufte' to your config.yaml to let your site know to actually use this theme, specifically.

Then run hugo server --buildDrafts --disableFastRender and open localhost:1313 or wherever it says in browser.

Features

Math

In this version, I use Yihui Xie's method to support (almost) seamless LaTeX rendering with KaTeX.

For usage and examples, refer to ./exampleSite/content/posts/tufte-features.md .

Downside: LaTeX in post title is no longer supported.

Site Parameters

params for this theme are:

  • subtitle string: If set, displayed under the main title.
  • showPoweredBy boolean: If true, display a shoutout to Hugo and this theme.
  • copyrightHolder string: Inserts the value in the default copyright notice.
  • copyright string: Custom copyright notice.
  • math boolean: Site wide kill switch for Latex support
  • codeBlocksDark boolean: If true, code blocks will use a dark theme.
  • marginNoteInd string: (NEW) Custom indicator for margin notes, with suggestions in comment. (Only displayed on mobile devices or inside cols shortcode.)
  • sansSubtitle boolean: If true, all subtitles (h2 & h3) will use up-right and sans-serif font. (As seen in Visual Display of Quantitative Information.)
  • (centerArticle boolean: Not implemented yet)

Socials

(The followings have not been tested for this repo, use at your own risk.)

You can add links to your social media profile by using thoses parameters:

  • github: string
  • gitlab: string
  • twitter: string
  • linkedin: string
  • patreon: string
  • youtube: string
  • medium: string
  • reddit: string
  • stackoverflow: string
  • instagram: string
  • mastodon: string
  • orcid: string
  • google_scholar: string

Please see exampleSite/config.yaml to see the full implementation with exemples.

Page Parameters

  • math boolean: If true, try to render the page's LaTeX code using KaTeX.
  • meta boolean: If true, display page metadata such as author, date, categories.
    • hideDate boolean: If true, do not display a page date in metadata.
    • hideReadTime boolean: if true, do not display the page's reading time estimate in metadata.
  • toc boolean: if true, display the table of contents for the page.
  • Layout parameters: (NEW)
    • For more information, see Hugo's Lookup Order | Hugo.
    • type string: If set to book, layout files in ./layouts/book/ will be prioritised.
    • layout string: If set, layout files with the name of this field's value will be prioritised.

Shortcodes

This theme provides the following shortcodes in an attempt to completely support all the features present in the Tufte-css project.

For usage and examples, refer to ./exampleSite/content/posts/tufte-features.md .

  • blockquote
  • div
  • epigraph
  • marginnote
  • sidenote

hugo-tufte's People

Contributors

cwimmer avatar dwarkeshsp avatar erik-j-d avatar hiandrewquinn avatar jeremyf avatar joshuata avatar loikein avatar machawk1 avatar shawnohare avatar sje30 avatar slashformotion avatar tjdcs avatar vehemos avatar

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.