

import { SeanNaviBar } from "aw6539wk6jyz"

import { FadeInCard } from "aw6539wk6jyz"

<SeanNaviBar />

# Notes
<FadeInCard>
### Things I wrote down for me (that you might be interested in)
</FadeInCard>

<Box narrow>
  <div class="bg-gray-100 px-8 pt-1 pb-12 rounded-lg">

    
<BlogIndex />


    <div class="inline-block bg-gray-200 rounded-full">
      <div class="flex flex-row p-2 gap-x-1">
        <div class="w-2 h-2 rounded-full bg-white"/>
        <div class="w-2 h-2 rounded-full bg-white"/>
        <div class="w-2 h-2 rounded-full bg-white"/>
      </div>
    </div>
  </div>
</Box>

<br /><br /><br /><br />
{/* Definitions */}

export const BlogIndex = () => {
  const { publicPages } = usePages();
  const publicBlogPosts = (publicPages || []).filter((page) => {
    return page.meta &&
      page.meta.tags &&
      page.meta.tags.includes("blog");
  });
  const sortedPublicBlogPosts = publicBlogPosts
    .sort((p1, p2) => p2.createdAt - p1.createdAt);
  // Rendering each blog post
  return sortedPublicBlogPosts.map((page) => {
    // Display the date as "March 2, 2021"
    const formattedDate = DateTime.fromMillis(page.createdAt)
      .toLocaleString(DateTime.DATE_FULL);
    return (
      <div class="mb-8">
        <Link href={`/${page.meta.path}`}>
          <h4>{page.title}</h4>
        </Link>
        <p class="text-gray-400">{formattedDate}</p>
        <p>{page.meta.excerpt}</p>
        <Link href={page.meta.path}>
          <p class="text-yellow-700">Read more →</p>
        </Link>
        <hr />
      </div>
    )
  })
}

Sean Bugler is a front-end cloud architect and recognized speaker on collaboration and low-code development and automation.