webrunes / default-wrio-theme Goto Github PK

Перевести на react. Прежние задачи для информации
#69
#64
При нажатии на cover или ссылки на списки (blog, photos на примере webrunes.com) нужно открывать их на этой же странице (т.е. без перехода на новый url), можно в iframe.

We add a new schema - itemList. It's the same schema we're using in Plus.
http://webrunes.com/list.htm was added and it must be displayed as article but in format '+' list. Dive into prototype Default-WRIO-Theme/blogs-list.htm for an example. Ignore right side for this time, do it blank.

First task is create a main navigation widget. All widgets have to be an independent for ease reuse. In the json-ld (more info could be found at json-ld.org) page included wr.io/main.js script, example of json-ld is here:
https://raw.githubusercontent.com/webRunes/Default-WRIO-Theme/prototype/1WJyH1k7_en-US.html

This wr.io/main.js (not working yet, but working example is below) calls Angularjs template, open source is here:
https://github.com/webRunes/Default-WRIO-Theme
please fork it to improve

and convert json-ld into:
https://raw.githubusercontent.com/webRunes/Default-WRIO-Theme/prototype/1WJyH1k7_en-US.htm
please download https://github.com/webRunes/Default-WRIO-Theme/tree/prototype so you can open it in browser

working example:
https://vkozyref.github.io/test/1WwZGOSH1kJy7a-zNisxGoJcH0_Aku9bL4bSaNCeVz0ezHSY_en-US.html
the example have to be improved by adding to main menu two tabs, so user can switch between them.

https://raw.githubusercontent.com/webRunes/Default-WRIO-Theme/prototype/1WJyH1k7_en-US.png

So, you have to create 4 github repos:

1. put main.js
2. upload https://raw.githubusercontent.com/webRunes/Default-WRIO-Theme/prototype/1WJyH1k7_en-US.html
3. upload second dummy article https://raw.githubusercontent.com/webRunes/Default-WRIO-Theme/prototype/3dJj3suS_en-US.html
4. put Angularjs theme: fork https://github.com/webRunes/Default-WRIO-Theme

wr.io/main.js is a conductor script and have to be independent from angularjs template.

Files in repo2 and repo3 have to load main.js from repo1. This main.js have to call Angularjs theme from repo4. If user open in browser (please note, you have to convert repo2 and repo3 into https://pages.github.com/) 1WJyH1k7_en-US.html from repo2 or 3dJj3suS_en-US.html from repo3, he will see it inside Angularjs theme like it done here https://vkozyref.github.io/test/1WwZGOSH1kJy7a-zNisxGoJcH0_Aku9bL4bSaNCeVz0ezHSY_en-US.html

https://github.com/johnpapa/angularjs-styleguide following is required.

Update Login ticket according prototype use as an example:

Default-WRIO-Theme/1WJyH1k7_en-US.htm

For preview:

wrio.s3-website-us-east-1.amazonaws.com/Default-WRIO-Theme/img/no-photo-200x200.png

Name:, Registered:

and etc. set as "undefined". Link

Upgrade guest account for free 30 days left и Already have an account?

left as static at this point. Add a Twitter login button under it, we will improve login process a bit later.

Add widget (name it "details") under right menu according prototype

Default-WRIO-Theme/1WJyH1k7_en-US.htm

Language, Author

and etc. set as "undefined". Take description info from json-ld: "about".

Point default theme

Default-WRIO-Theme

to

default.wrioos.com

It's already created.

Аналогично задаче #23

<div itemscope="" itemtype="http://schema.org/ItemList" >...</div>,

Cover - это тот же itemList только отображается в другой разметке, пример разметки itemList для Cover можно найти здесь:

Default-WRIO-Theme/blogs.htm

Ссылки в тексте кавера расставляются и работают также как в #27
ВАЖНО: разница лишь в том, что для каждого кавера свой отдельный набор mentions.

После нажатия на Cover в меню, отображать данную вставку и данные в нем и скрывать article как в #23

json-ld для примера выше

Default-WRIO-Theme\examples\v2\cover.htm

Текст в cover вроде

подбор интересного контента на основе ваших предпочтений

берется из text и разбивается по пунктам, см. пример

"text": [
"подбор интересного контента на основе ваших предпочтений",
"отображение и организация любимых сайтов в удобном для вас виде",
"единый каталог всех ваших статей, книг, фото / аудио / видео материалов",
"возможность поддержки ваших любимых авторов материально"
]

thumbnail

используется для картинки-превью в тикетах, а

contentUrl

использовать для отображения картинки в кавере.

Please add .travis.yml to build through
https://travis-ci.org/webRunes/Default-WRIO-Theme
so files like this one http://wrio.s3-website-us-east-1.amazonaws.com/Default-WRIO-Theme/widget/defaultList.htm can be accessed via aws

Open profile by clicking on Login ticket. At this moment it happens while clicking on

My profile

remove it.

Update Titter comment section according prototype

Default-WRIO-Theme/blogs-post.htm

Show for pages without comment's ID like

http://webrunes.com/ru/

"Comments disabled. Enable" (link is static at this moment), for others show field like in prototype.

We're going to improve article widget. Now it must render cover and lists.

http://webrunes.com/index.htm

was updated and now contains cover and list json-ld.
Cover json-ld:

    <script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "ItemList",
        "name": "My cover list for hub",
        "itemListElement": [
        {
              "@type": "ItemList",
              "name": "Cover",
              "description": "Info about list",
              "image": "wrio.s3-website-us-east-1.amazonaws.com/Default-WRIO-Theme/img/no-photo-200x200.png",
              "url": "http://webrunes.com/cover.htm?cover"
        }
        ]
        }
    </script>

