Jigsaw - Gerador de sites estáticos em PHP
Tags: php, laravel, blade, staticsite
Published: 2019-12-07 14:14:41

# Introdução

Jigsaw é um framework baseado em Laravel que gera site estático em PHP. Foi desenvolvido pela empresa Tighten em maio de 2015, possui uma boa documentação e a comunidade é bem ativa.
Trata-se de uma aplicação que você pode utilizar em seu computador e que tem como saída os arquivos estáticos como: HTML, CSS e JavaScript.
Seu deploy pode ser feito em qualquer servidor web que provê conteúdo estático e se não quiser ter custos, pode publicar no GitHub Pages.

# Iniciando um projeto
Para iniciar um projeto com Jigsaw é bem simples! Primeiro você deve abrir o terminal, criar uma pasta com o nome do seu projeto e em seguida acessar sua pasta. Para isso digite os seguintes comandos:

```shell
mkdir my-site && cd my-site
```
## Instalando Jigsaw com Composer

Vamos utilizar o Composer (gerenciador de dependências do PHP) para fazer a instalação do Jigsaw no nosso projeto.

```shell
composer require tightenco/jigsaw
```
## Inicializando o projeto

```shell
./vendor/bin/jigsaw init
```
Após iniciar o projeto você terá a seguinte estrutura de pastas:
![](https://raw.githubusercontent.com/DaianeAlvesRJ/imagens/master/jigsaw/estrutura-pastas.png)
## Desenvolvimento - servidor local

Você pode acompanhar o desenvolvimento do site acessando o localhost:8000 após rodar o build e em seguida o serve.  
Sempre que fizer alguma alteração e quiser acompanhar terá que rodar o build pois ele não carrega automaticamente as alterações.

```shell
./vendor/bin/jigsaw build

./vendor/bin/jigsaw serve
```
## Compilando com Laravel Mix

Você também pode usar o Laravel para compilar e visualizar as alterações automaticamente utilizando o Browsersync. Para isso precisa instalar o NPM.

```shell
npm install
```
Depois disso digite o seguinte comando:

```shell
npm run watch
```

Desta maneira o Browsersync abrirá automaticamente uma nova guia do navegador e recarregará a página toda vez que você fizer uma alteração. Muito útil para visualizar suas alterações rapidamente!

## Tipos de conteúdo

Todo o conteúdo do seu site deve ser armazenado na pasta source. O Jigsaw permite criar arquivos usando vários formatos, como:

-   Laravel's Blade
    
-   Markdown
    
-   Ou vários outros tipos de arquivo
    

### Laravel's Blade

Também é possível criar sites usando Blade que é o sistemas de templates padrão do Laravel. Para isso, basta criar seus arquivos na pasta source como `[nome_do_arquivo].blade.php`
Você pode conferir como funciona o Blade na [documentação oficial do Laravel](https://laravel.com/docs/5.8/blade).

### Markdown

Para este tutorial, optei por mostrar como criar os arquivos usando Markdown.

Markdown é uma linguagem de marcação desenvolvida por John Gruber e Aaron Swartz. Ela é projetada para que textos simples possam ser convertidos em HTML e muitos outros formatos.

Com ela é possível marcar títulos, listas, tabelas, etc., de forma muito mais limpa, legível e precisa, do que se fosse fazer com HTML que é muito verboso.

## Configurações do site

Uma maneira de agilizar o trabalho é definindo variáveis de configuração do site. Imaginem que, por exemplo, o e-mail esteja disponível em diversas partes do site e que por algum motivo você tenha que alterar. Você até poderia utilizar um find/replace, mas com o Jigsaw é muito simples. Basta adicionar o email no array do arquivo `config.php` que será acessível em todo projeto, como uma propriedade do objeto `$page`.

Por exemplo, se o seu `config.php` estiver assim:

```php
<?php

return [
    'contact_email' => 'support@example.com',
];
```

Você pode usar essa variável em qualquer arquivo do site, assim:

```php
@extends('_layouts.master')

@section('content')
    <p>Entre em contato {{ $page->contact_email }}</p>
@stop
```

## Helpers

Além de armazenar variáveis no arquivo `config.php`, podemos definir `helpers` adicionando uma chave com o nome da função. Os helpers são chamados referenciando o nome do método no objeto `$page` em qualquer arquivo.

Por exemplo, você pode adicionar um método que identifica se a página atual pertence a uma seção específica, para realçar a seção atual em um menu:

Essa função é acessível chamando `$page->selected("url-da-pagina")` de qualquer página.

Veja o exemplo:
```php
<?php

return [
    'company' => 'Lyseon Tech',
    'selected' => function ($page, $section) {
        return str_contains($page->getPath(), $section) ? 'selected' : '';
    },
];
```
Depois disso, dentro do diretório `source`, crie a pasta `_partials` (nela você pode dividir o seu site em partes como menu e footer). Agora, podemos criar um menu que destaque se uma página está selecionada, para isso crie o arquivo: `_menu.blade.php` e nele coloque o seguinte código:

```css
<style>
.selected{
  font-weight: bold;
  color: red;
}
</style>

<a class="{{ $page->selected('about') }}"
    href="{{ $page->baseUrl }}/about">Sobre nós</a>
<a class="{{ $page->selected('projects') }}"
    href="{{ $page->baseUrl }}/projects">Projetos</a>
<a class="{{ $page->selected('posts') }}"
    href="{{ $page->baseUrl }}/blog">Blog</a>

```
Ps: Ignore o style junto com o html, usei apenas para exemplificar.
No arquivo ``_layouts/master.blade.php`` inclua o menu digitando `@include('_partials._menu')`
E por último, para que você consiga ver seu menu funcionando, é preciso criar um arquivo no diretório `source`, nesse exemplo criei o arquivo `about` (Sobre nós).
Prontinho! Se estiver usando o Browsersync você já consegue ver o menu funcionando no seu navegador.


## Collections
O Jigsaw fornece recursos trabalhar com collections. As collections podem ser usadas para gerar páginas como por exemplo de postagens de blog ou artigos. Pode ser usada também para incorporar blocos de conteúdo de uma página, como biografias da equipe, descrições de produtos ou um portfólio de projetos.

Para criar uma collection é bem simples, crie uma chave chamada collections no array de configuração do arquivo `config.php` . Cada collection deve ser indicada pelo nome da collection (normalmente, no plural), seguido por um array de configurações.
Veja o exemplo a seguir:

```php
<?php

return [
    'company' => 'Lyseon Tech',
    'contact_email' => 'support@tighten.co',
    'collections' => [
        'posts' => [
            'path' => 'blog/{date|Y-m-d}/{filename}',
            'author' => 'Daiane',
        ],
    ],
];
```

### Layout das páginas de post
Crie o arquivo `post.blade.php` dentro da pasta `_layouts` e chamar as variáveis que foram definidas no seu arquivo `config.php`

```php
@extends('_layouts.master')

@section('body')
    <h1>{{ $page->title }}</h1>
    <p>By {{ $page->author }} • {{ date('F j, Y', $page->date) }}</p>

    @yield('content')

    <p>Total de {{ $posts->count() }} posts</p>

    <p>Listagem:</p>
    <ul>
    @foreach ($posts as $post)
        <li>
          <a class="{{ $page->selected($post->_meta->url[0]) }}" href="{{$post->_meta->url[0]}}">{{ $post->title }}</a>
        </li>
    @endforeach
    </ul>

@endsection
```

### Pasta para armazenar os posts
Crie a pasta `_post` dentro da pasta `source`

### Criando um item em uma Collection
Na pasta pasta `_post` criaremos nosso primeiro post em markdown para isso crie um arquivo `[nome_do_arquivo].md` seguindo o modelo abaixo:

```markdown
---
extends: _layouts.post
title: Meu primeiro Post
author: Daiane
date: 2017-03-23
section: content
---

Jigsaw é um poderoso gerador de **site estático** em PHP!
```

### Sumário da collection `posts`
Para termos um sumário de posts em ´/blog´, crie na raiz da pasta source o arquivo `blog.blade.php` conforme a raiz do path informado na collection posts no arquivo de configuração do site.

```php
@extends('_layouts.master')
@section('body')
<ul>
  @foreach ($posts as $post)
    <li><a href="{{$post->_meta->url[0]}}">{{ $post->title }}</a></li>
  @endforeach
</ul>
<h1>Listagem de posts</h1>
@endsection
```


E assim temos nosso site utilizando Jigsaw.

## Veja também:
![documentaçãção do Jigsaw](https://jigsaw.tighten.co/docs)

Se quiser conferir esse projeto no meu GitHub ![clique aqui](https://github.com/DaianeAlvesRJ/Jigsaw)