11tyby

11Tyby

Um caldeira 11ty organizado para colocá -lo em funcionamento rapidamente. Recursos TypeScript, suporte nativo JSX via PREACT, módulos CSS com SASS, uma configuração WebPack bem definida para Great DX e todos pré-otimizados para o desempenho.

Demo: https://11tyby.netlify.app/

Por que

Obter a configuração com as ferramentas necessárias para lidar com o TypeScript, JSX, importações dinâmicas, SASS etc. consome tempo. Este projeto também possui hidratação parcial para reduzir a quantidade de código enviado para seus usuários.

Estrutura

O projeto é estruturado através do padrão do módulo, os arquivos são agrupados por meio de recurso, por exemplo , ./src/modules/home . Isso permite melhorar a prova futura do seu aplicativo à medida que cresce e localize o código onde for necessário. Sua página *.11ty.tsx Os arquivos residem na pasta de recursos relevantes e exporte uma propriedade permalink para você definir sua estrutura de URL, por exemplo:

 module . exports = {
  render : Page ,
  data : ( ) => ( {
    permalink : '/my-feature/index.html' ,
  } ) ,
} ; 

Estilo

O 11Tyby vem predefinido com suporte para módulos e SASS CSS. Você tem duas opções para importar estilos, globalmente ou localizado. Para converter um arquivo SASS ou CSS em um módulo CSS, você precisará aplicar um sufixo .module ao seu arquivo, por exemplo, login.module.css . Você pode importar isso diretamente para um componente:

 import style from './login.module.scss' ;

/*[...]*/

function Login ( ) {
  return < form class = { style . form } > /*[...]*/ </ form > ;
}

Para importar estilos globalmente, basta adicionar uma declaração de importação não devolvida ao arquivo do qual você deseja carregá -los, por exemplo:

 import './global.css' ;

/*[...]*/

Para aplicar a folha de estilo gerado a uma página, você precisará adicionar uma propriedade cssPath no objeto de dados exportado dos seus arquivos *.11ty.tsx , por exemplo:

 function Page ( ) {
  return < main class = { style . wrapper } > { /*[...]*/ } </ main > ;
}

/*[...]*/

module . exports = {
  render : Page ,
  data : ( ) => ( {
    permalink : 'index.html' ,
    cssPath : 'login/login.11ty.css' , // <----
  } ) ,
} ;

O caminho corresponderá à respectiva pasta do módulo e o nome refletirá o do seu nome de arquivo *.11ty.tsx mas com uma extensão CSS.

Hidratação

11Tyby inclui um pacote dedicado à aplicação de hidratação parcial. Isso funciona como um hoc, envolvendo o componente que você deseja hidratar no cliente. Você pode aplicar isso da seguinte maneira:

 import { define } from 'preactement' ;

/*[...]*/

function MainForm ( ) {
  return < form > /*[...]*/ </ form > ;
}

/*[...]*/

const Form = define ( 'main-form' , ( ) => MainForm ) ;

/*[...]*/

export { Form } ;

É recomendável que você crie componentes dentro de sua própria pasta e aplique essa função em um arquivo index.ts dentro. Dessa forma, você pode separar qualquer "transforma" que o componente possa precisar em tempo de execução com o próprio componente, você pode ver um exemplo aqui.

Depois de ter um componente hidratado, você precisará importá -lo para um arquivo de "entrada". Estes são sufixos com .entry e devem ser colocados dentro de sua respectiva pasta de módulo, por exemplo , ./src/home/home.entry.ts .

O arquivo de entrada precisa importar seus componentes hidratados, por exemplo:

 import '@/modules/home/components/form' ;

Este arquivo é referenciado no seu arquivo *.11ty.tsx , passando -o para o objeto data exportado do seu componente, por exemplo:

 /*[...]*/
function Page ( ) {
  return < main > { /*[...]*/ } </ main > ;
}

/*[...]*/

module . exports = {
  render : Page ,
  data : ( ) => ( {
    permalink : 'index.html' ,
    jsPath : 'home/home.entry.js' , // <----
  } ) ,
} ;

Para um exemplo de trabalho, dê uma olhada no módulo home aqui.

Dados

Todos os métodos oficiais 11ty para coletar dados de uma API ou não, funcionarão aqui. Existem muitos ótimos exemplos de como fazer isso na documentação oficial 11ty, incluindo o uso do GraphQL: https://www.11ty.dev/docs/data-js/.

Para definir dados globais , adicione arquivos JSON, JS ou TypeScript à pasta ./src/data . Estes serão analisados ​​por 11ty e adicionados através da cascata de dados. Você pode acessá -los diretamente nos seus arquivos .11ty.ts* .

Por exemplo, se você adicionar um arquivo global.ts a ./src/data , você acessaria isso por meio de uma propriedade global em suas páginas, objeto de argumento:

 interface IProps {
  global : {
    title : string ;
  } ;
}

/*[...]*/

function Page ( { global } : IProps ) {
  return (
    < main >
      < h1 > { global . title } </ h1 >
    </ main >
  ) ;
}

Para adicionar dados locais, por exemplo, dados específicos a um módulo, adicione um sufixo de arquivo com .data na pasta do módulo relevante. Isso será acessível exatamente da mesma maneira, como mostrado acima, mas apenas para essa página. Por exemplo, se você adicionou home.data.ts a ./src/modules/home , seu arquivo home 11ty.tsx teria acesso aos valores mantidos nesse arquivo de dados.

Instalação

1. Clone ou faça o download do repositório

git clone [email protected]:jahilldev/11tyby.git

2. Instale as dependências do projeto

yarn

Desenvolvimento

yarn start

Construir produção

yarn build