At this point we have at http://webrunes.com/index.htm in right menu "My cover list for hub", but it must be "Cover" (take it from "name": "Cover"). A "name": "My cover list for hub" for Plus tab if list opened as a tab.

The same for lists json-ld:

    <script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "ItemList",
        "name": "My lists",
        "itemListElement": [
        {
              "@type": "ItemList",
              "name": "Blog",
              "description": "Info about list",
              "image": "wrio.s3-website-us-east-1.amazonaws.com/Default-WRIO-Theme/img/no-photo-200x200.png",
              "url": "http://webrunes.com/blog-list.htm"
        },
        {
              "@type": "ItemList",
              "name": "Photos",
              "description": "Info about list",
              "image": "wrio.s3-website-us-east-1.amazonaws.com/Default-WRIO-Theme/img/no-photo-200x200.png",
              "url": "http://webrunes.com/photos-list.htm"
        }
        ]
        }
    </script>

Change "My lists" in right menu to two options:
Blog (from "name": "Blog")
and
Photos (from "name": "Photos").

Next step a little bit tricky. At this point please ignore "Cover" (http://webrunes.com/index.htm#cover) menu option, we'll return to it later. After click on "Blog" system must hide the article and show itemList loaded from http://webrunes.com/blog-list.htm. The same for "Photos" - http://webrunes.com/photos-list.htm#Photos. Once again: please note, we still on http://webrunes.com/index.htm#Blog but load and show itemList from http://webrunes.com/blog-list.htm. Thats important for some reasons that I'm not going to describe in the issue.

Comments должны быть видны лишь для статьи, убрать для
https://webrunes.com/ru/?list=Photos
https://webrunes.com/ru/?list=Cover
Добавить флаг сокрытия для всего, показывать лишь в случае отображения article. Для
https://webrunes.com/blog.htm?list=Cover#
https://webrunes.com/blog.htm?list=Blog#
не должно быть.

Person станет первым json-ld работающим как хранилище Facts. О нем будет отдельно написано в книге о WRIO OS, некоторые детали расскажу по скайпу. Все что пока надо знать, это то, что страница профайла пользователя будет представлять собой обычный article, но с дополнительным json-ld блоком на базе

http://schema.org/Person

Для примера см. прототип

Default-WRIO-Theme\examples\Alexey-Anshakov.html

См. блок
<!-- json-ld for facts -->

В примере указаны лишь данные по дате рождения, имени и имени "друга", чтобы не перегружать страницу. Естественно, настоящая страница будет содержать полный список данных из

http://schema.org/Person

Обратить внимание на флаг

&birthDate

в конце ссылки из mentions. Этот флаг необходим для привязки к json-ld, чтобы в случае изменения система поняла, что данные были обновлены и их нужно поменять - через сравнение в тексте и в оригинальном источнике.

In the example

Default-WRIO-Theme\examples\v2\article-links.htm

the code was added

"mentions": [
{
"@type": "Article",
"name": "Title of the link",
"about": "Text inside the ticket popup.",
"url": "webrunes.com/blog.htm?'dolor sit amet':1,104"
}
]

That example shows you what we must see as a result:

Default-WRIO-Theme\examples\The-story-of-the-cat.htm

mentions always goes at the end of article and there can be only the one mentions part per json-ld. "about": is not important at this point of time.
"url": is a url for link. Most important are text and digits at the end of it:

"url": "webrunes.com/blog.htm?'dolor sit amet':1,1,104"

First "1" told us, the url is in first part (we have more links in hasparts for example), second "1" told about paragraph number at this part, and last one "104" - let us know about sequence number where we must find "dolor sit amet". Next text must coincide with text follows that sequence number symbol and looks like a link. Please note, the link must be not

webrunes.com/blog.htm?'dolor sit amet':1,1,104

but with a "name":

webrunes.com/blog.htm?'Title of the link'

We need that title only to increase readability and informational content of the link.

That approach may be confusing and be a little bit ugly from architecture point of view, but that lets us create fully decentralized and semantic web based on json-ld. Moreover, search services can link an article on the others and the approach let us be in schema.org frame. Don't worry about complicated rules, nobody will write json-ld manually, but using editor.

Chapter 2 - is an example of ticket link (like in itemList), this ticket opens a separate article. Please note that link for it not in mentions, but inside "haspart".

Please make autobuild for

https://travis-ci.org/webRunes/Default-WRIO-Theme

so we got updated files in

http://wrio.s3-website-us-east-1.amazonaws.com/Default-WRIO-Theme/

At this moment we have new version of

https://webrunes.github.io/Default-WRIO-Theme/widget/article.htm

and we need it there

http://wrio.s3-website-us-east-1.amazonaws.com/Default-WRIO-Theme/widget/article.htm

Нужно отделить в правом меню разделы из itemList вроде blog и offer для https://webrunes.com. Для примера см. в прототипе страницу core-create.htm -- раздел "Feed".

Также отделить и Cover от других пунктов меню несмотря на то, что в прототипе он не отделен.

Уточнение терминологии: виджеты - для вставки на json-ld страницу некоего функционала. Для простоты article, person (бывший profile) и пр. мы также будем хранить в папке widget (создана в master) с теми же именами что использует schema.org.
В связи с этим нам больше не потребуется версионность и кастомный раздел.
""
мы его убираем, вместо этого система будет понимать каким виджетом обрабатывать из

"@context": "http://schema.org",
"@type": "Article",

в данном случае использовать article, а для

"@context": "http://schema.org",
"@type": "Person",

использовать person виджет. Для itemList (бывший list) будет

"@context": "http://schema.org",
"@type": "ItemList",

В дальнейшем вариантов будет больше. В тех случаях когда надо обработать виджетом не по умолчанию, например, список для кавера, то для
wall2003.github.io/webRunes-WRIO-Hub/list-name.html
будет добавляться в ссылку post переменная вида
wall2003.github.io/webRunes-WRIO-Hub/list-name.html?cover
в случае обычной ссылки, откроется через стандартный виджет itemList:
wall2003.github.io/webRunes-WRIO-Hub/list-name.html
что идентично
wall2003.github.io/webRunes-WRIO-Hub/list-name.html?itemList

В примере http://webrunes.com/ код cover такой:

{
"@context": "http://schema.org",
"@type": "ItemList",
"name": "Cover",
"url": "http://webrunes.com/cover-name.htm?cover"
}

Система будет проходить по json-ld и для каждого раздела добавлять новую разметку, а в меню новые пункты. Для страницы на
http://webrunes.com/
WRIO.js должен создать "Cover" раздел над остальным меню, так как идет первым. Что дальше с ним делать - будет в отдельной задаче.

А код идущий еще ниже

{
"@context": "http://schema.org",
"@type": "ItemList",
"name": "List name",
"url": "http://webrunes.com/list1-name.htm"
},
{
"@context": "http://schema.org",
"@type": "ItemList",
"name": "List name2",
"url": "http://webrunes.com/list2-name.htm"
}

должен добавить в меню два пункта "List name" и "List name2". Детали по ним будут в следующей задаче.

Cover - для отображения картинок с описанием, у которых могут быть разные цели: для профайла - фото пользователя с описанием его хобби и целей в жизни, для компании: реклама продуктов, для приложений: описание для чего и т.д.
itemList - обычно это будет список постов собранных по той или иной теме: любимые книги для пользовательского профайла, для блогов: посты, для компаний: новости и т.д.
Как уже говорилось выше, в виде json-ld cover - тот же list, даже ссылка на файл может быть один и тот же в кавере и списке, только отобразится через разные виджеты. У cover и list со временем будет реализован разный функционал.
Cоздать два новых виджета в https://github.com/webRunes/Default-WRIO-Theme, в папку
Widget\cover.htm
и
Widget\itemList.htm
Со временем после обработки WRIO.js они будут выглядеть как
Default-WRIO-Theme/blogs-list.htm

Помимо этого сюда же добавить
Widget\person.htm
с его помощью должна открываться страница http://wall2003.github.io/webRunes-WRIO-Hub/Alexey-Anshakov.html. Пока Person будет копией Article.

После мы займемся Plus, по каким правилам и как ему отображать хабы и посты.

Update Plus widget according

Default-WRIO-Theme/blogs-post.htm

Anchors like

http://webrunes.com/#Над чем мы работаем

doesn't works, please change space on "_" to create anchors, so we'll get

http://webrunes.com/#Над_чем_мы_работаем

Visit http://webrunes.com/ and click "edit", you'll see 3 scrolls, we have to increase iframe height from 600px to 700px to remove one of them.
Increase width of "Enter widget data ..." to 100%.

Разработать набор символов в тексте для определения callout и header для него. По всей видимости, будет в виде mentions.
За пример взять https://wrioos.com/ru/
Видимо, отображать справа от основного текста, пример в прототипе:
blogs-post-guest.htm
Callout может быть трех цветов: синий (предложение по улучшению), желтый (примечание) и оранжевый (ошибка).

Страница

http://wrioos.com/#

содержит в себе код

"image": [...

отвечающий за картинку. Добавить ее отображение в тексте. Должна отображаться на полную доступную ширину если больше и в актуальном размере если колонка шире картинки.
Под картинкой отображать текст из "description".

"contentUrl": "http://webrunes.com/img/cover1.jpg?5,0"

цифры говорят о том, где должна быть вставлена картинка, аналогично ссылке. Т.е. перед 5 абзацем (отсчет тот же что и при url) и нулевым символом.

Ошибка отображения кавера при открытии любого хаба, стрелки только видны, но нет картинки. В случае открытия хаба через Plus проблемы нет. Помимо этого нет отображения Cover как активного пункта в меню.

Почему-то не открывается кавер для

http://webrunes.com/blog.htm

Favicon missed.

Разделить абзацы между собой как это сделано в прототипе blogs-post.htm

В случае длинного меню на мобильных нет скролла для правого меню и Plus.

Application Cache: FALLBACK must be using to open 404 widget. Look at prototype for details

Default-WRIO-Theme/404.htm

Fix

"NetworkError: 404 Not Found - http://wrio.s3-website-us-east-1.amazonaws.com/Default-WRIO-Theme/css/webrunes.css"

Check console and fix all errors.

При переходе по ссылкам меню для itemList нужно добавлять '?list=название itemList' как это работает для article в виде '#'

http://wrioos.com/#Цели

чтобы по url можно было открывать сразу нужный раздел, например

http://wrioos.com/?list=Cover
http://wrioos.com/?list=Blog

Добавить вставку itemList на страницу при парсинге json-ld.

<div itemscope="" itemtype="http://schema.org/ItemList" >...</div>

Пример разметки itemList можно найти здесь:

Default-WRIO-Theme/blogs-list.htm

После нажатия на ссылку списка в меню, отображать данную вставку и данные в ней и скрывать

<article itemscope="" itemtype="http://schema.org/Article">...</article>

Таким образом, мы остаемся на той же странице хаба.
json-ld для примера выше

Default-WRIO-Theme\examples\v2\itemList.htm

В примере

Default-WRIO-Theme\examples\v2\article-links.htm

Добавлен код отвечающий за ссылки

"mentions": [
{
"@type": "Article",
"name": "Title of the link",
"about": "Text inside the ticket popup.",
"url": "webrunes.com/blog.htm?'dolor sit amet':1,104"
}
]

Этот раздел всегда будет идти в конце статьи, так как может быть только один раздел mentions в json-ld. О name ниже, а about пока не важен. Ссылка говорит какой url открыть при ее нажатии. Более интересны текст и цифры после.

"url": "webrunes.com/blog.htm?'dolor sit amet':1,1,104"

Первая цифра 1 говорит, что ссылку надо разместить в первом разделе (в примере есть еще ссылки для hasparts), вторая 1 говорит о номере абзаца (в этом разделе) и 104 - номер символа (в этом разделе). Сам текст должен совпасть с текстом идущим после указанного символа и отображаться в виде ссылки. Причем ссылка должна идти не в виде

webrunes.com/blog.htm?'dolor sit amet':1,1,104

а заменив на name

webrunes.com/blog.htm?'Title of the link'

Этот подход не очень красив с точки зрения архитектуры, но позволяет создать децентрализованную семантическую сеть json-ld, поисковикам связывать статью с другими страницами, а нам не выходить за рамки schema. Позже будет разработан Core для редактирования в редакторе и автоматической записи ссылок.

Chapter 2 - это пример отображения ссылки в виде тикета, если существует отдельная статья для данного раздела, но ссылка идет не в mentions, а внутри haspart. По структуре это такая же страница, как и пример

Default-WRIO-Theme\examples\v2\article-links.htm

То как должна выглядеть страница с этими ссылками можно увидеть в прототипе

Default-WRIO-Theme\examples\The-story-of-the-cat.htm

• При наведении на текст статьи пока скрывать "glyphicon-comment".
• пока скрывать "4-5 minutes30 May, 2014"
• слишком большой отступ для

• переместить ссылку после точки. Убрать знак "$"

• убрать возможность изменения размера поля для ввода твита.

itemList не отображается как таб, например
http://webrunes.com/list2-name.htm
и неактивное меню справа.

Проблема с неактивным меню актуальна и для article, например, при переходе по ссылке
http://webrunes.com/blog.htm
нет активного меню пока не выберешь раздел.

Для хабов, например
http://webrunes.com/
не отображаются ссылки в тексте.
Для редактирования и добавления ссылок можно использовать
http://core.wrioos.com/?edit=webrunes.com
и после выложить на https://pages.github.com/ для тестирования.

We have menu issue, lower screen resolution or make small browser window to find

https://github.com/webRunes/Default-WRIO-Theme/blob/prototype/loading.htm please add it to https://github.com/webRunes/Default-WRIO-Theme/tree/gh-pages/widget and show every time user opens page based on WRIO OS and loads WRIO OS.
Code

<noscript>

has been added, but be sure, redirect goes at no_jscript.htm for IE, Firefox and Chrome.

Use http://www.devslide.com/labs/browser-detection or https://github.com/burocratik/outdated-browser to define old browser version and open one of the page
https://github.com/webRunes/Default-WRIO-Theme/blob/prototype/old_browser.htm
https://github.com/webRunes/Default-WRIO-Theme/blob/prototype/no_jscript.htm

according old browser or js issue. Just in the same way it's working at http://odnoklassniki.ru/, load it with no scripts. You also can load http://www.browserstack.com/ with old IE versions. vk.com redirects to https://vk.com/badbrowser.php if users browser doesn't work with js.

Help links:
http://pathgather.github.io/please-wait/ splash loading page
http://msdn.microsoft.com/en-us/library/3yekbd5b.aspx
http://www.victor-ratajczyk.com/post/2012/02/07/Webconfig-httpRedirect-Redirecting-entire-sites-and-directories-with-301-302-and-307-status-codes-Part-two.aspx it's for asp, but can be helpful. Learn and let admin know if you need help.
http://www.teamgeek.co.za/ one more example.
http://thiswasmybest.com/ another one.
https://github.com/lightningtgc/MProgress.js loading progress bar.

Please don't include for this moment of time

<script src="js/bootstrap-tour.min.js"></script>
<script src="js/conversations/conversation-welcome.js"></script>

It's for IA, I'll give more info about it later.

Please improve UI for mobiles.

We have to update some css classes like

@media (max-width: 767px)
.sidebar-offcanvas .sidebar-margin {
  margin: 60px 12px 0 4px;
}

Every time user click on very right icon he or she should see a page like this one

https://github.com/webRunes/Default-WRIO-Theme/blob/prototype/examples/right-menu.png

in another words, we must show full width menu, instead of 50%. In addition, we must change position on absolute to float over the page. Please learn
https://jasny.github.io/bootstrap/examples/navmenu/
and do right in the same way except don't hide a menu icon on open.

Отображать в статье SocialMediaPosting. Пример кода см.
http://alexeyanshakov.github.io/test/3.htm

Если индекса в url нет, например:

"webrunes.com/img/cover1.jpg?5,0",

тогда вставлять на общих основаниях, т.е. в соответствии со своим расположением в коде. Если индекс есть, то аналогично #111

• табы cover и offer отображаются в разном порядке с каждой загрузкой: надо cover, затем offer
• для их переключения требуется два раза нажать на кнопку < или > пока заработает
• после переключения пропадает стиль активного таба на cover и offer

Check prototype

webRunes/Default-WRIO-Theme/blogs-post.htm

and add webRunes logo, icons and mobile responsive funstionality - narrow browser window to see how prototype works on <768px.

http://schema.org/ImageObject
На примере
http://webrunes.com/cover.htm
страница должна рендерится алогично itemList с
http://webrunes.com/blog-list.htm

При удалении в itemList отображать тикет как удаленный с возможностью восстановить. Если нажать refresh, то все помеченные как удаленные удалятся в самом деле из json-ld и itemList пересчитается.

Здесь будет список символов отвечающие за синтаксис. Код синтаксиса начинается с < и заканчивается >, если применяется лишь для части текста:

<! текст

или

<! текст! >

текст отображать как callout. См. прототип Default-WRIO-Theme/blogs-post.htm для примера отображения. Для теста можно использовать https://wrioos.com/

<+ текст +>

bold текст

</ текст />

italic текст

<* 

отображать как ul>li, т.е. в виде списка

<# 

отображать как order list, т.е. с цифрами

<_ текст _>

подчеркнутый текст

<- текст ->

перечеркнутый текст

<" 

для отображения цитаты. Отображение аналогично подписи к картинкам, см. картинку в
https://wrioos.com/ru/#Как_работает

иметь ввиду, что система должна отрабатывать и в случае смешанных символов вроде

<" <- текст ->

пока не делать:

<' 

для отображения кода

Cover is just the same itemList but renders in other way, please find example in prototype:

Default-WRIO-Theme/blogs.htm

Please note that system must render a list by a cover widget only if we have a command "?cover" at the end:

"url": "http://webrunes.com/cover.htm?cover"

We will have more options later. Use it for cover's demo.

Use:

contentUrl

for background.

Don't warry about "mentions", that's a next task.

Add breadcrumb under Login widget according prototype

Default-WRIO-Theme/blogs-post.htm

"Edit" must be with link "#" at this moment of time.