Add visual reminder on pages with "todo" shortcode

@bep added a todo shortcode on the hugo doc site and added the list of pages with this shortcode, which is very useful for not forgetting the todos :slight_smile:

I stole that for my hugo documentation site & extended it because I found very useful to have a visual reminder on the rendered page and not only on the code.
So while browsing the site i can see:

  • what remains to do
  • where in the page this todo located

Just call {{< todo >}} whatever I want to be done {{< /todo >}}

I also added a parameter on the front matter in case you don’t need it rendered (my use case is public documentation vs. internal documentation).

So you get the information rendered only on one of those case:

  1. Your front matter parameter is listTodo = true
  2. Your are in server mode whatever is your parameter value

I don’t know if this could be usefull for hugo documentation or someone else, but just in case …

shortcode : todo.html

{{ if (or .Site.IsServer .Site.Params.listTodo) }}
    {{ if .Inner }}<div id="draft-warning">-#- TODO : {{ .Inner }} -#-</div>{{ end }}
{{ end }}

front matter parameter

listTodo = true                 # affiche la liste des TODO avec les derniers changements

css for showing the todo content inside the rendered page

#draft-warning {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);

    z-index: 1;
    float: right;
    display: block;

    margin: 0px 0px;
    padding: 1rem;
    background-color: red;
    border: 0.1rem solid black;
    color: yellow;
    font-size: 80%;

Get the list of todo pages with the content text todo

<!-- Affiche les TODO si besoin -->
{{ if (or .Site.IsServer .Site.Params.listTodo) }}
    {{ .Scratch.Set "todos" slice }}
    {{ range .Site.RegularPages }}
            {{ if .HasShortcode "todo" }}
            {{ $.Scratch.Add "todos" . }}
            {{ end }}
    {{ end }}
    <h2 id="todos">Pages marquées avec des TODO</h2>
                <th>Dernière modification</th>
                <th>Contenu du TODO</th>
            {{ range  (.Scratch.Get "todos") }}
                    <td>{{ .Lastmod.Format "02 Jan 2006" }}</td>
                        <a href="{{ .Permalink }}">{{ .Title }}</a>
                        {{ $_x := (findRE "-#-(.|\n)*?-#-" .Content) }}
                        {{ range $_x }}
                            <li>{{ . }}
                        {{ end }}
            {{ end }}
{{ end }}

I should patent my ideas so people don’t keep on stealing them :slight_smile:

Good idea with the IsServer logic.


Yep, patent is a good idea, so I should patent yellow/red association for warning.

It looks like this. one click away on css for a more sober one.

It was a joke …

1 Like

I am serious about patent red & yellow :wink:

1 Like

Have you enabled French Guillemets in your Blackfriday config? I had never heard of them before someone posted a feature request. I got so curious that I read about them and implemented a patch for BF that same day.

Hé hé, I didn’t knew it was possible.
Just tested it !! Perfect. Adopted for my documentation sites.
Thanks a lot (again) @bep.

1 Like