nextein

Nextein

Um gerador de sites estático com sede em Next.js

Site | Documentação | Guias

O que é?

nextein é um invólucro no next.js que permite escrever sites estáticos usando markdown e react .

Requisitos

Nodejs v10.x + é necessário para executar comandos nextein .

Kit inicial

Se você quiser pular em um projeto inicial, cheque nextein-starter

Começando

Existem algumas etapas que você deve seguir para colocar seu site em funcionamento com nextein

• Crie um projeto:

  • mkdir my-site
  • cd my-site
  • npm init -y

• Instalar dependências

  • npm i nextein next react react-dom

• Adicione um arquivo de configuração next.config.js

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

• Crie pages/index.js

   import React from 'react'
  
  import { getPosts } from 'nextein/fetcher'
  import Content from 'nextein/content'
  
  export async function getStaticProps ( ) {
    return {
      props : {
        posts : await getPosts ( )
      }
    }
  }
  
  export default function Index ( { posts } ) {
    return (
      < section >
      {
        posts . map ( post => < Content { ... post } /> )
      }
      </ section >
    )
  } )

• Crie uma entrada de postagem markdown na pasta posts ( posts/my-first-post.md )

   ---
  title : First Post
  category : post
  ---
  
  This is the first paragraph and it will be used as an excerpt when loaded in a ` <Content excerpt /> ` tag.
  
  This paragraph should * not * appear in that list.
  

• Adicione scripts npm para executar o modo dev ao seu package.json

   "scripts" : {
    "dev" : " next "
  }

• Execute o servidor de desenvolvimento

  • npm run dev
  • aberto http: // localhost: 3000

• Adicione outro script npm ao seu package.json para exportar o site

   "scripts" : {
    "dev" : " next " ,
    "export" : " next build && next export "
  }

Documentação

fetcher

Use o Fetcher para recuperar as postagens e dados de seus arquivos de marcação.

Os métodos getPostsFilterBy e getDataFilterBy no Fetcher permitem passar as funções de filtro. Por exemplo, podemos usar o Filtro inCategory para recuperar postagens em uma determinada categoria:

 import { getPostsFilterBy } from 'nextein/fetcher'
import { inCategory } from 'nextein/filters'

//...
const blog = await getPostsFilterBy ( InCategory ( 'blog' ) )

O getData e getDataFilterBy recuperarão apenas os metadados gerados para entradas em vez de toda a postagem.

O método fetcher é uma maneira conveniente de definir um filtro e, em seguida, usar os getPosts e getData com um filtro aplicado.

 import fetcher from 'nextein/fetcher'
import { inCategory } from 'nextein/filters'

//...
const { getPosts } = fetcher ( InCategory ( 'blog' ) )


//...
const blog = await getPosts ( )

Você pode usar rotas dinâmicas e funções de gerador estático (getStaticProps e getStaticpaths) com métodos Fetcher.

Exemplo para um [name].js Rota dinâmica

 import fetcher from 'nextein/fetcher'

const { getData , getPost } = fetcher ( /* filter */ )

export async function getStaticPaths ( ) {
  const data = await getData ( )
  return {
    paths : data . map ( ( { name } ) => ( { params : { name } } ) ) ,
    fallback : false
  }
}

export async function getStaticProps ( { params } ) {
  const post = await getPost ( params )
  return { props : { post } }
}

export default function Post ( { post } ) {
  //...
}

Exemplo para um [[...name]].js Rota dinâmica:

 import fetcher from 'nextein/fetcher'
import { inCategory } from 'nextein/filters'

const { getData , getPosts , getPost } = fetcher ( inCategory ( 'guides' ) )

export async function getStaticPaths ( ) {
  const data = await getData ( )
  return {
    paths : [ { params : { name : [ ] } } ,
      ... data . map ( ( { name } ) => ( { params : { name : [ name ] } } ) )
    ] ,
    fallback : false
  }
}

export async function getStaticProps ( { params } ) {
  const posts = await getPosts ( )
  const post = await getPost ( params ) // This can be null if not matching `...name`
  return { props : { posts , post } }
}

export default function Guides ( { posts , post } ) {
  //...
}

inCategory(category, options)

Faça a função de filtro a ser aplicada às postagens para recuperar postagens em uma determinada categoria.

• category : {String} A categoria para filtrar os resultados.
• options : {Object} opcional
  • includeSubCategories: Boolean True para incluir postagens em subcategorias. Padrão: false

As categorias são resolvidas pela estrutura da pasta por padrão. Isso significa que uma postagem localizada em posts/categoryA/subOne terá uma categoria categoryA/subOne a menos que você especifique o nome da categoria no FrontMatter.

 import { getPosts } from 'nextein/fetcher'
import { inCategory } from 'nextein/filters'

//...

const posts = await getPosts ( )
const homePosts = posts . filter ( inCategory ( 'home' ) )
  

Se você deseja recuperar todas as postagens em uma determinada categoria, digamos categoryA que incluirá todos os que estão sob subOne , use as opções includeSubCategories: true .

 import { inCategory } from 'nextein/filters'

const categoryAPosts = posts
  . filter ( inCategory ( 'categoryA' , { includeSubCategories : true } ) )

