Astro Starter Kit: Blog + Comments

Adding comments to your blog is a great way to engage with your readers. This repo contains the base Astro starter kit blog template with a few extra features:

• A newcomment Netlify function to handle saving comments to Tigris
• A Comments component to retrieve and display comments saved to Tigris
• A NewComment component to submit new comments to the Netlify function

🚀 Getting Started

Before starting, create a free Tigris account.

Creating a Tigris Project

Next, in your Tigris account, create a new project. Then get the client ID and secret from the Application keys tab.

This project uses the @tigrisdata/astro package to handle the Tigris API calls. It then registers the integration in the astro.config.mjs file. Currently, the integration expects to find the following environment variables:

// .env file
TIGRIS_PROJECT={YOUR_TIGRIS_PROJECT_NAME}
TIGRIS_CLIENT_ID={YOUR_TIGRIS_CLIENT_ID}
TIGRIS_CLIENT_SECRET={YOUR_TIGRIS_CLIENT_SECRET}
TIGRIS_DB_BRANCH=main

You can also forgo a .env file and specify the config in the tigris function within the astro.config.mjs file.

// astro.config.mjs
export default defineConfig({
  integrations: [
    tigris({
      branch: "main",
      projectName: "YOUR_TIGRIS_PROJECT_NAME",
      clientId: "YOUR_TIGRIS_CLIENT_ID",
      clientSecret: "YOUR_TIGRIS_CLIENT_SECRET",
    }),
  ],
});

Creating a Tigris Collection

To initialize the collection in your Tigris project, update the following parameters in the setup.ts file with your Tigris project, client ID, and client secret.

// setup client
const tigrisClient = new Tigris({
  branch: "main",
  projectName: "YOUR_TIGRIS_PROJECT_NAME",
  clientId: "YOUR_TIGRIS_CLIENT_ID",
  clientSecret: "YOUR_TIGRIS_CLIENT_SECRET",
});

Then run the following command to set up the collection and schema:

npm run setup

Run It!

Now that you've got your Tigris project and collection set up and have updated your environment, you can run the project locally:

npm run dev

☑️ To Do

Have suggestions or want to contribute? Here are a few things we'd love to see:

• Add a honeypot to the NewComment component to help prevent spam
• Add error checking in the newcomment.ts function

👀 Want to learn more?

Check out our documentation or jump into our Discord server.

Credit

This theme is based off of the lovely Bear Blog.