Introducing a new @onhive.io/hive-astro-loader package that makes it easy to fetch data from Hive blockchain when building websites powered by the Astro framework.
• • •
About Astro
Astro is the web framework for building content-driven websites like blogs, marketing, and e-commerce. Astro is best-known for pioneering a new frontend architecture to reduce JavaScript overhead and complexity compared to other frameworks. If you need a website that loads fast and has great SEO, then Astro is for you.
Content Layer API
The Content Layer API is a new feature of Astro that allows you to fetch content for the app from any source, be it Markdown files, JSON, database, API or anything else.
Utilizing the Content Layer API, we can build a custom Astro loader that makes it very easy to fetch and present content published on the Hive blockchain.
Learn more
If you want to learn more about Astro, Content Layer API, or any of the other features of Astro, check out the links below:
Hive Astro Loader
Astro has become a very popular framework for building content-first website and web apps, with its many useful features and rich community.
Building developer tools for the ecosystem helps Hive adoption, and having easy plug-and-play libraries is crucial for that.
Get Started
To start using Hive Astro Loader in an Astro project, you just need to install the package:
npm install @onhive.io/astro-loader
Then, edit the /src/content/config.ts file where Content Collections are defined:
import { defineCollection } from "astro:content";
import { hiveBlogLoader } from "@onhive.io/astro-loader";
export const collections = {
blog: defineCollection({
type: "content_layer",
loader: hiveBlogLoader("hive.coding") // Selected username
})
};
And voila! Now in your page or component you can do:
---
import { getCollection } from "astro:content";
const posts = await getCollection("blog");
---
{posts.map(post => <div>{post.data.title}</div>}
That's how easy it is to fetch a list of blog posts from a user and display it in your Astro project!
Next Steps
The @ohive.io/astro-loader npm package is fresh from the bakery (pun intended—bundled using bun!), so you still might encounter some bugs and missing functionality.
The library is completely open-sourced and licensed under the MIT license, so feel free to tinker with it, submit bug reports, feature suggestions, or even fork it, implement new methods and create a pull request!
The code is available at Github: instytutfi/hive-astro-loader.
In the upcoming days and weeks more features will be added to the library, and a set of tutorials will be created on how to use them to build Hive-powered Astro-built websites!
Follow @hive.coding to stay updated!
• • •
Hive Coding:
Fueling Hive development through community effort
Thank you for your support!
