DEV Community: Andy Carmona

Implementing RSS feed in Jigsaw

Andy Carmona — Tue, 05 May 2020 04:14:53 +0000

This post was originally published on my personal blog

Really Simple Syndication or RSS for short is a protocol that provides a method for aggregating web content. It is also a standard that defines the structure of a file (XML) for content publishing. The XML should conform to the WC3's RDF specification https://www.w3.org/wiki/RSS.

It is used by other sites and tools (called feed aggregators or feed readers), to subscribe to your blog or website and get the content as soon as it is available.

How Does RSS Work?

It is pretty simple:

A website creates one or more RSS feeds and keep it (them) in a server.
A user subscribes to your feed using a feed reader, this could be another site like Feedly, or a desktop app like Thunderbird.
The feed reader shows the user the content of your site.

And that's it!.

Implementing RSS in Jigsaw

This is really straight forward, as it is notice in the Jigsaw documentation.

Other non-HTML, text-type files can also be processed with the Blade engine first, allowing you to dynamically generate non-HTML files that include variables and Blade control structures. Supported file extensions include .blade.js, .blade.json, .blade.xml, .blade.rss, .blade.txt, and .blade.text [...] The output file will maintain its filetype extension in the resulting URL; for example, a file named some-file.blade.xml will be processed by Blade, then will be accessible at the URL my-jigsaw-site.com/some-file.xml.

So, all you need to do is add a file with a .blade.xml extension to your source directory, for example rss.blade.xml with the following content:

{!! '<'.'?'.'xml version="1.0" encoding="UTF-8" ?>' !!}
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:media="http://search.yahoo.com/mrss/">
    <channel>
        <title>{{ $page->siteName }}</title>
        <link>{{ $page->baseUrl }}</link>
        <description><![CDATA[{{ $page->siteDescription }}]]></description>
        <atom:link href="{{ $page->getUrl() }}" rel="self" type="application/rss+xml" />
        <language>{{ $page->siteLanguage }}</language>
        <lastBuildDate>{{ $posts->first()->getDate()->format(DateTime::RSS) }}</lastBuildDate>

        @foreach($posts as $post)
            <item>
                <title><![CDATA[{!! $post->title !!}]]></title>
                <link>{{ $post->getUrl() }}</link>
                <guid isPermaLink="true">{{ $post->getUrl() }}</guid>
                <description><![CDATA[{!! $post->description !!}]]></description>
                <content:encoded><![CDATA[{!! $post->getContent() !!}]]></content:encoded>
                <dc:creator xmlns:dc="http://purl.org/dc/elements/1.1/">{{ $post->author }}</dc:creator>
                <pubDate>{{ $post->getDate()->format(DateTime::RSS) }}</pubDate>

                @if($post->cover_image)
                <media:content
                        medium="image"
                        url="{{ $page->baseUrl . $post->cover_image }}"
                        type="image/jpeg"
                        width="150"
                        height="150" />
                @endif
            </item>
        @endforeach
    </channel>
</rss>

Then build your site with npm run local, npm run staging, or npm run production. Once your site is build, a file named, in this case rss.xml will be placed in the root of your site. All that's left to do is to add a <link rel="alternate" /> to the head of your master layout file like so:

<link rel="alternate" type="application/rss+xml" title="{{ $page->siteName }}" href="{{ $page->baseUrl.'/rss.xml' }}" />

Testing your RSS feed.

Once you have generated your RSS file, you can test it adding it to your feed reader/aggregator of choice. Let's try with Feedly:

Open Feedly.
Select the Follow new sources button on the left toolbar.
Enter your site's URL, Feedly will automatically detect your site's feed and show you.
Select your source.
Click the follow button and voila!, your feed is ready to be consumed by your users.

Adding estimated reading time to posts in Jigsaw

Andy Carmona — Sun, 03 May 2020 13:16:45 +0000

This post was originally published on my personal blog

Something I really like when reading an article is to have and idea of how long is it going to take to read it allfrom top to bottom, that is the Estimated Reading Time (ERT), and that could help you decide if you read the article right away, or save it for later in a tool like Pocket. Companies like Amazon have been using this metric to trick their users to read more. Sites like Medium and DEV.to implement it as well with a similar purpose. Adding this metric to your blog's posts could help your usersto engage more with your site.

