Feature: compute timings on the day plan table of contents

[SallyMcGrath]

Which module(s) and week(s) does this change affect?
all day plans
What is the work that needs to be done?

Given a day plan https://programming.codeyourfuture.io/user-data/sprints/1/day-plan/
When I look at the table of contents in the page header https://programming.codeyourfuture.io/user-data/sprints/1/day-plan/#toc
Then each heading has a start and end time

Why is this work important to do?

An overview agenda as well as a detailed one is emerging as a user need

Additional context

The times are computed by a web component called time-stamper on the main run of the day plan. I don't think the component is really reusable in this case but maybe I'm wrong!

Here's the day plan docs

https://common.codeyourfuture.io/common-theme/pages/day-plan/

here's the page header that generates the table of contents
https://github.com/CodeYourFuture/curriculum/blob/874907ac6f636e00e745ae1b79c6c429957e0eef/common-theme/layouts/partials/page-header.html

You only want this feature on the day plan, so likely you will have to branch into a new partial to generate this

Who might need to know about this change?

[namanmishra786]

Hi! @SallyMcGrath I’d like to work on this issue for my first open-source contribution. Could I take this on? Any additional guidance would be appreciated!

[SallyMcGrath]

Hi @namanmishra786 , sure! Welcome! 🤝

Here's how this platform works: https://common.codeyourfuture.io/
Here's how Hugo works: https://gohugo.io/documentation/

You will likely need to build a web component to compute these. You can see the web components in /assets/scripts. Here's the web component that creates the timestamps that already exist on the day plan https://github.com/CodeYourFuture/curriculum/blob/main/common-theme/assets/scripts/time-stamper.js

Write plain and simple JS.

The technical challenge here is that because of the way Hugo renders content and the way Common composes blocks on a page, the table of contents doesn't know what time is assigned to those headings. It's not accessing the block front matter. It's accessing the block definition in the rendered page front matter. For this reason, it's likely easier to pull the times from the rendered blocks time element, on the page, and insert them in the toc. So for each block on the page, extract the time value. For each link on the toc, insert the time value.