Criando primeiro seu tema Frontity

No post anterior sobre Frontity vimos como criar o nosso primeiro projeto agora vamos com criar nosso primeiro tema totalmente customizado, caso não conheça o projeto confira o post que fiz uma introdução sobre o framework react. Para esse tutorial o primeiro passo é ir na pasta de nosso projeto e criar um novo pacote para nosso tema executando o seguinte comando em nosso terminal:

npx frontity create-package [nome-do-pacote]Code language: JavaScript (javascript)

O comando irá criar uma pasta com o nome do pacote que especificamos dentro da pasta packages, lá iremos armazenar todos os pacotes locais responsáveis pela funcionalidades e exibição do conteúdo o nosso site. Em outras palavras podemos chamar do tema de nossa aplicação se olharmos para o Frontity como uma aplicação wp.

Criando um novo projeto com frontity

Para o nosso projeto irei criar o pacote tutorial-fellyph o código será o seguinte:

npx frontity create-package tutorial-fellyph

O comando irá criar a seguinte estrutura dentro da pasta packages:

|__ packages/
    |__ fellyph-tutorial/
        |__ package.json
        |__ src/
            |__index.js

Package.json

Contém as configurações do tema como nome do nosso pacote, descrição e dependências:

{
  "name": "tutorial-fellyph",
  "version": "1.0.0",
  "description": "package created using the Frontit CLI.",
  "keywords": [
    "frontit",
    "frontit-tutorial-fellyph"
  ],
  "license": "Apache-2.0",
  "dependencies": {
    "frontity": "^1.11.1"
  }
}Code language: JSON / JSON with Comments (json)

Arquivo principal de nosso tema

O arquivo index.js será o arquivo de entrada do nosso pacote/tema e irá conter a seguinte código:

import React from "react";

const Root = () => {
  return (
    <>
      You can edit your package in:
      <pre>packages/tutorial-fellyph/src/index.js</pre>
    </>
  );
};

export default {
  name: "tutorial-fellyph",
  roots: {
    tutorial-fellyph: Root
  },
  state: {
    tutorial-fellyph: {}
  },
  actions: {
    tutorial-fellyph: {}
  }
};
Code language: JavaScript (javascript)

Temos nosso componente principal e as principais configurações do nosso tema:

• roots: aponta para nosso componente raiz
• state: contém todos as variáveis armazenadas no estado de nossa aplicação.
• actions: contém todas as ações compartilhadas em nosso tema.

Agora o próximo passo será ativar nosso novo tema e para isso precisamos alterar o nosso arquivo de configurações frontity.settings.js:

const settings = {
  "name": "frontity-tutorial",
  "state": {
    "frontity": {
      "url": "blog.fellyph.com.br",
      "title": "Blog Frontity Fellyph Cintra",
      "description": "Theme created to the frontity tutorial"
    }
  },
  "packages": [
    {
      "name": "tutorial-fellyph"
    },
    {
      "name": "@frontity/wp-source",
      "state": {
        "source": {
          "api": "https://blog.fellyph.com.br/wp-json"
        }
      }
    },
    "@frontity/tiny-router",
    "@frontity/html2react"
  ]
};

export default settings;
Code language: JavaScript (javascript)

Se tudo der certo o resultado será o seguinte:

Agora que temos nosso tema rodando e para alterar o conteúdo podemos alterar o componente Root dentro de nosso index.js. Mas para esse tutorial vamos mover e substituir nosso componente Root para um arquivo separado, nesse caso dentro da pasta tutorial-fellyph/src vamos criar uma pasta components lá iremos criar um arquivo chamado index.js, ele será responsável pelo esqueleto principal de nosso projeto, esse arquivo pode ter qualquer nome mas vamos seguir uma conversão para nos ajudar no futuro.

Agora movendo o código para o arquivo src/components/index.js o nosso código ficará da seguinte forma:

import React from 'react';

const Theme = () => {
    return (
        <h1>Nosso Primeiro tema com Frontity</h1>
    );
  };

export default Theme;
Code language: JavaScript (javascript)

Modifiquei o nome do componente de Root para Theme e alterei o conteúdo para um h1. Já o src/index.js da seguinte forma:

import Theme from "./components/index";

