Pular para o conteúdo principal

Instalação

Este documento descreve o processo de instalação e configuração do tema SGM para desenvolvimento.

Pré-requisitos​

  • Omeka S versão ^4.0.0 instalado e funcionando
  • Node.js e npm instalados
  • Módulo SGMBlocks instalado para blocos customizados
  • Editor de código
  • Conhecimento básico de PHP, CSS e JavaScript

Setup inicial​

1. Clonar o tema​

Clone o repositório do tema SGM para o diretório de temas do Omeka S:

git clone <url-do-repositorio> themes/sgm

2. Instalar dependências​

cd themes/sgm
npm install

Dependências instaladas:

  • @tailwindcss/cli: CLI do Tailwind CSS v4
  • tailwindcss: Framework CSS

3. Compilar CSS​

Modo desenvolvimento: Compila o CSS em modo watch, recompilando ao salvar arquivos:

npm run dev

Modo produção: Gera versão otimizada e minificada do CSS:

npm run build:css

Atenção: caminho de saída do build​

O script build:css no package.json emite o arquivo output.css na raiz do tema, mas o layout.phtml carrega asset/output.css. O script dev emite corretamente para ./asset/output.css. O script build:css precisa de correção para alinhar com o esperado pelo tema.

Caminho esperado pelo tema:

asset/output.css

Caminho atual do build de produção:

./output.css  # na raiz do tema

Para resolver manualmente após o build de produção, copie o arquivo gerado:

cp output.css asset/output.css

Estrutura de pastas​

sgm/
├── asset/                    # Assets estáticos
│   ├── css/                  # CSS compilado e bibliotecas
│   ├── js/                   # JavaScript customizado
│   │   ├── custom.js         # JS customizado em Vanilla JS
│   │   └── thedaily.js       # JS legado do tema The Daily em jQuery
│   ├── img/                  # Imagens
│   ├── styles/               # Fontes CSS do Tailwind
│   │   ├── input.css         # Entry point
│   │   ├── partials.css      # Importador de partials
│   │   └── partials/         # Partials CSS organizados
│   └── output.css            # CSS compilado
├── config/                   # Configurações
│   └── theme.ini             # Configurações do tema
├── view/                     # Templates PHP
│   ├── layout/               # Layout principal
│   │   ├── layout.phtml      # Shell HTML base
│   │   └── page-render/      # Helpers de renderização de página
│   ├── common/               # Componentes reutilizáveis
│   │   ├── block-layout/     # Templates de blocos SGMBlocks
│   │   ├── resources/        # Partials de recursos
│   │   └── *.phtml           # Partials e componentes comuns
│   └── omeka/                # Templates específicos do Omeka
│       └── site/             # Views do site público
├── package.json              # Dependências npm
└── README.md                 # README principal