Skip to content

IvanSmiths/next-hygraph-blog-starter

Repository files navigation

Select Blog Starter

HyBlog
Next.js & Hygraph typesafe blog starter

A (work in progress) starter repo for a blog website built with:

  • Next.js (app router)
  • TypeScript
  • Hygraph
  • Tailwind CSS
  • Chart.js for data visualisation
  • React Synthax Highlighter for highlighting code blocks.

Home page and blog posts pages are styled, as well as some components (block quotes, chart, code blocks or example), more components will follow soon.

Blog

Get up and running

Login to your Hygraph account and create a new template, selecting the "Basic blog" template provided by the Hygraph's team.

Select Blog Starter

Create a .env.local file in the root of this repository and add the following line: HYGRAPH_ENDPOINT=insert-your-endpoint-here. For finding the endpoint, click on the link "Project Settings" in the sidebar on the left, then on "API Access". The string that you want to copy is the "Content API".

Schema structure

The schema have two optional extra field compared to the "Basic blog"'s schema:

- Keywords

A JSON Editor and is used for displaying the keywords (an array of strings) of the blogpost.

Select Blog Starter


Select Blog Starter

- Chart

A JSON Editor used for display data with charts.

Chart

Json data structure:

  • data: The data that will be shown.
  • type: It defines the type of charts to be displayed. See the full list of types here. If the type is not set, a bar chart will be displayed by default.
  • label: The "title" of the chart.
  • labels: An array that will be used as labels in the chart.

Chart structure

Logo by Freepik