Всплывающие карточки и картинки для ссылок

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

Подтолкнула меня концепция видимых ссылок, которая показалась мне очень здравой. Как справедливо упоминает эта статья, в Википедии всплывающие карточки сделали не просто так. Я, конечно, далёк от мысли, что мой сайт можно сравнивать с Википедией, но сама идея дать читателю больше контекста с меньшими затратами весьма привлекательна, правда?

Одна из тех причин, по которым я до сих пор за всплывающие карточки не брался — мобильные устройства. На тач-скрине всплывающие карточки лишены смысла, а мне не хотелось делать на сайте что-то, чем нельзя будет пользоваться на телефоне или планшете. Не то, чтобы я был поклонником концепции «mobile first», скорее наоборот, но я всячески пытаюсь, работая над своим сайтом, не забывать и про мобильные устройства. Правда, интерфейсом gitweb на мобильном тоже не шибко удобно пользоваться, ну так и смысла пользоваться им на мобильном, откровенно говоря, немного, так что пусть уж будет. Википедия, опять таки, всплывающих карточек на мобильном не показывает; можно брать пример, пожалуй.

Со всеми этими мыслями я на этой неделе засучил рукава и открыл VSCodium. Очень помогло, что  capjamesg как раз недавно сделал всю сложную часть (знаю, знаю, надо взяться-таки за JavaScript), так что мне осталась интересная. Понятно, что я не использую такой же бэкенд, как у Джеймса, и с этим пришлось как раз разбираться самому.

Откуда, собственно, брать информацию для всплывающей карточки? Логичнее всего — с самой страницы, на которую ссылка. По причинам, о которых я уже писал, собирать эту информацию и хранить у себя, как это делает Джеймс — не моё, так что очевидным решением стал снова indieweb-glue. Понятно, пришлось сначала научить его возвращать информацию о страницах (а не только о людях). Брать же информацию на страницах было решено, для начала, из Open Graph protocol, благо он широко распространён, и на многих страницах в Сети соответствующие мета-тэги есть.

В indieweb-glue я добавил обработку этих мета-тэгов (заодно пришлось немного отрефакторить код), а скрипт Джеймса немного переделал, чтобы он забирал информацию из indieweb-glue. Заодно научил скрипт работать с заранее определённым классом, а не просто с <article>, — так удобнее контролировать, где всплывающие карточки нужны, а где лучше без них. Добавил щепотку CSS, и всё заработало вполне удовлетворительно. Признаюсь, сам удивился.

Приятным бонусом стало то, что можно использовать этот же скрипт, чтобы «на лету» делать всплывающие карточки для сносок¹; пожалуй, это меня порадовало ещё больше. Сноски меня вообще давно нервировали. С одной стороны, это — замечательный инструмент в арсенале писателя, незаменимый для сохранения плавности изложения без отвлечений и уводов от темы. С другой — в цифровом мире текст сноски сплошь и рядом оказывается за пределами экрана, и перемотка или переход по ссылке обычно чересчур сбивают с мысли. На бумаге-то достаточно просто посмотреть вниз; человек достаточно хорошо справляется с задачей возврата взгляда обратно в текст, чтобы просмотр сноски не сильно отвлекал от чтения. Возможность увидеть текст сноски во всплывающей карточке, кажется, — неплохой компромисс.

То, что получилось, пока далеко от идеала. Надо допилить CSS, а то карточки не всегда опрятно выглядят, особенно если картинка вертикальная. indieweb-glue надо научить брать информацию не только из Open Graph protocol; например, у страниц Википедии нет og:description, зато первый абзац самого текста — явно именно то, что должно быть в карточке². В планах и доработка скрипта: было бы здорово научить его распознавать особые случаи, и, например, для person mentions заполнять карточку данными из H-Card.

Ну и, поскольку работа продолжается, за любые комментарии, советы и мысли о том, как лучше всё организовать, я буду очень признателен.

Пока писал этот пост, заметил, что для первой ссылки (та, что на статью  Мэгги Эпплтон) в карточке появляется нарядная картинка-обложка, сгенерированная, очевидно, автоматически. Я, разумеется, немедленно захотел себе что-то подобное для страниц, на которых нет «основной» картинки.

Вообще говоря, протокол Open Graph говорит, что свойство og:image — обязательное, то есть должно быть у каждой страницы. Конечно, искать для каждого поста (не говоря уж о твитоподобных заметках) подходящую (или хотя бы примерно годную) картинку слишком хлопотно. У этой проблемы есть три возможных решения: можно завести общую картинку для всего сайта, и ставить её «обложкой» на страницы, где своей картинки нет; можно генерировать картинки-обложки автоматически; наконец, можно просто плюнуть и на (значительной) части страниц не иметь картинки вовсе. Собственно, последний вариант нарушает протокол, но весьма распространён, и на моём сайте тоже до последнего времени использовался именно он.

Я поспрашивал (в чате русскоязычного индивеба, само собой). Судя по всему, большинство (включая Мэгги) пользуется «безголовым» браузером Playwright, разработанным для тестирования, чтобы автоматически открыть страницу и сделать её «скриншот» (который и становится картинкой-обложкой). Подход, надо признать, изобретательный, но к тому, как всё устроено у меня, не очень применимый. При дальнейшем погружении в тему нашлись специально для Hugo разработанная утилита, а также изрядное количество инструкций по созданию таких изображений средствами JavaScript или Python. Инструкции, наконец, подтолкнули меня подумать головой, и в итоге я написал шаблон, который создаёт картинку автоматически для каждой странице, на которой «обложки» не хватает, прямо средствами самого Hugo.

Работает, хотя и в этом случае, конечно, доделок предстоит ещё много. Возможности обработки изображений в Hugo не безграничны, да к тому же меня очень сложно назвать «визуалом», и такие вещи всегда даются мне тяжело. Пока у меня совсем простенький скрипт, в котором задействованы только иконка сайта, информация об авторе и заголовок страницы, и нет никакого³ механизма, учитывающего длину заголовка, поэтому текст то и дело выезжает за пределы картинки или, наоборот, выглядит мелковато. Радует, что многие из имеющихся недостатков можно будет, при желании, со временем устранить, а скрипт доработать, чтобы использовал и другие данные о странице, для которой генерируется картинка. В любом случае, то, что получилось, лучше, чем ничего. По крайней мере, теперь на каждой странице есть свойство og:image — уже немало.