How to use nextein - 10 common examples

<content>
        
      
    )
  }
}

export default withPost(Post)

// Renderers -----

const Paragraph = ({ children }) =&gt; {
  return (
   <p style="{styles.paragraph}">
    {children}
   </p>
  )
}

const Code = ({ children, className = '' , ...rest }) =&gt; {
  return (
    <code>
      {children}
    </code></content>

const { withNextein } = require('nextein/config')

module.exports = withNextein({
  // your next.js config goes here
})

{
              prev &&
              <a style="{styles.prevLink}"> <strong>&lt;</strong> Prev: {prev.data.title}</a>
            }
            {
              next &amp;&amp;
              <a style="{styles.nextLink}">Next: {next.data.title} <strong>&gt;</strong> </a>
            }
          
        
      
    )
  }
}

export default withPostsFilterBy(inCategory('post'))(withPost(Post))

const styles = {
  main: {
    fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
    fontWeight: 100,
    display: 'flex',
    flexDirection: 'column'
  },
  article: {
    display: 'flex',
    flexDirection: 'column',
    alignSelf: 'center',
    width: '60vw',
    position: 'relative'
  },
  paragraph: {

render() {
    const { posts, selected } = this.props
    
    const stories = posts.filter(inCategory(selected))
    return (
      <main>
        <h1>{selected.replace(`${category}/`, ``)}</h1>
        <section>
          {
            stories.map((story, idx) =&gt; (
              <article>
                <h2><a>{story.data.title}</a></h2>
                <content>
              </content></article>
            ))
          }
        </section>
      </main>
    )
  }

const Index = ({ posts }) => {
  
  const inPosts = posts.filter(inCategory('post')).sort(sortByDate)
  const inHome = posts.filter(inCategory('home'))

  return (
    <main style="{styles.main}">
      
      
      <section style="{styles.section}">
        <h1>/post</h1>
        <p>{inPosts.length} entries found.</p>    
        {
          inPosts
          .map((post, idx) =&gt; )
        }
      </section>
      <section style="{styles.section}">  
        <h1>/home</h1>
        <p>{inHome.length} entries found.</p>    </section></main>

import React,  { Component } from 'react'
import withPosts, { withPostsFilterBy, inCategory }  from 'nextein/posts'
import { Content } from 'nextein/post'
import Link from 'nextein/link'

const category = 'stories'
const withStories = withPostsFilterBy(inCategory(category, { includeSubCategories: true }))

class Stories extends Component {
  
  static async getInitialProps ({ query }) {
    if (query) {
      const { category } = query
      return {
        selected: category
      }
    }
  }

  render() {
    const { posts, selected } = this.props
    
    const stories = posts.filter(inCategory(selected))

posts.sort(sortByDate)
  return (
    <main style="{styles.main}">
      
      
      <section style="{styles.section}">  
        {
          posts
          .map((post) =&gt; )
        }
      </section>
    </main>
  )
}

export default withPostsFilterBy(inCategory('sub-section', { includeSubCategories: true }))(Index)

const styles = {
  main: {    
    fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
    fontWeight: 100,
    display: 'flex',
    flexDirection: 'column'
  },
  section: {
    display: 'flex',
    flexDirection: 'column',
    alignSelf: 'center',
    width: '60vw' 
  },
  navigation: {
    position: 'absolute',

const Index = ({ posts }) => {
  
  const inPosts = posts.filter(inCategory('post')).sort(sortByDate)
  const inHome = posts.filter(inCategory('home'))

  return (
    <main style="{styles.main}">
      
      
      <section style="{styles.section}">
        <h1>/post</h1>
        <p>{inPosts.length} entries found.</p>    
        {
          inPosts
          .map((post, idx) =&gt; )
        }
      </section>
      <section style="{styles.section}">  
        <h1>/home</h1></section></main>

const getStories = async () =>  {
  const category = 'stories'
  const all = await entries()
  return all
    .filter(inCategory(category, {includeSubCategories: true}))
    .map(post => post.data.category)
    .filter((category, idx, arr) => arr.indexOf(category) === idx )
    .reduce((prev, entry) => ({
      ...prev,
      [`/${entry.replace(`${category}/`, '')}`]: { page: '/stories', query: { category: `${entry}` } }
    }), {})
}

.map((post, idx) => )
        }
      
      <section style="{styles.section}">  
        <h1>/home</h1>
        <p>{inHome.length} entries found.</p>    
        {
          inHome
          .map((post, idx) =&gt; )
        }
      </section>
    
  )
}

export default withPosts(Index)

const styles = {
  main: {    
    fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
    fontWeight: 100,
    display: 'flex',
    flexDirection: 'column'
  },
  section: {
    display: 'flex',
    flexDirection: 'column',
    alignSelf: 'center',
    width: '60vw' 
  },
  navigation: {
    position: 'absolute',