meh-comments

The meh-comments component displays a list of comments for a specific post on your website. It handles loading, displaying, and moderating comments.

Basic Integration Example

Here's how to add the comments list to your website:

<!-- Basic usage -->
<meh-comments
  backend="https://comments.example.com"
  post="/blog/2023/my-awesome-post"
  site="myblog">
</meh-comments>

Administration

Typically, the component will only display approved comments. To access moderation features, you can use the meh-login component somewhere on your site to authenticate as an administrator. Once logged in, the component will display all comments, including pending and spam and provide options to moderate them.

Properties

Property	Attribute	Description	Type	Default
`backend`	`backend`	The base URL for where the meh system is hosted If not provided, attempts to detect from script tag	`string`	`''`
`customTranslations`	`custom-translations`	Custom translations object that overrides default and loaded translations This allows users to provide their own translations directly	`string \\| { noComments?: string; loadingComments?: string; errorLoading?: string; approve?: string; reject?: string; delete?: string; edit?: string; spam?: string; reply?: string; confirmDelete?: string; inReplyTo?: string; sortOldest?: string; sortNewest?: string; sortThreaded?: string; sortBy?: string; }`	`''`
`externalStyles`	`external-styles`	URL to an external stylesheet to be injected into the shadow DOM	`string`	`''`
`language`	`language`	The language code for translations If not provided, defaults to 'en'	`string`	`'en'`
`noreply`	`noreply`	When set, hides the reply link on comments	`boolean`	`false`
`post`	`post`	The post path to fetch comments for If not provided, defaults to the current page path	`string`	`undefined`
`site`	`site`	The site identifier to use If not provided, defaults to 'meh'	`string`	`'meh'`
`sort`	`sort`	Comment sort order: 'oldest' (default), 'newest', or 'threaded' Can switched by the end user. User preference is saved in localStorage.	`"newest" \\| "oldest" \\| "threaded"`	`'oldest'`

Built with StencilJS