Обновил дизайн и некоторую логику работы вчерашнего скрипта
Напомню как он работает:
Вы подключаете на свой сайт js плагин, для этого нужно зайти в редактор шаблонов вашего сайта и внутри тегов <head></head> или перед тегом </body> вставить следующую строчку:
<script async src="https://chain.cf/scripts/embedgolos.js"></script>
После этого, любая ссылка на вашем сайте ведущая на пост в голосе будет преобразована во встроенную карточку.
Таким образом вы сможете отображать посты с голоса на вашем сайте в выгодном свете с акцентами на преимущества golos.io
Кроме того данный плагин поможет вам создать страничку своего блога за считанные минуты - просто "накидайте" ссылок на страницу своего сайта и они будут преобразованы в карточки постов.
Демо
Работу плагина вы можете посмотреть на странице https://golos.rubtc.info/embeds/
Обращаю внимание, что в данном примере скрипт специально работает не автоматически, что бы было проще понять принцип работы. Что бы преобразовать ссылки - нужно нажать на кнопку. В обычной же версии все происходит на лету и автоматически.
Что нового
В первую очередь оформлен внешний вид, добавлена анимация и цветовые акценты
Карточка отображает:
- Изображение поста в том числе анимированное
- Имя автора
- Заголовок
- Количество голосов
- Вознаграждение автора в GBG (В первые сутки потенциальное, далее выплаченные GBG)
- Вознаграждение кураторов (Выплаченная награда отображается в GBG, а потенциальная в %)
- Завлекающую строку, где указано, что GBG - это настоящее золото :)
- Анимацию слогана голоса:
Вознаграждение кураторов для постов которым более суток отображается в GBG
Для свежеопубликованных постов отображается заглушка гласящая, что кураторы получат ~25%
Поправьте меня, если доля должна быть другой!
Если автор отказался от награды, об этом так же будет заметка:
Карточка адаптивно растягивается по ширине области в которой размещена ссылка. Для телефонов есть компактный режим
Описание работы скрипта для вебмастеров
Исходник https://github.com/vikxx/golos/blob/master/postsembed.js
<script async src="https://chain.cf/scripts/embedgolos.js"></script>
Скрипт выше содержит библиотеку для вебсокет-связи с API голоса/стима steemjs.com/ ( https://github.com/ontofractal/golosjs )
За вывод карточек постов отвечает скрипт ниже:
Собираем все ссылки на странице, если ссылка содержит https://golos.io/, то парсим логин и ссылку на пост и записываем данные в массив p , так же динамически добавляем каждой ссылке свой id a[i].setAttribute("id", "golosio-"+[n]);n++;
var n=0,i,p=[],f,a = document.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].href.includes('https://golos.io/') ) {
f = a[i].href;
console.log(a[i].href);
a[i].setAttribute("id", "golosio-"+[n]);n++;
userpost = f.substring(f.indexOf('@')).substring(1),
p.push({
u : userpost.substring(0, userpost.indexOf('/')),
p : userpost.substring(userpost.indexOf('/')).substring(1)
});
}
}
Далее создаем цикл для количества найденных ссылок с голоса for (i = 0; i < p.length; i++)
Получаем контент для каждой ссылки через API steem.api.getContent(p[i].u, p[i].p, function(err, d)
Контент сортируем по переменным и заменяем ссылки на контент функцией document.getElementById("golosio-"+c).innerHTML = ('Тут переменные и html');
var c=0;
for (i = 0; i < p.length; i++) {
steem.api.getContent(p[i].u, p[i].p, function(err, d) {
console.log(d);
var meta = JSON.parse(d.json_metadata),oneimg = meta.image[0];
var kura = d.curator_payout_value,
pre="<strong>Вознаграждение за пост ",
z='*</strong> <p class="gl-curat">Курс токена сети: *1 GBG = 1 мг Золота.';
if(d.mode == "first_payout"){
rw=pre+d.total_pending_payout_value+z+' Награда голосующим <span>~25%</span></p>'}
else if(d.author_rewards !== 0){
rw=pre+d.total_payout_value+z+' Награда голосующим <span>'+kura+'</span></p>'}
else{rw='Автор отказался от награды';}
document.getElementById("golosio-"+c).innerHTML = ('ВЫВОД КАРТОЧКИ НА СТРАНИЦУ');
c++;
});
}
Оформляем все подключив inline CSS:
var css = '',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}head.appendChild(style);
При желании можно вывести в карточку много различной информации, в том числе и весь контент поста так как запрос getContent выдает множество массивов данных:
В заключение
Если у вас есть идеи для оформления карточек постов - буду рад их выслушать!
.webp)
Осталось только свой сайт завести. Шучу. Замечательно получилось, вот бы мне так научиться.
По хорошему такое должно было бы быть частью golos.io. Как на всяких Facebook-ах или Tweeter-ах. "embed post". Нажал на посте кнопочку [встроить пост] и получил код для вставки в страницу.
Сделайте issue под это дело. @hipster же агитирует.
@vik, Поздравляю!
Ваш пост был упомянут в моем хит-параде в следующей категории:
о круто, надо протестить. довольно простое решение на первое время. ибо мучаться с полноценным клиентом - это ппц надолго, а связывать сайт и блокчейн надо вот уже)
Вот это нужная штуковина! Завтра попробую протестировать. За эту работу спасибо.