BeaconCMS/beacon

Augment external resource links options

leandrocp opened this issue · 0 comments

leandrocp commented

Currently Beacon supports adding stylesheet_urls to layouts which are injected into the <head> but we need to:

1 - Support more options besides rel="stylesheet". For example to load fonts as:

   <link
    rel="preload"
    href="https://mycdn.com/manrope-v13-latin-latin-ext-regular.woff2"
    as="font"
    type="font/woff2"
    crossorigin="anonymous" />

2 - Allow editing that field in LiveAdmin, see BeaconCMS/beacon_live_admin#41

The implementation will be very similar to meta tags where we have a list of maps and each attribute of <link> is defined as key/value of that map, for example the link above would look like:

%Layout{
  resource_links: [
    %{
      rel: "preload",
      href: "https://mycdn.com/manrope-v13-latin-latin-ext-regular.woff2",
      as: "font",
      type: "font/woff2",
      crossorigin: "anonymous"
    }
  ]
}

Tasks

  • Rename stylesheet_urls to resource_links
  • Change that field data type from [String.t] to [map()]
  • Create a migration to migrate existing data to the new data structure
  • Rename linked_stylesheets/1 and change it to render each <link> with attrs
  • Bump layout version similar to 6389ce5

Refs