devLog: 2020-02-04

In previous devLog posts, I have chronicled some of my design decisions while building out nightCasper. Today's devLog continues that theme and focuses on a question posed by a user in the Ghost forums, which I was glad to be able to help him with:


This is a companion discussion topic for the original entry at https://engineerworkshop.com/devlog/devlog-2020-02-04/

Add

<div id="bottomHeader">
     <progress class="reading-progress-bar" data-reading-progress max={{reading_time minute="%" minutes="%"}}></progress>
</div>

to the place you placed in the partials/site-header.hbs.
and found that reading_time cannot get the true reading time .

If place it in the post.hbs such that
{{#post}}

<main id="site-main" class="site-main outer">
    //here 
    <div class="inner">

I can get the correct reading time .
So how can i get the reading time in the partials/site-header.hbs?

side notes:
Once place the progress in the post.hbs, the progress update script cannot fucntion,i should put it after the bottomHeader. and then show the progress bar.
but when scroll ,nothing update and the progress bar disappear.

Hi Baul,

Thanks for reading. I suspect that the problem you’re running into with the reading_time helper is that it requires a {{post}} block, which you aren’t in when you drop it into the partials/site-header Handlebars template.

If you really want it in your partials/site-header.hbs, you could try something like this:

{{#is "post"}}
	{{#post}}
		{{reading_time}}
	{{/post}}
{{/is}}

I’m not sure I would recommend it though. You could see a performance hit from hitting the database twice (once for the header now and once for the post body itself), but it might be okay. Just be sure to monitor it in Chrome developer tools and watch out for any load time warnings in Google Search Console.

-TorqueWrench

Oh,Thanks, will try.

Hi Torque Wrench,

I’m pretty new to web dev. I tried to get this to work by following your instructions to the later, and failed…Could you help?

Hi toolroom_knight,

So, my post wasn’t really meant to be a definitive set of instructions; it was mainly to just explain the reasoning behind how I implemented the progress bar in my theme.

You’re probably missing the Javascript component that actually makes this work. Here are the relevant links with more information, starting with the original forum post:

As well as the guide mentioned in that post:

Also, great username by the way. Mind if I ask where it came from? (I used to work as diagnostic tech/automotive technician in a past life to pay my way through school).

-TorqueWrench

Thanks for the prompt reply!

I did look at that link originally, before I made my way to your site. I saved the code in the js folder as reading-progress-bar.js.

I also added these tags to the beginning and end of the document.

(function (window, document)

})(window, document);
This is what I end up with:

What am I doing wrong?

Thanks! The username comes from an old Benny Benassi album. Seems much more fitting for the web. TorqueWrench is good too :slight_smile:

No problem!

Unfortunately, I’m not quite sure what I’m looking at from your screenshot. Is the problem that the progress bar doesn’t go completely across the screen? Does that progress bar expand/contract at all?

If you have a link, that would help too.

-TorqueWrench

Sorry about that. And you’ve correctly surmised the problem. No changes at all, but it looks like it is loading something.

I’ve changed the theme to the version with the problem.

Oh…that’s interesting. The progress bar is actually wandering around.

You do have the code found in Ghost’s guide here wrapped between <script>...</script> tags and placed near the bottom of post.hbs, right?

If that doesn’t work, it looks like you’re on ghost.io, which means you should have support directly from Ghost. I would submit a help ticket with them (especially since it looks like you’re using the stock Ghost Casper theme).

-TorqueWrench