Skip to content

Image variables and company logos from a website - #22

Open
pallaoro wants to merge 1 commit into
mainfrom
feat/image-variables
Open

pallaoro wants to merge 1 commit into
mainfrom
feat/image-variables

Conversation

@pallaoro

Copy link
Copy Markdown
Member

What changes

Image variables. A variable used as a whole image source (<img src="{{client.logo}}"> or url({{hero}})) is listed by /fields with type image. At render, each image is fetched, checked and embedded in the PDF: an https URL, a data:image URI, or an upload of the app (assets/<key>). One that can't be used fails the render with a 422 naming it, for example client.logo: image could not be loaded (HTTP 404), instead of printing a blank. Limits: 2 MB per image, 4 MB of images per document (render time grows with them: about 8 s for 1.9 MB, 17 s for 3.7 MB and 45 s for 5.6 MB through the PDF service).

Company logos from a website. <img data-logo="client.website"> shows the logo of the company whose website the value names (acme.com, https://www.acme.com/about or jane@acme.com). /fields lists it with type website.

  • Sources, first hit wins: logo.dev when the org has set LOGO_DEV_SECRET_KEY (declared under env.optional), then the built-in brand library, then the site's own icon (an SVG, or a raster of at least 64 px).
  • The brand library is used only for a website its index lists for that brand. Its lookup also guesses from a domain's first word (harbor.com returns an unrelated project called Harbor), and a guess never counts here.
  • data-logo-shape (square or full) and data-logo-theme (light or dark) pick the version. Shape applies with logo.dev. Without it the brand's main logo is used, or its dark-background version where it has one: the library's wordmarks often have white lettering.
  • No logo found leaves the image out, and the render still succeeds with a warnings entry. A value that is not a website (Acme Inc) is a 422.
  • Lookups are kept in the app's storage under logos/, found for 30 days and missed for one, separately for logo.dev and the free sources.
  • The quote template shows the client's logo from client.website.

Uploads. An upload used in a render is kept for 30 days after its last use (assets.last_used_at, an additive column), so an agent can upload a logo once and keep rendering with it.

Editor.

  • Image and website fields under Variables.
  • Clicking an image variable on the canvas sets its sample; clicking a logo slot says where its website comes from.
  • Make variable works on images, and can turn one into a company logo slot, with Shape and Background options in the inspector.
  • Template view shows a placeholder in empty image slots and a "Company logo" box in logo slots.

Fix. Inline text edits and image swaps on the canvas were not saved: the canvas message handler is bound once and read the deck id from the first render, where it is still null.

Testing

  • 69 unit tests, typecheck clean, vite build OK.
  • End to end on a local server against the real PDF service:
    • a quote with a full logo and per-row logos rendered for stripe.com, github.com, linear.app, neople.io and harbor.com (its own icon, not the unrelated brand);
    • an unknown domain was left out with a warning;
    • Acme Inc gave a 422;
    • repeat renders read the stored logos;
    • in the editor, Preview, the PDF button and the slide image showed the logos, and a plain image turned into a logo slot from Make variable;
    • image totals over 4 MB were refused, naming the image that crossed the limit.

- An <img src="{{x}}"> or CSS url({{x}}) is an image field. The render
  fetches, checks and embeds each image (an https URL, a data:image URI or
  an upload); a 404 or a page that is not an image is a 422 naming the
  field. Limits: 2 MB per image, 4 MB of images per document.
- <img data-logo="client.website"> shows the company logo for a website:
  from logo.dev when LOGO_DEV_SECRET_KEY is set, else from the built-in
  brand library (exact website matches only), then the site's own icon.
  Nothing found leaves the image out, with a warning in the render
  response. data-logo-shape and data-logo-theme pick the version. Lookups
  are kept in storage, found for 30 days and missed for one.
- An upload used in a render is kept for 30 days after its last use.
- Editor: image and website fields under Variables; a click on an image or
  logo slot points at its sample; Make variable works on images and can
  turn one into a company logo slot, with shape and background options.
- The quote template shows the client's logo from client.website.
- Fix: inline text edits and image swaps on the canvas were not saved.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant