https://github.com/adriantoine/bloql

Blog engine powered by React using Relay and GraphQL to interact with data
https://github.com/adriantoine/bloql

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/adriantoine/bloql
• Owner: adriantoine
• License: mit
• Created: 2015-09-09T13:15:10.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-04-16T17:24:10.000Z (over 8 years ago)
• Last Synced: 2024-11-02T13:50:21.220Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 54.7 KB
• Stars: 15
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-graphql - bloql

README

        
# bloql

[![Stable version](https://img.shields.io/npm/v/bloql.svg)](https://www.npmjs.com/package/bloql)

[![Dependency Status](https://img.shields.io/gemnasium/adriantoine/bloql.svg)](https://gemnasium.com/adriantoine/bloql)

Blog engine powered by [React](https://facebook.github.io/react/) using [Relay](https://facebook.github.io/relay/) and [GraphQL](https://facebook.github.io/graphql/) to interact with data.

# Usage

- Install `bloql` package and a bloql retriever to get files:

  ```bash

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

  ```

- Create a backend to serve blog posts:

  ```js

  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:

  ```js

  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 (

        


          {this.props.posts.map(post =>

            
{post.meta.title}

          )}

        

      );


    }

  }

  // 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(

    ,

    document.getElementById('app')

  );

  ```

Have a look there for minimal and understandable examples: [bloql-examples](https://github.com/adriantoine/bloql-examples)