2018-06-04 00:06:17 +08:00
< html >
< head >
2018-06-22 22:09:58 +08:00
< script src = "[[[.CdnPrefix]]]/js/jquery.js" > < / script >
< script src = "[[[.CdnPrefix]]]/js/vue.js" > < / script >
< script src = "[[[.CdnPrefix]]]/js/highlight.js" > < / script >
< script src = "[[[.CdnPrefix]]]/js/chartist.js" > < / script >
< script src = "[[[.CdnPrefix]]]/js/dashboard.js" > < / script >
2019-01-31 09:13:08 +08:00
< link rel = "icon" href = "[[[.CdnPrefix]]]/images/120x120.png" >
2018-06-22 22:09:58 +08:00
< link rel = "stylesheet" href = "[[[.CdnPrefix]]]/css/chartist.css" >
< link rel = "stylesheet" href = "[[[.CdnPrefix]]]/css/dashboard.css" >
2018-06-04 00:06:17 +08:00
< link href = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Source+Sans+Pro:200,300,400,700" rel = "stylesheet" >
< title > Commento: Dashboard< / title >
< / head >
< div id = "navbar" class = "navbar" >
2018-08-08 14:46:27 +08:00
< a href = "[[[.Origin]]]/" class = "navbar-item navbar-logo-text" > < img src = "[[[.CdnPrefix]]]/images/logo.svg" class = "navbar-logo" > Commento< / a >
2018-06-05 16:52:53 +08:00
< div class = "navbar-item" >
2018-08-08 14:46:27 +08:00
< a href = "[[[.Origin]]]/logout" class = "navbar-item" > Logout< / a >
2018-06-05 16:52:53 +08:00
< div class = "float-right" > < b > < div id = "owner-name" > < / div > < / b > < / div >
2018-06-04 00:06:17 +08:00
< / div >
< / div >
< script >
window.onload = function() {
2018-12-20 13:48:43 +08:00
window.commento.selfGet(function() {
window.commento.vueConstruct(function() {
window.commento.navbarFill();
window.commento.domainRefresh();
2018-06-04 00:06:17 +08:00
$(document).ready(function(){
$("ul.tabs li").click(function(){
var tab_id = $(this).attr("data-tab");
$("ul.tabs li").removeClass("current");
$(".content").removeClass("current");
$(this).addClass("current");
$("#"+tab_id).addClass("current");
});
});
});
});
};
< / script >
< div class = "global-error" id = "global-error" > < / div >
< div class = "global-ok" id = "global-ok" > < / div >
< div id = "dashboard" class = "dashboard-container" >
< div class = "pane-left" >
< div class = "tree" v-if = "domains.length == 0 || domains[0].show == false" >
2018-07-04 20:51:31 +08:00
< img class = "tree-svg" src = "[[[.CdnPrefix]]]/images/tree.svg" >
2018-06-04 00:06:17 +08:00
It's so quiet in here.
< / div >
2018-12-20 13:48:43 +08:00
< div class = "pane-setting" v-for = "domain in domains" v-on:click = "window.commento.domainSelect(domain.domain)" id = "{{domain.hex}}" v-bind:class = "{selected: domain.selected}" v-if = "domain.show" >
2018-06-04 00:06:17 +08:00
< div class = "pane-setting-inside" >
< div class = "setting-title" > {{domain.name}}< / div >
< div class = "setting-subtitle" > {{domain.domain}}< / div >
< / div >
< / div >
2018-12-20 13:48:43 +08:00
< div class = "pane-setting" id = "domain-add" onclick = "document.location.hash='#new-domain-modal'" >
2018-06-04 00:06:17 +08:00
< div class = "pane-setting-inside super-setting" >
< div class = "super-setting-title" > +< / div >
< div class = "super-setting-text" > New Domain< / div >
< / div >
< / div >
< / div >
< div class = "pane-middle" >
2018-12-20 13:48:43 +08:00
< div v-if = "showSettings" class = "pane-setting" v-for = "setting in settings" v-on:click = "window.commento.settingSelect(setting.id)" id = "{{setting.id}}" v-bind:class = "{selected: setting.selected}" >
2018-06-04 00:06:17 +08:00
< div class = "pane-setting-inside" >
< div class = "setting-title" > {{setting.text}}< / div >
< div class = "setting-subtitle" > {{setting.meaning}}< / div >
< / div >
< / div >
< div class = "select-a-domain" v-if = "!showSettings" >
Select a website on the left.
< / div >
< / div >
< div class = "pane-right" >
<!-- Installation -->
< div id = "installation-view" class = "view hidden" >
< div class = "view-inside" >
2019-01-31 15:06:11 +08:00
< div class = "mid-view" >
2018-06-04 00:06:17 +08:00
< div class = "tabs-container" >
< div class = "tab" >
< ul class = "tabs" >
2019-01-31 15:06:11 +08:00
< li class = "tab-link original current" data-tab = "installation-tab-1" > Universal Snippet< / li >
2018-06-04 00:06:17 +08:00
< / ul >
2019-01-31 15:06:11 +08:00
< div id = "installation-tab-1" class = "content original current" >
< div class = "normal-text" >
2018-06-04 00:06:17 +08:00
Copy the following piece of HTML code and paste it where you'd like Commento to load.
< / div >
< pre > < code id = "code-div" class = "html" > < / code > < / pre >
2019-01-31 15:06:11 +08:00
< div class = "normal-text" >
2018-06-04 00:06:17 +08:00
And that's it. All your settings, themes, and comments would be automagically loaded. Commento is mobile-responsive too, as it simply fills the container it is put in.
< / div >
2019-01-31 11:44:36 +08:00
< br >
2019-01-31 15:06:11 +08:00
< div class = "normal-text" >
2019-01-31 11:44:36 +08:00
Read the Commento documentation < a href = "https://docs.commento.io/configuration/" > on configuration< / a > .
< / div >
2018-06-04 00:06:17 +08:00
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- Stats -->
< div id = "statistics-view" class = "view hidden" >
< div class = "view-inside" >
< div class = "mid-view center" >
< div class = "center center-title" >
Analytics
< / div >
2019-01-31 12:47:29 +08:00
2019-01-31 15:06:11 +08:00
< div class = "normal-text" >
2019-01-31 12:47:29 +08:00
Anonymous statistics such as monthly pageviews and number of comments
< / div >
2018-06-04 00:06:17 +08:00
< div class = "stat" >
< div class = "number" >
< div class = "digits gray-digits" > {{domains[cd].viewsLast30Days.zeros}}< / div >
< div class = "digits" > {{domains[cd].viewsLast30Days.num}}< / div >
< div class = "digits dark-gray-digits" > {{domains[cd].viewsLast30Days.units}}< / div >
< / div >
< div class = "text" >
views in the last 30 days
< / div >
< div class = "graph" id = "views-graph" > < / div >
< / div >
< div class = "stat" >
< div class = "number" >
< div class = "digits gray-digits" > {{domains[cd].commentsLast30Days.zeros}}< / div >
< div class = "digits" > {{domains[cd].commentsLast30Days.num}}< / div >
< div class = "digits dark-gray-digits" > {{domains[cd].commentsLast30Days.units}}< / div >
< / div >
< div class = "text" >
comments in the last 30 days
< / div >
< div class = "graph" id = "comments-graph" > < / div >
< / div >
< / div >
< / div >
< / div >
<!-- moderation -->
< div id = "moderation-view" class = "view hidden" >
< div class = "view-inside" >
2019-01-31 15:06:11 +08:00
< div class = "mid-view" >
2018-06-04 00:06:17 +08:00
< div class = "tabs-container" >
< div class = "tab" >
< ul class = "tabs" >
2019-01-31 12:47:29 +08:00
< li class = "tab-link original current" data-tab = "mod-tab-1" > General< / li >
< li class = "tab-link" data-tab = "mod-tab-2" > Add/Remove Moderators< / li >
2019-02-19 00:23:44 +08:00
< li class = "tab-link" data-tab = "mod-tab-3" > Email Settings< / li >
2018-06-04 00:06:17 +08:00
< / ul >
< div id = "mod-tab-1" class = "content original current" >
2019-02-13 13:51:03 +08:00
< div class = "row no-border commento-round-check" >
< input type = "checkbox" v-model = "domains[cd].autoSpamFilter" id = "spam-filtering" >
2019-01-31 12:47:29 +08:00
< label for = "spam-filtering" > Automatic spam filtering< / label >
< div class = "pitch" >
Commento uses Akismet's advanced spam detection to automatically identify and remove spam comments. This is strongly recommended. Requires backend configuration.
< / div >
< / div >
2019-02-13 13:51:03 +08:00
< div class = "row no-border commento-round-check" >
< input type = "checkbox" v-model = "domains[cd].requireModeration" id = "require-moderation" >
2019-01-31 12:47:29 +08:00
< label for = "require-moderation" > Require all comments to be approved manually< / label >
< div class = "pitch" >
Enabling this would require a moderator to approve all comments. This is generally recommended if your site doesn't receive too much traffic.
< / div >
< / div >
2019-02-13 13:51:03 +08:00
< div class = "row no-border commento-round-check" >
< input type = "checkbox" v-model = "domains[cd].allowAnonymous" id = "allow-anonymous" >
2019-01-31 12:47:29 +08:00
< label for = "allow-anonymous" > Allow anonymous comments< / label >
< div class = "pitch" >
Enabling this would allow your readers to comment anonymously. Disabling would require the to authenticate themselves (using their Google account, for example). Recommended.
< / div >
< / div >
2019-02-13 13:51:03 +08:00
< div class = "row no-border commento-round-check indent" v-if = "domains[cd].allowAnonymous" >
< input type = "checkbox" v-model = "domains[cd].moderateAllAnonymous" id = "moderate-all-anonymous" >
2019-01-31 12:47:29 +08:00
< label for = "moderate-all-anonymous" > Require anonymous comments to be approved manually< / label >
< div class = "pitch" >
Enabling this would require a moderator to approve all anonymous comments. This is recommended if most of your spam comments are from anonymous users.
< / div >
< / div >
< div class = "center" >
< button id = "save-general-button" onclick = "window.commento.generalSaveHandler()" class = "button" > Save Changes< / button >
< / div >
< / div >
< div id = "mod-tab-2" class = "content" >
2019-02-19 00:23:44 +08:00
< div class = "normal-text" >
2019-01-31 12:47:29 +08:00
Moderators have the power to approve/delete comments and lock threads. Once you add an user as a moderator, shiny new buttons will appear on each comment on each page when they log in.< br > < br >
2019-01-31 11:49:25 +08:00
2019-01-31 12:47:29 +08:00
You're still the only administrator and the only person who can add and remove moderators. Moderators do not have access to this dashboard. Their access is restricted to pages on your website.
2018-06-04 00:06:17 +08:00
< / div >
2018-06-11 01:15:56 +08:00
< div class = "commento-email-container" >
< div class = "commento-email" >
< input class = "commento-input" type = "text" id = "new-mod" placeholder = "Email" >
2018-12-20 13:48:43 +08:00
< button id = "new-mod-button" class = "commento-email-button" onclick = "window.commento.moderatorNewHandler()" > Add moderator< / button >
2018-06-04 00:06:17 +08:00
< / div >
< / div >
< div class = "mod-emails-container" >
< div class = "content" >
< div class = "mod-email" v-for = "email in domains[cd].moderators" v-if = "domains[cd].moderators.length > 0" >
< div class = "email" > {{email.email}}< / div >
2018-12-20 13:48:43 +08:00
< div class = "delete" v-on:click = "window.commento.moderatorDeleteHandler(email.email)" > Delete< / div >
2018-06-04 00:06:17 +08:00
< div class = "date" > added {{email.timeAgo}}< / div >
< / div >
< / div >
< / div >
< / div >
2019-02-19 00:23:44 +08:00
< div id = "mod-tab-3" class = "content" >
< div class = "normal-text" >
You can enable email notifications to notify your moderators when a new comment is posted or when a comment is pending moderation. Commento tries to be smart about how often an email is sent. Emails will be delayed and batched until you go 10 minutes without one. This requires valid SMTP settings in order to send emails.< br > < br >
< / div >
< div class = "question" >
When do you want emails sent to moderators?
< / div >
< div class = "row no-border commento-round-check indent" >
< input type = "radio" id = "email-all" value = "all" v-model = "domains[cd].emailNotificationPolicy" >
< label for = "email-all" > Whenever a new comment is created< / label >
< / div >
< div class = "row no-border commento-round-check indent" >
< input type = "radio" id = "email-pending-moderation" value = "pending-moderation" v-model = "domains[cd].emailNotificationPolicy" >
< label for = "email-pending-moderation" > Only for comments pending moderation< / label >
< / div >
< div class = "row no-border commento-round-check indent" >
< input type = "radio" id = "email-none" value = "none" v-model = "domains[cd].emailNotificationPolicy" >
< label for = "email-none" > Do not email moderators< / label >
< / div >
< br >
< div class = "center" >
< button id = "save-general-button" onclick = "window.commento.generalSaveHandler()" class = "button" > Save Changes< / button >
< / div >
< / div >
2018-06-04 00:06:17 +08:00
< / div >
< / div >
< / div >
< / div >
< / div >
2018-09-23 12:59:14 +08:00
<!-- Configure Domain -->
2018-06-04 00:06:17 +08:00
< div id = "general-view" class = "view hidden" >
< div class = "view-inside" >
2019-01-31 15:06:11 +08:00
< div class = "mid-view" >
< div class = "tabs-container" >
< div class = "tab" >
< ul class = "tabs" >
< li class = "tab-link original current" data-tab = "configure-tab-1" > General< / li >
2019-02-19 00:23:44 +08:00
< li class = "tab-link" data-tab = "configure-tab-2" > Export Data< / li >
2019-01-31 15:06:11 +08:00
< / ul >
2018-06-04 00:06:17 +08:00
2019-01-31 15:06:11 +08:00
< div id = "configure-tab-1" class = "content original current" >
< div class = "box" >
< div class = "row" >
< div class = "label" > Website Name< / div >
< input class = "input gray-input" id = "cur-domain-name" type = "text" :placeholder = "domains[cd].origName" v-model = "domains[cd].name" >
< / div >
< / div >
< div class = "center" >
< button id = "save-general-button" onclick = "window.commento.generalSaveHandler()" class = "button" > Save Changes< / button >
< / div >
< / div >
< div id = "configure-tab-2" class = "content" >
< div class = "normal-text" >
You can export an archive of this domain's data (which includes all comments and commenters) in the JSON format. To initiate and queue an archive request, click the button below. You will receive an email containing the archive once it's ready.< br > < br >
Please note that this requires valid SMTP settings in order to send emails.< br > < br >
< div class = "center" >
< button id = "domain-export-button" onclick = "window.commento.domainExportBegin()" class = "button" > Initiate Data Export< / button >
< / div >
< / div >
< / div >
< / div >
2018-06-04 00:06:17 +08:00
< / div >
< / div >
< / div >
< / div >
<!-- Import Comments -->
< div id = "import-view" class = "view hidden" >
< div class = "view-inside" >
2019-01-31 15:06:11 +08:00
< div class = "mid-view" >
2018-06-04 00:06:17 +08:00
< div class = "tabs-container" >
< div class = "tab" >
< ul class = "tabs" >
< li class = "tab-link original current" data-tab = "install-tab-1" > Disqus< / li >
< / ul >
< div id = "install-tab-1" class = "content original current" >
2019-01-31 15:06:11 +08:00
< div class = "normal-text" >
2019-01-31 12:47:29 +08:00
If you're currently using Disqus, you can import all comments into Commento:
2018-06-04 00:06:17 +08:00
< ul >
< li >
2019-01-31 12:47:29 +08:00
Go to < a href = "http://disqus.com/admin/discussions/export/" > the admin export section< / a > in Disqus and click on < b > Export Comments< / b > . This should start the process of exporting your comments in the background.
2018-06-04 00:06:17 +08:00
< / li >
< li >
2019-01-31 12:47:29 +08:00
You'll receive an email from Disqus with a link to a compressed archive of all comments and associated data. Copy and paste that link here to start the import process:
2018-06-04 00:06:17 +08:00
< br > < br >
2018-06-11 01:15:56 +08:00
< div class = "commento-email-container" >
< div class = "commento-email" >
2018-06-14 16:58:11 +08:00
< input class = "commento-input" type = "text" id = "disqus-url" placeholder = "https://media.disqus.com/uploads/..." >
2018-12-20 13:48:43 +08:00
< button id = "disqus-import-button" class = "commento-email-button" onclick = "window.commento.importDisqus()" > Import< / button >
2018-06-04 00:06:17 +08:00
< / div >
< / div >
2019-01-31 12:47:29 +08:00
<!--
2018-06-04 00:06:17 +08:00
< div class = "subtext-container" >
< div class = "subtext" >
2019-01-31 12:47:29 +08:00
< div > By using this service, you grant Commento the permission to download and process your Disqus information.< / div >
2018-06-04 00:06:17 +08:00
< / div >
< / div >
2019-01-31 12:47:29 +08:00
-->
< br >
< / li >
< li >
Commento will automatically download this file, extract it, parse it and import comments into Commento. URL information, comment authors, text formatting, and nested replies will be preserved.
2018-06-04 00:06:17 +08:00
< / li >
2019-01-31 12:47:29 +08:00
2018-06-04 00:06:17 +08:00
< li >
2019-01-31 12:47:29 +08:00
It is strongly recommended you do this only once. Importing multiple times may have unintended effects.
2018-06-04 00:06:17 +08:00
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- Danger Zone -->
< div id = "danger-view" class = "view hidden" >
< div class = "view-inside" >
< div class = "mid-view" >
2019-04-13 08:21:46 +08:00
< div class = "center center-title" >
Danger Zone
< / div >
2018-06-04 00:06:17 +08:00
2019-04-13 08:21:46 +08:00
< div class = "action-buttons-container" >
< div class = "action-buttons" >
< div class = "action-button" v-if = "domains[cd].state != 'frozen'" >
< div class = "left" >
< div class = "title" >
Freeze Domain
< / div >
< div class = "subtitle" >
Freezing your domain will disable new comments and voting temporarily. You may unfreeze the domain later.
2018-06-04 00:06:17 +08:00
< / div >
< / div >
2019-04-13 08:21:46 +08:00
< div class = "right" >
< button onclick = "document.location.hash='#freeze-domain-modal'"
class="button orange-button">Freeze< / button >
< / div >
< / div >
< div class = "action-button" v-if = "domains[cd].state == 'frozen'" >
< div class = "left" >
< div class = "title" >
Unfreeze Domain
< / div >
< div class = "subtitle" >
Unfreezing your domain will allow readers to create new comments and vote on comments again. You may re-freeze the domain later.
2018-06-04 00:06:17 +08:00
< / div >
2019-04-13 08:21:46 +08:00
< / div >
< div class = "right" >
< button onclick = "document.location.hash='#unfreeze-domain-modal'"
class="button green-button">Unfreeze< / button >
2018-06-04 00:06:17 +08:00
< / div >
< / div >
2019-04-13 08:21:46 +08:00
< div class = "action-button" >
< div class = "left" >
< div class = "title" >
Delete Domain
< / div >
< div class = "subtitle" >
This will permanently delete all comments and all data associated with your domain. There is literally no way to retrieve your data once you do this. Please be certain.
< / div >
< / div >
< div class = "right" >
< button onclick = "document.location.hash='#delete-domain-modal'"
class="button big-red-button">Delete< / button >
2018-06-04 00:06:17 +08:00
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div id = "freeze-domain-modal" class = "modal-window" >
< div class = "inside" >
< a href = "#modal-close" title = "Close" class = "modal-close" > < / a >
< div class = "modal-title" > Freeze Domain< / div >
< div class = "modal-subtitle" >
Are you absolutely sure you want to freeze your domain, thereby making it read-only? You can choose to unfreeze later; this is temporary.
< / div >
< div class = "modal-contents" >
2018-12-20 13:48:43 +08:00
< button id = "orange-button" class = "button orange-button" onclick = "window.commento.domainFreezeHandler()" > Freeze Domain< / button >
2018-06-04 00:06:17 +08:00
< / div >
< / div >
< / div >
< div id = "unfreeze-domain-modal" class = "modal-window" >
< div class = "inside" >
< a href = "#modal-close" title = "Close" class = "modal-close" > < / a >
< div class = "modal-title" > Unfreeze Domain< / div >
< div class = "modal-subtitle" >
Are you absolutely sure you want to unfreeze your domain? This will re-allow new comments. You can choose to freeze again in the future.
< / div >
< div class = "modal-contents" >
2018-12-20 13:48:43 +08:00
< button id = "blue-button" class = "button green-button" onclick = "window.commento.domainUnfreezeHandler()" > Unfreeze Domain< / button >
2018-06-04 00:06:17 +08:00
< / div >
< / div >
< / div >
< div id = "delete-domain-modal" class = "modal-window" >
< div class = "inside" >
< a href = "#modal-close" title = "Close" class = "modal-close" > < / a >
< div class = "modal-title" > Delete Domain< / div >
< div class = "modal-subtitle" >
Are you absolutely sure? This will permanently delete all comments and there is literally no way to retrieve your data once you do this.
< / div >
< div class = "modal-contents" >
2018-12-20 13:48:43 +08:00
< button id = "big-red-button" class = "button big-red-button" onclick = "window.commento.domainDeleteHandler()" > Delete Domain< / button >
2018-06-04 00:06:17 +08:00
< / div >
< / div >
< / div >
< div id = "new-domain-modal" class = "modal-window" >
< div class = "inside" >
< a href = "#modal-close" title = "Close" class = "modal-close" > < / a >
< div class = "modal-title" > Add a New Domain< / div >
< div class = "modal-contents" >
< div class = "box" >
< div class = "box-subtitle" >
Remember to double-check the domain, as only connections from this domain will be accepted. You < b > cannot< / b > change this in the future. You can change the name, however.
< / div >
< div class = "row" >
< div class = "label" > Website Name< / div >
2018-09-23 14:30:59 +08:00
< input class = "input gray-input" id = "new-domain-name" type = "text" placeholder = "My Blog" >
2018-06-04 00:06:17 +08:00
< / div >
< div class = "row" >
< div class = "label" > Website Domain< / div >
< input class = "input gray-input" id = "new-domain-domain" type = "text" placeholder = "https://blog.billie.com" >
< / div >
< / div >
< div id = "new-domain-error" class = "modal-error-box" > < / div >
< div class = "center" >
2018-12-20 13:48:43 +08:00
< button id = "add-site-button" onclick = "window.commento.domainNewHandler()" class = "button" > Add Domain< / button >
2018-06-04 00:06:17 +08:00
< / div >
< / div >
< / div >
< / div >
< / html >
