npm

npm’s 2019 JavaScript ecosystem survey analysis is now available! Get your copy here »

bloql

0.11.0 • Public • Published

bloql

Stories in Ready Stories in Current Priority Stories in Progress

Stable version Dependency Status

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

install

npm i bloql

Downloadsweekly downloads

50

version

0.11.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability