yari Separate static and instance members in API sidebar

Summary

In the APIRef sidebar, have separate lists for static and instance properties and methods.

Problem

Currently the APIRef sidebar lists just "Properties" and "Methods", combining instance and static members and not distinguishing them.

Solution

This PR uses page types to build separate lists for instance and static members, as @Elchi3 suggested in https://github.com/mdn/yari/pull/7223#pullrequestreview-1129982474.

This is in line with the recent work @hamishwillee has been doing in https://github.com/mdn/content/pull/21353 and so on, and contributes to https://github.com/openwebdocs/project/issues/104 .

This PR has a dependency on the l10 strings in https://github.com/mdn/content/blob/main/files/jsondata/L10n-Common.json. I've added strings for en-US in https://github.com/wbamberg/content/tree/l10-static-instance, so you can try this PR out. @SphinxKnight , if we want to go ahead with this can you notify the relevant people in the l10n community? Maybe they could add translations to that branch. I'm setting this PR to draft in the meantime.

the macro code change: https://github.com/mdn/yari/pull/7335/commits/73db3e7e3ea2fde25bbd26a77a0fedddc2533300 is super simple and clear
the unit test updates: https://github.com/mdn/yari/pull/7335/commits/ad265292e138337373a7fd28ea0975c834711418 are a lot more complicated

Screenshots

Before

https://developer.mozilla.org/en-US/docs/Web/API/IDBKeyRange

After

http://localhost:3000/en-US/docs/Web/API/IDBKeyRange

How did you test this change?

check out this branch
check out https://github.com/wbamberg/content/tree/l10-static-instance, and set is as CONTENT_ROOT
run yarn dev
open some Web/API pages

Oct 12 '22 16:10 wbamberg

Thanks @wbamberg for the heads up :) @mdn/yari-content-ja / @mdn/yari-content-ko / @mdn/yari-content-es / @mdn/yari-content-pt-br / @mdn/yari-content-zh and @mdn/yari-content-fr please, if you can catch this one and add translations for your locale :)

Oct 13 '22 05:10 SphinxKnight

@wbamberg I opened https://github.com/wbamberg/yari/pull/1 for fr

Oct 13 '22 05:10 SphinxKnight

@wbamberg I opened wbamberg#1 for fr

I'm not sure if you know this and are planning to come back to it, but your PR adds translations for the Yari unit test only. While that's fine, I don't think it matters to the substance of the tests to have real translations (all we need to test is that we fetch the correct string for the locale).

What we do need is translations for the strings in L10nCommon.json, in mdn/content, which is what the real macro will use. That would be a PR to https://github.com/wbamberg/content/tree/l10-static-instance .

Oct 13 '22 17:10 wbamberg

@wbamberg Does it matter that your "after" list order does not match the docs heading order?

FWIW this is good to see.

Oct 13 '22 22:10 hamishwillee

@wbamberg Does it matter that your "after" list order does not match the docs heading order?

Oh, yeah, we should definitely have the same order. I'll push an update...

Oct 14 '22 02:10 wbamberg

What we do need is translations for the strings in L10nCommon.json, in mdn/content, which is what the real macro will use. That would be a PR to https://github.com/wbamberg/content/tree/l10-static-instance .

I'll plug my brain into next time ^^ Thanks for the explanation

@wbamberg here it is https://github.com/wbamberg/content/pull/261

Oct 14 '22 07:10 SphinxKnight

Hi! Thank you so much for this! @wbamberg @SphinxKnight

I'm a little lost, for add/modifiy the es strings I do a new PR to https://github.com/wbamberg/content or into https://github.com/wbamberg/content/pull/261

Thank you so much again

Oct 14 '22 18:10 Graywolf9

Hi! Thank you so much for this! @wbamberg @SphinxKnight

I'm a little lost, for add/modifiy the es strings I do a new PR to https://github.com/wbamberg/content or into wbamberg/content#261

Thank you so much again

As Will wrote, a PR against https://github.com/wbamberg/content/tree/l10-static-instance

Oct 14 '22 18:10 SphinxKnight

@Graywolf9 , I'm also happy to add the strings to that branch myself if you like, just let me know what to write. The only bit I can't do is the es translations :).

The relevant strings are at: https://github.com/wbamberg/content/blob/c7135af1cae9edd09e7840cce18c4b969c933eac/files/jsondata/L10n-Common.json#L32-L50 .

Oct 14 '22 20:10 wbamberg

Thank you so much! @wbamberg , there are the strings

  "Static_methods": {
    "en-US": "Static methods",
    "es": "Métodos estáticos"
    "fr": "Méthodes statiques"
  },


  "Static_properties": {
    "en-US": "Static properties",
    "es": "Propiedades estáticas"
    "fr": "Propriétés statiques"
  },


  "Instance_methods": {
    "en-US": "Instance methods",
    "es": "Métodos de instancia"
    "fr": "Méthodes d'instance"
  },


  "Instance_properties": {
    "en-US": "Instance properties",
    "es": "Propiedades de instancia"
    "fr": "Propriétés d'instance"
  },

Oct 14 '22 23:10 Graywolf9

@wbamberg Does it matter that your "after" list order does not match the docs heading order?

Oh, yeah, we should definitely have the same order. I'll push an update...

I just pushed https://github.com/mdn/yari/pull/7335/commits/c33bd5522c0f116ac015007318f600c665c78123, which ought to make the orders match up.

Oct 14 '22 23:10 wbamberg

Thank you so much! @wbamberg , there are the strings

Thank you @Graywolf9 ! I just pushed your changes to my branch https://github.com/wbamberg/content/blob/daee8bb93ee5d7b90745388d9379d3bcddd1e130/files/jsondata/L10n-Common.json#L32-L54.

Oct 14 '22 23:10 wbamberg

Hi @wbamberg, I've created wbamberg/content#262. Is there anything else should I do?

Oct 15 '22 00:10 yin1999

Hi @wbamberg, I've created wbamberg/content#262. Is there anything else should I do?

That looks good to me, @yin1999 ! thank you!

Oct 15 '22 00:10 wbamberg

I just checked to see how this will look in various locales. fr, es, zh-CN, and ja. As we might hope, the first three display translated strings, and the last displays the en-US fallback: