Website with comments

In this tutorial, you will learn how to enable comments on your SAFE website!

We built two comments plugins: one for permanent comments and the other for editable comments. These plugins demonstrate the usage of public appendable data.

Both plugins let people comment on content using their public name. They also enable the website owner to delete comments and block users.

Overview

This tutorial will showcase how to:

SAFE APIs

You will learn about the following APIs:

Authorization
DNS
Appendable Data
Data ID
Immutable Data (for permanent comments)
Structured Data (for editable comments)
Cipher Options

External libraries

Source code

Browse the source code on GitHub:

Usage instructions

Requirements

1. SAFE Launcher

Start SAFE Launcher v0.10.0 and log in.

2. SAFE Browser

Start SAFE Browser v0.4.2.

3. SAFE Demo App

Start SAFE Demo App v0.6.2.

Setup

1. Clone this GitHub repository

git clone https://github.com/maidsafe/safe_examples.git

If you don't have Git installed, you can download it from git-scm.com.

2. Add this folder to your website

Permanent comments:

cd safe_examples/permanent_comments_plugin/comments

Editable comments:

cd safe_examples/editable_comments_plugin/comments

2. Add this code snippet to your SAFE website

<script>
window.__COMMENTS_ID = "#comments"
</script>
<script type="application/javascript" id="comments-loader" src="./comments/main.js"/>

If you specify the __COMMENTS_ID as shown above, the library will automatically initialize at startup and add the comments UI to the specified element. Omitting that reference, comments won't be loaded automatically but need to be invoked directly via:

<script>
  window.safeComments.init('#myCommentsId');
</script>

3. Upload your website using SAFE Demo App

Upload your website folder to the Public folder of SAFE Demo App and map that folder to a service and a public name (e.g. blog.example).

4. Open your website using SAFE Browser

Go to the URL of your website (e.g. safe://blog.sample). Select a page where you added the comments plugin and enable the option to allow comments for that page by clicking on the Enable Comments button. This button is only visible for the website owner. Once enabled, logged-in users who visit the page should be able to comment. The website owner can delete comments and block users.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tutorial Blog</title>
    <!-- Comment plugin resources -->
    <link type="text/css" rel="stylesheet" href="./style.css"/>
</head>
<body>
    <header>SAFE Blog</header>
    <div class="container">
        <div class="post">
            <h1 class="title text-center">
                A sample blog using tutorial resources
            </h1>
            <div class="desc text-center">
                This is a sample tutorial to show case how the comments plugin can be
                integrated to any static page.
            </div>
            <p class="context">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                has been the industry's standard dummy text ever since the 1500s, when an unknown printer
                took a galley of type and scrambled it to make a type specimen book. It has survived not
                only five centuries, but also the leap into electronic typesetting, remaining essentially
                unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
                Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
                including versions of Lorem Ipsum.
            </p>
        </div>
        <div id="comments"></div>
    </div>
    <script>
    window.__COMMENTS_ID = "#comments"
    </script>
    <script type="application/javascript" id="comments-loader" src="./comments/main.js"></script>
</body>
</html>

Limitations

AppendableData has a size limitation of 100 KiB. New comments can't be added if the appendable data has reached its maximum size.

PreviousWhat's next?NextAuthorization

Last updated 5 years ago

Was this helpful?

Contents