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.
Login to your Hygraph account and create a new template, selecting the "Basic blog" template provided by the Hygraph's team.
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".
The schema have two optional extra field compared to the "Basic blog"'s schema:
A JSON Editor and is used for displaying the keywords (an array of strings) of the blogpost.
A JSON Editor used for display data with charts.
- 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.
Logo by Freepik