looking for a better way to make a 'latest post' page.

[lavish stratus]

So I looked into the docs (https://docs.astro.build/en/guides/markdown-content/#exported-properties), and found a simple method of injecting my post as latest post into the index page via import content method. However, this also brings in all of the styling and repeats the layout for index. I had to conform my index page to only have import content in the code. It works, but it's not as malleable as it once was.

On top of that, it looks for a specific .md file as the latest post. Also, not ideal. I'd like it to pull the latest post made (or last created in this sense) to be featured in the index page as latest post.

I'm not very familiar with the framework and have rudimentary JS knowledge, so connecting the dots on this one is just out of reach.

Any help is greatly appreciated. Thanks!

[weary hull]

hey 👋 do your posts have dates already?

My posts have a field called publishDate

here is the type definition from my config.ts in my content folder

const artistCollection = defineCollection({
    schema: z.object({
          // etc.etc.
          publishDate: z.coerce.date() || null
    }),
});

And then on my artists route, I sort by this field.

const allPosts = await getCollection('artist');

const sortedPosts = allPosts
    .sort((a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf())
    .filter((post) => !post.data.draft);

So you could do the same, and then just grab the first item in the array

(btw you have similar music tastes to me 😄 I saw you were listening to Lume. Check out my site https://sub50k.com/artists that I just launched)

[lavish stratus]

Not yet, but thank you for this! I will try and figure out how to implement this!

[weary hull]

feel free to DM if you need
In case it isn't obvious, that snippet where the posts are getting sorted would sit in the frontmatter of your .astro page

[lavish stratus]

Hmm, I'm not sure how to implement this. I don't have a content folder, and not sure what I need to change 'artists' to. The constants make sense, but not sure how to use them outside of the fences. I don't really understand enough of what I working with yet to make it happen with that amount of information.

[weary hull]

are you on V2 of Astro? When I talk about a content folder, I'm talking about Content Collections https://docs.astro.build/en/guides/content-collections/

If you are feeling a bit outside your comfort zone, I would recommend starting with a Theme and then editing it to your needs
https://astro.build/themes

[lavish stratus]

I am on v2, yes. Maybe I’ll look through a theme and understand the framework better that way. Thanks.

[lavish stratus]

Ok, after I converted to content collections, what you said makes more sense now, but I'm not sure where to call sortedPosts. I also don't have drafts, but I'm assuming I can just replace it with title?

[weary hull]

sorry only just saw this. You should call sortedPosts from the script section of your astro file - https://docs.astro.build/en/core-concepts/astro-components/

drafts is just one of the fields I have in my mdx files - if it is false (not a draft), I want to use it when listing out all the posts. So I filter out all posts that have draft set to true

<ul>
    {
        sortedPosts.map((post) => {
            const formattedDate = new Date(
                post.data.publishDate
            ).toLocaleDateString('en-us', {
                year: 'numeric',
                month: 'short',
                day: 'numeric',
            });
            return (
                <li class="mb-3 grid grid-cols-[1fr] items-start md:grid-cols-[1fr_auto] md:gap-2">
                    <div class="flex items-center">
                        <div
                            class="mr-2 h-6 w-6 rounded-full border border-white/50 bg-cover bg-center"
                            style={{
                                backgroundImage: `url(https://res.cloudinary.com/sub50k/image/upload/f_auto,q_auto:best/${post.data.avatar});`,
                            }}
                        />
                        <div class="title">
                            <a
                                href={`/artist/${post.slug}`}
                                class="unset hover:text-text-link"
                            >
                                {post.data.name}
                            </a>
                        </div>
                        <span class="highlight ml-8">
                            {post.data.monthlyListeners.toLocaleString('en-US')}
                        </span>
                    </div>
                    <div class="text-text-muted text-sm italic">
                        <time datetime={post.data.publishDate.toISOString()}>
                            {formattedDate}
                        </time>
                    </div>
                </li>
            );
        })
    }
</ul>