Work on contentful service

blog-app/package.json

@@ -24,6 +24,7 @@
     "@ng-bootstrap/ng-bootstrap": "^12.1.2",
     "@popperjs/core": "^2.10.2",
     "bootstrap": "^5.1.3",
+    "contentful": "^9.2.5",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

blog-app/src/app/contentful-model/post.ts

@@ -0,0 +1,9 @@
+import { EntryFields } from "contentful";
+
+export type CfPost = {
+  title: EntryFields.Text,
+  slug:  EntryFields.Text,
+  content: EntryFields.RichText,
+  legacyWordpressContent: EntryFields.Text,
+  published: EntryFields.Date
+}

blog-app/src/app/services/contentful.service.ts

@@ -1,27 +1,49 @@
 import { Injectable } from '@angular/core';
-import { Observable, of } from 'rxjs';
+import { from, map, Observable, of } from 'rxjs';
 import { BlogError } from '../models/blog-error';
 import { Page } from '../models/page';
 import { Post } from '../models/post';
 import { Posts } from '../models/posts';
 import { IContentService } from './abc/content.service';
+import { createClient, Entry } from 'contentful';
+import { environment } from 'src/environments/environment';
+import { CfPost } from '../contentful-model/post';
+
+
 
 @Injectable({
   providedIn: 'root'
 })
 export class ContentfulService implements IContentService {
 
+  private client = createClient({space: environment.contentfulSpace, accessToken: environment.contentfulAccessToken});
+
+  private convertPost = (postData: Entry<CfPost>) => { return {slug: postData.fields.slug, title: postData.fields.title, content: postData.fields.legacyWordpressContent, excerpt: this.extractExcerpt(postData.fields.legacyWordpressContent), date: new Date(postData.fields.published) } as Post};
+
   constructor() { }
 
   getPage(slug: string): Observable<Page[]> {
     return of([]);
   }
 
   getPosts(page: number, perPage: number): Observable<Posts | BlogError> {
-    return of({totalPages: 0, posts: []} as Posts);
+    let promise = this.client.getEntries<CfPost>().then(cfPosts => cfPosts.items.map(this.convertPost));
+    return from(promise).pipe(map(posts => {
+      return {
+        posts: posts,
+        totalPages: posts.length
+      } as Posts;
+    }));
   }
 
   getPost(slug: string): Observable<Post[]> {
     return of([]);
   }
+
+  private extractExcerpt(htmlString: string): string {
+    var tempDiv = document.createElement('div');
+    tempDiv.innerHTML = htmlString;
+    var extractedText = tempDiv.textContent || tempDiv.innerText;
+    return `<p>${extractedText.slice(0, 287)} [&hellip;]</p>`;
+  }
 }

blog-app/src/environments/environment.prod.ts

@@ -4,5 +4,7 @@ export const environment = {
   features: {
     SUBSCRIBE: true,
     CONTENTFUL: false
-  }
+  },
+  contentfulSpace: 'jdcejwtspy00',
+  contentfulAccessToken: '5c8wf63ztfgSk7xIHTMOz2pTdzCq_WRPJ-X1iwhOGAA'
 };

blog-app/src/environments/environment.ts

@@ -8,7 +8,9 @@ export const environment = {
   features: {
     SUBSCRIBE: true,
     CONTENTFUL: true
-  }
+  },
+  contentfulSpace: 'jdcejwtspy00',
+  contentfulAccessToken: '5c8wf63ztfgSk7xIHTMOz2pTdzCq_WRPJ-X1iwhOGAA'
 };
 
 /*