Adding Comments to Eleventy Website with Google Sheets and Forms

During my latest redesign of my website, I explored Static Site Generators and ended up using eleventy. Contrary to popular belief, a static website doesn’t mean that you must give up on all the fun that dynamic pages provide. In this article, I will talk about how I added a comments section to my blog posts using free google services (forms, sheets and firebase).

The path to implementing comments in an eleventy blog includes using google forms to collect comment responses which are in google sheets. I chose firebase for authentication as it is very straightforward to implement it..

To start things off, let us set up google forms with the required fields. The fields that we will be needing are a post identifier, commenter’s name, the content of the comment and the email address provided by firebase authentication. We will be using the article url as the post identifier. Create a new form with the fields.

Open up the form in preview mode (use the eye icon) and then open developer console. Now we will note down the unique name attribute for each of the fields. To do this, in the elements tab of the developer console search for “entry.”. This will show us 4 entries. They are the name attributes that we must use in our form while submitting from our blog post, so note them down. The order is the same order of our fields. We also need to note down the url for the action attribute of the form.

"Google forms with required field" Google forms with required field

Now that the google form is set up, it is time to link it to a google sheet.Go into the responses tab of the form and attach it to a spreadsheet. Open up the spreadsheet and add an extra field called isAuthor. This field is never filled up by the form, we will use an ArrayFunction to fill it up as the data arrives. The sheet should be publicly viewable but not editable. Set the permissions in link sharing and save the url as it will be required later.

Now let us add a couple of formulas and formatting. First, let us set “Timestamp” field formatting to mm-dd-yy. Select the entire column A, then Format => Number => More Formats. => More date and time formats. Create a mm-dd-yy format. You can add a timestamp after the date if you prefer but it will not be used by the comments. Now it is time to use the magical ArrayFunction in the isAuthor column. The isAuthor provides us a boolean value of whether the commenter is the author by comparing the email address field. Insert the following formula in F2.

=ArrayFormula(ISNUMBER(SEARCH("<insert email address>", $E$2:E)))

"Google sheets with formula" Google sheets with formula

Let us set up firebase authentication using google as an auth provider. Create a new project in the firebase console and add a web app. Once the app is added, copy the setup code it provides. In the authentication section enable the required auth provider in the authentication tab under sign-in method tab.

We are all set to dive into the eleventy and create the comments section. First create two new template names “comments.njk” and “firebase.njk”. The comments.njk file will contain the code for specific implementation of comments and firebase.njk will contain the code concerned with authentication of the user. Let us also add some data to our data file which I have named “site.json” in _data folder. This is where we will add all the links and name attributes we saved earlier. The name attributes we saved go in the postFields object

_data/site.json

{
	……,
	“comments”: {
		“readUrl”: “<insert the google sheets link>”,
		“postUrl”: “<insert google form action link>”,
		“postFields”: [ <post identifier>,
				<name>,
				<content>,
				<email>
				]
	}
}

Let us begin with the firebase code. Remember to insert the firebase setup code that we copied earlier at the top of the file. We initially set up the authentication provider project. The authenticate() function is used to initiate the google auth on a button click. The onAuthStateChanged() function allows us to perform actions when the state of user login changes

firebase.njk

/*
****************************************
INSERT FIREBASE SETUP CODE
****************************************
*/
<script>
// Start a sign in process for an unauthenticated user.
var provider = new firebase.auth.GoogleAuthProvider()
provider.addScope('profile')
provider.addScope('email')
firebase.auth().signInWithRedirect(provider)
}
function authenticate() {
firebase.auth().getRedirectResult().then(function(result) {
  if (result.credential) {
    var token = result.credential.accessToken
  }
  var user = result.user
})
  firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    document.getElementById('auth').style.display = 'none'
    document.getElementById('comments-form').style.display = 'block'
    let name = document.getElementById("name")
    name.innerText = user.displayName
    let image = document.getElementById("image")
    image.src = user.photoURL
  } else {
    console.log("not logged in")
    document.getElementById('auth').style.display = ''”
    document.getElementById('comments-form').style.display = 'none'
  }
})
function signOut() {
  firebase.auth().signOut()
}
</script>

The important part of implementing the UI is done in the “comments.njk” file. Let us begin by defining the html structure and CSS. A basic explanation of the structure is that we have a div that shows when there are no comments on that particular article. Then we have an auth and form component whose visibility depends on the auth state. Three of the form fields are hidden as the will be filled automatically from the user authentication and page url. Pleae not that the entire CSS is not attached here and also replace the variables with required values. The "google.njk" is a google icon svg.