[FEATURE] [Backend] oEmbed endpoint standardization & Wikonnect Open …

…Graph protocol integration (#640) * Add extra global properties * standardize oEmbed response format & added XML support Signed-off-by: mimidots <[email protected]> * Inject oEmbed & Open Graph meta tags into page headers * bug fix #comment component not found during tests
tunapanda · Mar 22, 2021 · 5985ba6 · 5985ba6
1 parent 5815855
commit 5985ba6
Show file tree

Hide file tree

Showing 24 changed files with 684 additions and 82 deletions.
diff --git a/.env-sample b/.env-sample
@@ -1,4 +1,5 @@
-PROJECT_NAME=Wikonnect
+APP_NAME=Wikonnect
+APP_URL=https://app.wikonnect.org
 
 NODE_ENV=development
 LOG_LEVEL=error

diff --git a/frontend/app/index.html b/frontend/app/index.html
@@ -4,8 +4,6 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>Wikonnect</title>
-  <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   {{content-for "head"}}
   <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
@@ -18,10 +16,10 @@
 
   <script src="{{rootURL}}assets/vendor.js"></script>
   <script src="{{rootURL}}assets/wikonnect.js"></script>
-  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
+  <script defer src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
     integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
     crossorigin="anonymous"></script>
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
+  <script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
     integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
     crossorigin="anonymous"></script>
 

diff --git a/frontend/app/models/chapter.js b/frontend/app/models/chapter.js
@@ -17,7 +17,7 @@ export default class ChapterModel extends Model {
   @attr reaction;
   @attr authenticatedUser;
   @attr views;
-  @hasMany('comment') comments;
+  @hasMany('comment') comment;
 
   @belongsTo('user') creator;
   // @belongsTo('lesson') lesson;

diff --git a/frontend/app/router.js b/frontend/app/router.js
@@ -33,7 +33,6 @@ Router.map(function () {
     this.route('published');
     this.route('edit', { path: '/edit/:chapter_id' });
   });
-  this.route('tag', { path: '/tag/:id' });
   this.route('embed', { path: '/embed/:chapter_id' });
   this.route('callback');
 

diff --git a/frontend/app/routes/about.js b/frontend/app/routes/about.js
@@ -1,3 +1,10 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
-export default class AboutRoute extends Route {}
+export default class AboutRoute extends Route {
+  @service SeoTags;
+
+  afterModel() {
+    this.headTags = this.SeoTags.build('About Us - Wikonnect', '/about');
+  }
+}
diff --git a/frontend/app/routes/application.js b/frontend/app/routes/application.js
@@ -4,6 +4,7 @@ import { inject as service } from '@ember/service';
 export default class ApplicationRoute extends Route {
   @service session;
   @service me;
+  @service SeoTags;
 
   queryParams = { campaign_id: '', points: '', enduser_id: '', partner_id: '' };
 
@@ -25,6 +26,10 @@ export default class ApplicationRoute extends Route {
     return this._loadMe();
   }
 
+  afterModel() {
+    this.headTags = this.SeoTags.build();
+  }
+
   _loadMe() {
     return this.me.load();
   }

diff --git a/frontend/app/routes/chapter/index.js b/frontend/app/routes/chapter/index.js
@@ -3,14 +3,107 @@ import { inject as service } from '@ember/service';
 
 export default class ChapterIndexRoute extends Route {
   @service me;
+  @service SeoTags;
 
   model(params) {
     return this.store.findRecord('chapter', params.chapter_slug);
   }
 
   afterModel(model) {
-    return {
-      comments: this.store.query('comment', { chapterId: model.id }),
-    };
+    const origin = window.location.origin;
+    const chapterUrl = `/chapter/${model.id}`;
+
+    const headers = [
+      //GRAPH SPECIFIC META
+      {
+        type: 'meta',
+        tagId: 'ogImage',
+        attrs: {
+          property: 'og:image',
+          content: model.imageUrl,
+        },
+      },
+      {
+        type: 'meta',
+        tagId: 'ogUrl',
+        attrs: {
+          property: 'og:url',
+          content: `${origin}${chapterUrl}`,
+        },
+      },
+      {
+        type: 'meta',
+        tagId: 'ogTitle',
+        attrs: {
+          property: 'og:title',
+          content: model.name,
+        },
+      },
+      {
+        type: 'meta',
+        tagId: 'description',
+        attrs: {
+          name: 'description',
+          content: model.description.substr(0, 160),
+        },
+      },
+      //TWITTER SPECIFIC META
+      {
+        type: 'meta',
+        tagId: 'twitterTitle',
+        attrs: {
+          name: 'twitter:title',
+          content: model.title,
+        },
+      },
+      {
+        type: 'meta',
+        tagId: 'twitterImage',
+        attrs: {
+          name: 'twitter:image',
+          content: model.imageUrl,
+        },
+      },
+      {
+        type: 'meta',
+        tagId: 'twitterDescription',
+        attrs: {
+          name: 'twitter:description',
+          content: model.description.substr(0, 160),
+        },
+      },
+      {
+        type: 'meta',
+        tagId: 'twitterCard',
+        attrs: {
+          name: 'twitter:card',
+          content: 'summary_large_image',
+        },
+      },
+      // oEmbed Tags
+      {
+        type: 'link',
+        rel: 'alternate',
+        attrs: {
+          type: 'application/json+oembed',
+          href: `${origin}/api/v1/oembed?url=${origin}${chapterUrl}&format=json`,
+          title: model.name,
+        },
+      },
+      {
+        type: 'link',
+        attrs: {
+          rel: 'alternate',
+          type: 'text/xml+oembed',
+          href: `${origin}/api/v1/oembed?url=${origin}${chapterUrl}&format=xml`,
+          title: model.name,
+        },
+      },
+    ];
+    this.headTags = this.SeoTags.build(
+      'View Chapter - Wikonnect',
+      chapterUrl,
+      headers
+    );
   }
 }
diff --git a/frontend/app/routes/index.js b/frontend/app/routes/index.js
@@ -4,15 +4,9 @@ import { inject as service } from '@ember/service';
 export default class IndexRoute extends Route {
   @service me;
   @service config;
-  @service headData;
   @service infinity;
   @service notify;
 
-  async afterModel() {
-    this.headData.title = 'Wikonnect - Chapters';
-    this.headData.theme = '#FF5722';
-  }
-
   model() {
     return this.infinity.model('chapter', {
       approved: true,

diff --git a/frontend/app/routes/login.js b/frontend/app/routes/login.js
@@ -1,8 +1,9 @@
 import Route from '@ember/routing/route';
-import { inject } from '@ember/service';
+import { inject as service, inject } from '@ember/service';
 
 export default class LoginRoute extends Route {
   @inject me;
+  @service SeoTags;
 
   beforeModel() {
     if (this.me.user) {
@@ -13,4 +14,8 @@ export default class LoginRoute extends Route {
   model() {
     return this.store.createRecord('user');
   }
+
+  afterModel() {
+    this.headTags = this.SeoTags.build('Login - Wikonnect', '/login');
+  }
 }
diff --git a/frontend/app/routes/manage.js b/frontend/app/routes/manage.js
@@ -1,7 +1,19 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
 export default class ManageRoute extends Route {
+  @service SeoTags;
+
   model() {
     return this.store.query('chapter', { status: 'published' });
   }
+  afterModel() {
+    this.headTags = this.SeoTags.build(
+      'Manage Chapters - Wikonnect',
+      '/manage',
+      undefined,
+      false,
+      false
+    );
+  }
 }
diff --git a/frontend/app/routes/not-found.js b/frontend/app/routes/not-found.js
@@ -1,3 +1,16 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
-export default class NotFoundRoute extends Route {}
+export default class NotFoundRoute extends Route {
+  @service SeoTags;
+
+  afterModel() {
+    this.headTags = this.SeoTags.build(
+      'Page not found - Wikonnect',
+      '/404',
+      undefined,
+      false,
+      true
+    );
+  }
+}
diff --git a/frontend/app/routes/profile.js b/frontend/app/routes/profile.js
@@ -1,9 +1,9 @@
 import Route from '@ember/routing/route';
-import { inject } from '@ember/service';
+import { inject as service } from '@ember/service';
 
 export default class ProfileRoute extends Route {
-  @inject
-  me;
+  @service me;
+  @service SeoTags;
 
   async beforeModel() {
     if (!this.me.isAuthenticated) {
@@ -15,4 +15,13 @@ export default class ProfileRoute extends Route {
   async model() {
     return await this.me.user;
   }
+  afterModel() {
+    this.headTags = this.SeoTags.build(
+      'View User Profile - Wikonnect',
+      '/profile',
+      undefined,
+      false,
+      false
+    );
+  }
 }
diff --git a/frontend/app/routes/search.js b/frontend/app/routes/search.js
@@ -1,7 +1,11 @@
 import Route from '@ember/routing/route';
 import { queryParam } from 'ember-query-params-service';
+import { inject as service } from '@ember/service';
 
 export default class SearchRoute extends Route {
+  @service router;
+  @service SeoTags;
+
   @queryParam q;
   async model(params) {
     let filtered = [];
@@ -22,4 +26,11 @@ export default class SearchRoute extends Route {
 
     return await filtered;
   }
+
+  afterModel() {
+    this.headTags = this.SeoTags.build(
+      `You searched for ${this.paramsFor('search')} - Wikonnect`,
+      '/search'
+    );
+  }
 }
diff --git a/frontend/app/routes/signup.js b/frontend/app/routes/signup.js
@@ -13,4 +13,15 @@ export default class SignupRoute extends Route {
   model() {
     return this.store.createRecord('user');
   }
+
+  afterModel(resolvedModel, transition) {
+    this.headTags = [
+      {
+        type: 'title',
+        tagId: 'title',
+        content: 'Sign Up - Wikonnect',
+      },
+    ];
+    return super.afterModel(resolvedModel, transition);
+  }
 }
diff --git a/frontend/app/routes/tag.js b/frontend/app/routes/tag.js
diff --git a/frontend/app/routes/teach.js b/frontend/app/routes/teach.js
@@ -3,6 +3,7 @@ import { inject as service } from '@ember/service';
 
 export default class TeachRoute extends Route {
   @service me;
+  @service SeoTags;
 
   beforeModel(transition) {
     if (!this.me.isAuthenticated) {
@@ -13,4 +14,14 @@ export default class TeachRoute extends Route {
     }
     return super.beforeModel(transition);
   }
+
+  afterModel() {
+    this.headTags = this.SeoTags.build(
+      'Teach - Wikonnect',
+      '/teach',
+      undefined,
+      false,
+      false
+    );
+  }
 }
diff --git a/frontend/app/routes/upload.js b/frontend/app/routes/upload.js
@@ -1,3 +1,16 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
-export default class UploadRoute extends Route {}
+export default class UploadRoute extends Route {
+  @service SeoTags;
+
+  afterModel() {
+    this.headTags = this.SeoTags.build(
+      'Upload Profile Picture - Wikonnect',
+      '/upload',
+      undefined,
+      false,
+      false
+    );
+  }
+}