Skip to content

Latest commit

 

History

History
67 lines (49 loc) · 2.72 KB

README.md

File metadata and controls

67 lines (49 loc) · 2.72 KB

HitssBlog

Exemplo usando NuxtJS de um workflow de gerenciamento de conteúdo.

Características

Esse projeto é apenas uma demonstração. Não usa nenhuma integração com banco de dados, no entanto possui uma pequena API para exemplificar o usu dos recursos SSR do Nuxt3.

Destaques

  • Nuxt 3: O projeto usa Nuxt3
  • Nuxt Layers: Este projeto usa Nuxt Layers, utilizando uma biblioteca de componentes para facilitar a criação de layouts. NUXT LAYOUT COMPOSITIONS. Esta biblioteca é altamente inspirada no conceito de "Intrinsic Layouts" e seus componentes inspirados nas ideias de EVERY LAYOUT
  • CSS Preprocessor: Este projeto utiliza Stylus como pré-processador, o qual sou entusiasta e sponsor. A sintaxe é pythonica e é praticamente a mesma do SASS.
  • Template engine: Este projeto utiliza PUG por facilitar a escrita de HTML.

Workflow

Login

É necessário fazer login para acessar o sistema. Você pode utilizar qualquer um desses usuários.

Estes usuários estão registrados no arquivo /Data/users.ts

Pagina inicial

A página inicial mostrará uma lista de posts pré-definidos. O link para cada post não foi implementado por não agregar ao desafio. Para administrar os posts, clique no botão Admin na barra azul superior.

Admin

A Página de Admin mostrará a lista de posts mas com os botões de ação necessários para gerenciar os posts.

  • Nova Postagem: Levara a página de adicionar post. Nela você encontrará o formulário para adicionar um post. Alguns campos, como a imagem do post foram omitidos por não agregarem valor ao desafio.
  • Excluir: Este botão exclui imediatamente o post. Não foi implementada nenhuma confirmação.
  • Editar: Este botão levará à página de edição do post levando em consideração seu ID.

Os dados estão sendo persistidos no Pinia e em sessionStorage.

Logout

Para sair do sistema, clique no botão Logout na barra azul superior.

Instalação

Depois de clonar o repositório rode os seguintes comandos.

pnpm install && pnpm dev

Para testar em um celular na rede digite

pnpm dev --host

E siga a URL local criada.

É possivel rodar o projeto usando npm ou yarn. Para usar o pnpm não esqueça de adicionar no seu arquivo .npmrc a entrada:

shamefully-hoist=true

Requisitos

  • Node v18 ou superior

Algumas extensões recomendadas seguem na pasta .vscode caso use este editor.