docs: ✏️ add more descriptive examples to getting-started.md

docs/getting-started.md

@@ -82,13 +82,13 @@ const routes: Routes = [
 Scully provides a service for accessing generated routes with ease. To use it, open the `home.component.ts` file and add the following code:
 
 ```ts
-import {ScullyRoutesService} from '@scullyio/ng-lib';
+import {ScullyRoutesService, ScullyRoute} from '@scullyio/ng-lib';
 import {Observable} from 'rxjs';
 
 @Component()
 //...
 export class HomeComponent implements OnInit {
-  links$: Observable<any> = this.scully.available$;
+  links$: Observable<ScullyRoute[]> = this.scully.available$;
 
   constructor(private scully: ScullyRoutesService) {}
 
@@ -101,7 +101,22 @@ export class HomeComponent implements OnInit {
 }
 ```
 
-Now, it is possible to loop through the links inside the template by opening the `home.component.html` file and adding the following code:
+We can see `ScullyRoutesService.available$` returns an Observable of an array of `ScullyRoute`s, the interface of which looks like this:
+
+```ts
+export interface ScullyRoute {
+  route: string;
+  title?: string;
+  slugs?: string[];
+  published?: boolean;
+  slug?: string;
+  sourceFile?: string;
+  [prop: string]: any;
+}
+```
+
+To extract data from the available `links$` Scully has rendered, we can loop through them inside the template by opening the `home.component.html` file and adding the following code:
+
 
 ```html
 <p>home works!</p>
@@ -113,6 +128,34 @@ Now, it is possible to loop through the links inside the template by opening the
 
 **NOTE:** If you don't add any route, scully will pre-render 0 pages.
 
+### Adding metadata to `ScullyRoutes`
+
+At the very top of each `.md` blog post file, between the opening and closing `---` indicators, each line of text corresponds to a property we can pull out of `ScullyRoutesService.available$`.
+
+For example, a `.md` file beginning with:
+```
+---
+title: blog title
+description: blog description
+published: true
+arbitraryValue: single value
+arbitraryArray: [first item, second item]
+---
+```
+
+... lets us use these values in our template like this:
+```html
+<ul>
+  <li *ngFor="let page of links$ | async">
+    {{ page.route }}
+    {{ page.arbitraryValue }}
+    <span *ngFor="let arrayItem of page.arbitraryArray">
+      {{ arrayItem }}
+    </span>
+  </li>
+</ul>
+```
+
 ## Build
 
 At this point, you have your Angular project with Scully successfully installed.