RSS

January 26, 2019
4 min read

The first step to start writing

This simple website is the start of my new blog. I will write around technical stuff, mainly laravel and other PHP related topics.

for some time now i want to create a blog, but i have always been stuck with choosing a system for the implementation.

Should I use Wordpress to have a full blown blog system with SEO optimisations but a shitty architecture? No!

As a Laravel developer I should build my own blog system based on Laravel. So far so good. for a few months I tried to build my own blog system] with everything I need. This took much time and I lost myself into details like implementing a media gallery with reusable images and so on. This whole project was a very good learning, but I never thought it’s finished.

Some time went by and Laravel Nova was released. I instantly bought a license but didn’t found the time to start playing with it around.
Now at a free weekend I thought I need to try it out and build a small MVP with the following goals:

  • Start a fresh Laravel project with Nova
  • Add a Post Model with the following capabilities:
    • Publish by date
    • Auto Slug generation
    • Featured Image
    • display reading time
  • Frontpage with a a paginated list of the latest blog entries
  • Single post page with code highlighting
  • RSS Feed
  • Privacy page
  • Legal Notice page

Start a fresh Laravel project with Nova

First you need to have a license of Laravel Nova, it costs 99 bucks but is totally worth it. You will never regret you bought it. Nice shot Taylor ;-)

To install Nova by composer you need add the following lines to your composer.json:

"repositories": [
    {
        "type": "composer",
        "url": "https://nova.laravel.com"
    }
]

Now you can install it with a simple composer require laravel/nova.

My Post model

The Post model is a simple Eloquent model with the following migration:

Schema::/create/('posts', *function*(Blueprint $table) {
    $table->increments('id');
    $table->string('slug')->unique();
    $table->string('title');
    $table->text('excerpt');
    $table->text('body');
    $table->boolean('is_published')->default(*false*);
    $table->datetime('publish_date');
    $table->integer('author_id');
    $table->timestamps();
});

It has a relation to the User model as an author. The slug has to be unique because we resolve the route via (implicit rout model binding).

public function getRouteKeyName()
{
    return 'slug';
}

Auto slug generation

This was really easy to achieve. I simply used Benjamin Hirschs Slug field for Laravel Nova and it was implemented within five minutes.

It’s not more than showing these fields onto the Post Nova resource:

[
    // ...
    TextWithSlug::make('Title')->slug('Slug'),
    Slug::make('Slug'),
    // ...
]

Featured Image

I wanted the featured image to be implemented with spaties medialibrary because of the easy responsive image generation. And again I searched at Nova Packages and found this awesome field package. It handles the Featured Image feature with one line of code in the fields of the Post Note resource:

[
    // ...
    Images::make('Featured Image', 'featured_image')
->thumbnail('thumb'),
    // ...
]

On the Post model I added the following two methods and the featured image was complete:

public function registerMediaConversions(Media $media = null)
{
    $this->addMediaConversion('thumb')
        ->width(130)
        ->height(130);

    $this->addMediaConversion('featured')
        ->withResponsiveImages();
}

public function registerMediaCollections()
{
    $this->addMediaCollection('featured_image')->singleFile();
}

Display reading time

A normal person reads about 250 words per minute. With this knowledge, the implementation is not more than this method on the post model:

 public function readingTime()
{
    return ceil(str_word_count($this->body) / 250);
}

Add syntax highlighting to the code blocks

This was for me a extrem important part and is the reason why I use Nova over Wink. Wink has the builtin feature to use highlight.js for highlighting. But I don’t want to load an extra javascript package to format the code blocks. I wanted to use markdown to write my blog posts and use highlight.php to achieve the formatting of the code blocks and only use the css from the highlight.js library. For simplicity I used the highlight.php Laravel wrapper from sixlive . The body field is a simple Nova Markdown Field. The post model has a method which gets called in the template to parse the markdown to HTML:

public function getBodyAsHtml()
{
    $parsedown = app(ParsedownHighlight::*class*);

    return $parsedown->text($this->body);
}

Design

The design was made by my coworker and friend Christian. He designed it when I was implementing my full blown system mentioned in the top of this post. I used Tailwind CSS to implement the design. I can absolutely recommend to use Tailwind CSS. The process building layouts is blazing fast once the tailwind.js file is customised to your needs.

This will be the base for my new blog. I think I will extend it with the time but for a start this should be enough.

cheers
manu

Legal Notice  |  Privacy  |  RSS  |  © 2019 christlieb.eu