Gatsby — это популярный фреймворк React, используемый для создания веб-страниц и приложений. В его конструкции приоритетами являются безопасность, масштабируемость и производительность. Gatsby поддерживается большой экосистемой, которая включает в себя плагины для интеграции сервисов, темы для простой настройки и рецепты для автоматизации рутинных задач. В этом руководстве вы узнаете, как создать тему в Gatsby с помощью Stitches.
Чтобы начать работу с этим учебником, убедитесь, что у вас есть следующее
- установлен Node.js версии 14 или более поздней
- установлен менеджер пакетов yarn.
- Предварительные знания о Stitches
- Предварительные знания о Gatsby
Что такое Stitches?
Stitches — это фреймворк React, который позволяет уверенно создавать и стилизовать многократно используемые компоненты. Он включает в себя поддержку других фреймворков, таких как Vue, Svelte и Vanilla HTML.
Stitches был создан, чтобы помочь разработчикам избежать ненужных интерполяций реквизитов во время выполнения, тем самым повышая производительность приложения. Давайте начнем с создания нового приложения Gatsby.
gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world
Приведенная выше команда клонирует стартовое приложение Gatsby со следующей структурой папок.
📦gatsby-site
┣ 📂src
┃ ┗ 📂pages
┃ ┃ ┗ 📜index.js
┣ 📂static
┃ ┗ 📜favicon.ico
┣ 📜.gitignore
┣ 📜.prettierignore
┣ 📜.prettierrc
┣ 📜LICENSE
┣ 📜README.md
┣ 📜gatsby-config.js
┣ 📜package-lock.json
┗ 📜package.json
Установка и настройка стежков
Теперь давайте настроим стежки с вашим приложением Gatsby. Сначала необходимо установить плагин Gatsby для стилизации со Stitches с помощью команды ниже.
yarn add gatsby-theme-stitches @stitches/react
После завершения установки откройте файл gatsby-config.js и добавьте Stitches в массив плагинов с помощью приведенного ниже фрагмента кода.
module.exports = {
/* Your site config here */
plugin: ['gatsby-theme-stitches'],
}
На этом этапе вы готовы начать стилизацию вашего приложения Gatsby с помощью Stitches. Есть два пути решения этой задачи.
- Вы можете создать свой конфиг, используя модуль
gatsby-theme-stitches/src/config. - Вы можете импортировать свойства непосредственно в ваше приложение.
import { styled } from 'gatsby-theme-stitches/src/config';
Чтобы использовать первый метод, создайте файл gatsby-theme-stitches/config.js и добавьте следующие конфигурации.
import { createStitches } from '@stitches/react';
// You should exports all properties
export const {
styled,
css,
globalCss,
keyframes,
getCssText,
theme,
createTheme,
config,
} = createStitches({
theme: {
colors: {
black500: "hsl(0, 0%, 0%)",
white500: "hsl(0, 0%, 100%)",
gray500: "hsl(206,10%,76%)",
blue500: "hsl(206,100%,50%)",
purple500: "hsl(252,78%,60%)",
green500: "hsl(148,60%,60%)",
red500: "hsl(352,100%,62%)",
},
space: {
1: "5px",
2: "10px",
3: "15px",
},
fontSizes: {
1: "12px",
2: "13px",
3: "15px",
},
fonts: {
untitled: "Untitled Sans, apple-system, sans-serif",
mono: "Söhne Mono, menlo, monospace",
},
borderRadius: {
1: "5px",
2: "10px",
3: "15px",
},
borders: {
1: "1px solid #ccc",
2: "2px solid #ccc",
3: "3px solid #ccc",
4: "none",
},
paddings: {
1: "5px",
2: "10px",
3: "15px",
},
margins: {
1: "5px",
2: "10px",
3: "15px",
},
widths: {
1: "100%",
2: "50%",
3: "25%",
},
},
});
В приведенном выше фрагменте кода вы экспортировали все доступные свойства Stitches. Таким образом, вы можете импортировать и использовать их. Затем мы определили темы для элементов в нашем приложении. Мы можем использовать свойства тем для стилизации наших элементов.
Создание и стилизация пользовательских элементов.
Теперь давайте продолжим использовать Stitches для создания стиля элементов, которые мы будем использовать в нашем приложении Gatsby. Для разделения задач создадим папку components в корневом каталоге проекта для всех стилей элементов. В папке components создайте новый файл с именем Button.js и добавьте приведенные ниже фрагменты кода.
import { styled } from '../../stitches.config';
export const Button = styled("button", {
// base styles
display: "block",
border: "$4",
borderRadius: "$1",
color: "$white500",
variants: {
size: {
sm: {
fontSize: "13px",
height: "25px",
paddingRight: "10px",
paddingLeft: "10px",
},
lg: {
fontSize: "15px",
height: "35px",
paddingLeft: "15px",
paddingRight: "15px",
},
},
bg: {
primary: {
backgroundColor: "#2196f3",
"&:hover": {
backgroundColor: "#64b5f6",
},
},
secondary: {
backgroundColor: "#009688",
"&:hover": {
backgroundColor: "#4db6ac",
},
},
danger: {
backgroundColor: "#f44336",
"&:hover": {
backgroundColor: "#ef9a9a",
},
},
success: {
backgroundColor: "#4caf50",
color: "white",
"&:hover": {
backgroundColor: "#a5d6a7",
},
},
},
},
});
В приведенном выше фрагменте кода мы импортировали стилизованные свойства из конфигурационного файла Stitches, что позволит нам настроить компонент. Мы использовали свойства, которые мы определили в нашей теме, чтобы добавить базовый стиль элемента с помощью символа $, за которым следуют свойства темы. Затем мы использовали свойство variants, чтобы определить стиль для цвета фона (bg) и размера (size) компонента.
Далее создайте Container.js и добавьте приведенные ниже фрагменты кода.
import { styled } from "@stitches/react";
export const Container = styled("div", {
// base styles
display: "flex",
flexDirection: "column",
justifyContent: "center",
padding: "$2",
backgroundColor: "$white500",
variants: {
fd: {
column: {
flexDirection: "column",
},
row: {
flexDirection: "row",
},
},
size: {
sm: {
width: "100%",
height: "50px",
},
lg: {
width: "100%",
height: "60px",
},
},
align: {
center: {
alignItems: "center",
},
left: {
alignItems: "flex-start",
},
right: {
alignItems: "flex-end",
},
},
},
});
В компоненте Container мы создали базовые темы стилей и определили стили для выравнивания и установки размера контейнера с помощью свойства varriant.
Далее создайте файл Image.js и добавьте приведенный ниже фрагмент кода.
import { styled } from "@stitches/react"
export const Image = styled("img", {
display: "block",
width: "$1",
height: "auto",
maxWidth: "100%",
maxHeight: "100%",
margin: "0 auto",
variants: {
size: {
sm: {
width: "50%",
height: "50%",
maxWidth: "100%",
maxHeight: "100%",
margin: "0 auto",
},
lg: {
width: "100%",
height: "auto",
maxWidth: "100%",
maxHeight: "100%",
margin: "0 auto",
},
},
},
})
Мы также определили стиль для большого и маленького изображения, определили стиль для изменения выравнивания изображения и применили темы к базовым стилям.
Далее создайте файл Header.js и добавьте в него приведенный ниже фрагмент кода.
import { styled } from "@stitches/react";
export const Header = styled("nav", {
// base styles
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
padding: "$2",
backgroundColor: "$white500",
borderBottom: "1px solid #e6e6e6",
variants: {
size: {
sm: {
width: "100%",
height: "50px",
},
lg: {
width: "100%",
height: "60px",
},
},
bg: {
primary: {
backgroundColor: "#2196f3",
"&:hover": {
backgroundColor: "#64b5f6",
},
},
secondary: {
backgroundColor: "#009688",
"&:hover": {
backgroundColor: "#4db6ac",
},
},
danger: {
backgroundColor: "#f44336",
"&:hover": {
backgroundColor: "#ef9a9a",
},
},
success: {
backgroundColor: "#4caf50",
"&:hover": {
backgroundColor: "#a5d6a7",
},
},
},
},
});
Далее создайте файл Card.js и добавьте приведенные ниже фрагменты кода.
import { styled } from "@stitches/react";
export const Card = styled("div", {
display: "flex",
justifyContent: "center",
flexDirection: "column",
padding: "$1",
margin: "$2"
variants: {
align: {
center: {
alignItems: "center",
},
left: {
alignItems: "flex-start",
},
right: {
alignItems: "flex-end",
},
},
boder: {
none: {
border: "none"
},
solid: {
border: "solid 1px #e6e6e6"
}
}
},
});
Далее создайте новый файл Input.js и добавьте в него приведенный ниже фрагмент кода.
import { styled } from "@stitches/react";
export const Input = styled("input", {
display: "block",
marginBottom: "10px",
variants: {
size: {
sm: {
fontSize: "13px",
height: "25px",
paddingRight: "10px",
paddingLeft: "10px",
},
lg: {
fontSize: "15px",
height: "35px",
paddingLeft: "15px",
paddingRight: "15px",
},
},
},
});
В приведенном выше фрагменте кода у нас есть элемент Input для обработки пользовательского ввода. В приведенном выше компоненте Input мы хотим иметь большие и маленькие вводы, и мы определили стили для этого с помощью свойства variants.
Далее создайте новый файл Text.js и добавьте фрагмент кода ниже.
import { styled } from "@stitches/react";
export const Text = styled('p', {
fontFamily: '$mono',
color: '$black5000',
variants: {
size: {
1: {
fontSize: '10px',
},
2: {
fontSize: '12px',
},
3: {
fontSize: '14px',
},
},
},
});
В приведенном выше фрагменте кода мы создали компонент, позволяющий добавить и стилизовать абзац.
Воспроизведение сессии с открытым исходным кодом
OpenReplay — это пакет для воспроизведения сеансов с открытым исходным кодом, который позволяет вам видеть, что делают пользователи в вашем веб-приложении, помогая вам быстрее устранять неполадки. OpenReplay размещается на собственном хостинге, что обеспечивает полный контроль над вашими данными.
Начните получать удовольствие от отладки — начните использовать OpenReplay бесплатно.
Создание приложения для блога
Теперь, когда мы оформили элементы, необходимые для этого приложения, давайте приступим к созданию приложения для блога. Сначала нам нужно обновить файл pages/index.js, чтобы импортировать все компоненты, которые мы только что создали, с помощью приведенного ниже фрагмента кода.
import { Button } from "../components/Button"
import { Input } from "../components/Input"
import { Card } from "../components/Card"
import { Text } from "../components/Text"
import { Header } from "../components/Header"
import { Image } from "../components/Image"
import { Container } from "../components/Container"
Далее мы используем компонент для обновления компонента Home с помощью приведенного ниже фрагмента кода.
export default function Home() {
const [modal, setModal] = useState(false)
const showModal = () => {
setModel(!model)
}
return (
<>
<Container>
<Header bg="primary">
<Text size="1">My Blog App</Text>
<Button bg="secondary" size="sm" onClick={showModal}>
New Blog
</Button>
</Header>
{model && (
<Card boder="solid">
<Text size="1">Titile:</Text>
<Input />
<Text size="1">Content</Text>
<Input />
<Text size="1">Cover Image</Text>
<Input />
<Button bg="primary" size="sm">
Post
</Button>
</Card>
)}
<Text>Blog Posts</Text>
</Container>
<Container fd="row">
{blogs.map(blog => (
<Card boder="solid">
<Image src={blog.cover} size="lg" />
<Text size="3">{blog.title}</Text>
<Text size="1">{blog.content}</Text>
<Text size="1">{blog.date}</Text>
</Card>
))}
</Container>
</>
)
}
В приведенном выше фрагменте кода мы обновили компонент Home, используя компоненты, которые мы стилизовали с помощью Stitches. Мы применили различные стили к каждому из компонентов, используемых в компоненте Home. У нас есть поле ввода формы, которое будет переключаться, чтобы скрыть или показать его с помощью переменной состояния Modal.
Затем мы провели цикл по деталям блога, которые мы вскоре создадим с помощью функции map, и отобразили их для пользователя.
Наконец, добавьте следующие объекты массива блогов в компонент Home.
...
const blogs = [
{
title: "How to build a website",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel",
cover:
"https://www.hostgator.com/blog/wp-content/uploads/2017/09/MakeOwnWebsite.png",
date: "2020-01-01",
},
{
title: "Getting started with OpenReplay",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel",
cover:
"https://opengraph.githubassets.com/2ddbe84dccfbcc774b1c9861dd327d2efd7e1cd49964dc01229c181bea751e60/openreplay/documentation",
date: "2020-01-01",
},
{
title: "Node.js Vs React",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel",
cover:
"https://miro.medium.com/max/1400/1*CpDidbInbG4Er_0j_hknFQ.jpeg",
date: "2020-01-01",
},
]
...
Тестирование приложения
После создания демонстрационного приложения блога давайте приступим к его тестированию. Выполните команды для изменения каталога на папку проекта и запустите приложение.
cd gatsby-site
gatsby develop
Затем перейдите по адресу http://localhost:8000/, и на индексной странице вы должны увидеть следующий результат.
Заключение
Вы узнали, как создать тематический пользовательский интерфейс в приложении Gatsby с помощью Stitches, создав демонстрационное приложение для блога. Сначала мы начали с введения в Gatsby и Stitches. Вы узнали, как настроить Stitches в Gatsby и стилизовать некоторые компоненты.
Теперь, когда вы знаете, как интегрировать Gatsby и Stitches, как бы вы оформили свое следующее приложение Gatsby?