add live-blog example

[erwinmombay]

No description provided.

[erwinmombay]

items should look like:

[erwinmombay]

@cramforce @ericlindley-g PTAL

[cramforce]

This is the best thing I've ever seen in my life.

[cramforce]

How about adding a http://placekitten.com/300/350 to some of the entries at random?

[erwinmombay]

done! also added https://baconmockup.com/300/350/ !

[ericlindley-g]

This is fantastic! (Random kittens also delightful)

Is there a way to put a user-visible time-stamp on each entry?

[erwinmombay]

@ericlindley-g done

[jaygray0919]

Would you point to the source code so we can follow an example?

[cramforce]

LGTM

[erwinmombay]

@jaygray0919 mind clarifying? not sure what you meant by "source code". thanks

[jaygray0919]

poor choice of words ...
The sample code that is featured in your post: "items should look like".
Looking to purloin your example.

[erwinmombay]

@jaygray0919 gotcha, the code generating new entries is here https://github.com/ampproject/amphtml/blob/master/build-system/server.js#L223 and the starting markup for amp-live-list is here https://github.com/ampproject/amphtml/blob/master/examples/live-blog.amp.html#L192 . feel free to ask more questions if this doesnt cover what you are looking for

[gigster99]

TY @erwinmombay . Background: we have redesigned our site based on AMP and are migrating content now. We have one @Blog (https://schema.org/Blog) and ~ 30 @BlogPosting (https://schema.org/BlogPosting). One consequence of redesign is a new menu systems (old system based on JS and other non-supported AMP elements). How do you envision handling 30+ @BlogPosting? Should each be a link in an <amp-sidebar>?

We also are looking at this: https://github.com/erwinmombay/amphtml/blob/03a0670debea10f1f5f3e373e347d10f03fc6994/extensions/amp-live-list/amp-live-list.md
Is that the best documentation?

Final question: the sample has <button id="live-list-update-button" update class="button" on="tap:live-blog-1.update">You have updates</button>. How is this cleared when there is no update?

[ericlindley-g]

@gigster99

I can tell you that <amp-sidebar> was created with the menu use case in mind, so you are likely to have success using it in that context, but I hesitate to give advice on what sounds like a UI design question (though please clarify, and feel free to point to a sample if I misunderstand).

That said, we tried to make that component as flexible as possible, so it can just scroll if there are 30+ items in there. And if you need to create expanding subsections in the menu to organize the information, you can use <amp-accordion> inside of <amp-sidebar>

As for the best documenation for <amp-live-list>, I tend to point people to those same docs on the master branch, but @erwinmombay may be able to speak to where the most reliable/up-to-date spot is.

The answer to your last question is that the button is not present by default, only appearing when there are updates that haven't been slotted into the page. When the user presses this button, the updates are slotted in, and the button should disappear automatically (unless its .amp-hidden class is overridden)

And one last note regarding schema markup: you will want to look at https://schema.org/LiveBlogPosting if you are marking up live blogs. We're starting to work that into our samples, as well.

[gigster99]

You blokes are very helpful - TY.