Hive meets Astro: a New Astro Loader for Hive blockchain

 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: - [Official Astro website — astro.build](https://astro.build/) - [Content Layer API: A Deep Dive](https://astro.build/blog/content-layer-deep-dive/) ## 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: ```bash npm install @onhive.io/astro-loader ``` Then, edit the `/src/content/config.ts` file where Content Collections are defined: ```ts 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: ```astro --- import { getCollection } from "astro:content"; const posts = await getCollection("blog"); --- {posts.map(post =>

{post.data.title}

} ``` 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](https://github.com/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! @hive.coding • [OnHive.io](http://OnHive.io)