Рубрики
Без рубрики

Быстрый эксперимент с плагином STRinkity 11TY

Бен Холмс (Создатель Sminkity) разместил на разбивке журнала сегодня о создании … Помечено с элементом, JavaScript, JamStack, WebDev.

Бен Холмс (Создатель Sminkity) опубликовал на разбивке журнала сегодня о Создание плагина Sток на 11ь Отказ Прочитав его, я должен был дать Sminkity попробовать.

Использование случая

У меня почти 6 лет есть маленький художественный сайт, который я настроил для него. Первоначально это было просто HTML. Затем он сделал больше искусства, поэтому я обратился в 11-е годы с Студия здравоохранения Для управления изображениями.

Как и любой подросток, всегда есть желание больше. Он хотел «вроде» кнопки, чтобы узнать, сколько людей понравилось его искусство. Несмотря на то, что объяснил ему, что я действительно был только делом сайта со своими бабушками и дедушкой, и что он не станет слишком много любит. Я обещал, что реализую эту особенность, если он последовательно нарисовал фотографии для него.

Он сделал хорошую работу, поэтому мне нужно было написать функцию …

Недостатком: У меня не было процесса сборки. Увеличивается: шанс увидеть, какие люди используют для крошечных взаимодействий!

Я потянулся в Twitter, чтобы посмотреть, какие люди думали. Даже на выходных были мнения.

От ” сверните свой собственный в js ” до ” веб-компонентами ” – ” Petite Vue ” и многое другое. Все отличные предложения. Я начал с очень простых обработчиков событий JS, но это был довольно грязный код. Я перешел на веб-компонент, но, как я обычно делаю, я разочарован ощущением веб-компонентов (я действительно хочу, чтобы они были потрясающими).

Я хочу узнать больше о Астрайс Поэтому я начал переписать сайт в Astro (так как еще не было много функциональности). Он пошел относительно хорошо, но конвейер данных все еще довольно грубая по краям. Я смог получить свой здравомыслие, но не без каких-либо раздражений (что Астро Дискор помогла мне пройти, я должен добавить!).

Быстро вперед в почту Бена и мою реализацию, что меньшинство имело те же идеи, что и астрой об островах статического контента и содержанием погибших (которые я понимаю, это будущее полотна … И, может быть, это прошлое тоже …).

Код

Ожидайте, что более крупный учебник по созреванию, но на данный момент, вот немного кода для того, как я реализовал очень простую кнопку «например,» для изображений моего сына.

После того, как я настроил мою здравоохранение, у меня был image.html Шаблон, который настроил индивидуальное пагинацию для деталей страниц для каждого из изображений – очень похоже на шаблон пост блога. Это где я хотел, чтобы кнопка «Нравится».

Я сохранил вещи очень простыми (это сайт для 6 лет в конце концов!). В основном шаблон, чтобы показать изображение с подписью. Быстро в сторону, imageurlfor Шорткод исходит от моего альфа Знабительный плагин Image Отказ

--------
layout: "base.html"
pagination: 
    data: images
    size: 1
    alias: image
permalink: "{{ image.slug }}/index.html"
--------

{{ image.caption }}

Далее мне нужно было установить пакет 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 на основе идентификатора документа и получает текущий счет. У меня также есть функция без сердца для увеличения количества, когда пользователь нажимает.

import React, { useEffect, useState } from 'react'

function LikeCounter({likeCount, id}) {
  const [count, setCount] = useState(likeCount)
  useEffect(() => {
    fetch('/.netlify/functions/getLikes', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
            },
            body: JSON.stringify({image: id})
            })
            .then(res => res.json())
            .then(res => {
                setCount(res.count)
            })


  }, [])
  async function handleClick() {
    setCount(count + 1)

    fetch('/.netlify/functions/setLikes', {
          method: 'POST',
          body: JSON.stringify({
              image: id
              })
            })
            .then(res => res.json())
            .then(res => {
                console.log(res)
                setCount(res.count)
            })
}

  return (
    

This photo has {count} likes ❤️

) } export default LikeCounter

Как только компонент создан, я добавил компонент к моему шаблону.

--------
layout: "base.html"
pagination: 
    data: images
    size: 1
    alias: image
permalink: "{{ image.slug }}/index.html"
--------

{% react 'components/LikeCounter' 'likeCount' image.count 'id' image._id %}
{{ image.caption }}

реагировать Шорткод принимает ряд аргументов, которые будут проглатываться как реквизиты. В этом случае я передаю likeCount и ID Отказ

Смешанство обрабатывает остальные.

Примерно через час у меня был работающий комбинат реагирования и новый сборщик сборки. Я должен держать все то, что я люблю около 11 сюда.

Почему бы не астро?

Я изначально планировал использовать это как способ тестирования и игры с Astrojs. Мне очень понравилось играть с ним в этом случае, но конвейер данных был немного грубом, чтобы иметь дело для проглатывания данных от здравомыслия. Я знаю, что команда Astro в настоящее время работает над конвейером по данным, поэтому я уверен, что для использования таких случаев будет в ближайшее время.

Больше всего всего что-то, что астро чувствовало себя как хороший мост между миром из 11:00 и миром каркасов, таких как Next. Он чувствовал себя как я писал следующий код рядом с 11-годом, который был хорошим.

Я думаю, что оба этих достижения на 100% в будущем. Sminkity получает преимущество нынешней 11-й экосистемы и оснастки.

Следующие шаги

Прямо сейчас Sminkity просто совместим с реагированием, но я знаю, что команда работает над интеграцией с другими библиотеками (и даже ванильными JS, которые я взволнован!).

На данный момент у меня есть дополнительные идеи для использования Sminkity, чтобы добавить больше интерактивных островов без необходимости в большом процессе сборки, который является супер захватывающим для меня.

Оригинал: “https://dev.to/brob/quick-experiment-with-the-slinkity-11ty-plugin-3dcm”