Almanac.httparchive.org: Implement Chapter page design

[rviscomi]

See below for the Chapter mockup. This will be the design template for non-home pages.

@HTTPArchive/developers

[tanhengyeow]

Some questions I have in mind:

1. Is the side navigation menu's position intended (some margin to the left)? Or should we flush it to the left?
2. I've not looked at generate_chapters.py in detail yet but from the looks of it:
   
   
   
   • HTML rendering is covered for this part:
     
     
   
   
   • Chart visualization is covered for this part:
     
     
   
   

Are we missing anything needed to implement this page? For e.g.

1. Mapping of authors to chapters
2. Source query link for the visualization

[rviscomi]

Is the side navigation menu's position intended (some margin to the left)? Or should we flush it to the left?

There's a grid layout being used where the main body of the page is fixed width and centered. Also see how it aligns with the footer content. I think we might also want to change the header to fit within this same grid, so the background is 100% but the header contents are fixed width and centered like the footer.

HTML rendering is covered for this part:

This is just an example of embedding a code sample, you can disregard for now.

Chart visualization is covered for this part:

Data visualization will be covered by #114 so it can be left out of this issue's scope.

Mapping of authors to chapters

Handled by #70

Source query link for the visualization

The actual contents of the chapter are still being written, so for now you can use the placeholder content written by @mikegeyser: https://github.com/HTTPArchive/almanac.httparchive.org/blob/master/src/content/en/2019/javascript.md

[rviscomi]

Mobile designs are also available here: https://drive.google.com/open?id=1ud4iZWxUB7vMZlcKUrPUkLuT1haBV_B6

[rviscomi]

@HTTPArchive/developers is anyone available to work on this?

[tyohan]

We need this before able to work on #199. So I'll try to do this as well. @tanhengyeow did you work on this already? do you want to push on a working branch so I can continue it from there?

[tanhengyeow]

Hi @tyohan

I haven't started work on this yet, have been occupied with stuff. Please go ahead if you would like to work on it 😄

[tyohan]

@rviscomi i saw the methodology page already implemented the design but it use it's own stylesheet. I think we can reuse the stylesheet for this chapter page but then we need to refactor the methodology page to use some shared CSS classes.

What do you think?
Keep it in separate stylesheet or refactor the methodology page and reuse the stylesheet.

[rviscomi]

Yes good catch! Methodology and Chapter pages both have a sidebar and a main content area and it would make a lot of sense to consolidate these into a reusable style in the global 2019.css stylesheet. Also, for both pages' mobile RWD, the sidebar collapses into an expandable "Index":

Any JS to support this functionality should also be in a reusable/cacheable script.

Just shared the Invision projects (one for desktop and one for mobile) with you so you can inspect individual component styles.

[tyohan]

@rviscomi @mikegeyser I'll continue to work on this after PR #251. Some stuff that I will work on within this week

• generate author list with macro
• create prev next button with macro

[mikegeyser]

Would it make sense to generate it statically using an EJS template? It doesn't really need to be done at runtime, because it won't really change?

[rviscomi]

My only hesitation is that it requires everyone to know that a change to the contributors config must also be followed by regenerating the chapter contents and rendering new author markup. WDYT?

[tyohan]

I prefer to do it on rendering so less manual code generation whenever we have some updates.

[mikegeyser]

We could add a commit hook that generates the output automatically?

Although I don't really mind, it was just an idea, and perhaps what is simplest and most expedient would be best at this point. :)

[tyohan]

Yes, that's possible too. But anyway i just made it with a mix of macro and code in app router.