This addon allows you to quickly and effortlessly integrate the Tumblr API into your Ember application.
Note: This project is still in a pre-stable (1.0.0) release. Not all functionality is supported, but the basic text post usage is stable.
ember install ember-tumblr
First, and most importantly, make sure to register a Tumblr application for your account to get an OAuth key: https://www.tumblr.com/oauth/apps
Once you have that, create an adapter named tumblr-post
to set up your blog url and API key.
// adapters/tumblr-post.js
import PostAdapter from 'ember-tumblr/adapters/tumblr-post';
export default PostAdapter.extend({
blogUrl: 'myblog.tumblr.com',
apiKey: 'myTumblrApiKey'
});
Then, simply create a route for your blog to retrieve the data, and utilize the tumblr-blog
component in its template!
// routes/blog.js
import Route from '@ember/routing/route';
export default Route.extend({
model() { // Retrieve all posts of type "text"
return this.get('store').findAll('tumblr-post-text');
}
});
<!-- templates/blog.hbs -->
{{tumblr-blog posts=model}}
And you're done! Ember-Tumblr can be customized far beyond this to retrieve specific types of posts or override the default templates, but that's all you need to do to get started!
If you want Ember-Tumblr to provide links to individual posts (by id), add the postsRoute
option when defining tumblr-blog
:
<!-- templates/blog.hbs -->
{{tumblr-blog
posts=model
postsRoute='post'}}
Then, define the route and template for your postsRoute
:
// routes/post.js
import Route from '@ember/routing/route';
export default Route.extend({
model(params/*, transition*/) {
return this.get('store').queryRecord('tumblr-post-text', {
id: params.post_id
});
}
});
// routes/post.hbs
{{tumblr-post-text post=model}}
Ember-Tumblr supports collapsible posts, via class styles you can implement. To activate this feature, set collapsible
to true (defaults to false).
<!-- templates/blog.hbs -->
{{tumblr-blog
posts=model
collapsible=true}}
This will add a .tumblr-post-collapsed
class to all posts by default, and a button at the bottom of the post that allows users to toggle the collapse (removing the class).
To implement styles for the collapse, you could add something like this to your project:
<!-- styles/blog.scss -->
.tumblr-post {
&.tumblr-post-collapsed {
.tumblr-body {
max-height: 300px;
overflow: hidden;
}
}
}
If you want posts to be expanded by default but still be collapsible, just set collapseByDefault
to false (defaults to true, only used if collapsible
is also true).
<!-- templates/blog.hbs -->
{{tumblr-blog
posts=model
collapsible=true
collapseByDefault=false}}
If you are using the tumblr-post
component (or any of its derivatives) and want it to be collapsible
, you can set the property there, too.
{{tumblr-post
post=model
collapsible=true <!-- allows the post to be collapsed -->
collapsed=false}} <!-- overrides the default to make it expanded when rendered -->
By default, Ember-Tumblr doesn't attempt to do any sorting on your behalf. However, should you want the component to perform sorting operations for you,
simply pass in the sortBy
properties as an array, exactly as described for Ember.computed.sort.
// controllers/blog.js (or components/blog.js, once routeable components land in Ember)
import Controller from '@ember/controller';
export default Controller.extend({
sortBy: ['date:asc']
});
<!-- templates/blog.hbs -->
{{tumblr-blog
posts=model
sortBy=sortBy}}
Ember-Tumblr can handle multiple sort properties, just like the computed macro in Ember (because that's what we use!).
Ember-Tumblr uses Ember-Moment for displaying formatted dates.
This is an optional dependency that you can leverage by setting the formatDates
flag to true:
<!-- templates/blog.hbs -->
{{tumblr-blog
posts=model
formatDates=true}}
{{tumblr-post
post=model
formatDates=true}}
Refer to that package's documentation for information on setting the default date format in your application config.
Note: You must install ember-moment in your application to use this feature.
Filtering text posts by tag via the Tumblr API has been broken for quite some time now. View the Tumblr API Google Group for more info.
Workaround: Retrieve all posts (without) type, only the text post API is bugged.
CONTRIBUTING.md details how to contribute to this project.
We adhere to the Ember Community Guidelines for our Code of Conduct.
git clone git@github.com:elwayman02/ember-tumblr.git
cd ember-tumblr
yarn install
yarn lint:js
yarn lint:js --fix
ember test
– Runs the test suite on the current Ember versionember test --server
– Runs the test suite in "watch mode"yarn test
– Runs ember try:each
to test your addon against multiple Ember versionsember serve
For more information on using ember-cli, visit https://ember-cli.com/.
This project is licensed under the MIT License.