How to set Featured Image for scully blog

When you want to create a post list, you can access all routes using ScullyRoutesService. But if you want to set featured image on each post, how to access the featured image url.

post list image

Purpose

To access featured image url using ScullyRoutesService.
To understand scully-routes.json file.

ScullyRoutesService

When you create a post with scully, the created markdown file has a frontmatter. We used the description data in a frontmatter before (Scully and meta description).

When Scully makes scully-routes.json which used as ScullyRoutes[], a frontmatter was stored into HandledRoute.data (HandledRoute) in a process. After that the data will be exported into the scully-routes.json file. So, you can define any string data into frontmatter, then you can access that from ScullyRoutesService.

At this time, we need featured image url data in a post. So I'm going to define featured_image in a frontmatter.

---
title: "How to make awesome post"
description: "Beep Beep Boop..."
featured_image: '/assets/img/tanb-express.jpg'
published: ture
---

Let's check the scully-routes.json. If you didn't run a sully server, please run the server with watch mode as follows:

yarn scully --watch

The scully-routes.json file will be created in ./dist/static/assets directory. You will find the featured_image data in the scully-routes.json.

Additional definition of ScullyRoute interface

After defined new frontmatter data, you can access that from ScullyRoutesService. The created or updated scully-routes.json will used as ScullyRoute[]. But ScullyRoute interface is defined with a few properties simply (ScullyRoute).

To access additional data, you need to define interface. Thankfully, TypeScript can define multiple same named interfaces and those will be merged. So I define this interface in a PostListComponent.

import { Component, OnInit } from '@angular/core';
import { ScullyRoutesService } from '@scullyio/ng-lib';
import { map } from 'rxjs/operators';

interface ScullyRoute {
  description: string;
  featured_image?: string;
}

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.scss']
})
export class PostListComponent implements OnInit {
  blog$ = this.srs.available$
    .pipe(
      map((routes) => {
        return routes.filter((route) => {
          return route.route.startsWith('/blog/')
        }).reverse();
      })
    );

  constructor(private srs: ScullyRoutesService) { }

  ngOnInit(): void {
  }
}

<li *ngFor="let blog of blog$ | async">
  <img [attr.src]="blog.featured_image">
</li>

Conclusion

You can access any data in a frontmatter through ScullyRoutesService. Featured image, author, tags or creation date, you can define any data in a frontmatter as you like. Bt now I'm just considering that may be scully-routes.json will be huge some day. For now, It may be best to avoid putting unnecessary data in the frontmatter...