Бен Холмс (Создатель Sminkity) опубликовал на разбивке журнала сегодня о Создание плагина Sток на 11ь Отказ Прочитав его, я должен был дать Sminkity попробовать.
Использование случая
У меня почти 6 лет есть маленький художественный сайт, который я настроил для него. Первоначально это было просто HTML. Затем он сделал больше искусства, поэтому я обратился в 11-е годы с Студия здравоохранения Для управления изображениями.
Как и любой подросток, всегда есть желание больше. Он хотел «вроде» кнопки, чтобы узнать, сколько людей понравилось его искусство. Несмотря на то, что объяснил ему, что я действительно был только делом сайта со своими бабушками и дедушкой, и что он не станет слишком много любит. Я обещал, что реализую эту особенность, если он последовательно нарисовал фотографии для него.
Он сделал хорошую работу, поэтому мне нужно было написать функцию …
Недостатком: У меня не было процесса сборки. Увеличивается: шанс увидеть, какие люди используют для крошечных взаимодействий!
Я потянулся в Twitter, чтобы посмотреть, какие люди думали. Даже на выходных были мнения.
От ” сверните свой собственный в js ” до ” веб-компонентами ” – ” Petite Vue ” и многое другое. Все отличные предложения. Я начал с очень простых обработчиков событий JS, но это был довольно грязный код. Я перешел на веб-компонент, но, как я обычно делаю, я разочарован ощущением веб-компонентов (я действительно хочу, чтобы они были потрясающими).
Я хочу узнать больше о Астрайс Поэтому я начал переписать сайт в Astro (так как еще не было много функциональности). Он пошел относительно хорошо, но конвейер данных все еще довольно грубая по краям. Я смог получить свой здравомыслие, но не без каких-либо раздражений (что Астро Дискор помогла мне пройти, я должен добавить!).
Быстро вперед в почту Бена и мою реализацию, что меньшинство имело те же идеи, что и астрой об островах статического контента и содержанием погибших (которые я понимаю, это будущее полотна … И, может быть, это прошлое тоже …).
Код
Ожидайте, что более крупный учебник по созреванию, но на данный момент, вот немного кода для того, как я реализовал очень простую кнопку «например,» для изображений моего сына.
После того, как я настроил мою здравоохранение, у меня был image.html Шаблон, который настроил индивидуальное пагинацию для деталей страниц для каждого из изображений – очень похоже на шаблон пост блога. Это где я хотел, чтобы кнопка «Нравится».
Я сохранил вещи очень простыми (это сайт для 6 лет в конце концов!). В основном шаблон, чтобы показать изображение с подписью. Быстро в сторону, imageurlfor Шорткод исходит от моего альфаЗнабительный плагин Image Отказ
Далее мне нужно было установить пакет Sток и изменить то, как я строил и обслуживаю свой сайт. Какая SOLBITITY имеет создание процесса сборки, который запускает ваш 11-й экземпляр, а затем запускает Vite Сервер на _site каталог (или все, что ваш файл конфигурации говорит, что ваш выходной каталог).
npm i --save-dev slinkity
{
// package.json
"scripts": {
// Start changes to slinkity --serve instead of eleventy --serve
"start": "slinkity --serve",
// Build changes to slinkity instead of eleventy
"build": "slinkity"
},
}
Как только это было установлено, я был готов создать компонент реагирования и вставить его в мой шаблон.
Компонент и шоркод реакции
Чтобы добавить компонент, мне нужно было создать Компоненты каталог внутри моего _InCludes каталог. В этом каталоге я добавил Likecounter.js файл.
Этот код, вероятно, может быть улучшен, но по своей сути это компонент, который принимает ток, такой как COUNT и ID изображения (идентификатор документа Sanity). Он использует количество для исходного HTML-дисплея (статически построенный во время сборки). Затем это выбирает обновленный счет от функции без сервеса. Функция функции без сервеса Servaness на основе идентификатора документа и получает текущий счет. У меня также есть функция без сердца для увеличения количества, когда пользователь нажимает.
реагировать Шорткод принимает ряд аргументов, которые будут проглатываться как реквизиты. В этом случае я передаю likeCount и ID Отказ
Смешанство обрабатывает остальные.
Примерно через час у меня был работающий комбинат реагирования и новый сборщик сборки. Я должен держать все то, что я люблю около 11 сюда.
Почему бы не астро?
Я изначально планировал использовать это как способ тестирования и игры с Astrojs. Мне очень понравилось играть с ним в этом случае, но конвейер данных был немного грубом, чтобы иметь дело для проглатывания данных от здравомыслия. Я знаю, что команда Astro в настоящее время работает над конвейером по данным, поэтому я уверен, что для использования таких случаев будет в ближайшее время.
Больше всего всего что-то, что астро чувствовало себя как хороший мост между миром из 11:00 и миром каркасов, таких как Next. Он чувствовал себя как я писал следующий код рядом с 11-годом, который был хорошим.
Я думаю, что оба этих достижения на 100% в будущем. Sminkity получает преимущество нынешней 11-й экосистемы и оснастки.
Следующие шаги
Прямо сейчас Sminkity просто совместим с реагированием, но я знаю, что команда работает над интеграцией с другими библиотеками (и даже ванильными JS, которые я взволнован!).
На данный момент у меня есть дополнительные идеи для использования Sminkity, чтобы добавить больше интерактивных островов без необходимости в большом процессе сборки, который является супер захватывающим для меня.