Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Giscus missing config tags #3574

Open
tavinus opened this issue Apr 13, 2022 · 3 comments
Open

Giscus missing config tags #3574

tavinus opened this issue Apr 13, 2022 · 3 comments

Comments

@tavinus
Copy link

tavinus commented Apr 13, 2022

What happened?

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

@labdmitriy
Copy link

labdmitriy commented May 9, 2022

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.

@andr11b
Copy link
Contributor

andr11b commented Apr 19, 2023

#4274

@tavinus
Copy link
Author

tavinus commented May 23, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants