prember-meta v0.0.4
prember-meta
Setup meta for your Prember/Ember blog to support opengraph, microdata, Facebook, Twitter, Slack etc.
Installation
ember install prember-meta
Usage
This addon requires a config be set with the basic info for your blog, including the title
,
description
, and url
. The url
should end in a trailing slash.
// config/environment.js
ENV['prember-meta'] = {
description: 'Ramblings about Ember.js, JavaScript, life, liberty, and the pursuit of happiness.',
imgSrc: 'http://i.imgur.com/KVqNjgO.png',
siteName: 'Ship Shape',
title: 'Blog - Ship Shape',
twitterUsername: '@shipshapecode',
url: 'https://shipshape.io/blog/'
};
The title
will be used for both the <title>
tag of your page, and for og:title
and twitter:title
. Similarly, the description will be used for description
, og:description
, and twitter:description
. You probably are starting to see
a pattern forming here :smiley:.
Once you have defined your base values, there are two mixins exposed for use in your app's blog index route, and each post's route.
The blog-meta
mixin only needs the values from the global config, so it will work even without the model hook,
but I wanted to just show the setup I have with my model hook, where I load in all the posts.
// routes/blog/index.js
import Route from '@ember/routing/route';
import RSVP from 'rsvp';
import { inject as service } from '@ember/service';
import BlogMetaMixin from 'prember-meta/mixins/blog-meta';
export default Route.extend(BlogMetaMixin, {
markdownResolver: service(),
model() {
return this.markdownResolver.tree('blog').then((tree) => {
return new RSVP.Promise((resolve) => {
const sortedPosts = tree.files.sortBy('attributes.date').reverse();
resolve(sortedPosts);
});
});
}
});
The post-meta
mixin, however, relies heavily on your model values. Therefore, if you do not have a model hook, and
your afterModel
is passed an undefined
model reference, an assertion will be thrown that you must have a model.
In this example, we are using ember-cli-markdown-resolver
and it automatically will set the front matter values from your markdown as properties on your model, when you grab the file.
The values in my .md
files look something like this:
---
author: Robert Wagner
authorId: rwwagner90
categories:
- ember
- ember.js
- ember inspector
date: '2018-04-09'
slug: ember-inspector-the-journey-so-far
title: Ember Inspector - The Journey so Far
---
You do not have to use the markdown resolver, but your model must return values of the same format, i.e. an author name string, a categories array, a slug for the post, a title, etc.
// routes/blog/post.js
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
import PostMetaMixin from 'prember-meta/mixins/post-meta';
export default Route.extend(PostMetaMixin, {
markdownResolver: service(),
model({ path }) {
const withoutSlash = !path.endsWith('/') ? path : path.slice(0, -1);
return this.markdownResolver.file('blog', withoutSlash);
}
});
License
This project is licensed under the MIT License.