How can I create an archive page sorted by years (with post count) and months (also with post count)?

[pftnhr]

I'd like to have a PaperMod like archive layout for my website. This then also becomes a theme which I'd like to make available for Yellow.

[annaesvensson]

Hello Robert!

First of all: could you please edit the title and put your question there? For example "Can someone help me create an HTML layout for a blog?" or "Is it possible to customise the feed extension for a specific theme?". Tip: You can use the Edit button at the top right corner. Otherwise it is not clear from the title what you are asking for and the whole discussion risks being flagged and deleted.

[markseuffert]

Here's a tip how date and time works in the API for developers.

You can get a collection of blog pages and sort them by the publication date. For example with $pages = $this->yellow->content->index()->filter("layout", "blog")->sort("published", false). Then loop trough these pages and display each page together with the information you are interested in. I assume you are familiar with the blog extension, so a good starting point would be your layout file system/layouts/blog-start.html. The hard part is to deal with sections for years and months. Not sure how much work this would be for a developer, it requires some understanding of date formats. In the feed extension there's a similar programming problem. It converts the date of each page to a string and checks if the string changes between two pages. You can convert the publication date to a language specific date with page->getDateHtml() or page->getDateFormattedHtml(). See also #273.

Even if it doesn't answer your question, hope it helps a little bit.

[pftnhr]

I did it with a little help from this artificial intelligence chatbot. I'll post the code here later today so maybe it can be tweaked a bit.

[pftnhr]

As announced, here is the code of my archive.html which works very well on my site

Edit: You can find the code in here also: https://github.com/pftnhr/expand-yellow/blob/main/archive.html

<?php $this->yellow->layout("header") ?>

<h1><?php echo $this->yellow->page->getHtml("titleContent") ?></h1>
<?php echo $this->yellow->page->getContentHtml() ?>

<?php $pages = $this->yellow->content->index()->filter("layout", "blog")->sort("published", false) ?>

    <?php 
    $yearCounts  = []; // An array to record the number of posts per year
    $monthCounts = []; // An array to record the number of posts per month
    
    foreach ($pages as $page): 
        $publishedDate = $page->getModified($httpFormat = false);
        $year = date("Y", $publishedDate); // Das Jahr des Beitrags
        $month = date("m", $publishedDate); // Der Monat des Beitrags
    
        // Count the posts per year
        if (isset($yearCounts[$year])) {
            $yearCounts[$year]++;
        } else {
            $yearCounts[$year] = 1;
        }
    
        // Count the posts per month
        $monthKey = $year . "-" . $month;
        if (isset($monthCounts[$monthKey])) {
            $monthCounts[$monthKey]++;
        } else {
            $monthCounts[$monthKey] = 1;
        }
    endforeach; 
    
    // Group posts by year and month
    $groupedPosts = [];
    foreach ($pages as $page):
        $publishedDate = $page->getModified($httpFormat = false);
        $year = date("Y", $publishedDate);
        $month = date("m", $publishedDate);
        $groupKey = $year . "-" . $month;
    
        if (!isset($groupedPosts[$year])) {
            $groupedPosts[$year] = [];
        }
    
        if (!isset($groupedPosts[$year][$month])) {
            $groupedPosts[$year][$month] = [];
        }
    
        $groupedPosts[$year][$month][] = $page;
    endforeach;
    
    // Loop through the grouped posts and output them
    foreach ($groupedPosts as $year => $yearGroup): ?>
    
    <div class="archive-year">
    <h2><?php echo $year ?> <sup class="archive-count"><?php echo $yearCounts[$year] ?></sup></h2>
    
    <?php foreach ($yearGroup as $month => $monthGroup): ?>
    
        <div class="archive-month">    
            <div class="archive-month__header">
            <strong><?php echo date("F", strtotime("2023-" . $month . "-01")) ?> <sup class="archive-count"><?php echo $monthCounts[$year . "-" . $month] ?></sup></strong>
            </div>
            <div class="archive-posts">
            <?php foreach ($monthGroup as $page): ?>
                <div class="archive-entry">
                    <?php echo $page->getHtml("title") ?>
                    <div class="archive-meta">
                        <?php echo $page->getDateHtml("published") ?>
                        <?php echo " &middot; " . $page->parseContentShortcut("readingtime", "", "inline") . " min"; ?>
                    </div>
                    <a class="entry-link" href="<?php echo $page->getLocation(true) ?>"></a>
                </div>
            <?php endforeach; ?>
            </div>
        </div>
    </div>
    
    <?php endforeach; ?>
    <?php endforeach; ?>

<?php $this->yellow->layout("footer") ?>

[markseuffert]

Here's what we discussed on Discord. I understand that developers want to extract information from existing pages. It's not enough that you can put arbitrary page settings in Markdown, such as Layout, Published, Tag. You also need an equally simple way of retrieving information and do something with it. This is why there are layouts. I checked how layouts work in Hugo. They have the possibility to split/divide a collection of blog pages into multiple smaller page collections, for example with a GroupByDate function. The Yellow API has no such equivalent and I think it could be something that's worth adding. To make life easier for developers.

[markseuffert]

The method pages->group() is available in the Yellow API now, it supports custom date formats.

pages->group("published", false, "Y") = group content by publication year with descending date
pages->group("published", false, "Y-m") = group content by publication month with descending date
pages->group("published", false, "Y-m-d") = group content by publication day with descending date

Here's an example layout file to show a blog archive with years and months :

<?php $this->yellow->layout("header") ?>
<div class="content">
<div class="main" role="main">
<h1><?php echo $this->yellow->page->getHtml("titleContent") ?></h1>
<?php echo $this->yellow->page->getContentHtml() ?>
<?php $pages = $this->yellow->content->index()->filter("layout", "blog")->sort("published", false) ?>
<?php $this->yellow->page->setLastModified($pages->getModified()) ?>

<?php foreach ($pages->group("published", false, "Y") as $year=>$collectionYear): ?>
<h2><?php echo htmlspecialchars($year) ?> <span class="archive-count">(<?php echo count($collectionYear) ?>)</span></h2>
<?php foreach ($collectionYear->group("published", false, "Y-m") as $month=>$collectionMonth): ?>
<h3><?php echo htmlspecialchars($this->yellow->language->getDateFormatted(strtotime($month), "F")) ?> <span class="archive-count">(<?php echo count($collectionMonth) ?>)</span></h3>
<?php foreach ($collectionMonth as $page): ?>
<div class="archive-title"><a href="<?php echo $page->getLocation(true) ?>"><?php echo $page->getHtml("title") ?></a></div>
<div class="archive-meta"><a href="<?php echo $page->getLocation(true) ?>"><?php echo $page->getDateHtml("published") ?> &middot; <?php echo $page->parseContentShortcut("readingtime", "", "inline")." min" ?></a></div>
<?php endforeach ?>
<?php endforeach ?>
<?php endforeach ?>

</div>
</div>
<?php $this->yellow->layout("footer") ?>

If this looks good to you, please try the latest core extension.

[pftnhr]

Hi Mark,

since I output the months with full names, I used

<?php foreach ($collectionYear->group("published", false, "F") as $month=>$collectionMonth): ?>

but unfortunately, the months are now displayed alphabetically. Is this a bug or have I overlooked something?

[markseuffert]

See my code above, the trick is to first group numerically and then convert into a language specific date format.

[pftnhr]

I have understood this so far, but I would like to output the months without the number of years. So October instead of October 2023.

[markseuffert]

Ah, now I know what you mean. You can replace: $this->yellow->language->getDateStandard($month)
with the following: $this->yellow->language->getDateFormatted(strtotime($month), "F").

I updated my code above.