Глеб Свечников, фронтенд-разработчик Инфокультуры, поделился подробностями разработки новой версии проекта https://datacatalogs.ru.
Вот, что Глеб рассказывает об обновлении фронтенд-части:
«Предыдущая версия этого проекта была сделана Softr и Airtable, но нам стало нужно больше возможностей и кастомизации, которые Softr не мог предоставить. Поэтому я решил использовать 11ty для обновления.
Задачи — добавить фасетный поиск и улучшить SEO для этого проекта. Пакет Airtable npm работает с экосистемой 11ty, поэтому интеграция с текущим источником данных была очень простой.
Следующим шагом я разработал фасетный поиск на чистом javascript, чтобы пользователь мог фильтровать и искать по нашей коллекции ресурсов и делиться конкретными результатами поиска (каждый объект имеет уникальную ссылку с параметрами URL).
Следующим шагом было добавление отдельной страницы для каждого ресурса, это очень простая задача для 11ty, которая может быть выполнена с pagination и permalink в кратчайшие сроки. Первоначальная генерация 200+ страниц заняла около 14 секунд (на Macbook Air M1). С помощью eleventyComputed вся необходимая информация была представлена в мета-тегах для каждой страницы.
Меня попросили пойти немного дальше и создать OG изображения. С помощью @11ty/eleventy-img и text-to-svg-path это было сделано. Первоначальная идея была довольно проста:
- взять текст, преобразовать его в svg;
- объединить текст svg с логотипом и фоном;
- затем конвертировать svg в статичное изображение jpg.
Проблема возникла с длинными названиями ресурсов и именами владельцев. Поэтому я написал набор правил, которые разделяют такие длинные строки. Не очень масштабируемый, но быстрый и легко расширяемый. В итоге результат получился неплохим.
Должен отметить, что генерация изображений OG занимает некоторое время сборки и оперативную память. Пока я пишу этот пост, нам нужно сгенерировать более 300 страниц, и процесс сборки занимает около 37 секунд (около 100 мс для каждой страницы). Агент сборки занимает около 4 ГБ оперативной памяти».
Источник: https://lnkd.in/eTwqxXyt
#opendata #datacatalogs #data #frontend #airtable #11ty #seo
Вот, что Глеб рассказывает об обновлении фронтенд-части:
«Предыдущая версия этого проекта была сделана Softr и Airtable, но нам стало нужно больше возможностей и кастомизации, которые Softr не мог предоставить. Поэтому я решил использовать 11ty для обновления.
Задачи — добавить фасетный поиск и улучшить SEO для этого проекта. Пакет Airtable npm работает с экосистемой 11ty, поэтому интеграция с текущим источником данных была очень простой.
Следующим шагом я разработал фасетный поиск на чистом javascript, чтобы пользователь мог фильтровать и искать по нашей коллекции ресурсов и делиться конкретными результатами поиска (каждый объект имеет уникальную ссылку с параметрами URL).
Следующим шагом было добавление отдельной страницы для каждого ресурса, это очень простая задача для 11ty, которая может быть выполнена с pagination и permalink в кратчайшие сроки. Первоначальная генерация 200+ страниц заняла около 14 секунд (на Macbook Air M1). С помощью eleventyComputed вся необходимая информация была представлена в мета-тегах для каждой страницы.
Меня попросили пойти немного дальше и создать OG изображения. С помощью @11ty/eleventy-img и text-to-svg-path это было сделано. Первоначальная идея была довольно проста:
- взять текст, преобразовать его в svg;
- объединить текст svg с логотипом и фоном;
- затем конвертировать svg в статичное изображение jpg.
Проблема возникла с длинными названиями ресурсов и именами владельцев. Поэтому я написал набор правил, которые разделяют такие длинные строки. Не очень масштабируемый, но быстрый и легко расширяемый. В итоге результат получился неплохим.
Должен отметить, что генерация изображений OG занимает некоторое время сборки и оперативную память. Пока я пишу этот пост, нам нужно сгенерировать более 300 страниц, и процесс сборки занимает около 37 секунд (около 100 мс для каждой страницы). Агент сборки занимает около 4 ГБ оперативной памяти».
Источник: https://lnkd.in/eTwqxXyt
#opendata #datacatalogs #data #frontend #airtable #11ty #seo
datacatalogs.ru/
Каталог каталогов открытых данных
Поиск и фильтрация каталогов открытых данных
❤3👍1