Nodoku é um conjunto de bibliotecas que permite construir sem esforço uma landing page ou um site estático
Nodoku é um framework baseado em NextJS , React e Tailwind .
O Nodoku está usando os recursos subjacentes do NextJS de renderização do lado do servidor (SSR).
O mecanismo Nodoku analisa o arquivo Markdown fornecido em blocos de conteúdo.
Em seguida, ele renderiza cada bloco usando a configuração fornecida no arquivo Yaml, chamado skin .
Caminho Nodoku
Nodoku sugere uma maneira simples de criar landing pages centradas em conteúdo, usando Markdown e Yaml
Passo 1: Pense
Crie conteúdo promovendo seu produto ou serviço como um arquivo MD
Concentre-se no assunto do seu produto/serviço para destacar suas vantagens.
Use seu editor de texto favorito para criar um arquivo MD (markdown) rico em conteúdo, sem se preocupar com a apresentação.
Usando o delimitador de bloco de conteúdo - um trecho de código Yaml - estruture o arquivo de conteúdo para que ele possa ser enviado ao analisador Nodoku.
Passo 2: Pele
Skin do arquivo MD usando configuração Yaml simples e componentes disponíveis
Quando estiver satisfeito com a mensagem que sua landing page transmite, comece a personalizá-la.
O skin Nodoku é um arquivo Yaml, que une seções no seu arquivo MD, com os blocos de apresentação.
Você pode escolher entre diferentes componentes de apresentação, incluindo Carrossel, Herói e diferentes tipos de componentes de Cartão.
Etapa 3: ajuste fino
Use opções de configuração para ajustar a apresentação da sua landing page
Se a apresentação padrão não atender às suas necessidades, você pode ajustá-la usando as opções de configuração de cada componente para ajustá-la às suas necessidades.
Você pode alterar a cor de fundo, a cor do texto, as bordas e outros detalhes visuais da sua apresentação.
Normalmente, os componentes do Nodoku oferecem suporte ao Tailwind CSS pronto para uso, então você pode ajustar a predefinição virtual usando o Tailwind.
Aqui está um exemplo
Suponha que você esteja criando uma landing page de produto
Criar um arquivo MD
crie um arquivo de conteúdo Markdown, descrevendo seu produto
# Title of my awesome product
## Subtitle of my awesome product
Description of my product.
And another line of description.
Rascunhe um arquivo Yaml de skin
rascunhe um arquivo Yaml configurando a representação visual
rows:
- row:
components:
- mambaui/hero-left-text:
selector:
attributes:
id: product-1
E aqui está o resultado
Título do meu produto incrível
Legenda do meu produto incrível
E sim!
Todo este site foi gerado com o Nodoku!
Confira o código fonte desta página em
https://github.com/epanikas/nodoku-demo-page
Por que você gostaria de experimentar o Nodoku
Abordagem de conteúdo prioritário e sem distrações
Ao contrário do Nodoku, a grande maioria dos criadores de sites usa a abordagem WYSIWYG (What You See Is What You Get), quando o site é construído gradualmente, preenchendo os formulários da web diretamente nos elementos visuais.
Embora essa abordagem forneça uma impressão visual muito rápida da sua página futura, ela tem uma grande desvantagem: ela distrai muito.
O Nodoku sugere uma abordagem diferente: você cria o conteúdo primeiro .
O conteúdo é criado em forma textual em um arquivo Markdown e, neste momento, nada mais importa .
Conteúdo e apresentação são estritamente separados
O Nodoku promove uma separação rigorosa entre o conteúdo e a apresentação, permitindo bastante flexibilidade, quando um pode ser alterado sem afetar o outro.
Essa abordagem é ilustrada pelo fato de que o conteúdo e o design são representados por arquivos diferentes: arquivo Markdown para conteúdo e arquivo Yaml - chamado skin - para apresentação visual.
Manter o conteúdo e os conceitos de design estritamente separados permite a edição independente de ambos, sem se preocupar com o impacto que um pode ter no outro.
Localização multilíngue integrada
O Nodoku foi projetado desde o início tendo em mente a necessidade de localização do conteúdo.
O conteúdo no Nodoku é representado por um conjunto de blocos de conteúdo , cada um dos quais é uma parte separada do conteúdo (geralmente um parágrafo ou um título).
O conteúdo se torna facilmente localizável, pois cada bloco de conteúdo tem sua chave exclusiva.
Esta chave pode naturalmente ser usada como uma chave de tradução , que pode ser integrada com a solução de localização de sua escolha.
Confira nodoku-i18n para mais detalhes.
Os componentes do Nodoku são naturalmente responsivos
Cada componente do Nodoku é cuidadosamente criado para ser apresentado corretamente em qualquer dispositivo de navegação.
Os conjuntos de componentes Nodoku atualmente disponíveis, Nodoku-Flowbite e Nodoku-MambaUI, baseados nos conjuntos de blocos visuais Flowbite e Mamba UI , respectivamente, são todos responsivos para fornecer a melhor experiência ao usuário .
A skin do Nodoku - um arquivo Yaml que fornece personalização visual - é baseada no mecanismo de estilo CSS do Tailwind, que oferece grandes possibilidades de ajuste de design responsivo.
Layout, baseado em CSS grid ou CSS flex
Uma página do Nodoku é organizada como um conjunto de linhas , cada linha tendo um ou mais componentes visuais.
Esse layout orientado por linhas proporciona uma compreensão clara da estrutura da sua página e um posicionamento previsível dos elementos visuais.
Por padrão, cada linha em uma página do Nodoku usa uma grade CSS para organizar os elementos internos da linha.
No entanto, o layout de uma linha pode ser alterado para CSS flex , se necessário.
Isso permite, dependendo de suas necessidades específicas, adaptar o layout que melhor atende às suas necessidades.
Otimizado para SEO, graças à renderização do lado do servidor
O Nodoku usa renderização do lado do servidor, com tecnologia do framework NextJS .
Todas as páginas do Nodoku são pré-criadas com antecedência durante o processo de construção offline.
Isso permite não apenas o carregamento rápido da página, mas também a otimização para mecanismos de busca , já que cada página está prontamente disponível e pode ser escaneada pelos mecanismos de busca facilmente.
Não é necessário executar nenhum código Javascript antes que a página seja escaneada pelo mecanismo de busca da web.
Consequentemente, toda a página se torna naturalmente amigável ao SEO .
Extensível com novos componentes visuais
O framework Nodoku é extensível por design, já que é o usuário final que controla o mapeamento entre os componentes visuais e a configuração do skin Yaml.
O Nodoku está usando o chamado provedor de componentes - uma função que retorna uma representação visual do componente de acordo com a descrição do arquivo de skin Yaml.
Esta implementação é responsável pela renderização final do componente, usando o tema e a localização.
Consequentemente, o usuário final pode facilmente estender o conjunto existente de componentes com componentes personalizados, conforme necessário.
Os mesmos cartões podem ser apresentados como o componente Carrossel
É só uma questão de configuração da pele
rows:
- row:
components:
- flowbite/carousel:
selector:
attributes:
sectionName: advantages