There is scientific evidence that shows that this is true, and as explained in The New Yorker:

In 2011, the psychologists Claude Messner and Michaela Wänke investigated what, if anything, could alleviate the so-called “paradox of choice”
— the phenomenon that the more information and options we have, the worse we feel. They concluded that …
the faster we decide on something, whether it’s what we’re going to eat or what we’re going to read, the happier we become
[…] The more we know about something — including precisely how much time it will consume — the greater the chance we will commit to it.

Words Per Minute (WPM)

According to Wikipedia, Words per minute is

a measure of words processed in a minute, often used as a measurement of the speed of typing, reading or Morse code sending and receiving.

There have been studies that demonstrates that the average silent reading rate for adults in english is 238 wpm for non-fiction and 260 wpm for fiction.

How to calculate Estimated Reading Time

It is a really simple algorithm:

Find your total word count. Let’s say it’s 938 words.
Divide your total word count by an estimated Words per minute quantity, Eg. 200. In this case, 4.69.
The first part of your decimal number is your minutes. In this case 4.
Take the second part — the decimal points — and multiply that by 0.60. Those are your seconds.

The result? 938 words = a 4 minute, 41 second read.

Time to code

So, enough of the theory and let's get our hands dirty.

With our algorithm in place we are going to create a function that will help us calculate the estimated reading time for each of our posts. Let's base our function on this gist (https://coderwall.com/p/y1yhwg/estimate-reading-time](https://coderwall.com/p/y1yhwg/estimate-reading-time)

/**
 * Returns an estimated reading time in a string
 * idea from @link http://briancray.com/posts/estimated-reading-time-web-design/
 * @param  string $content the content to be read
 * @param int $wpm
 * @return string          estimated read time eg. 1 minute, 30 seconds
 **/
private function getEstimateReadingTime($content, $wpm = 200) {
    $wordCount = str_word_count(strip_tags($content));

    $minutes = (int) floor($wordCount / $wpm);
    $seconds = (int) floor($wordCount % $wpm / ($wpm / 60));

    $str_minutes = ($minutes === 1) ? 'minute' : 'minutes';
    $str_seconds = ($seconds === 1) ? 'second' : 'seconds';

    if ($minutes === 0) {
        return "{$seconds} {$str_seconds}";
    }
    else {
        return "{$minutes} {$str_minutes}, {$seconds} {$str_seconds}";
    }
}

This function is part of the listener that we are going to create next:

namespace App\Listeners;

use TightenCo\Jigsaw\Jigsaw;

class GenerateEstimateReadingTime
{
    public function handle(Jigsaw $jigsaw)
    {
        $jigsaw->getCollection('posts')->map(function ($post)
        {
            $post->estimated_reading_time = $this->getEstimateReadingTime($post);
        });
    }
}

Here we get the posts collection, iterate through all the items in that collection, and add a new property called estimated_reading_time which will contain the proper value. Once our listener has been created we need to hook it to an event. In Jigsaw, every time we build our site, several events are fired, those events are:

beforeBuild
afterCollection
afterBuild

The one we are interested on is the afterCollection event. This event is fired after all collections have been processed but before any output files are written to disk. so let's go ahead and register our listener. We do this in the bootstrap.php file as mentioned before.

$events->afterCollections(App\Listeners\GenerateEstimateReadingTime::class);

Update the views.

With all this in place, the only thing missing is the adding this newly created value to our views. Let's add it to the index.blade.php file.

<span class="inline-block bg-grey-300 hover:bg-grey-400 leading-loose tracking-wide text-grey-700 uppercase text-xs font-semibold rounded mt-2 md:ml-2 px-3 pt-px">{{ $post->estimated_reading_time }}</span>

Conclusion

Estimated reading time is a measure that will help your users stay engaged with your site, by giving them and idea of how long it will take them to read your posts you ensure that they could stay reading more and more of your content. We saw too how to extend Jigsaw's functionality by adding this feature to your site.