Content

Componente para renderizar um objeto post . Este componente recebe o content da postagem como uma propriedade. Use a propriedade excerpt para renderizar apenas o primeiro parágrafo (isso é útil ao renderizar uma lista de postagens).

• content : {Object} conteúdo de marcação no formato Hast a ser renderizado. Isso é fornecido pelo post.content
• excerpt : {Boolean} True para renderizar apenas o primeiro parágrafo. Opcional. Padrão: false
• renderers : {Object} um conjunto de renderizadores personalizados para elementos de remarca com a forma de [tagName]: renderer .
• component : {String|React.Component} O componente usado para o nó raiz.

 import Content from 'nextein/content'

//...

export default function PostPage ( { post } ) {
  return < Content { ... post } />
} 

Usando renderers para mudar/estilo a tag <p>

 const Paragraph = ( { children } ) => ( < p style = { { padding : 10 , background : 'silver' } } > { children } </ p > )

// Then in your render method ...

  < Content
    { ... post } 
    renderers = { {
      p : Paragraph 
    } }
  / >

post

• __id é o identificador exclusivo gerado pela nexteína.
• data é o objeto FrontMatter Conter as meta -informações postais (título, página, categoria, etc)
  • data.category é a categoria do Post. Quando não estiver especificado, se a postagem estiver dentro de uma pasta, a estrutura do diretório em posts será usada.
  • data.date : JSON DATE A partir da data ou data do FrontMatter no nome do arquivo ou data de criação do arquivo
• content é a representação do conteúdo da postagem (geralmente em formato Hast) criado pelo plug -in de compilação para um determinado mimetype.

 { data , content } = post

frontmatter

Existem apenas algumas propriedades definidas nos metadados frontmatter que são usados pela nextein

 ---
category : categoryOne
date : 2017-06-23

---

Post Content...

• category : o nome da categoria (opcional)
• date : Data String em formato AAAA-MM-DD. Usado para classificar a lista de postagens. (opcional)
• published : defina como false para remover esta postagem das entradas.
• name : Leia apenas o nome do arquivo de postagem. A data é removida do nome, se presente.

withNextein

Uma função de configuração do wrapper a ser aplicada no next.config.js . Ele fornece uma maneira de adicionar sua própria configuração next.js , juntamente com nextein Internal Next.js Config.

Next.config.js

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

module . exports = withNextein ( {
  // Your own next.js config here
} ) 

Plugins

Você também pode definir plugins de nextein usando a configuração withNextein :

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

module . exports = withNextein ( {
  nextein : {
    plugins : [
      //your nextein plugins here
    ]
  }
  // Your own next.js config here
} )

A configuração nextein.plugins aceita uma variedade de plugins com os seguintes formatos:

• [name] : Apenas uma string para definir o plug -in.
• [name, options] : Uma string para definir o objeto Opções do plug -in e um plug -ins.
• { name, id, options } : um objeto de plug -in. O campo name é necessário. Todas as definições anteriores são transformadas nesse formato. O id é opcional, quando fornecido, permite várias instâncias do mesmo plug -in.

O name do plug-in deve ser um plug-in pré-instalado ( nextein-plugin-markdown ) ou um arquivo local ( ./myplugins/my-awesome-plugin )

Plugins padrão

A configuração padrão inclui:

plugins: [
  [ 'nextein-plugin-source-fs' , { path : 'posts' , data : { page : 'post' } } ] ,
  'nextein-plugin-markdown' ,
  'nextein-plugin-filter-unpublished'
] 

Nextein-Plugin-Source-FS

Leia os arquivos do sistema de arquivos.

Opções:

• path : caminho para ler arquivos.
• data : dados padrão a serem passados como extra para cada entrada. Padrão para {}
• includes : padrão para **/*.* .
• ignore : um conjunto de arquivos ignorados. A lista padrão inclui:

   '**/.DS_Store' ,
  '**/.gitignore' ,
  '**/.npmignore' ,
  '**/.babelrc' ,
  '**/node_modules' ,
  '**/yarn.lock' ,
  '**/package-lock.json' 

Nextein-Plugin-Markdown

Renderizar arquivos de marcação.

Opções:

• raw : Padrão para true . Faça disso false para não adicionar o conteúdo raw no objeto Post.
• position : Padrão para false . Faça disso true para adicionar as informações de posição para postar conteúdo.
• rehype : Padrão para [] . Adicione um conjunto de plugins para rehype
• remark : Padrão para [] . Adicione um conjunto de plugins para remark

NEXTEIN-PLUGIN-FILTER-Publicado

Filtre as postagens usando uma propriedade para impedir que as entradas de rascunho / não publicadas sejam exibidas.

Opções:

• field : Padrão para 'published' . Verificará se um field está presente nos data postais e filtro se definido como false .

Escrevendo plugins

Você pode escrever seus próprios plugins. Existem basicamente 2 tipos diferentes (fonte e transformações). Os plug -ins de origem serão chamados para gerar as entradas de postagens e, em seguida, os plug -ins de transformação receberão essas entradas e poderão modificar, filtrar, anexar ou transformar de qualquer maneira na lista de postagens.

Consulte Plugins & LifeCyle Design Document.