Оновлений вигляд стрічки
Вирішив зупинитися на вигляді стрічки як у Threads, коли пости розділені лінією. В Threads немає ділення на “статя” та "коментар", є тільки “пост”. Я вирішив теж зробити дуже умовне розділення. Тому “коментарі” та “обговорення” матимуть такий самий вигляд, як і інші пости в стрічці, тому логічно відображати їх без відступів. На сторінці “обговорення” або “посту”, головний пост буде мати більший розмір заголовку та тексту.
Логіка обрізки контенту
Я подумав, що багато постів взагалі не потребують переходу на сторінку посту. Буде добре, якщо ми будемо залишатися в стрічці. Тому пости тепер діляться на короткі та довгі. Короткий пост це пост у якого 1 вставка і до 480 символів тексту (без врахування довжини посилання вставок). Такий пост буде відображено в стрічці повністю. Довгий пост це 2 і більше вставки, більше за 480 символів тексту. Для такого посту зʼявляється посилання “Читати далі”, а превью буде формуватися так: якщо пост починається з тексту, то буде взято 240 символів з першого абзацу. Якщо далі йде вставка (зображення або посилання), то така вставка береться для превью. Якщо пост починається зі вставки, то текст для превью не береться.
Педжинація стрічки
Додав педжинацію. Вона реалізована у вигляді кнопки “Завантажити ще”. Вона відображається тільки перший раз, далі підвантаження відбувається автоматично при скролі. Чому так? Пошуковикам не подобається, коли на сторінці є безкінечний скрол, вони не розуміють коли потрібно завершити скрол і зібрати контент. Саме для цього потрібен цей стоппер. Ця кнопка має посилання, котре можно відкрити у новій табі і почати перегляд з другої сторінки, тобто GET параметр з номером сторінки працює.
Інтегровані вставки
Розібрався з логікою відображення вставок і оптимізаціями. Якщо всі вставки додавати через фрейм, навіть звичайні посилання, то на сторінці буде надто багато IFRAME, що значно погіршить швидкість рендеру. Тому я розділив вставки на два види: посилання і фрейми. І перші і другі обробляє один сервіс, але посилання вставляються у вигляді SVG зображення, а фрейми це фрейми. Для фреймів є список доменів, корті підтримуються.
api.soundcloud.com, clips.twitch.tv, codepen.io, dailymotion.com, facebook.com,
fb.com, figma.com, giphy.com, i.giphy.com, instagram.com, linkedin.com, loom.com,
m.facebook.com, media.giphy.com, new.reddit.com, old.reddit.com, open.spotify.com,
pin.it, pinterest.ca, pinterest.co.uk, pinterest.com, reddit.com, soundcloud.com,
steamcommunity.com, store.steampowered.com, t.me, telegram.dog, telegram.me,
threads.com, threads.net, tiktok.com, twitch.tv, twitter.com, vimeo.com,
w.soundcloud.com, x.com, youtube.com, youtu.be
Також тепер не можна буде зробити текст посиланням, тому що всі посилання будуть проходити через сервіс вставок, щоб користувач бачив картку і мав більше уявлення куди він переходить. Ще я вирішив не робити повнорозмірні превью посилань, тому що часто зображення має погану картинку або вона відсутня — забирати багато простору на бите зображення це незручність.
Розгортання демо відкладається (воно у процессі), є бажання зробити його якнайшвидше.
Обговорення