Add an option for custom attributes to link and meta tags

[sompylasar]

For example, I cannot express the following tag

<link rel="icon" type="image/png" sizes="32x32" href="/img/favicons/favicon-32x32.png">

with the structured description:

{ link: { rel: { icon: '/img/favicons/favicon-32x32.png' } } }

as it would only render as:

<link rel="icon" href="/img/favicons/favicon-32x32.png">

The internal API is operating on arrays of tags with arbitrary number of attributes, but this API is not exposed, only the nested object with a limited level of nesting can be specified.

The API i'd prefer would be as follows:

{ link: [
  { rel: 'icon', href: '/img/favicons/favicon-32x32.png', type: 'image/png', sizes: '32x32' },
  { rel: 'icon', href: '/img/favicons/favicon-16x16.png', type: 'image/png', sizes: '16x16' },
] }

What do you think?

[danieljuhl]

Definitely something we should be able to handle. I'm looking into several changes this weekend, and will see if we could implement a new API which handles these cases, and your suggestion could be the right one.

[danieljuhl]

The only thing I have against arrays, is the ability to efficiently merge nested definitions, with as little duplication as possible and still maintaining full control. An idea could be, to add a key to each object in an array, to be able to merge arrays when using nesting.

[sompylasar]

Sure, adding a key is the React way of diffing lists.

[sheltonial]

This would also come in handy for specifying alternate content, such as an RSS feed.

<link rel="alternate" type="application/rss+xml" href="/foo/feed" />

[danieljuhl]

I'm working on this right now... a new version should be out shortly...

[AlexYegupov]

Also it would be great to have the way to set this one:
<meta name="viewport" content="initial-scale=1.0, width=device-width">

[danieljuhl]

@AlexYegupov
<DocumentMeta meta={{ name: { viewport: 'initial-scale=1.0, width=device-width' }}} />

[linkesch]

How does it look like with this feature? I would need a support of hreflang too:

<link rel="alternate" href="/url" hreflang="en-us" />