Skip to content

Commit

Permalink
First Beta Release
Browse files Browse the repository at this point in the history
  • Loading branch information
@mauricerenck
mauricerenck committed May 9, 2020
1 parent 6c3f57f commit 1aab8aa
Show file tree
Hide file tree
Showing 40 changed files with 4,148 additions and 377 deletions.
140 changes: 138 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,138 @@
# komments
A Kirby 3 comment plugin
# Komments

![GitHub release](https://img.shields.io/github/release/mauricerenck/komments.svg?maxAge=1800) ![License](https://img.shields.io/github/license/mashape/apistatus.svg) ![Kirby Version](https://img.shields.io/badge/Kirby-3.3%2B-black.svg)

A Kirby comment plugin

**Please be aware, this is still a beta.**

## Features

- ✅ Receive comments from a form on your site
- The user will be informed that the komment is in moderation
- Spam detection
- Reject spam or just mark komments as spam
- ✅ Receive and send webmentions
- ✅ Send updates to Mastodon
- ✅ Ping archive.org
- ✅ Panel support
- Dashboard for komments in moderation/spam
- Moderate komments on your page
- Disable/enable komments per page

![the dashboard](doc-assets/komments-dashboard.png)
(The komment dashboard)

## Installation

### Install the plugin

- `composer require mauricerenck/komments`
- unzip [master.zip](https://github.com/mauricerenck/komments/releases/latest) as folder `site/plugins/komments`
- `git submodule add https://github.com/mauricerenck/komments.git site/plugins/komments`

---

### Adding Komments to your site

After Installing the Plugin add the snippet to your template. There are two snippets for you to use:

To list all komments and webmentions:

`<?php snippet(komments/webmention); ?>`

To show the komment form

`<?php snippet(komments/kommentform); ?>`

After adding the snippets, you may also want to add the stylesheet within the `<head></head>` of your site:

`<?php echo css(['/media/plugins/mauricerenck/komments/komments.css']); ?>`

---

### Adding Komments to your panel blueprint

if you use the panel, you may want to add the komments section to your blueprints like so:

```
sections:
komments:
extends: sections/komments
```

Add this to every blueprint you wish to enable komments on. This will allow you to enable/disable komments for each individual page and to see and edit the list of komments for that page.

![komment section](doc-assets/komment-section.png)

---

## Options

You can fine tune the komments to behave as you whish, use this options in `config.php` file.

| Option | Default | Description |
| ----------------------------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| `debug` | `false` | Enables debug mode and logs all webmentions to a file |
| `enable-webmention-support` | `true` | Listen to Webmentions and save them as komment |
| `webmention-auto-publish` | `true` | When you receive a webmention set status to published |
| `komment-auto-publish` | `false` | When you receive a komment set status to published |
| `send-mention-on-update` | `true` | Detect urls in your pages and send webmentions |
| `send-limit-to-templates` | `[]` | An array of template names (strings). When set webmentions will be sent only when this pages are updated |
| `send-mention-url-fields` | `['text']` | An array of fieldnames in which the plugin will search for urls |
| `send-to-mastodon-on-publish` | `false` | Send a post to mastodon when publishing a page |
| `mastodon-bearer` | - | Your Mastodon bearer Token |
| `mastodon-instance-url` | `https://mastodon.social/api/v1/statuses` | Your Mastodon API Endpoint |
| `mastodon-text-field` | `mastodonTeaser` | The fieldname of the field you write your mastodon msg in, otherwise the title is used |
| `ping-archiveorg` | `false` | Enable if you want to inform archive.org when you update a page |
| `auto-delete-spam` | `true` | When comment spam is detected it will be rejected, set to false to just mark the comment as SPAM |
| `komment-icon-like` | ❤️ | The icon for likes in your komment list |
| `komment-icon-reply` | 💬 | The icon for replies/comments in your komment list |
| `komment-icon-repost` | ♻️ | The icon for reposts in your komment list |
| `komment-icon-mention` | ♻️ | The icon for mention in your komment list |

**Please make sure to prefix all the options with `mauricerenck.komments.`**. For example the debug option should be set in your `config.php` like so: `'mauricerenck.komments.debug' => true`

---

## Special features

Next to komments directly on your page, there are some other features enabled by this plugin

### Receiving webmentions

To receive webmentions you have to install the [tratschtante plugin](https://github.com/mauricerenck/tratschtante) and configure it. Tratschtante will handle all the webmentions and normalize their data. Currently only webmention.io is supported. After installing tratschtante, komment will automaticly by informed about new webmentions.

Webmention support is enabled by default but won't work until you install tratschtante.

### Sending Webmentions

You don't need tratschtante to send webmentions. By default the plugin will try to send webmentions to all urls it finds in your page. You might want to tell the plugin in which fields to look for urls, you can do that by providing a list of fieldnames in the `mauricerenck.komments.send-mention-url-fields` option. So if you have an intro and a text field in your blueprint, you might want to add those:

```
'mauricerenck.komments.send-mention-url-fields' => [
'intro',
'text',
]
```

If you just want to send webmention on specific pages, like only on blogposts, you can set a limit to those templates by using the `mauricerenck.komments.send-limit-to-templates` option. For example, using the starterkit, if you just want to send mentions on notes, do so:

```
'mauricerenck.komments.send-limit-to-templates' => [
'note',
]
```

### Sending new pages to mastodon

If you want to, you can inform your mastodon followers of new pages/posts on your site. Just set the `mauricerenck.komments.send-to-mastodon-on-publish` to `true`. Komments will then try to publish a mastodon post everytime you publish a page. This can also be limited by template (see sending webmentions above)

In order to be able to publish to your mastodon account, you need to set a bearer token and your mastodon api endpoint. Please have a look at your mastodon instance on how to get that data.

### Changing the komment list on your site

By changing the the icon options you can add your own emoji or icons. You can set simple text or even full html-code.
If you want to change the styling, have a look at the classes, you can find the default styling in the `assets` folder of this plugin.

You can also modify the javascript part, but be aware, that this might result in false spam detection.
133 changes: 133 additions & 0 deletions assets/komments.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
#kommentform {
display: grid;
grid-template-columns: 100%;

grid-template-areas:
"quote"
"komment"
"email"
"author"
"authorsite"
"privacy"
"button"
"tweet";

grid-column-gap: 10px;
grid-row-gap: 10px;
}

#kommentform #url {
position: relative;
left: -200vw;
height: 0;
}

#kommentform input[name="email"] {
grid-area: email;
}

