chore(macros/APIRef): separate static and instance members

[wbamberg]

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 #7223 (review).

This is in line with the recent work @hamishwillee has been doing in mdn/content#21353 and so on, and contributes to openwebdocs/project#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: 73db3e7 is super simple and clear
• the unit test updates: ad26529 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

[SphinxKnight]

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 :)

[SphinxKnight]

@wbamberg I opened wbamberg#1 for fr

[wbamberg]

@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 .

[hamishwillee]

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

FWIW this is good to see.

[wbamberg]

@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...

[SphinxKnight]

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 wbamberg/content#261

[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

[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 wbamberg/content#261

Thank you so much again

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

[wbamberg]

@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 .

[Graywolf9]

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"
  },

[wbamberg]

@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 c33bd55, which ought to make the orders match up.

[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.

[yin1999]

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

[wbamberg]

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

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

[caugner]

LGTM, thanks! 🎉

PS: I usually set myself a reminder to merge PRs like these 7 days after the l10n teams were pinged.

[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:

fr

es

zh-CN

ja

[SphinxKnight]

cc @mdn/yari-content-ja / @mfuji09 for strings on https://github.com/mdn/content/blob/main/files/jsondata/L10n-Common.json

[mfuji09]

@SphinxKnight Thank you! I have made a PR for Japanese translation.