canonical / tools.demos.haus Goto Github PK

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined

Each social image should have a download link underneath

Seems to fail to unencode text.

https://tools.demos.haus/?title=What%27s+new+in+Ubuntu+19.04%3F&subtitle=&illustration_url=https%3A%2F%2Fassets.ubuntu.com%2Fv1%2Fdb6764bc-disco-dingo-grad.svg&background=grad#banner-form-modal

There should be a form which a user can enter variables which will be used to generate social banners. These banners will each be rendered as an image and have a download link.

The end goal is to host this on the asset server and enable the user to generate banners with query parameters which can either be entered manually or created by a form.

Prior art: https://codepen.io/anthonydillon/pen/mdVRxbQ

From #13 (comment):

Also, as Peter said, when the copy is short the illustration on the taller banners stays too low, if you can try and centre it vertically in the gap left that would be great.
With 'Facebook & LinkedIn - 1200 x 628' when the copy is short as above, can you move the copy down to be more vertically centred as in this version 'Twitter wide - 800 x 418'. Thanks

Style the canvas output so it uses the suru gradient background for each variant, e.g.

1. Go to https://tools.demos.haus/?title=Do+VMware+ao+Charmed+OpenStack&subtitle=Reduza+os+custos+e+aumente+a+efici%C3%AAncia+da+sua+infraestrutura+com+ado%C3%A7%C3%A3o+de+c%C3%B3digo+aberto&illustration_url=https%3A%2F%2Fassets.ubuntu.com%2Fv1%2F2d935f28-openstack-cloud.svg%3Fw%3D367&background=dark#banner-form-modal

2. Click download... you get the banner as a jpeg without the illustration
   

3. Right click and save as image... you get a png with the illustration
   

Currently the text positioning isn't quite right. It should be aware of it's dimensions and able to position itself accordingly.

Adding a line break to the text, whether it's a soft return or <br /> breaks the page and no banners are displayed.

Build a form to generate social banners based on https://intl.transitionelement.com/social/

But if you add ?w=1000 to them, they work?

Sorry I don't have an example, but when I find one, I will let you know.

In Firefox the illustration isn't rendered to any of the images. This is because without width and height attributes on the root svg element the browser interprets the dimensions as 0 x 0.

There are a number of bugs filed about this on bugzilla:

• https://bugzilla.mozilla.org/show_bug.cgi?id=700533
• https://bugzilla.mozilla.org/show_bug.cgi?id=1283234

If there is no illustration URL specified there is a 404 response for /fetch in the console

This issue provides visibility into Renovate updates and their statuses. Learn more

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update all dependencies (@babel/core, @babel/plugin-transform-runtime, @babel/preset-env, autoprefixer, babel-jest, babel-loader, canonicalwebteam.flask-base, eslint, expose-loader, jest, node, postcss, sass, stylelint, stylelint-config-standard, stylelint-order, stylelint-scss, webpack)

• Check this box to trigger a request for Renovate to run again on this repository

The form to generate a social banner should have the options to set the width and height of the illustration.