Add a sidebar nav to tutorial pages

[zeke]

This is a followup to https://github.com/electron/electron/issues/11416

@felixrieseberg wrote a bunch of tutorial content and created a nice table of contents in https://github.com/electron/electron/pull/11966

Now that we have that, let's display it in a sidebar on tutorial pages, so people can navigate their way through the tutorial content more easily.

[sharadshriram]

@zeke , I would like to work on the sidebar nav!

[zeke]

@sharadshriram cool! I think a first step would be updating https://github.com/electron/electron-i18n to extract the locaized TOC lists from /content/**/docs/README.md and export them as part of the electron-i18n module. If that sounds daunting, let me know and I can help give more guidance.

[Shivam-Miglani]

@zeke I'm helping @sharadshriram in this. We are from the same uni and can collaborate. We get that we need to extract TOC's of all languages from /content/**/docs/README.md but we don't get the part 'export them as part of electron-i18n module'.

Update: This is what I understand until now: Write a async function in https://github.com/electron/i18n/blob/master/script/collect.js to extract TOC lists from /content/**/docs/README.md. The code would look something like this:

//access the directory
const basePath = path.join(__dirname, '..', 'content')
const contentPath = (lang) => path.join(basePath, lang, 'docs')
langs.forEach((lang) => {
    //call the function getNavbarContent(lang)
}

async function getNavbarContent (lang) {
      //extract data from Readme's
      //somehow add these localized TOCs
      // to i18n object (not sure how yet - as a separate attribute within docs perhaps)
}

Later export it as i18n object in the electronjs.org website:

const i18n = require('electron-i18n')

@zeke Let me know if I'm thinking in the right direction.

[zeke]

That's close, though the collect script is more for pulling actual content from various sources.

I would recommend writing a standalone script that is required and used from the build-module script. It should do something like:

const cheerio = require('cheerio')

function getTableOfContents(locale)
  const doc = docs[locale]['docs/README.md']
  const html = doc.sections.map(section => section.html).join('\n')
  const $ = cheerio.load(html)
  const heading = $('a[href="#guides-and-tutorials"]').parent() // h2
  const toc = heading.next('ul').html()
}

☝️ This is definitely not exactly right, but hopefully it helps you move forward. Let me know!

[Shivam-Miglani]

@zeke newbie node.js doubt How do I run and test this code? I created script/get-toc.js, tried to call it in build-module.js but then it can't find the function.

Then, I thought okay let me just try to run this standalone, so I did const i18n = require('..'), to do i18n.docs[locale]['docs/README.md'], then it says Reference error: i18n is not defined

I tried running test/index.js, says Error: Cannot find module '..' at similar line const i18n = require('..').

Checked environment paths, deleted node_modules and reinstalled them by now.

[zeke]

I'm offline for a bit, but will help you move this forward when I'm back. Thanks for being patient!

[Shivam-Miglani]

@zeke Any hints?

[zeke]

@Shivam-Miglani do you have any time this week to join a video call? We can work on this together if you like.

[Shivam-Miglani]

@zeke Except for a couple of hour of lectures, I can join a video call Mon(today), Tue and Wed. I am not free around 13:00-16:00 (CEST timezone: GMT+2) on Tue and Wed. Anytime apart from that is cool.

[zeke]

How about 17:30 CEST Tuesday?

[Shivam-Miglani]

Yes, works for me.

[zeke]

@Shivam-Miglani please email me at zeke@github.com and I'll send you a calendar invitation.

[zeke]

For the record, @Shivam-Miglani and I had a call today. Shivam is going to work on opening a PR to i18n that adds parsed navs for every language.

[Shivam-Miglani]

Next step?

[zeke]

Now that https://github.com/electron/i18n/pull/295 has landed in a release, we can display it on the site. https://github.com/electron/electronjs.org/pull/1220 is a start.

[dr-js]

Don't know if this helps, but my 2017 gist hack still works: https://github.com/electron/electronjs.org/issues/604#issuecomment-349228813

The gist: electron-doc-read-help.js

Latest screenshot: