bloql

bloql

Blog engine powered by React using Relay and GraphQL to interact with data.

Usage

• Install bloql package and a bloql retriever to get files:

  npm install bloql bloql-markdown-file-database --save
  

• Create a backend to serve blog posts:

  var path = require('path');
  var express = require('express');
  var bloql = require('bloql/middleware/express');
  
  const app = express();
  
  bloql(app, {
    pretty: true,
    postsPath: path.join(__dirname, 'posts'),
    database: require('bloql-markdown-file-database')
  });
  
  ...
  
  app.listen(3000, () => {
    console.log('Server started and listening on port 3000');
  });
  

  (for now only available for express)

• Now you're all set to use bloql on the client:

  import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  import { createComponent } from 'bloql/PostList';
  
  class PostList extends Component {
  
    render() {
  
      // Render your post list using all react components you want
      return (
        <ul>
          {this.props.posts.edges.map(edge =>
            <li key={edge.node.meta.slug}>{edge.node.meta.title}</li>
          )}
        </ul>
      );
  
    }
  
  }
  
  // Convert your component into a Bloql element
  PostList = createComponent(PostList);
  
  // You can place your component anywhere in any application and
  // combine it with other React components
  ReactDOM.render(
    <PostList/>,
    document.getElementById('app')
  );
  

Have a look there for minimal and understandable examples: bloql-examples

Changelog

0.11.0 (2015-10-12)

• Changed bloql interface to avoid polluting this.props object and make it easier to access for posts:

  for PostList:

{this.props.posts.edges.map(edge => <a href={edge.node.meta.slug}>{edge.node.meta.title}</a> )} // becomes: {this.props.bloql.posts.map(post => <a href={post.meta.slug}>{post.meta.title}</a> )}

for `Post` (to avoid polluting `this.props`, in case a user wants to have pass his own `post` prop, we shouldn't override it):
```js
this.props.post
// becomes:
this.props.bloql.post

Full Changelog