Firelogue

Roll your own Disqus-like comments solution powered by Firebase.

• Works with Firebase's free plan
• Drop-in comment widget — just include a JS file
• Supports multiple sites
• Browser-based Management Console for administration

This is a bloddy pre-alpha. Use with care!

Installation

Download the firelogue-binary for your system:

• macOS
• Linux
• Windows

Unpack the Zip-file and store the binary in a folder on your system, e.g. named ./firelogue.

Setup

First of all you need a project on Firebase — so create one. After that go to the project settings and enter "Service accounts"-tab. Click the button "Generate new private key" and store the resulting file as firebase-admin.json in the previously created ./firelogue folder besides the firelogue binary.

Log into Firebase

First of all open the ./firelogue folder in your Terminal and run …

$ ./firelogue login

This will open an OAuth screen in the browser, that authenticates the Terminal session on Firebase.

To check whether you're already in or with which user, run …

$ ./firelogue whoami

Create an admin user

To be able to log into the Firelogue Management Console, you need to create a user. To do that, run the following command in the Terminal …

$ ./firelogue create-user

There'll be prompts asking for an email address, a username and a password. Enter all the information and you're done.

Install Firelogue

When you're logged in with Firebase and you've created the admin user, you're almost prepared for installing Firelogue to your Firebase app. But there's still one piece missing: the Web API key. To obtain that, go back to the project settings of your Firebase app. The Web API key is displayed in the General settings. Copy it and pass it to the following command in the Terminal …

$ ./firelogue install --apiKey <the Web API key>

There's another, optional parameter to this command: the --region. By default the cloud functions, Fireloque uses to read and write comments, are located in europe-west1. If you want to choose a different location, pass the code to the install-command.

$ ./firelogue install --apiKey <the Web API key> --region <key of the code>

Find a list of available region codes here.

After the command has finished, Firelogue is ready for use! The URL to the Maagement Console is printed into the Terminal output as well as the URL of the script, that brings the comment widget on your sites.

Add a website to the Management Console

Take the URL to the Management Console from the Terminal output of the installation and log into the console in your browser. Then use the form to add a website. Firelogue will only store comments for websites, that have been set up in the Management Console in beforehand.

From the list of websites in the console, copy the website ID. You'll need that one, to include the comment widget into the site.

Include the comment widget

To include the widget into your site, paste the following snippet into the HTML of your website:

<script>
  window.firelogue = window.firelogue || [];
  window.firelogue.push((init) => {
    var options = {
      root: document.getElementById('comments'), // Empty <div /> that'll hold the widget
      websiteId: '<ID of current website>', // Get this from the Management Console
      pagePath: '/foo/bar/', // optional; Firelogue will use `location.pathname` if pagePath isn't set
    }
    var api = init(options); // See next section to learn what the API is for
  });
</script>
<script src="https://<Project ID>.firebaseapp.com/client/firelogue.js"></script>

Don't forget to replace the <Project ID> in the URL of the javascript file with the actual ID of your Firebase app!

The pagePath-property of the options object is optional. But be careful: if you can't ensure that your pages are available by a single URL only (e.g. the page might be served with and without leading slash), then you better set this property explicitly. Otherwise you might end up with multiple comment lists for the same content.

Using Firelogue with client-side routing

If your site relies on history.pushState for routing, you'll have to take care of re-initializing the Firelogue widget yourself. That's where the API comes into play, that got returned by the init-function.

The API is an object holding an update-method. If a visitor navigates to a new page of your site, you have to call this update-method and pass the pathname of the current page to it.

This might look something like this …

var api;

// Initialize Firelogue to obtain the API ...

function onHistoryChange() {
  api.update(location.pathname);
}

That's it. The widget will re-initialize and load the comments of the current page.

Styling the Firelogue widget

The Firelogue widget comes with a very basic styling. To align it visually with your website, you can use the data-firelogue-selectors to apply custom CSS styling.

[data-firelogue='app'] {
  padding: 16px;
  margin: 32px;
  border: 4px dotted fuchsia;
}

Beware: Do not use the classnames of the elements, since they're generated based on their content and might change in the future. Which will break your custom styling. The data-firelogue-attributes won't change, so you're on the save side using them.

Troubleshooting

If you have questions or running into problems, feel free to open an issue.

Contributors

Become a contributor.

• Emanuel Kluge (twitter)

License

MIT