Add Reading Time support

[alexearnshaw]

This is a feature request.

I'd like to be able to optionally display the estimated reading time for a documentation page or blog post.

It seems like Hugo has a page variable for Reading Time so I think this could be implemented fairly easily as discussed here https://discourse.gohugo.io/t/readingtime-define/13036/3

• Modify the relevant layout/template/partial (?) for docs and blog to display an estimated reading time at the top of the page/post
• Have a config param that allows users to turn displaying the reading time on or off

Would be happy to have a go at a PR for this if someone could get me started in the right direction...I'm fairly new to hugo and docsy!

[LisaFC]

Oh this is a nice idea! I've seen it on other Hugo sites but didn't realize it was a built-in page variable until you pointed it out.
The file to edit (if you want it to appear under/above/near the page title) is this one:
https://github.com/google/docsy/blob/master/layouts/_default/content.html

You can also see an example of a conditional element based on a param in that page to show the feedback buttons below the content.

Once you've updated the file you'd also need to define a condition and put it in the example site's config.toml, plus some styling to display the reading time.

Here's an example from a non-Docsy Hugo site that uses a reading time (though they don't have a param to switch it on and off AFAIK): https://github.com/istio/istio.io/blob/master/layouts/partials/primary_top.html
...which looks like (for example):
https://istio.io/docs/concepts/observability/

If you'd like to have a go I'm happy to review it/answer questions;.

[alexearnshaw]

@LisaFC great thanks I'll try to give it a go in the next few weeks.

[LisaFC]

Hurrah! Let me know if you need any help. Assign yourself here for now so we know you're working on it.

[alexearnshaw]

Can you assign me, I don't seem to be able to assign myself?

[rionam]

+1 to this, btw: https://marketingland.com/estimated-reading-times-increase-engagement-79830

…

On Wed, Aug 21, 2019 at 11:20 AM Alex Earnshaw ***@***.***> wrote: Can you assign me, I don't seem to be able to assign myself? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#122?email_source=notifications&email_token=ACESRV5TFRRRFQWWOJKGEIDQFVMMLA5CNFSM4IOGFZ3KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD42A64A#issuecomment-523505520>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACESRV55NCBH6QIUS2UHCYDQFVMMLANCNFSM4IOGFZ3A> .

[frodriguezsmartclip]

@LisaFC @rionam @alexearnshaw

Hi there,

I've just implemented this feature for docsy-theme for my custom theme 😎

The code is next:

1. Create a new file inside layouts/partials/ called e.g: reading-time.html

{{ $readTime := mul (div (countwords .Content) 220.0) 60 }}

{{ $minutes := math.Floor (div $readTime 60) }}
{{ $seconds := mod $readTime 60 }}

<p class="reading-time"><i class="fa fa-clock" aria-hidden="true"></i> Reading time: {{ $minutes }} {{ cond (eq $minutes 1) "min." "min." }} {{ $seconds }} {{ cond (eq $seconds 1) "s." "s." }}</p>

2. Edit the file inside "layouts/_default/content.html with this reference:

<div class="td-content">	

	**THIS LINE --> {{ partial "reading-time.html" . }}**

	<h1>{{ .Title }}</h1>
	{{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
	{{ .Content }}
	{{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }}
		{{ partial "feedback.html" .Site.Params.ui.feedback }}
		<br />
	{{ end }}
	{{ if (.Site.DisqusShortname) }}
		<br />
		{{ partial "disqus-comment.html" . }}
	{{ end }}
	<div class="text-muted mt-5 pt-3 border-top">{{ partial "page-meta-lastmod.html" . }}</div>

	 {{ partial "pager-custom.html" . }}
</div>

Finally, the result appears and.... tadaaaa 🎉 !!!

Here it's a screenshot:

I dont know how to configure this to achieve this for @alexearnshaw

Have a config param that allows users to turn displaying the reading time on or off (link)

BTW, I hope I could have helped and resolved the issue!!! 😃

Regards.

[alexearnshaw]

@frodriguezsmartclip Thanks this is helpful. @LisaFC Sorry about leaving this so long, other priorities etc, but I think I can confidently give this a go now...will update as soon as I have something working!

[LisaFC]

Hi everyone who was interested in this, this is now merged but should we have it enabled or disabled by default? I'm thinking "not enabled" but would like to know what you think.

[frodriguezsmartclip]

@LisaFC I think, in my opinion, enabled by default because it's a nice feature to show it up...