Анализ страницы https://sidewind.js.org/examples/
Основное Готовность: 100%
Домен
sidewind.js.org
Состояние доменного имени
?
Проверяем корректность доменного имени и наличие технических проблем на уровне домена.
Используйте для продвижения только домен второго уровня.
Отличный запоминающийся домен.
Ответ сервера
200 Успешный ответ
HTTP-код ответа и цепочка редиректов
?
Код 200 — страница доступна. Коды 3xx — редиректы (цепочки замедляют загрузку и размывают ссылочный вес). Коды 4xx/5xx — ошибки, поисковик не сможет проиндексировать страницу.
Сервер настроен корректно.
Безопасность
Сайт безопасен
Использование HTTPS и SSL-сертификат
?
HTTPS — обязательный стандарт. Google и Яндекс отдают предпочтение защищённым сайтам. Отсутствие SSL или просроченный сертификат ведут к предупреждениям в браузере и снижению позиций.
Не настроен HSTS (Strict-Transport-Security) — рекомендуется включить.
На сайте работает защищенный протокол ssl и сайт открывается по https.
Ssl-сертификат действителен до 28.09.2026 0:57:20.
Поздравляем! Сайт не содержится в реестре РКН.
Кодировка
UTF-8
Кодировка символов страницы
?
Стандарт — UTF-8. Неправильная кодировка вызывает нечитаемые символы и мешает поисковику корректно распознать текст страницы.
Указана кодировка на странице UTF-8.
Язык
en
Атрибут lang в HTML-теге
?
Атрибут lang (<html lang="ru">) сообщает поисковикам и браузерам, на каком языке написана страница. Помогает при ранжировании в региональном поиске.
Язык документа указан явно: en.
Скорость загрузки
~0,26сек
Время отклика сервера (TTFB)
?
Time To First Byte — время до получения первого байта от сервера. Норма до 200 мс. Медленный отклик ухудшает пользовательский опыт и ранжирование: Яндекс и Google учитывают скорость страниц.
Скорость загрузки сайта 0,26сек оптимальна.
Объем документа
42Кб
Размер HTML-кода страницы
?
Слишком большой HTML замедляет парсинг браузером и сканирование поисковым роботом. Рекомендуется не более 200 Кб.
Объем html-документа 42Кб оптимален.
Структура html-документа корректна.
Ресурсы
Ресурсы: 3
Внешние ресурсы страницы (CSS, JS, изображения)
?
Количество и тип подключённых ресурсов влияют на скорость загрузки. Большое число запросов увеличивает время рендеринга страницы.
Кол-во файлов ресурсов 3 достаточно.
Показать полный список ресурсов
| Тип | Название | Значение |
|---|---|---|
| stylesheet | /pagefind/pagefind-ui.css | |
| js | /pagefind/pagefind-ui.js | |
| js | module | /global.js |
Серверные заголовки
Кол-во: 10
HTTP-заголовки ответа сервера
?
Заголовки сервера передают браузеру и поисковику служебную информацию: кеширование, безопасность (CSP, HSTS), сжатие (gzip). Правильная настройка ускоряет загрузку и повышает защищённость.
Найдены серверные заголовки 10шт. Подробнее про серверные заголовки.
Показать полный список серверных заголовков
| Ключ | Значение |
|---|---|
| Date | Sat, 22 Aug 2026 17:17:22 GMT |
| X-Content-Type-Options | nosniff |
| report-to | {"group":"cf-nel","max_age":604800,"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?s=0yhIFF6iWNqVMNNZCYPi223fp1%2Ba4pAgfjASkFugAnV%2BJnF9dgpMEZl1t4n%2Fng%2FanEvcgZ4XKXSQhvS5GLTEWxQSB79oNEZT5eUWNyHDwVbmlcmr51R6jge0ZODYRgIqYSk%3D"}]} |
| nel | {"report_to":"cf-nel","success_fraction":0.0,"max_age":604800} |
| Access-Control-Allow-Origin | * |
| Cache-Control | public, must-revalidate, max-age=0 |
| Referrer-Policy | strict-origin-when-cross-origin |
| Server | cloudflare |
| cf-cache-status | DYNAMIC |
| cf-ray | a2f387d90d82f3a7-DME |
CMS
Не определена
Система управления сайтом (движок)
?
CMS — это движок, на котором работает сайт (WordPress, 1C-Bitrix, Tilda и др.). Знание CMS помогает понять возможности SEO-оптимизации и подобрать подходящие инструменты. «Не определена» — вероятно, самописный сайт или нестандартная сборка.
CMS не определена. Вероятно, сайт самописный либо движок надёжно скрыт. Это не ошибка.
Веб-сервер
Cloudflare
Программное обеспечение сервера
?
Веб-сервер — это ПО, которое отдаёт страницы посетителям (nginx, Apache, IIS, LiteSpeed и др.). Определяется по серверным заголовкам ответа (Server, X-Powered-By и т.п.). «Не определён» — сервер намеренно скрывает эти заголовки, это нормальная практика безопасности.
Сайт работает на веб-сервере Cloudflare.
Мета-теги Готовность: 48%
Title
Examples
Заголовок страницы в браузере и поисковой выдаче
?
Title — главный SEO-заголовок страницы. Влияет на CTR в поиске и ранжирование. Оптимальная длина: 50–70 символов. Ключевые слова — ближе к началу.
Необходимо увеличить число символов в title (текущее значение мало: 8, минимум: 25, оптимально: от 40 до 45)
Дублей словоформ в title не найдено.
Description
Check these examples to understand what to achieve with Sidewind
Описание страницы в поисковой выдаче (сниппет)
?
Meta Description — текст под заголовком в выдаче. Напрямую на позиции не влияет, но влияет на CTR. Оптимальная длина: 120–160 символов.
Необходимо увеличить число символов в description (текущее значение мало: 64, минимум: 80, оптимально: от 120 до 130)
Keywords
Список ключевых слов страницы (устаревший тег)
?
Meta Keywords не учитывается Яндексом и Google для ранжирования с 2009–2012 годов. Заполнение не обязательно, но не вредит. Конкурент может использовать содержимое для анализа.
Установите мета-тег keywords!
Канонический Url
Указывает поисковику основную версию страницы
?
Canonical (rel=canonical) предотвращает проблему дублей страниц. Должен точно совпадать с URL проверяемой страницы. Неправильный canonical может передать ссылочный вес на другую страницу.
Рекомендуем прописать канонический Url.
Robots
Ошибок нет
Директивы для поисковых роботов на уровне страницы
?
Meta Robots управляет индексацией конкретной страницы: index/noindex — индексировать ли, follow/nofollow — следовать ли по ссылкам. Noindex полностью исключает страницу из поиска.
Meta-тег robots не указан. Страница свободна для индексации.
Адаптивность
width=device-width, initial-scale=1.0
Настройка масштабирования на мобильных устройствах
?
Тег viewport (<meta name="viewport">) сообщает браузеру, как масштабировать страницу на мобильных. Стандарт: width=device-width, initial-scale=1. Отсутствие — признак отсутствия мобильной версии.
Meta-тег viewport со значением-константой width=device-width задаёт ширину страницы в соответствии с размером экрана.
Meta-тег viewport со значением initial-scale=1.0 определяет масштаб 1:1, т.е. «не масштабировать».
Разметка OpenGraph
Кол-во: 6
Мета-теги для красивых превью в соцсетях
?
OpenGraph (og:title, og:description, og:image) управляет тем, как страница выглядит при репосте в социальных сетях и мессенджерах. Отсутствие OG-тегов — невзрачный превью при шеринге.
Разметка OpenGraph задана. Страница оптимизирована под социальные сети.
Показать полный список og мета-тегов
| Тип | Значение |
|---|---|
| og:url | https://sidewind.js.org/examples |
| og:type | website |
| og:site_name | Sidewind |
| og:title | Examples |
| og:description | Check these examples to understand what to achieve with Sidewind |
| og:image | https://sidewind.js.org/examples/og.png |
Все мета-теги
Кол-во: 14
Полный список мета-тегов страницы
?
Таблица всех meta-тегов, включая нестандартные. Позволяет найти опечатки, дубли и лишние теги.
Найдены мета-теги 14шт. Мета-теги не видимы для человека и предназначены для обмена информацией между веб-страницей и поисковыми системами, браузерами и другими веб-службами. С ними роботы 🤖 и устройства ведут себя более ожидаемо.
Показать полный список мета-тегов
| Тип | Название | Значение |
|---|---|---|
| name | viewport | width=device-width, initial-scale=1.0 |
| name | description | Check these examples to understand what to achieve with Sidewind |
| name | twitter:card | summary_large_image |
| property | built | Wed Sep 18 2024 13:10:30 GMT+0000 (Coordinated Universal Time) |
| property | url | /examples |
| property | og:url | https://sidewind.js.org/examples |
| property | og:type | website |
| property | og:site_name | Sidewind |
| property | og:title | Examples |
| property | og:description | Check these examples to understand what to achieve with Sidewind |
| property | og:image | https://sidewind.js.org/examples/og.png |
| property | twitter:site | Sidewind |
| property | twitter:title | Examples |
| property | twitter:description | Check these examples to understand what to achieve with Sidewind |
Оптимизация Готовность: 55%
Структура
Ошибок нет
Семантические HTML-элементы страницы
?
Проверяет наличие основных структурных элементов: nav, header, footer, main. Корректная семантическая структура помогает поисковику понять архитектуру страницы.
Структура документа корректна (теги <html> и <body> присутствуют в одном экземпляре).
Контент
Есть ошибки
Объём и качество текстового содержимого
?
Анализирует объём полезного текста на странице. Слишком мало — страница может считаться малополезной. Слишком много — ухудшается читаемость и восприятие.
Слова из title 1 встречаются в тексте редко. Добавьте в контент страницы слова из тега <title>!
Абзацев с текстом 2 слишком мало. Добавьте больше абзацев с текстом (тег <p>)!
Кол-во знаков контента 918 слишком мало. Добавьте больше текста!
Кол-во слов 130 слишком мало. Добавьте больше текста (минимум 400 слов)!
Среднее число слов в абзаце 16 достаточно.
Заголовки
Ошибок нет
Иерархия заголовков H1–H6
?
H1 должен быть один и содержать ключевой запрос. H2–H6 описывают подразделы. Пропуск уровней (H1 → H3) и несколько H1 — типичные ошибки, снижающие понятность страницы для поисковика.
На странице присутствуют заголовки <h1> 1. Это прекрасно.
На странице присутствуют заголовки <h2> 10. Это хорошо.
Тошнота
2,83
Насколько одно слово доминирует в тексте
?
Классическая тошнота = √(частота самого повторяющегося слова). Норма до 7–8: текст воспринимается естественно. Выше — поисковик может счесть страницу переспамленной.
Тошнота страницы в пределах нормы 3.
Академич. тошнота
16,15%
Насколько текст перенасыщен ключевыми словами
?
Академическая тошнота = (частота слова / общее количество слов) × 100%. Показывает долю конкретного слова в тексте. Норма 5–15%.
Академическая тошнота превышает норму 5-15%. Измените текст страницы!
Семантическое ядро
20
Наиболее часто встречающиеся слова на странице
?
Топ слов по частоте использования. Показывает, какие слова доминируют в тексте с точки зрения поисковика.
Контент страницы содержит осмысленный текст и слова.
Показать список слов
| Слово | Кол-во | Частота |
|---|---|---|
| editor | 8 | 6,15% |
| examples | 4 | 3,08% |
| engineer | 4 | 3,08% |
| partial | 4 | 3,08% |
| attributes | 2 | 1,54% |
| sources | 2 | 1,54% |
| iteration | 2 | 1,54% |
| labels | 2 | 1,54% |
| recursion | 2 | 1,54% |
| github | 2 | 1,54% |
| animals | 2 | 1,54% |
| languages | 2 | 1,54% |
| colors | 2 | 1,54% |
| visible | 2 | 1,54% |
| junior | 2 | 1,54% |
| description | 2 | 1,54% |
| senior | 2 | 1,54% |
| combine | 1 | 0,77% |
| directives | 1 | 0,77% |
| produce | 1 | 0,77% |
Индексация Готовность: 80%
Индексирование
Ошибок нет
Разрешено ли индексирование страницы
?
Проверяет, не закрыта ли страница от индексации через robots.txt, meta robots или X-Robots-Tag. Страница, закрытая от индексации, не появится в поисковой выдаче.
Анкоров на странице 30 оптимально. Поисковые роботы обязательно проиндексируют сайт.
Robots.txt
Найден корректный robots.txt
Файл управления сканированием сайта роботами
?
Robots.txt указывает поисковым роботам, какие страницы сканировать, а какие — нет. Ошибки в файле могут случайно закрыть важные разделы от индексации.
Robots.txt настроен корректно. Размер файла: 31953 байт. Загружен за: 0сек.
Проверяемая страница не запрещена в robots.txt.
Robots.txt доступен по постоянному адресу
Показать содержимое robots.txt
<!DOCTYPE html ><html lang="en"><head><link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💨</text></svg>"></link><link rel="preload" href="https://cdn.jsdelivr.net/gh/highlightjs/highlight.js@11.9.0/src/styles/github-dark.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"></link><noscript><link rel="stylesheet" hrf="https://cdn.jsdelivr.net/gh/highlightjs/highlight.js@11.9.0/src/styles/github-dark.min.css"></link></noscript><meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0"></meta><meta name="description" content="Tailwind but for state"></meta><meta property="built" content="Wed Sep 18 2024 13:10:30 GMT+0000 (Coordinated Universal Time)"></meta><meta property="url" content="/"></meta><meta property="og:url" content="https://sidewind.js.org"></meta><meta property="og:type" content="website"></meta><meta property="og:site_name" content="Sidewind"></meta><meta property="og:title" content="Sidewind"></meta><meta property="og:description" content="Tailwind but for state"></meta><meta property="og:image" content="https://sidewind.js.org/og.png"></meta><meta name="twitter:card" content="summary_large_image"></meta><meta property="twitter:site" content="Sidewind"></meta><meta property="twitter:title" content="Sidewind"></meta><meta property="twitter:description" content="Tailwind but for state"></meta><title>Sidewind</title><style data-twind>/*!0,19,prose*/.prose{--tw-prose-body:rgba(55,65,81,1);--tw-prose-headings:rgba(17,24,39,1);--tw-prose-lead:rgba(75,85,99,1);--tw-prose-links:rgba(17,24,39,1);--tw-prose-bold:rgba(17,24,39,1);--tw-prose-counters:rgba(107,114,128,1);--tw-prose-bullets:rgba(209,213,219,1);--tw-prose-hr:rgba(229,231,235,1);--tw-prose-quotes:rgba(17,24,39,1);--tw-prose-quote-borders:rgba(229,231,235,1);--tw-prose-captions:rgba(107,114,128,1);--tw-prose-code:rgba(17,24,39,1);--tw-prose-pre-code:rgba(229,231,235,1);--tw-prose-pre-bg:rgba(31,41,55,1);--tw-prose-th-borders:rgba(209,213,219,1);--tw-prose-td-borders:rgba(229,231,235,1);--tw-prose-invert-body:rgba(209,213,219,1);--tw-prose-invert-headings:rgba(255,255,255,1);--tw-prose-invert-lead:rgba(156,163,175,1);--tw-prose-invert-links:rgba(255,255,255,1);--tw-prose-invert-bold:rgba(255,255,255,1);--tw-prose-invert-counters:rgba(156,163,175,1);--tw-prose-invert-bullets:rgba(75,85,99,1);--tw-prose-invert-hr:rgba(55,65,81,1);--tw-prose-invert-quotes:rgba(243,244,246,1);--tw-prose-invert-quote-borders:rgba(55,65,81,1);--tw-prose-invert-captions:rgba(156,163,175,1);--tw-prose-invert-code:rgba(255,255,255,1);--tw-prose-invert-pre-code:rgba(209,213,219,1);--tw-prose-invert-pre-bg:rgb(0 0 0 / 50%);--tw-prose-invert-th-borders:rgba(75,85,99,1);--tw-prose-invert-td-borders:rgba(55,65,81,1)}/*!0,1n*/*,::before,::after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}/*!1j905c,1n*/@media (min-width:640px){*,::before,::after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}/*!27wr28,s*/*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}/*!27wr28,21*/::before,::after{--tw-content:''}/*!27wr28,r*/html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-feature-settings:normal}/*!27wr28,w*/body{margin:0;line-height:inherit}/*!27wr28,10*/hr{height:0;color:inherit;border-top-width:1px}/*!27wr28,y*/abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!27wr28,w*/h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}/*!27wr28,w*/a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}/*!27wr28,y*/b,strong{font-weight:bolder}/*!27wr28,x*/code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-feature-settings:normal;font-size:1em}/*!27wr28,y*/small{font-size:80%}/*!27wr28,s*/sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!27wr28,y*/sub{bottom:-0.25em}/*!27wr28,y*/sup{top:-0.5em}/*!27wr28,u*/table{text-indent:0;border-color:inherit;border-collapse:collapse}/*!27wr28,o*/button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0}/*!27wr28,y*/button,select{text-transform:none}/*!27wr28,u*/button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button;background-color:transparent;background-image:none}/*!27wr28,v*/:-moz-focusring{outline:auto}/*!27wr28,y*/:-moz-ui-invalid{box-shadow:none}/*!27wr28,y*/progress{vertical-align:baseline}/*!27wr28,v*/::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}/*!27wr28,w*/[type='search']{-webkit-appearance:textfield;outline-offset:-2px}/*!27wr28,21*/::-webkit-search-decoration{-webkit-appearance:none}/*!27wr28,t*/::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!27wr28,v*/summary{display:list-item}/*!27wr28,v*/blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}/*!27wr28,t*/fieldset{margin:0;padding:0}/*!27wr28,v*/legend{padding:0}/*!27wr28,u*/ol,ul,menu{list-style:none;margin:0;padding:0}/*!27wr28,v*/textarea{resize:vertical}/*!27wr28,t*/input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}/*!27wr28,v*/button,[role="button"]{cursor:pointer}/*!27wr28,v*/:disabled{cursor:default}/*!27wr28,w*/img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}/*!27wr28,w*/img,video{max-width:100%;height:auto}/*!27wr28,v*/[hidden]{display:none}/*!27wr28,x*/.prose :where(a):not(:where(.not-prose *)){color:var(--tw-prose-links);text-decoration-line:underline;font-weight:500}/*!27wr28,w*/.prose :where(strong):not(:where(.not-prose *)){color:var(--tw-prose-bold);font-weight:600}/*!27wr28,v*/.prose :where(a strong,blockquote strong,thead th strong):not(:where(.not-prose *)){color:inherit}/*!27wr28,11*/.prose :where(ul):not(:where(.not-prose *)){list-style-type:disc}/*!27wr28,11*/.prose :where(ol):not(:where(.not-prose *)){list-style-type:decimal}/*!27wr28,11*/.prose :where(ol[type="A"]):not(:where(.not-prose *)){list-style-type:upper-alpha}/*!27wr28,11*/.prose :where(ol[type="a"]):not(:where(.not-prose *)){list-style-type:lower-alpha}/*!27wr28,11*/.prose :where(ol[type="A" s]):not(:where(.not-prose *)){list-style-type:upper-alpha}/*!27wr28,11*/.prose :where(ol[type="a" s]):not(:where(.not-prose *)){list-style-type:lower-alpha}/*!27wr28,11*/.prose :where(ol[type="I"]):not(:where(.not-prose *)){list-style-type:upper-roman}/*!27wr28,11*/.prose :where(ol[type="i"]):not(:where(.not-prose *)){list-style-type:lower-roman}/*!27wr28,11*/.prose :where(ol[type="I" s]):not(:where(.not-prose *)){list-style-type:upper-roman}/*!27wr28,11*/.prose :where(ol[type="i" s]):not(:where(.not-prose *)){list-style-type:lower-roman}/*!27wr28,11*/.prose :where(ol[type="1"]):not(:where(.not-prose *)){list-style-type:decimal}/*!27wr28,u*/.prose :where(ol,ul):not(:where(.not-prose *)){margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}/*!27wr28,w*/.prose :where(li):not(:where(.not-prose *)){margin-top:.5em;margin-bottom:.5em}/*!27wr28,y*/.prose :where(ol>li):not(:where(.not-prose *)),.prose :where(ul>li):not(:where(.not-prose *)){padding-left:.375em}/*!27wr28,w*/.prose>:where(ul>li p):not(:where(.not-prose *)){margin-top:.75em;margin-bottom:.75em}/*!27wr28,y*/.prose>:where(ul>li>*:first-child):not(:where(.not-prose *)),.prose>:where(ol>li>*:last-child):not(:where(.not-prose *)){margin-top:1.25em}/*!27wr28,y*/.prose>:where(ul>li>*:last-child):not(:where(.not-prose *)),.prose>:where(ol>li>*:last-child):not(:where(.not-prose *)){margin-bottom:1.25em}/*!27wr28,w*/.prose :where(ol>li):not(:where(.not-prose *))::marker{font-weight:400;color:var(--tw-prose-counters)}/*!27wr28,v*/.prose :where(ul>li):not(:where(.not-prose *))::marker{color:var(--tw-prose-bullets)}/*!27wr28,w*/.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where(.not-prose *)){margin-top:.75em;margin-bottom:.75em}/*!27wr28,y*/.prose :where(hr):not(:where(.not-prose *)){border-color:var(--tw-prose-hr);border-top-width:1;margin-top:3em;margin-bottom:3em}/*!27wr28,o*/.prose :where(blockquote):not(:where(.not-prose *)){margin-top:1.6em;margin-bottom:1.6em;padding-left:1em;font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-left-width:0.25rem;border-left-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019"}/*!27wr28,v*/.prose :where(blockquote p:first-of-type):not(:where(.not-prose *))::before{content:open-quote}/*!27wr28,v*/.prose :where(blockquote p:last-of-type):not(:where(.not-prose *))::after{content:close-quote}/*!27wr28,w*/.prose :where(p):not(:where(.not-prose *)){margin-top:1.25em;margin-bottom:1.25em}/*!27wr28,o*/.prose :where(h1):not(:where(.not-prose *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.889em;line-height:1.15}/*!27wr28,w*/.prose :where(h1 strong):not(:where(.not-prose *)){font-weight:900;color:inherit}/*!27wr28,o*/.prose :where(h2):not(:where(.not-prose *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.35}/*!27wr28,w*/.prose :where(h2 strong):not(:where(.not-prose *)){font-weight:800;color:inherit}/*!27wr28,o*/.prose :where(h3):not(:where(.not-prose *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}/*!27wr28,w*/.prose :where(h3 strong):not(:where(.not-prose *)){font-weight:700;color:inherit}/*!27wr28,q*/.prose :where(h4):not(:where(.not-prose *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}/*!27wr28,w*/.prose :where(h4 strong):not(:where(.not-prose *)){font-weight:700;color:inherit}/*!27wr28,y*/.prose :where(hr+*,h2+*,h3+*,h4+*):not(:where(.not-prose *)){margin-top:0}/*!27wr28,w*/.prose :where(img,video,figure):not(:where(.not-prose *)){margin-top:2em;margin-bottom:2em}/*!27wr28,w*/.prose :where(figure>*):not(:where(.not-prose *)){margin-top:0;margin-bottom:0}/*!27wr28,s*/.prose :where(figcaption):not(:where(.not-prose *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4;margin-top:.857em}/*!27wr28,u*/.prose :where(code):not(:where(.not-prose *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}/*!27wr28,v*/.prose :where(code):not(:where(.not-prose *))::before,.prose :where(code):not(:where(.not-prose *))::after{content:"`"}/*!27wr28,y*/.prose :where(h2 code):not(:where(.not-prose *)){font-size:.875em}/*!27wr28,y*/.prose :where(h3 code):not(:where(.not-prose *)){font-size:.9em}/*!27wr28,v*/.prose :where(a code,h1 code,h2 code,h3 code,h4 code,blockquote code,thead th code):not(:where(.not-prose *)){color:inherit}/*!27wr28,d*/.prose :where(pre):not(:where(.not-prose *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7;margin-top:1.714em;margin-bottom:1.714em;border-radius:0.375rem;padding-top:.857em;padding-right:1.143em;padding-bottom:.857em;padding-left:1.143em}/*!27wr28,l*/.prose :where(pre code):not(:where(.not-prose *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}/*!27wr28,v*/.prose :where(pre code):not(:where(.not-prose *))::before{content:none}/*!27wr28,v*/.prose :where(pre code):not(:where(.not-prose *))::after{content:none}/*!27wr28,m*/.prose :where(table):not(:where(.not-prose *)){width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7}/*!27wr28,12*/.prose :where(thead):not(:where(.not-prose *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}/*!27wr28,o*/.prose :where(thead th):not(:where(.not-prose *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-right:.571em;padding-bottom:.571em;padding-left:.571em}/*!27wr28,y*/.prose :where(thead th:first-child):not(:where(.not-prose *)){padding-left:0}/*!27wr28,y*/.prose :where(thead th:last-child):not(:where(.not-prose *)){padding-right:0}/*!27wr28,12*/.prose :where(tbody tr):not(:where(.not-prose *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}/*!27wr28,14*/.prose :where(tbody tr:last-child):not(:where(.not-prose *)){border-bottom-width:0}/*!27wr28,q*/.prose :where(tbody td,tfoot td):not(:where(.not-prose *)){vertical-align:baseline;padding-top:.571em;padding-right:.571em;padding-bottom:.571em;padding-left:.571em}/*!27wr28,y*/.prose :where(tbody td:first-child):not(:where(.not-prose *)),.prose :where(tfoot td:first-child):not(:where(.not-prose *)){padding-left:0}/*!27wr28,y*/.prose :where(tbody td:last-child):not(:where(.not-prose *)),.prose :where(tfoot td:last-child):not(:where(.not-prose *)){padding-right:0}/*!27wr28,q*/.prose :where(.lead):not(:where(.not-prose *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}/*!27wr28,y*/.prose>:where(:first-child):not(:where(.not-prose *)){margin-top:0}/*!27wr28,y*/.prose>:where(:last-child):not(:where(.not-prose *)){margin-bottom:0}/*!4fti4g,s,prose*/.prose{font-size:1rem;line-height:1.5rem;color:var(--tw-prose-body);max-width:65ch}/*!66k7b4,w,lg:prose-xl*/@media (min-width:1024px){.lg\:prose-xl{font-size:1.25rem;line-height:1.75rem}}/*!dbgidc,r,scale-150*/.scale-150{--tw-scale-x:1.5;--tw-scale-y:1.5;transform:var(--tw-transform)}/*!dbgidc,t,-translate-y-full*/.-translate-y-full{--tw-translate-y:calc(100% * -1);transform:var(--tw-transform)}/*!dbgidc,t,btn-blue*/.btn-blue{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity));--tw-bg-opacity:1;background-color:rgba(59,130,246,var(--tw-bg-opacity))}/*!dbgidc,t,text-gray-900*/.text-gray-900{--tw-text-opacity:1;color:rgba(17,24,39,var(--tw-text-opacity))}/*!dbgidc,t,text-white*/.text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}/*!dbgidc,v,absolute*/.absolute{position:absolute}/*!dbgidc,v,container*/.container{width:100%}/*!dbgidc,v,fixed*/.fixed{position:fixed}/*!dbgidc,v,flex*/.flex{display:flex}/*!dbgidc,v,gap-2*/.gap-2{grid-gap:0.5rem;gap:0.5rem}/*!dbgidc,v,gap-4*/.gap-4{grid-gap:1rem;gap:1rem}/*!dbgidc,v,gap-8*/.gap-8{grid-gap:2rem;gap:2rem}/*!dbgidc,v,grid*/.grid{display:-ms-grid;display:grid}/*!dbgidc,v,h-4*/.h-4{height:1rem}/*!dbgidc,v,h-10*/.h-10{height:2.5rem}/*!dbgidc,v,hidden*/.hidden{display:none}/*!dbgidc,v,inline*/.inline{display:inline}/*!dbgidc,v,inline-block*/.inline-block{display:inline-block}/*!dbgidc,v,m-auto*/.m-auto{margin:auto}/*!dbgidc,v,opacity-50*/.opacity-50{opacity:0.5}/*!dbgidc,v,overflow-hidden*/.overflow-hidden{overflow:hidden}/*!dbgidc,v,p-2*/.p-2{padding:0.5rem}/*!dbgidc,v,p-4*/.p-4{padding:1rem}/*!dbgidc,v,relative*/.relative{position:relative}/*!dbgidc,v,resize-none*/.resize-none{resize:none}/*!dbgidc,v,sticky*/.sticky{position:-webkit-sticky;position:sticky}/*!dbgidc,v,w-4*/.w-4{width:1rem}/*!dbgidc,v,w-10*/.w-10{width:2.5rem}/*!dbgidc,v,w-full*/.w-full{width:100%}/*!dbgidc,w,bg-gray-200*/.bg-gray-200{--tw-bg-opacity:1;background-color:rgba(229,231,235,var(--tw-bg-opacity))}/*!dbgidc,w,bg-gray-800*/.bg-gray-800{--tw-bg-opacity:1;background-color:rgba(31,41,55,var(--tw-bg-opacity))}/*!dbgidc,w,bg-white*/.bg-white{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}/*!dbgidc,w,btn*/.btn{padding-left:1rem;padding-right:1rem;padding-top:0.5rem;padding-bottom:0.5rem;font-weight:700;border-radius:0.25rem}/*!dbgidc,w,mx-auto*/.mx-auto{margin-left:auto;margin-right:auto}/*!dbgidc,w,my-2*/.my-2{margin-top:0.5rem;margin-bottom:0.5rem}/*!dbgidc,w,my-8*/.my-8{margin-top:2rem;margin-bottom:2rem}/*!dbgidc,w,outline-none*/.outline-none{outline:2px solid transparent;outline-offset:2px}/*!dbgidc,w,px-4*/.px-4{padding-left:1rem;padding-right:1rem}/*!dbgidc,w,py-4*/.py-4{padding-top:1rem;padding-bottom:1rem}/*!dbgidc,w,py-8*/.py-8{padding-top:2rem;padding-bottom:2rem}/*!dbgidc,w,text-4xl*/.text-4xl{font-size:2.25rem;line-height:2.5rem}/*!dbgidc,w,text-xl*/.text-xl{font-size:1.25rem;line-height:1.75rem}/*!dbgidc,w,text-xs*/.text-xs{font-size:0.75rem;line-height:1rem}/*!dbgidc,x,transition-all*/.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}/*!dbgidc,y,bg-gradient-to-br*/.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}/*!dbgidc,y,bg-transparent*/.bg-transparent{background-color:transparent}/*!dbgidc,y,flex-col*/.flex-col{-webkit-flex-direction:column;flex-direction:column}/*!dbgidc,y,flex-row*/.flex-row{-webkit-flex-direction:row;flex-direction:row}/*!dbgidc,y,font-bold*/.font-bold{font-weight:700}/*!dbgidc,y,font-extralight*/.font-extralight{font-weight:200}/*!dbgidc,y,font-light*/.font-light{font-weight:300}/*!dbgidc,y,font-mono*/.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}/*!dbgidc,y,font-thin*/.font-thin{font-weight:100}/*!dbgidc,y,leading-4*/.leading-4{line-height:1rem}/*!dbgidc,y,left-0*/.left-0{left:0px}/*!dbgidc,y,max-w-3xl*/.max-w-3xl{max-width:48rem}/*!dbgidc,y,mb-2*/.mb-2{margin-bottom:0.5rem}/*!dbgidc,y,mb-4*/.mb-4{margin-bottom:1rem}/*!dbgidc,y,min-h-full*/.min-h-full{min-height:100%}/*!dbgidc,y,min-w-full*/.min-w-full{min-width:100%}/*!dbgidc,y,mr-16*/.mr-16{margin-right:4rem}/*!dbgidc,y,mt-4*/.mt-4{margin-top:1rem}/*!dbgidc,y,overflow-x-auto*/.overflow-x-auto{overflow-x:auto}/*!dbgidc,y,overflow-y-hidden*/.overflow-y-hidden{overflow-y:hidden}/*!dbgidc,y,pl-4*/.pl-4{padding-left:1rem}/*!dbgidc,y,pointer-events-all*/.pointer-events-all{pointer-events:all}/*!dbgidc,y,pr-4*/.pr-4{padding-right:1rem}/*!dbgidc,y,pr-16*/.pr-16{padding-right:4rem}/*!dbgidc,y,right-0*/.right-0{right:0px}/*!dbgidc,y,select-none*/.select-none{-webkit-user-select:none;-ms-user-select:none;user-select:none}/*!dbgidc,y,top-0*/.top-0{top:0px}/*!dbgidc,y,top-16*/.top-16{top:4rem}/*!dbgidc,y,whitespace-nowrap*/.whitespace-nowrap{white-space:nowrap}/*!dbgidc,y,whitespace-pre*/.whitespace-pre{white-space:pre}/*!dbgidc,y,z-50*/.z-50{z-index:50}/*!dbgidc,11,grid-rows-3*/.grid-rows-3{-ms-grid-rows:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}/*!dbgidc,11,list-disc*/.list-disc{list-style-type:disc}/*!dbgidc,11,list-inside*/.list-inside{list-style-position:inside}/*!dbgidc,11,list-outside*/.list-outside{list-style-position:outside}/*!dbgidc,11,rounded-full*/.rounded-full{border-radius:9999px}/*!dbgidc,11,underline*/.underline{text-decoration-line:underline}/*!dbgidc,15,rounded-b-lg*/.rounded-b-lg{border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem}/*!dbgidc,15,rounded-t-lg*/.rounded-t-lg{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}/*!dbgidc,1x,from-orange-100*/.from-orange-100{--tw-gradient-from:rgba(255,237,213,1);--tw-gradient-to:rgba(255,237,213,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}/*!dbgidc,1x,from-purple-200*/.from-purple-200{--tw-gradient-from:rgba(233,213,255,1);--tw-gradient-to:rgba(233,213,255,0);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}/*!dbgidc,21,to-emerald-100*/.to-emerald-100{--tw-gradient-to:rgba(209,250,229,1)}/*!dbgidc,21,to-purple-200*/.to-purple-200{--tw-gradient-to:rgba(233,213,255,1)}/*!dbgj5s,w,btn-blue*/.btn-blue:hover{--tw-bg-opacity:1;background-color:rgba(29,78,216,var(--tw-bg-opacity))}/*!dbjbi8,t,peer-checked:translate-y-0*/.peer:checked~.peer-checked\:translate-y-0{--tw-translate-y:0px;transform:var(--tw-transform)}/*!dqr4zk,y,container*/@media (min-width:640px){.container{max-width:640px}}/*!dt91c0,y,container*/@media (min-width:768px){.container{max-width:768px}}/*!dy8u0w,y,container*/@media (min-width:1024px){.container{max-width:1024px}}/*!e38mps,y,container*/@media (min-width:1280px){.container{max-width:1280px}}/*!e5qj28,y,container*/@media (min-width:1536px){.container{max-width:1536px}}/*!eupiio,t,sm:translate-y-0*/@media (min-width:640px){.sm\:translate-y-0{--tw-translate-y:0px;transform:var(--tw-transform)}}/*!eupiio,v,sm:flex*/@media (min-width:640px){.sm\:flex{display:flex}}/*!eupiio,v,sm:hidden*/@media (min-width:640px){.sm\:hidden{display:none}}/*!eupiio,v,sm:p-0*/@media (min-width:640px){.sm\:p-0{padding:0px}}/*!eupiio,v,sm:p-4*/@media (min-width:640px){.sm\:p-4{padding:1rem}}/*!eupiio,v,sm:relative*/@media (min-width:640px){.sm\:relative{position:relative}}/*!eupiio,v,sm:w-full*/@media (min-width:640px){.sm\:w-full{width:100%}}/*!eupiio,w,sm:mx-auto*/@media (min-width:640px){.sm\:mx-auto{margin-left:auto;margin-right:auto}}/*!eupiio,w,sm:px-0*/@media (min-width:640px){.sm\:px-0{padding-left:0px;padding-right:0px}}/*!eupiio,w,sm:py-8*/@media (min-width:640px){.sm\:py-8{padding-top:2rem;padding-bottom:2rem}}/*!eupiio,y,sm:flex-row*/@media (min-width:640px){.sm\:flex-row{-webkit-flex-direction:row;flex-direction:row}}/*!eupiio,y,sm:flex-wrap*/@media (min-width:640px){.sm\:flex-wrap{flex-wrap:wrap}}/*!eupiio,y,sm:justify-between*/@media (min-width:640px){.sm\:justify-between{justify-content:space-between}}/*!eupiio,y,sm:ml-auto*/@media (min-width:640px){.sm\:ml-auto{margin-left:auto}}/*!ex7ev4,v,md:gap-8*/@media (min-width:768px){.md\:gap-8{grid-gap:2rem;gap:2rem}}/*!ex7ev4,w,md:mx-auto*/@media (min-width:768px){.md\:mx-auto{margin-left:auto;margin-right:auto}}/*!ex7ev4,w,md:px-0*/@media (min-width:768px){.md\:px-0{padding-left:0px;padding-right:0px}}/*!ex7ev4,w,md:text-4xl*/@media (min-width:768px){.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}}/*!ex7ev4,w,md:text-8xl*/@media (min-width:768px){.md\:text-8xl{font-size:6rem;line-height:1}}/*!ex7ev4,y,md:max-w-3xl*/@media (min-width:768px){.md\:max-w-3xl{max-width:48rem}}/*!ex7ev4,11,md:grid-cols-3*/@media (min-width:768px){.md\:grid-cols-3{-ms-grid-columns:repeat(3,minmax(0,1fr));grid-template-columns:repeat(3,minmax(0,1fr))}}/*!ex7ev4,11,md:grid-rows-none*/@media (min-width:768px){.md\:grid-rows-none{-ms-grid-rows:none;grid-template-rows:none}}/*!f277k0,v,lg:inline*/@media (min-width:1024px){.lg\:inline{display:inline}}/*!f277k0,y,lg:max-w-3xl*/@media (min-width:1024px){.lg\:max-w-3xl{max-width:48rem}}</style></head><body><div class="sticky top sm:p-4 bg-white"><input class="hidden peer" id="nav__toggle" type="checkbox"></input><label class="sm:hidden p-2 pointer-events-all absolute right-0 w-10 h-10 rounded-full bg-white flex z-50" for="nav__toggle"><span class="w-4 h-4 leading-4 m-auto">☰</span></label><nav class="absolute p-4 sm:p-0 sm:relative bg-white w-full transition-all -translate-y-full sm:translate-y-0 peer-checked:translate-y-0 font-thin"><div class="flex flex-col gap-8"><div class="sm:w-full flex flex-col sm:flex-row sm:justify-between gap-4"><div class="grid sm:flex sm:flex-row sm:flex-wrap gap-4 sm:ml-auto"><a href="/"><span class="scale-150 whitespace-nowrap">💨</span></a><a class="underline false" href="/state/">State</a><a class="underline false" href="/attributes/">Attributes</a><a class="underline false" href="/sources/">Sources</a><a class="underline false" href="/iteration/">Iteration</a><a class="underline false" href="/labels/">Labels</a><a class="underline false" href="/recursion/">Recursion</a><a class="underline false" href="/ssr/">SSR</a><a class="underline false" href="/examples/">Examples</a><a class="underline false" href="/usage/">Usage</a></div><div class="grid sm:flex sm:flex-row gap-4 sm:ml-auto"><a class="underline false" href="https://github.com/survivejs/sidewind">GitHub</a></div></div><div class="mx-auto"><link href="/pagefind/pagefind-ui.css" rel="stylesheet"></link><script src="/pagefind/pagefind-ui.js"></script><div id="search"></div><script>window.addEventListener("DOMContentLoaded", (event) => {
new PagefindUI({
element: "#search",
showSubResults: true,
});
});</script></div></div></nav></div><aside class="fixed top-16 pl-4 hidden lg:inline"></aside><main><header class="bg-gradient-to-br from-purple-200 to-emerald-100 py-8"><div class="sm:mx-auto px-4 py-4 sm:py-8 max-w-3xl flex"><div class="flex flex-col gap-8"><h1 class="text-4xl md:text-8xl"><span class="whitespace-nowrap pr-4">💨</span><span>Sidewind</span></h1><h2 class="text-xl md:text-4xl font-extralight">Tailwind but for state</h2></div></div></header><div class="md:mx-auto my-8 px-4 md:px-0 w-full lg:max-w-3xl prose lg:prose-xl"><a class="text-gray-900 inline-block text-xl font-bold leading-4 mb-2 mt-4 underline" href="#why-sidewind-"><h2 class="inline" id="why-sidewind-">Why Sidewind?</h2></a>
<p class="my-2">Sidewind was designed small sites and applications in mind. It allows you to sprinkle state where you need it right in the HTML structure.</p><p class="my-2">The library follows the principle of <strong>progressive enhancement</strong> making your pages accessible even if JavaScript isn’t available. It supports <a class="underline" href="/ssr/">state hydration from rendered markup</a> making it a good fit for cases where you want to add interactivity to otherwise static content (i.e. lists, tables, grids).</p><blockquote>
<p class="my-2">For anything more serious, it’s a good idea to combine it with a solution that comes with a component abstraction. For example, <a class="underline" href="https://gustwind.js.org/">Gustwind site generator</a> was designed for this purpose and the site you see was generated using it.</p></blockquote>
<a class="text-gray-900 inline-block text-xl font-bold leading-4 mb-2 mt-4 underline" href="#dive-in"><h2 class="inline" id="dive-in">Dive in</h2></a>
<p class="my-2">To get an idea of what it’s like to develop with Sidewind, try tweaking the following example and studying the documentation.</p><section class="not-prose mb-4" x-state="{ code: atob('PGZvcm0KICB4LXN0YXRlPSJ7IHRleHQ6ICcnLCB0b2RvczogW10gfSIKICBvbnN1Ym1pdD0ic2V0U3RhdGUoewogICAgdGV4dDogJycsCiAgICB0b2RvczogdGhpcy5zdGF0ZS50b2Rvcy5jb25jYXQoewogICAgICB0ZXh0OiB0aGlzLnN0YXRlLnRleHQKICAgIH0pCiAgfSkiCiAgYWN0aW9uPSJqYXZhc2NyaXB0OiIKICBjbGFzcz0iZmxleCBmbGV4LWNvbCBnYXAtMiIKPgogIDxkaXYgY2xhc3M9ImZsZXggZmxleC1yb3cgZ2FwLTIiPgogICAgPGxhYmVsPgogICAgICA8c3Bhbj5BZGQgVG9kbzwvc3Bhbj4KICAgICAgPGlucHV0CiAgICAgICAgaWQ9InRleHQiCiAgICAgICAgdHlwZT0idGV4dCIKICAgICAgICBvbmlucHV0PSJzZXRTdGF0ZSh7IHRleHQ6IHRoaXMudmFsdWUgfSkiCiAgICAgICAgeD0ic3RhdGUudGV4dCIKICAgICAgLz4KICAgIDwvbGFiZWw+CiAgICA8YnV0dG9uIGNsYXNzPSJidG4gYnRuLWJsdWUiIHR5cGU9InN1Ym1pdCI+QWRkPC9idXR0b24+CiAgPC9kaXY+CiAgPGRpdj4KICAgIDx1bCBjbGFzcz0ibGlzdC1kaXNjIGxpc3QtaW5zaWRlIiB4LWVhY2g9InN0YXRlLnRvZG9zIj4KICAgICAgPGxpIHgtdGVtcGxhdGUgeD0ic3RhdGUudmFsdWUudGV4dCIgLz4KICAgIDwvdWw+CiAgPC9kaXY+CiAgPGRpdiB4PSJKU09OLnN0cmluZ2lmeShzdGF0ZS50b2RvcywgbnVsbCwgMikiPjwvZGl2Pgo8L2Zvcm0+') }">
<div class="text-white p-4 bg-gray-800 overflow-x-auto overflow-y-hidden rounded-t-lg">
<div class="relative">
<div class="text-white absolute text-xs font-thin right-0 select-none">Editor</div>
</div>
<div class="inline-block relative font-mono">
<pre class="overflow-hidden w-full mr-16 pr-16" x="highlight('html', state.code)"></pre>
<textarea
class="absolute opacity-50 overflow-hidden resize-none outline-none bg-transparent left-0 min-h-full min-w-full top-0 whitespace-pre"
oninput="setState({ code: this.value })"
x="state.code"
autocapitalize="off"
autocomplete="off"
autocorrect="off"
spellcheck="false"
x-rows="state.code.split('\n').length"
></textarea>
</div>
</div>
<div class="p-4 bg-gray-200 rounded-b-lg" x="state.code"><form
x-state="{ text: '', todos: [] }"
onsubmit="setState({
text: '',
todos: this.state.todos.concat({
text: this.state.text
})
})"
action="javascript:"
class="flex flex-col gap-2"
>
<div class="flex flex-row gap-2">
<label>
<span>Add Todo</span>
<input
id="text"
type="text"
oninput="setState({ text: this.value })"
x="state.text"
/>
</label>
<button class="btn btn-blue" type="submit">Add</button>
</div>
<div>
<ul class="list-disc list-inside" x-each="state.todos">
<li x-template x="state.value.text" />
</ul>
</div>
<div x="JSON.stringify(state.todos, null, 2)"></div>
</form></div>
</section><a class="text-gray-900 inline-block text-xl font-bold leading-4 mb-2 mt-4 underline" href="#related-approaches"><h2 class="inline" id="related-approaches">Related approaches</h2></a>
<p class="my-2">Sidewind isn’t the only alternative out there and I’ve listed several of the ones I’m aware of below:</p><ul class="my-2 list-disc list-outside">
<li><a class="underline" href="https://github.com/alpinejs/alpine">Alpine.js</a> provides a similar yet more broad API closer to Angular than Sidewind.</li>
<li><a class="underline" href="https://amp.dev/documentation/components/amp-bind/">amp-bind</a> implements data binding and expressions.</li>
<li><a class="underline" href="https://htmx.org/">htmx</a> is a complete solution with server integration.</li>
<li><a class="underline" href="https://nuejs.org/">Nue.js</a> is an entire lightweight framework.</li>
<li><a class="underline" href="https://mavo.io">Mavo</a> implements a DSL on top of HTML for light interactivity.</li>
<li><a class="underline" href="https://mini-js.com/">Mini</a> is a light(ish) (80k) way to add interactivity to your site.</li>
<li><a class="underline" href="https://svelte.dev">Svelte</a> implements a compiler based approach.</li>
<li><a class="underline" href="https://vuejs.org">Vue</a>, and especially Vue 3, allows similar usage in the frontend as Sidewind. See also <a class="underline" href="https://github.com/vuejs/petite-vue">petite-vue</a>.</li>
</ul>
<a class="text-gray-900 inline-block text-xl font-bold leading-4 mb-2 mt-4 underline" href="#license"><h2 class="inline" id="license">License</h2></a>
<p class="my-2">MIT.</p></div></main><footer class="py-8 font-light bg-gradient-to-br from-orange-100 to-purple-200"><div class="flex flex-col container mx-auto gap-4"><section class="md:mx-auto px-4 sm:px-0 grid grid-rows-3 md:grid-rows-none md:grid-cols-3 gap-4 md:gap-8 w-full md:max-w-3xl"><div class="flex flex-col"><h2>About</h2><div class="font-thin">Sidewind implements Tailwind style semantics for state. The API is reactive and it has been inspired by React and Vue.js.</div></div><div class="flex flex-col"><h2>Navigation</h2><div class="flex flex-col gap-2 font-thin"><a class="underline false" href="/state/">State</a><a class="underline false" href="/attributes/">Attributes</a><a class="underline false" href="/sources/">Sources</a><a class="underline false" href="/iteration/">Iteration</a><a class="underline false" href="/labels/">Labels</a><a class="underline false" href="/recursion/">Recursion</a><a class="underline false" href="/ssr/">SSR</a><a class="underline false" href="/examples/">Examples</a><a class="underline false" href="/usage/">Usage</a></div></div><div class="flex flex-col"><h2>Credits</h2><p>Gustwind was developed by <a class="underline" href="https://github.com/bebraw">Juho
Vepsäläinen</a>.</p>
</div></section></div></footer><script type="module" src="/global.js"></script></body></html>
Sitemap
Кол-во: 0
XML-карта сайта для поисковиков
?
Sitemap.xml помогает поисковику быстрее находить и индексировать страницы. Особенно важен для крупных сайтов и новых страниц, на которые ещё нет входящих ссылок.
Robots.txt не содержит ссылку на карту сайта. Рекомендуется добавить карту сайта и указать ссылку на нее в robots.txt.
Внутренние ссылки
Кол-во: 19
Ссылки на другие страницы своего сайта
?
Внутренние ссылки распределяют ссылочный вес между страницами и помогают поисковику обходить сайт. Пустые анкоры и ссылки на запрещённые robots.txt страницы — типичные ошибки.
Внутренних ссылок на странице 19 оптимально.
Внутренние ссылки не запрещены к индексации в robots.txt.
Показать внутренние ссылки
| Url | Анкор | Состояние |
|---|---|---|
| / |
<span class="scale-150 whitespace-nowrap">💨</span>
|
|
| /state/ |
State
|
|
| /attributes/ |
Attributes
|
|
| /sources/ |
Sources
|
|
| /iteration/ |
Iteration
|
|
| /labels/ |
Labels
|
|
| /recursion/ |
Recursion
|
|
| /ssr/ |
SSR
|
|
| /examples/ |
Examples
|
|
| /usage/ |
Usage
|
|
| /state/ |
State
|
|
| /attributes/ |
Attributes
|
|
| /sources/ |
Sources
|
|
| /iteration/ |
Iteration
|
|
| /labels/ |
Labels
|
|
| /recursion/ |
Recursion
|
|
| /ssr/ |
SSR
|
|
| /examples/ |
Examples
|
|
| /usage/ |
Usage
|
|
Внешние ссылки
Кол-во: 3
Ссылки на сторонние сайты
?
Исходящие внешние ссылки передают часть ссылочного веса на чужие сайты. Ссылки на авторитетные ресурсы безопасны; ссылки на мусорные сайты могут навредить репутации страницы.
Внешних ссылок на странице 3 оптимально.
Показать внешние ссылки
| Url | Анкор |
|---|---|
| github.com |
GitHub
|
| github.com |
Edit in GitHub
|
| github.com |
Juho
Vepsäläinen
|
Конкуренты Готовность: 0%
Конкуренты в Яндексе
Кол-во: 0
Топ сайтов-конкурентов в Яндексе
?
Сайты, чаще всего появляющиеся в ТОПе Яндекса по запросам из семантического ядра этой страницы.
Мы не нашли у вас конкурентов в Яндексе. Сайт или очень молодой или плохо продвигается.
Конкурентов в ТОП-10 Яндекса не нашлось.
Конкуренты в Google
Кол-во: 0
Топ сайтов-конкурентов в Google
?
Сайты, чаще всего появляющиеся в ТОПе Google по запросам из семантического ядра этой страницы.
Конкуренты в Google тоже не найдены. Займитесь продвижением сайта!
Конкурентов в ТОП-10 Google не нашлось.
ЗоЗПП: права потребителей Готовность: 100%
Нарушения
Не выявлены
Признаков дистанционной продажи товаров (интернет-магазина) не обнаружено — требования ЗоЗПП о раскрытии информации продавца к сайту не применяются. Нарушений нет.
ФЗ-149: рекомендательные технологии Готовность: 100%
Нарушения
Не выявлены
Рекомендательные блоки («с этим покупают», «похожие товары» и т.п.) на сайте не обнаружены — требования ст. 10.7 ФЗ-149 к сайту не применяются. Нарушений нет.
ФЗ-38: реклама Готовность: 100%
Нарушения
Не выявлены
Рекламных тематик с обязательными оговорками (медицина, БАД, кредиты и займы, новостройки) на сайте не обнаружено. Нарушений нет.
ФЗ-436: защита детей Готовность: 100%
Нарушения
Не выявлены
Признаков информационной продукции (новости, видео, книги, игры, курсы) не обнаружено — обязательная возрастная маркировка по ФЗ-436 сайту не требуется. Нарушений нет.
Вердикт
Страница https://sidewind.js.org/examples/ готова к продвижению на 71%. Чтобы еще улучшить страницу и попасть на первые места поисковой выдачи необходимо:
Исправьте ошибки в мета-тегах.
Исправьте ошибки оптимизации.
Поделитесь с друзьями: