search

scripting / a8c-FeedLand-Support

A public repo for discussing FeedLand at A8C.
1 stars 0 forks source link

Proposal: News Product Ribbon #90

Open cagrimmett opened 6 months ago

cagrimmett commented 6 months ago

Remember the "Fork Me on GitHub" ribbons? They were a great way to link back to the code for a project.

This would be a great way to link a News Product back to FeedLand for folks who land on them and want to make on of their own. Make it easy for them.

Instead of "Fork me on GitHub" it could simply say "Made with FeedLand" and link back to FeedLand.com.

Here is a simple CodePen with banner code we can repurpose and put in the News Product template: https://codepen.io/fyodorio/pen/jQwEQx

Background color can be the orange of the XML button: #f2a93c

cagrimmett commented 6 months ago

Progress:

image

https://feedland.com/newsproduct?app=http://scripting.com/code/newsproducthome&spec=http://pagepark.cagrimmett.com/templates/json/pb.json

Script option for the json spec:

"script": "console.log('Hi, fellow blogger!'); var ribbon = document.createElement('div'); ribbon.classList.add('ribbon'); ribbon.innerHTML = '<a href=\"https://feedland.com\" target=\"_blank\">Made with FeedLand</a></div>'; document.getElementsByClassName('divPageBody')[0].appendChild(ribbon);",

CSS for the json spec:

".ribbon { background-color: #f2a93c; overflow: hidden; white-space: nowrap; position: absolute; left: -50px; top: 40px; transform: rotate(-45deg); box-shadow: 0 0 10px #999;}",
".ribbon a { color: #fff; display: block; font: bold 81.25% \"Helvetica Neue\", Helvetica, Arial, sans-serif; margin: 1px 0; padding: 8px 50px; text-align: center; text-decoration: none; }",
scripting commented 6 months ago

Beautiful. And of course this could be baked into the runtime so it could be invoked more easily. Do you like that idea? Or perhaps we should wait a while to see how this might evolve?