Skip to content

Commit

Permalink
Update example site and include images.
Browse files Browse the repository at this point in the history
  • Loading branch information
shawnohare committed Feb 20, 2016
1 parent c059472 commit 9dc4d98
Show file tree
Hide file tree
Showing 12 changed files with 353 additions and 2 deletions.
29 changes: 28 additions & 1 deletion README.md
Expand Up @@ -9,7 +9,34 @@ By utilizing copious partial templates the theme is largely customizable.

## Math

TODO explain the different ways to write LaTeX.
Mathjax renders LaTeX written inside of markdown files. LaTeX can be
written more or less as normal, but inline and display environments that
start with `\` must be escaped. Some examples:

- `This $\LaTeX$ will be rendered inline.`
- `This \\(\LaTeX\\) will be rendered inline.`
- `A simple displayed equation: $$f(x, y) := e^{x^2 - y^2}.$$`
- `A simple displayed equation: \\[f(x, y) := e^{x^2 - y^2}.\\]`

There currently seems to be some weirdness with other environments,
such as the `align` environment. These environments will render provided
they are wrapped in `<p>` tags and blank lines. The snippet below should
render correctly.
```
Let $G$ be a finite group with exponent $2$. Then every element is
an involution, hence for any $x$, $y$ in $G$ we have:
<p>
\begin{align*}
e &= (xy)^2 \\
&=xyxy \implies \\
y^{-1} &= xyx \implies \\
y^{-1}x^{-1} &= xy,
\end{align*}
</p>
establishing that $G$ is abelian.
```

## Site Parameters

Expand Down
57 changes: 57 additions & 0 deletions exampleSite/config.toml
@@ -0,0 +1,57 @@
contentdir = "content"
layoutdir = "layouts"
publishdir = "public"
builddrafts = true
canonifyurls = true
baseurl = "www.hugo-tufte.com"
theme = "hugo-tufte"
title = "Hugo-tufte Theme Example Site"

[taxonomies]
category = "categories"
group = "groups"
series = "series"
tag = "tags"

[params]
subtitle = "Subtitle goes here."
copyrightHolder = "Copyright Holder"
showPoweredBy = true

# -----------------------------------------------------------------------
# Morphism theme navigation menu
# -----------------------------------------------------------------------
[[menu.nav]]
name = "Home"
pre = "<i class='fa fa-home fa-lg'></i> "
weight = -110
identifier = "home"
url = "/"
[[menu.nav]]
name = "Posts"
pre = "<i class='fa fa-book fa-lg'></i> "
weight = -100
identifier = "posts"
url = "/post"
[[menu.nav]]
name = "Categories"
pre = "<i class='fa fa-tags fa-lg'></i> "
weight = -90
identifier = "categories"
url = "/categories"

# -----------------------------------------------------------------------
# Morphism theme footer menu
# -----------------------------------------------------------------------
[[menu.footer]]
name = ""
pre = "<i class='fa fa-github fa-2x'></i> "
weight = -100
identifier = "github"
url = "https://github.com/shawnohare/hugo-tufte"
[[menu.footer]]
name = ""
pre = "<i class='fa fa-twitter fa-2x'></i> "
weight = -90
identifier = "twitter"
url = "https://twitter.com"
6 changes: 6 additions & 0 deletions exampleSite/content/page/about.md
@@ -0,0 +1,6 @@
+++
title = "About This Site"
hasMath = false
+++

Hello, I'm an example site that uses the Hugo Morphism theme.
37 changes: 37 additions & 0 deletions exampleSite/content/post/blockquote.md
@@ -0,0 +1,37 @@
+++
author = "Hiro Protagonist"
date = "2015-01-19T23:57:58-08:00"
hasMath = false
title = "Blockquotes"

+++

Below is a blockquote.

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
>
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.
<!--more-->

Now we have nested blockquotes.

> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.
And finally a blockquote with some markdown.

> ## This is a header.
>
> 1. This is the first list item.
> 2. This is the second list item.
>
> Here's some example code:
>
> return shell_exec("echo $input | $markdown_script");
21 changes: 21 additions & 0 deletions exampleSite/content/post/new.md
@@ -0,0 +1,21 @@
---
title: "Just another sample post"
date: "2014-03-29"
description: "This should be a more useful description"
categories:
- "hugo"
- "fun"
- "test"
---

## First Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, consequatur aspernatur omnis iste. Voluptates, id inventore ea natus ab sed amet ipsa ratione sunt dignissimos. Soluta illum aliquid repellendus recusandae.

### Sub

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, perferendis saepe voluptatem a nesciunt architecto voluptas deleniti dolor tempora quasi quidem odit rem fugit magnam minima quam dolores vel id?

## Conclusion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, numquam ipsa ad! Quasi, deleniti quae sint consequatur error corporis dicta inventore alias soluta dignissimos? Molestias, quia ab deserunt repellat ut.
11 changes: 11 additions & 0 deletions exampleSite/content/post/nodate.md
@@ -0,0 +1,11 @@
+++
title = "Hide Date"
date = "2015-05-15"
hideDate = true
hideReadTime = true

+++

Here is an example post where the date set, but hidden from display.
Moreover, the reading time is also hidden.

26 changes: 26 additions & 0 deletions exampleSite/content/post/old.md
@@ -0,0 +1,26 @@
---
title: "First Post"
description: "Welcome to the first blog post."
date: "2014-03-28"
categories:
- "template"
- "boring"
---

## Sample Post 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

### Sub-heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, non, ratione, molestiae illo optio quia sequi id fuga natus nihil ad architecto dolor alias ex sunt iste aperiam eius itaque.


## foo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, neque, eveniet voluptate eos debitis illum qui nostrum eius maxime ratione assumenda suscipit impedit deserunt voluptatibus odio ducimus non. Ex, ratione.
164 changes: 164 additions & 0 deletions exampleSite/content/post/tufte-features.md
@@ -0,0 +1,164 @@
+++
author = "AUTHOR NAME"
date = "2016-02-20T13:56:01-08:00"
meta = true
math = true
title = "Hugo-Tufte Features"
subtitle = "Fancy Subtitle"
toc = true
categories = ["mathjax", "latex", "tufte-css"]


+++

This is a quick demonstration post. It serves as an example of the features
of this theme. One of them is \\( \LaTeX \\) via MathJax.
{{< section "begin" >}}
## A Bit About Mathematics

{{% epigraph pre="Shawn O'Hare, " cite="Math is Fun" %}}
This is an example of an epigraph with some math
\\(\mathbb N \subseteq \mathbb R \\)
to start the beginning of a section.
{{% /epigraph %}}

<!--more-->

### Inline
Some inline math:
{{% marginnote "mn-example" %}}This is a margin note.{{% /marginnote %}}
$e^{i \pi} = -1$ and \\(\sqrt{-1} = i \\)
and \\( a_2 = 3 \\).

### Display
And display math using escaped brackets `\\[`:
{{% sidenote "sn-example" %}}This is a sidenote!{{% /sidenote %}}
\\[
-- \cdot_H -- \colon B(G,H) \times B(H, K) \to B(G, K), \quad ([X], [Y]) \mapsto [X \times_H Y].
\\]

### Environments

Currently, certain $\LaTeX$ environments need to be escaped so that
the markdown processor does not override MathJax. Currently, display
environments should be enclosed in `<p>` tags and blank lines.
For instance:

<p>
\begin{align*}
\mu(A) &= \iint_{I^2} \chi_A (x,y) \ d(x,y)
= \int_I \left( \int_I \chi_A (x,y) \ dx\right) dy
= \int_I 0 \ dy= 0 \quad \text{and} \\
\mu(A) &=\iint_{I^2} \chi_A (x,y) \ d(x,y)
= \int_I \left( \int_I \chi_A (x,y) \ dy \right) dx
=\int_I dx = 1,
\end{align*}
</p>

is produced from
```
<p>
\begin{align*}
\mu(A) &= \iint_{I^2} \chi_A (x,y) \ d(x,y)
= \int_I \left( \int_I \chi_A (x,y) \ dx\right) dy
= \int_I 0 \ dy= 0 \quad \text{and} \\
\mu(A) &=\iint_{I^2} \chi_A (x,y) \ d(x,y)
= \int_I \left( \int_I \chi_A (x,y) \ dy \right) dx
=\int_I dx = 1,
\end{align*}
</p>
```

### Blockquotes
Some blockquotes. But first, we try to manually cite via
<cite>This is between cite tags and has math: \\(e^x \\)</cite>

{{% blockquote cite="www.shawnohare.com" footer="Shawn O'Hare" %}}
This is a blockquote with two paragraphs, that employs the
theme's `blockquote` shortcode. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
{{% /blockquote %}}

### New thoughts

<span class="newthought">Sometimes a new thought</span> distinguishes a section,
as here. There are currently two ways to create one. One way is with raw
HTML such as: `<span class="newthought">...</span>"`. The theme also provides
the `newthought` shortcode.

### Code
As an example of some inline code: `go test -v -short`.
And this is some block-code:
```go
package main

import "log"

func add(x int, y int) int {
log.Println("We are going to take the sum of two numbers, and leave a long comment.")
return x + y
}

func main() {
y := add(1, 2)
log.Println(y)
}
```
### Figure
Below we have an example of a regular width figure.
{{< figure
src="https://raw.githubusercontent.com/edwardtufte/tufte-css/master/img/exports-imports.png"
class="class param"
title="The image title."
caption="This is the image caption."
label="mn-export-import"
attr="Image attribution"
attrlink="attribute link"
alt="alt"
link="link"
>}}
{{< section "end" >}}
And now we exhibit a margin figure.
{{< figure
src="https://edwardtufte.github.io/tufte-css/img/rhino.png"
class="class param"
type="margin"
label="mn-rhino"
title="The image title."
label="mn-export-import"
caption="This is the image caption."
attr="Image attribution"
attrlink="attribute link"
alt="alt"
link="link"
>}}
{{< section "end" >}}
Below is a full-width figure.
{{< figure
src="https://edwardtufte.github.io/tufte-css/img/napoleons-march.png"
type="full"
label="mn-napoleonic-wars"
title="Napoleonic wars"
caption="This the image caption."
attr="Image attribution"
attrlink="attribute link"
alt="Napoleonic wars"
link="link"
>}}
{{< section "end" >}}
{{< div class="myclass" >}}
## A Story About Cats
Climb a tree, wait for a fireman jump to fireman then scratch his face sleep on dog bed, force dog to sleep on floor cat snacks, and eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap climb a tree, wait for a fireman jump to fireman then scratch his face put toy mouse in food bowl run out of litter box at full speed . See owner, run in terror chase mice, so thinking longingly about tuna brine for eat a plant, kill a hand for wake up human for food at 4am. Human is washing you why halp oh the horror flee scratch hiss bite scratch the furniture and rub face on owner. Loves cheeseburgers see owner, run in terror chew on cable. Thug cat ignore the squirrels, you'll never catch them anyway. Eat a plant, kill a hand find empty spot in cupboard and sleep all day so hide head under blanket so no one can see yet love to play with owner's hair tie rub face on everything i like big cats and i can not lie. Wake up human for food at 4am stare at the wall, play with food and get confused by dust yet then cats take over the world scamper. Inspect anything brought into the house get video posted to internet for chasing red dot. Brown cats with pink ears chew foot spit up on light gray carpet instead of adjacent linoleum. I am the best wake up human for food at 4am, meow spread kitty litter all over house, for meow. Knock dish off table head butt cant eat out of my own dish jump off balcony, onto stranger's head, chase ball of string scream at teh bath but climb leg, so unwrap toilet paper but destroy couch. Climb a tree, wait for a fireman jump to fireman then scratch his face. Leave hair everywhere swat turds around the house eat grass, throw it back up, and eat grass, throw it back up. Chase after silly colored fish toys around the house.
{{< div "end" >}}

### We really like cats.

Yes, they are fluffy and happy.
2 changes: 2 additions & 0 deletions exampleSite/static/hugo-tufte-override.css
@@ -0,0 +1,2 @@
This file is the last hugo-tufte related css file
loaded by the theme, and so personal customization can go here.
Binary file added images/screenshot.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/tn.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion theme.toml
Expand Up @@ -4,7 +4,7 @@ licenselink = "https://github.com/shawnohare/hugo-tufte/blob/master/LICENSE.md"
description = "A minimalist blog theme using Tufte-css."
homepage = "http://github.com/shawnohare/hugo-tufte"
tags = ["blog", "tufte", "minimal"]
features = ["math", "tufte-css"]
features = ["math", "tufte-css", "tufte"']
min_version = 0.15

[author]
Expand Down

0 comments on commit 9dc4d98

Please sign in to comment.