First Post

Author: Dragonlord1005

Astro

Astro is great, it has the ability to ship ZERO Javascript to the browser, beincredibly easy to develop, and most importantly, has a great and helpful discord community.

---
const posts = await Astro.glob("../pages/posts/*.md"); // returns an array of posts that live at ../pages/blog/*.md
const nonDraftPosts = posts.filter((post) => !post.frontmatter.draft);
import Card from "./Card.astro";
---

<div>
  <ul role="list" class="link-card-grid">
    {
      nonDraftPosts.map((post) => (
        <Card
          title={post.frontmatter.title}
          body={post.frontmatter.description}
          href={post.frontmatter.url}
        />
      ))
    }
  </ul>
</div>
<style>
  .link-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
    gap: 1rem;
    padding: 0;
  }
</style>

This is all you need to list out posts and filter out drafts, and its included in the documentation.

Something else thats great is you can use other framework components like for example react.

const Navigation = () => {
  return (
    <nav className="flex w-full dark:color-white justify-between p-6 bg-gray-800">
      <div className="flex flex-shrink-0">
        <span className="font-bold">Astro Boi</span>
        <span className="i-logos-astro w-2.5em h-2.5em flex content-center" />
      </div>
      <div className="links lg:text-center w-full mr-20">
        <a href="/" className="link mr-6">
          Home
        </a>
        <a href="/about" className="link mr-6">
          About
        </a>
        <a href="/projects" className="link mr-6">
          Projects
        </a>
        <a href="/blog" className="link">
          Blog
        </a>
      </div>
    </nav>
  );
};
export default Navigation;

Its automatically rendered into html, but it can easily be rendered by javascript instead, just add

<component client:load></component>

and your done!

This is all powered by the islands architecture, look it up in astros documentation, I’m too lazy to tell you.