#kommentform input[name="author"] {
grid-area: author;
}

#kommentform input[type="url"] {
grid-area: authorsite;
}

#kommentform input[type="submit"] {
grid-area: button;
}

#kommentform .share {
grid-area: tweet;
align-self: start;
}

#kommentform textarea {
grid-area: komment;
width: 100%;
}

#kommentform .visible-quote {
grid-area: quote;
}

#kommentform .komment-privacy {
grid-area: privacy;
font-size: smaller;
}

#kommentform.spam-indicator {
grid-area: spamindicator;
width: 100%;
}

#kommentform .progress {
transition: width 1s, background 2s, height 0.2s;
transition-timing-function: linear;
display: inline-block;
width: 0%;
height: 5px;
background: red;
}

#kommentform .progress.orange {
background: orange;
}
#kommentform .progress.yellow {
background: yellowgreen;
}
#kommentform .progress.green {
background: green;
}

#kommentform .progress.done {
background: green;
height: 0;
}

#kommentsWebmentions .single-komment {
display: grid;
grid-template-columns: 20px 40px 1fr;

grid-template-areas:
"icon avatar action"
"icon avatar content";

grid-column-gap: 10px;
grid-row-gap: 10px;

line-height: 1.2;

border-bottom: 1px solid grey;
padding-bottom: 20px;
margin-bottom: 20px;
}

#kommentsWebmentions .type-of {
grid-area: icon;
line-height: 40px;
}

#kommentsWebmentions .author-avatar {
grid-area: avatar;
position: relative;
}
#kommentsWebmentions .author-avatar img {
max-width: 40px;
border-radius: 3px;
}

#kommentsWebmentions .author-action {
grid-area: action;
color: grey;
line-height: 40px;
}
#kommentsWebmentions .mention-content {
grid-area: content;
padding-bottom: 20px;
}
#kommentsWebmentions .komment-text {
padding: 20;
line-height: 1.5;
}
26 changes: 11 additions & 15 deletions assets/komments.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
window.onload = function () {

const komment = document.querySelector('#kommentform #komment')
const kommentEmail = document.querySelector('#kommentform #email')
const kommentAuthor = document.querySelector('#kommentform #author')
Expand All @@ -9,47 +8,45 @@ window.onload = function () {
const spamIndicatorProgress = document.querySelector('#kommentform .spam-indicator .progress')

let duration = {
start: 0,
end: 0,
indicator: 0,
timer: null
timer: null,
current: 0
}

const setIndicator = () => {

if (duration.indicator > 0) {
if (duration.current > 0) {
return
}

timeField.value = 0;
submitField.disabled = true;

duration.timer = window.setInterval(() => {
duration.indicator += 10;
spamIndicatorProgress.style.width = `${duration.indicator}%`

// TODO
if (duration.indicator > 25) {
spamIndicatorProgress.style.background = 'orange'
spamIndicatorProgress.classList.add('orange')
}

if (duration.indicator > 50) {
spamIndicatorProgress.style.background = 'yellowgreen'
spamIndicatorProgress.classList.add('yellow')
}

if (duration.indicator > 75) {
spamIndicatorProgress.style.background = 'green'
spamIndicatorProgress.classList.add('green')
}

if (duration.indicator >= 100) {
spamIndicatorProgress.style.background = 'green'
spamIndicatorProgress.style.height = '0';
spamIndicatorProgress.classList.add('done')
submitField.disabled = false;

duration.end = Math.round(Date.now() / 1000);
timeField.value = duration.end - duration.start

window.clearInterval(duration.timer)
}

duration.current++;
timeField.value = duration.current
}, 1000)
}

Expand All @@ -58,7 +55,6 @@ window.onload = function () {
kommentUrl.style.display = 'none';

komment.addEventListener('focus', () => {
duration.start = Math.round(Date.now() / 1000);
setIndicator();
kommentEmail.style.display = 'block';
kommentAuthor.style.display = 'block';
Expand Down
Loading

0 comments on commit 1aab8aa

Please sign in to comment.