Обновил дизайн и некоторую логику работы вчерашнего скрипта
Напомню как он работает:
Вы подключаете на свой сайт 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 выдает множество массивов данных:
В заключение
Если у вас есть идеи для оформления карточек постов - буду рад их выслушать!
Осталось только свой сайт завести. Шучу. Замечательно получилось, вот бы мне так научиться.
По хорошему такое должно было бы быть частью golos.io. Как на всяких Facebook-ах или Tweeter-ах. "embed post". Нажал на посте кнопочку [встроить пост] и получил код для вставки в страницу.
Сделайте issue под это дело. @hipster же агитирует.
@vik, Поздравляю!
Ваш пост был упомянут в моем хит-параде в следующей категории:
о круто, надо протестить. довольно простое решение на первое время. ибо мучаться с полноценным клиентом - это ппц надолго, а связывать сайт и блокчейн надо вот уже)
Вот это нужная штуковина! Завтра попробую протестировать. За эту работу спасибо.