11tyby

11tyby

Организованный 11ty Cowerplate, чтобы быстро работать. Особенности TypeScript, нативная поддержка JSX через модули Preact, CSS с SASS, четко определенная конфигурация WebPack для Great DX и все предварительно оптимизированные для производительности.

Демо: https://11tyby.netlify.app/

Почему

Получение настройки с необходимым инструментом для обработки TypeScript, JSX, Dynamic Imports, SASS и т. Д. Занимает много времени. Этот проект также имеет частичную гидратация, чтобы уменьшить количество кода, отправленного вашим пользователям.

Структура

Проект структурирован с помощью шаблона модуля, файлы сгруппированы с помощью функции, например ./src/modules/home . Это позволяет вам лучше подтвердить ваше приложение по мере его роста, и локализовать код, где оно необходимо. Ваша страница *.11ty.tsx Файлы находятся в соответствующей папке функций и экспортируют свойство permalink , чтобы вы могли определить их структуру URL, например:

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

Стиль

11tyby поставляется предварительно установлен с поддержкой модулей CSS и SASS. У вас есть два варианта для импорта, глобально или локализованы. Чтобы преобразовать файл SASS или CSS в модуль CSS, вам необходимо применить .module Модуль в ваш файл, например, login.module.css . Затем вы можете импортировать это непосредственно в компонент:

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

/*[...]*/

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

Чтобы импортировать стили по всему миру, просто добавьте оператор не возвращающегося импорта в файл, из которого вы хотите загрузить его, например:

 import './global.css' ;

/*[...]*/

Чтобы применить сгенерированный лист стиля на страницу, вам нужно добавить свойство cssPath в объекте данных, экспортируемого из ваших *.11ty.tsx , например:

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

/*[...]*/

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

Путь будет соответствовать соответствующей папке модуля, и имя отражает имя вашего имени файла *.11ty.tsx но с расширением CSS.

Увлажнение

11tyby включает в себя пакет, посвященный применению частичной гидратации. Это работает как HOC, завершая компонент, который вы хотите увлажнить на клиенте. Вы можете применить это следующим образом:

 import { define } from 'preactement' ;

/*[...]*/

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

/*[...]*/

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

/*[...]*/

export { Form } ;

Рекомендуется создавать компоненты в их собственной папке и применить эту функцию в файле index.ts внутри. Таким образом, вы можете отделить любые «преобразования», которые компонент может понадобиться во время выполнения с самим компонентом, вы можете увидеть пример здесь.

После того, как у вас есть гидратированный компонент, вам нужно импортировать его в файл «вход». Они суффиксу ./src/home/home.entry.ts .entry

Файл входа должен импортировать ваши гидратированные компоненты, например:

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

Этот файл затем ссылается в вашем файле *.11ty.tsx , передав его в объект data , экспортированный из вашего компонента, например:

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

/*[...]*/

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

Для рабочего примера взгляните на home модуль здесь.

Данные

Все официальные 11ty методы для сбора данных из API или иного, будут работать здесь. Есть много замечательных примеров того, как сделать это в официальной документации 11ty, включая использование GraphQL: https://www.11ty.dev/docs/data-js/.

Чтобы определить глобальные данные, добавьте файлы JSON, JS или TypeScript в папку ./src/data . Затем они будут проанализированы на 11Ty и добавлены через каскад данных. Вы можете получить доступ к ним непосредственно в ваших файлах .11ty.ts* .

Например, если бы вы добавили файл global.ts в ./src/data , вы бы получили это через global свойство в объекте аргументах своих страниц:

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

/*[...]*/

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

Чтобы добавить локальные данные, например, данные, специфичные для модуля, добавьте файл суффикс с .data в соответствующей папке модуля. Затем это будет доступно точно так же, как показано выше, но только для этой страницы. Например, ./src/modules/home вы 11ty.tsx home.data.ts

Установка

1. Клоуна или загрузка репозитория

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

2. Установите зависимости проекта

yarn

Разработка

yarn start

Построить производство

yarn build