Page comments / discussions

[rufuspollock]

When publishing a page I want to allow visitors to post comments so that I get feedback

• want to be able to bulk enable/disable e.g. in settings
• enable/disable page by page

Implementation: suggest we build on (and contribute to) pliny, see https://github.com/timlrx/pliny/tree/main/packages/pliny/src/comments

Acceptance

• Commenting support on posts and pages ✅ 2023-02-01 (we are using discussions "Announcements") merged in commit 8f315a2
• Enable page by page in frontmatter:

---
showComments: true 
---

• Bulk enable in config:

const config = {
  comments: {
    pages: ["blog"] // can add more in array eg. docs
  }
}

How it works

Comments go into discussions' comments category.

https://github.com/giscus/giscus#how-it-works
https://giscus.app/ (see Page <-> Discussions Mapping section)

We are using pathname for mapping with page. giscus will search for a discussion whose title contains the page's pathname URL component. If there are no matches (means no comments), then a new one is created for that page.

Tasks

✅ 2023-02-04 Update/Fixes

• docs page renaming: page-comments -> comments
• created date on the page
• turn this docs page into a blog post by adding type: Blog
• create new discussions category comments and use that

Research / Design

✅ 2023-01-25 Using pliny approach but with imported components from providers

• how does it work roughly
• what do you think of it? (tech and design wise) i.e. pliny implementation
• what is recommended approach in terms of approach and implementation
  • should we follow this approach or look at something else
  • what are the key tasks
• how long will it take guesstimate? (for MVP and polished)

Implementation

✅ 2023-01-31

• Create comments components in core for giscus, utterances and disqus
• Add and use giscus react and disqus-react packages in core
• Add configs in frontmatter and config.js
  • configured to set page comments through frontmatter, or specified folders in comments' config. If both are not set then defaults to show on all pages. Frontmatter value takes precedence.
• Add documentation @ docs/comments
• publish core package to npm
• Add giscus env variables in netlify
• install giscus app in flowershow repo

Notes

1. how does it work roughly

• provider components are setup in let's say core/ui/Comments and rendered based on config values - GiscusConfig | DisqusConfig | UtterancesConfig.
• cors setup in next.config.js and env variables
• Component is imported in either the whole layout or Blog's layout file if we only want them for posts.

2. what do you think of it? (tech and design wise) i.e. pliny implementation

• This works really well for multiple providers and also scalable for adding more. If we are not using more than one provider, then it's probably a single component imported in our Layout.tsx which is rendered based on config and pageProps values.

3. what is recommended approach in terms of approach and implementation
   should we follow this approach or look at something else

If we are looking to use a single provider but are not sure about adding more in future, then this approach would be the route to take. My thoughts are since this is a plug it in kind of model and because provider components can be replaced easily, I would be leaning to use this. But I'm also interested to research what are the other ways this can be implemented.

what are the key tasks

• components in core package
• configs and env variables
• Comments either in app layout or specific to Blog layout

4. how long will it take guesstimate? (for MVP and polished)

• MVP ~3hrs or more if using some other provider not used by pliny. First pass would be just using the same setup and provider and see if that is working. Then modifying stuff according to our needs eg. based on additional configs.
• polished ~6hrs more or less with design suited to flowershow

[khalilcodes]

some notes on implementing this:

• Setting up our configs

  • bulk enable
    set config for folders ? eg. comments section only for Posts

    const config = {
      comments: {
        provider: ...,
        providerConfig: {
          ...
        },
      }
    }

  • page by page

    ---
    comments: true
    ---

• Allows configuration from 3 providers which are

  • Giscus - github discussions used as comments section on website and open-source. requires sign-in to github to comment
  • Disqus - paid, tracking services
  • Utterances - use github issue as comments on website, open-source and requires github sign-in to comment

• Do we need all 3 ? make one work first

• Similar approach to Search component

[rufuspollock]

@khalilcodes thanks for update. Could you give a bit more detail on our "standard" (as of yesterday 🤣) questions:

• how does it work roughly
• what do you think of it? (tech and design wise) i.e. pliny implementation
• what is recommended approach in terms of approach and implementation
  • should we follow this approach or look at something else
• how long will it take? (for MVP and polished)

I've added this checklist for you to the description

[khalilcodes]

@rufuspollock I have added some answers in description notes.

[rufuspollock]

@khalilcodes i would support multiple providers like Pliny.

If we can import components from pliny that is even better than copying and pasting as we don't have to maintain here.

[rufuspollock]

@khalilcodes and @olayway great work everyone 👏

Quick questions / comments:

• docs page naming: why page-comments vs comments? comments seems simpler and i assume this applies to blog pages as well etc?
• could we get a created date on the page
• shall we turn this docs page into a blog post by adding type: Blog (seems worth of it!)
• have we turned this on for the site? if so where can i try it out?

Finally when closing issues (and i know this closed by PR) can we copy over some info especially on "big" issues like this one so that when looking at issue in roadmap or board it is easy to see what happened. Here just a link to docs page and a FIXED would have been sufficient i think!

[khalilcodes]

@rufuspollock

have we turned this on for the site? if so where can i try it out?

it's turned on for blog pages atm for eg. https://flowershow.app/blog/2023-01-25-updated-features
Also, the comments will go into the dicsussion's category - Announcements, but I think it's best to change this by creating a new category called comments.

Will do the other changes 👍