<p dir="auto">Introducing a new <strong><code>@onhive.io/hive-astro-loader package that makes it easy to <strong>fetch data from Hive blockchain when building websites powered by the <strong>Astro framework.
<p dir="auto"><center><br /><br />
• • •<br />
<br />
<h2>About Astro
<p dir="auto">Astro is the web framework for building <strong>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.
<h3>Content Layer API
<p dir="auto">The Content Layer API is a new feature of Astro that allows you to <strong>fetch content for the app from any source, be it Markdown files, JSON, database, API or anything else.
<p dir="auto">Utilizing the Content Layer API, we can build a custom Astro loader that makes it very <strong>easy to fetch and present content published on the Hive blockchain.
<h3>Learn more
<p dir="auto">If you want to learn more about Astro, Content Layer API, or any of the other features of Astro, check out the links below:
<ul>
<li><a href="https://astro.build/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Official Astro website — astro.build
<li><a href="https://astro.build/blog/content-layer-deep-dive/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Content Layer API: A Deep Dive
<h2>Hive Astro Loader
<p dir="auto">Astro has become a very popular framework for building content-first website and web apps, with its many useful features and rich community.
<p dir="auto">Building developer tools for the ecosystem helps <strong>Hive adoption, and having easy <strong>plug-and-play libraries is crucial for that.
<h3>Get Started
<p dir="auto">To start using Hive Astro Loader in an Astro project, you just need to install the package:
<pre><code>npm install @onhive.io/astro-loader
<p dir="auto">Then, edit the <code>/src/content/config.ts file where Content Collections are defined:
<pre><code>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
})
};
<p dir="auto">And <em>voila! Now in your page or component you can do:
<pre><code>---
import { getCollection } from "astro:content";
const posts = await getCollection("blog");
---
{posts.map(post => <div>{post.data.title}</div>}
<p dir="auto">That's how easy it is to fetch a list of blog posts from a user and display it in your Astro project!
<h3>Next Steps
<p dir="auto">The <code>@ohive.io/astro-loader npm package is <strong>fresh from the bakery (pun intended—bundled using <code>bun!), so you still might encounter some bugs and missing functionality.
<p dir="auto">The library is completely <strong>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!
<p dir="auto">The code is available at Github: <a href="https://github.com/instytutfi/hive-astro-loader/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">instytutfi/hive-astro-loader.
<p dir="auto">In the upcoming days and weeks <strong>more features will be added to the library, and a set of <strong>tutorials will be created on how to use them to build Hive-powered Astro-built websites!
<p dir="auto"><span>Follow <a href="/@hive.coding">@hive.coding to stay updated!
<p dir="auto"><center><br /><br />
• • •<br />
<br />
<p dir="auto"><center>
<p dir="auto"><strong>Hive Coding:<br /> Fueling Hive development through community effort
<p dir="auto">Thank you for your support!
<p dir="auto"><a href="http://OnHive.io" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">OnHive.io<br />
<span><a href="/@hive.coding">@hive.coding •
<p dir="auto"><img src="https://images.hive.blog/768x0/https://images.ecency.com/DQmZs1R9GRGPxKLUpdfpV3iZbhUXYqCm86gbZgsxS1zb9cp/hive_coding_school.png" srcset="https://images.hive.blog/768x0/https://images.ecency.com/DQmZs1R9GRGPxKLUpdfpV3iZbhUXYqCm86gbZgsxS1zb9cp/hive_coding_school.png 1x, https://images.hive.blog/1536x0/https://images.ecency.com/DQmZs1R9GRGPxKLUpdfpV3iZbhUXYqCm86gbZgsxS1zb9cp/hive_coding_school.png 2x" />
Congratulations @hive.coding! You have completed the following achievement on the Hive blockchain And have been rewarded with New badge(s)
<table><tr><td><img src="https://images.hive.blog/60x70/https://hivebuzz.me/@hive.coding/upvoted.png?202410281850" /><td>You received more than 200 upvotes.<br />Your next target is to reach 300 upvotes. <p dir="auto"><sub><em>You can view your badges on <a href="https://hivebuzz.me/@hive.coding" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">your board and compare yourself to others in the <a href="https://hivebuzz.me/ranking" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Ranking<br /> <sub><em>If you no longer want to receive notifications, reply to this comment with the word <code>STOP <p dir="auto"><strong>Check out our last posts: <table><tr><td><a href="/hive-122221/@hivebuzz/pud-202411"><img src="https://images.hive.blog/64x128/https://i.imgur.com/805FIIt.jpg" /><td><a href="/hive-122221/@hivebuzz/pud-202411">Hive Power Up Day - November 1st 2024<tr><td><a href="/halloween/@hivebuzz/halloween-2024"><img src="https://images.hive.blog/64x128/https://files.peakd.com/file/peakd-hive/hivebuzz/48HBQsbpPcoRfe6NQgzk82mfFbSCd1F958x5Ym9cAiJnjMzqraeGnswMFHAzJNMK5c.png" /><td><a href="/halloween/@hivebuzz/halloween-2024">Halloween Challenge - Publish Your Chilling Story for an Exclusive Halloween Badge!