minimal-mistakes icon indicating copy to clipboard operation
minimal-mistakes copied to clipboard

Giscus missing config tags

Open tavinus opened this issue 2 years ago • 3 comments

What happened?

  • Minimal Mistakes version: Latest (4.24.0)
  • Ruby gem or remote theme version: Not sure (using github)
  • Jekyll version: Not sure (using github)
  • Git repository URL: https://github.com/tavinus/tavinus.github.io
  • Hosted on GitHub Pages (if yes provide URL to site): https://tavinus.github.io
  • Operating system: Windows 10 x64

I created it from the mm-github-pages-starter, so I am not so sure about some of the info above.

Expected behavior

Giscus to have all possible config tags available, but seems like some of them are missing. Maybe they were added after the plugin was made?

I wanted to make the comment box stay at the top of the comments (instead of the bottom).

Also, seems like it is not possible to set the display language for giscus (also missing tag)

I could not find any issues or discussions about this.

Steps to reproduce the behavior

Configure giscus comments and try to add one of the following attributes:

  • data-emit-metadata="0"
  • data-input-position="top"
  • data-lang="en"

They are all default attributes in the https://giscus.app/ config webpage

Other

I guess the code in this page would need to be changed to add the missing attributes:

https://github.com/mmistakes/minimal-mistakes/blob/297989c1be175df46640a1547cc390e9442f527d/_includes/comments-providers/giscus.html

Suggestion

Add Missing Tags

    script.setAttribute('data-emit-metadata', '{{ site.comments.giscus.emit_metadata | default: 0 }}');
    script.setAttribute('data-input-position', '{{ site.comments.giscus.input_position | default: "bottom" }}');
    script.setAttribute('data-lang', '{{ site.comments.giscus.lang | default: "en" }}');

From

    var script = document.createElement('script');
    script.setAttribute('src', 'https://giscus.app/client.js');
    script.setAttribute('data-repo', '{{ site.repository | downcase }}');
    script.setAttribute('data-repo-id', '{{ site.comments.giscus.repo_id }}');
    script.setAttribute('data-category', '{{ site.comments.giscus.category_name }}');
    script.setAttribute('data-category-id', '{{ site.comments.giscus.category_id }}');
    script.setAttribute('data-mapping', '{{ site.comments.giscus.discussion_term | default: "pathname" }}');
    script.setAttribute('data-reactions-enabled', '{{ site.comments.giscus.reactions_enabled | default: 1 }}');
    script.setAttribute('data-theme', '{{ site.comments.giscus.theme | default: "light" }}');
    script.setAttribute('crossorigin', 'anonymous');

To

I kept the order they present in the config app, to make it easier to correlate/test

    var script = document.createElement('script');
    script.setAttribute('src', 'https://giscus.app/client.js');
    script.setAttribute('data-repo', '{{ site.repository | downcase }}');
    script.setAttribute('data-repo-id', '{{ site.comments.giscus.repo_id }}');
    script.setAttribute('data-category', '{{ site.comments.giscus.category_name }}');
    script.setAttribute('data-category-id', '{{ site.comments.giscus.category_id }}');
    script.setAttribute('data-mapping', '{{ site.comments.giscus.discussion_term | default: "pathname" }}');
    script.setAttribute('data-reactions-enabled', '{{ site.comments.giscus.reactions_enabled | default: 1 }}');
    script.setAttribute('data-emit-metadata', '{{ site.comments.giscus.emit_metadata | default: 0 }}');
    script.setAttribute('data-input-position', '{{ site.comments.giscus.input_position | default: "bottom" }}');
    script.setAttribute('data-theme', '{{ site.comments.giscus.theme | default: "light" }}');
    script.setAttribute('data-lang', '{{ site.comments.giscus.lang | default: "en" }}');
    script.setAttribute('crossorigin', 'anonymous');

Then add the 3 new possible tags into the docs, examples, etc
https://mmistakes.github.io/minimal-mistakes/docs/configuration/#giscus-comments

New mmistakes config tags for giscus:

  • emit_metadata (0 or 1)
  • input_position (top or bottom)
  • lang (available language codes)

Apart from that, there is another tag missing, but this one is only inserted when you set it. Meaning that the default for it is to be totally absent.

It is the tag for lazy loading data-loading="lazy".

So, we would need some code that would only set this attribute if it is defined, but not set anything if absent. The code above will always set a default value for each attribute. Should be easy to add a check that ignores if not set though.


More info about each tag and their default values can be found in the https://giscus.app/ website

tavinus avatar Apr 13 '22 22:04 tavinus

Hi @tavinus,

Thanks a lot for this note! How do you think how can we add advanced option to sort the comments from the newest to the oldest by default? The description of this configuration is here, and I tried to add giscus.json to the root of the repository. After local building it was copied to the _site folder successfully, but the sorting order didn't change (the oldest comments are first).

Thank you.

labdmitriy avatar May 09 '22 19:05 labdmitriy

#4274

akaunderr avatar Apr 19 '23 23:04 akaunderr

Hi @labdmitriy, I am not sure how to do that. I would have to investigate further. Did you check from the Browser console if the giscus.json was loaded or if there were any errors there? Maybe @akaunderr can shed a light on this.

EDIT: Could not find any issues with "giscus.json", maybe you should create a new one asking how to use the giscus.json advanced options. This issue seems to be fixed. Just waiting for the merge.

tavinus avatar May 23 '23 09:05 tavinus