Triangle Comments

Triangle comments is the simplest way to add comments to your static website. Simply define your API key and Site ID from Netlify, and you can add comments to any page on your website 🎉

Important: Currently, Triangle only works with Gatsby and Netlify, but support for other SSGs and hosting providers will be added in the future. If you have any questions or need assistance, you can contact us

Table of Contents

• 🚀 Getting Started
  • Setting Up Your Website
  • Installing Packages
  • Configuration
• 💬 Adding Comment Functionality
  • Adding a Form
  • Displaying Your Comments
• 🎨 Custom Configuration

Getting Started

Setting up your website

Triangle only works with Netlify, so you need to make sure you have your site hosted on Netlify. If you don't, you can follow the instructions here.

Once your site is hosted on Netlify, you can continue below.

Installing Packages

To get started, just install triangle-comments and the Gatsby plugin, gatsby-plugin-triangle-comments.

Using NPM:

npm install --save triangle-comments gatsby-plugin-triangle-comments

Using Yarn:

yarn add triangle-comments gatsby-plugin-triangle-comments

Configuration

In order to use Triange with Gatsby, you need to add the plugin to your gatsby-config.js file at the root of your project.

module.exports = {
	...,
	plugins: [
		...,
		{
			resolve: 'gatsby-plugin-triangle-comments',
			options: {
				...
			},
		}
	]
}

After updating your gatsby-config.js file, you need to add a few options to the configuration in order for Triangle to work.

First, you need a Netlify site ID. This can be found from your Netlify site dashboard by visiting Settings > General > Site details > Site information. Copy the value for API ID and store it in your environment variables as NETLIFY_SITE_ID. Then, use the environment variable as the value for the siteID options in gatsby-config.js

options: {
	...,
	siteID: process.env.NETLIFY_SITE_ID
}

The second mandatory value in the options object is the apiKey. This must be created manually in Netlify. Visit your User Settings > Applications at this link: (Personal Access Tokens)

Click "New Access Token" and follow the steps to generate a new API token. Copy this value and store it in your environment variables as NETLIFY_TOKEN. Then, update your options configuration in gatsby-config.js to use this new value.

options: {
	...,
	siteID: process.env.NETLIFY_SITE_ID,
	apiKey: process.env.NETLIFY_TOKEN
}

Adding Comment Functionality

Triangle is set up to automatically filter all comments by page and only display the ones for that page. This means that you can have as many comment forms as you'd like on your site.

Triangle comes with 2 main components: Form and Comments. Form is the comment form, while Comments is the component that displays your comments (go figure 🤷‍♂️)

Adding a Form

To add a comment form to your page, just import it

import { Form } from 'triangle-comments';

and add it wherever you please

<Form />

Displaying Your Comments

To display your comments, simply import the Comments compoment

import { Comments } from 'triangle-comments';

and add it wherever you'd like. Usually, this would be directly below the Form

<Form />
<Comments />

Custom Configuration

Because everyone likes to do things their own way.

Triangle allows you to customize the stlying of your Form and your Comments components. Simply change the color value in gatsby-config.js to match Triangle to the theme of your website.

options: {
	...,
	color: "#2e35cd"
}

As of now, that's the only styling option, but support for custom CSS and styling of the inputs, buttons and comment display is coming soon. Stay tuned!

Support

Triangle is currently in beta stages, and is constantly evolving and improving. If you have an questions or need help setting up Triangle, you can open an issue on Github or email us at [email protected]