export default {
  name: "tutorial-fellyph",
  roots: {
    "tutorial-fellyph": Theme,
  },
  state: {
    "tutorial-fellyph": {}
  },
  actions: {
    "tutorial-fellyph": {}
  }
};
Code language: JavaScript (javascript)

Agora conectamos os dois items, importando e adicionando o componente Theme a propriedade roots.

Lendo informações do WordPress

Até então ainda não lemos nenhuma informação de nossa aplicação WordPress, quando configuramos o nosso projeto dentro da lista de pacotes temos a configuração de wp-source ele será responsável por adicionar os dados do WordPress em nosso estado, se você trabalha com React o conceito estado é algo comum, caso contrário você pode conferir a documentação do react:

   {
      "name": "@frontity/wp-source",
      "state": {
        "source": {
          "api": "https://blog.fellyph.com.br/wp-json"
        }
      }
    },Code language: JavaScript (javascript)

Como podemos ver atribuímos a fonte de nosso conteúdo no estado de nossa aplicação com isso a vantagem de trabalhar com frontiy é que ele irá cuidar de fazer a configuração e filtros em diferentes requisições de conteúdo.

O pacote wp-source possui uma série de funcionalidades onde podemos abordar em mais detalhes no futuro. Mas já com as configurações atuais, podemos acessar esses dados e inspecionar via console no Chrome devTools ou qualquer browser moderno:

Como podemos ver o state retorna um Objeto do tipo Proxy, ele permite criar uma um proxy para um outro objeto com operações fundamentais nele temos dois parâmetros:

• target: O objeto que contém os dados.
• handler: As possíveis operações que conseguimos realizar sobre objeto target.

Dentro de target temos quatro valores:

• frontity: configurações do nosso projeto como url principal e nome do projeto
• router: ferramenta de controle de rotas do frontity
• source: os dados vindos da consulta do wp-source
• tutorial-fellyph: dados a referente ao nosso tema

Agora vamos ler algumas informações em nosso arquivo principal Theme para isso precisamos conectar nosso vamos utilizar o método connect do Frontity da seguinte forma:

import React from 'react';
import { connect } from 'frontity';

const Theme = ({state}) => {
    return (
      <>
        <h1>Nosso Primeiro tema com Frontity</h1>
        <p>URL Atual: {state.router.link}</p>
        <p>Autor: {state.source.author[1].name}</p>
      </>
    );
  };

export default connect(Theme);Code language: JavaScript (javascript)

Assim temos o seguinte resultado:

Para acessar os dados de forma mais elegante podemos vamos utilizar dois métodos get para quando temos os dados disponíveis em nosso estado and fetch quando queremos fazer uma requisição http a essa informação. Esses métodos estão disponíveis tanto em nosso router quando em nosso wp-source.

Por exemplo, podemos acessar nosso source e utilizar o método “get” para acessar as informações da página atual da seguinte forma e na sequência acessa a lista de post relacionados:

import React from 'react';
import { connect } from 'frontity';

const Theme = ({state}) => {
  const data = state.source.get(state.router.link);
  
  return (
    <>
      <h1>Nosso Primeiro tema com Frontity</h1>
      <p>URL Atual: {state.router.link}</p>
      <p>Autor: {state.source.author[1].name}</p>
      { data.items.map( item => {
        const post = state.source.post[item.id]
        return (
          <article key={post.id}>
            <h2>{post.title.rendered}</h2>
          </article>
        )
      })

      }
    </>
  );
};

export default connect(Theme);Code language: JavaScript (javascript)

Com o código acima acessamos os dados do post e realizamos um loop utilizando a função map para acessar item a item assim acessamos os dados do post com state.source.post[item.id] e na sequência retornamos uma article com o título do post.

Dentro do objeto post conseguimos acessar uma série dados como:

• categories
• date
• excerpt
• id
• link
• status
• sticky
• tags
• title
• type

Entre outras informações, o resultado visual é bem simples pois não estamos utilizando nenhum estilo até o momento:

Agora temos o nosso primeiro tema com Frontity exibindo uma listagem de posts na home. Vamos finalizando esse post por aqui mas teremos uma continuação com mais customizações em nosso tema.

Caso queira acompanhar mais conteúdo sobre WordPress você pode conferir meu canal no youtube ou acessar a página da categoria WordPress.