npm package: @backpackjs/head
Description: A pre build-time backpack plugin that auto generates and writes multiple head react components to `storefront/src/head` on every build.
Author: @packdigital
Latest version: 1.2.3

# @backpackjs/head

A pre build-time backpack plugin that auto generates and writes multiple head react components to `storefront/src/head` on every build.

This plugin is executed by `@backpackjs/nextjs-backpack-init`

The components structure is derived based on the configuration provided `.via `/backpack.head.js` (or its default config). These global components are also already pre-imported in the project `src/head/index.jsx` component which is included in the <head> via next/head

## React components generated:
- `Metas.jsx` - title, description etc..
- `Fonts.jsx` - Custom or/and google font faces and link tags
- `Preconnects.jsx` - dns-prefetches and pre-connects
- `Libs.jsx` - <script> and <link> tags for all `js` and `css` third-party defined in the configuration


### Example Fonts.jsx
```js
/*
	This component is auto-generated by 🎒 Backpack.
	Any changes made will be overwritten in the next yarn build or dev.
	Please define your custom head configuration at backpack.head.js
*/
import React from 'react'
import Head from 'next/head'

const HeadFonts = () => (
<Head>
	{[
	[
		"link",
		{
			"key": "AvenirNext-Regular.woff",
			"rel": "preload",
			"as": "font",
			"crossOrigin": "anonymous",
			"href": "/fonts/AvenirNext-Regular.woff"
		}
	],
	[
		"link",
		{
			"key": "AvenirNext-Regular.woff2",
			"rel": "preload",
			"as": "font",
			"crossOrigin": "anonymous",
			"href": "/fonts/AvenirNext-Regular.woff2"
		}
	],
	[
		"link",
		{
			"key": "AvenirNext-Demi.woff2",
			"rel": "preload",
			"as": "font",
			"crossOrigin": "anonymous",
			"href": "/fonts/AvenirNext-Demi.woff2"
		}
	],
  ...
	[
		"link",
		{
			"key": "font-stylesheet",
			"rel": "stylesheet",
			"href": "/fonts/fonts.css"
		}
	]
].map(font => React.createElement(...font))
}
</Head>
);

export default HeadFonts;
```


### Example Metas.jsx

```js
/*
	This component is auto-generated by 🎒 Backpack.
	Any changes made will be overwritten in the next yarn build or dev.
	Please define your custom head configuration at backpack.head.js
*/
import React from 'react'
import Head from 'next/head'

const HeadMetas = () => (
<Head>
	{[
	[
		"meta",
		{
			"key": "viewport-meta",
			"name": "viewport",
			"content": "width=device-width, initial-scale=1"
		}
	],
	[
		"title",
		{
			"key": "site-title",
			"children": "Backpack Storefront"
		}
	],
	[
		"meta",
		{
			"key": "description",
			"name": "description",
			"content": "This is Backpack Storefront."
		}
	],
	[
		"meta",
		{
			"key": "http-equiv",
			"httpEquiv": "Content-Type",
			"content": "text/html; charset=utf-8"
		}
	],
	[
		"meta",
		{
			"key": "keywords",
			"name": "keywords",
			"content": "Backpack Storefront Clothing PackDigital backpack storefront"
		}
	],
	[
		"link",
		{
			"key": "shortcut icon",
			"rel": "shortcut icon",
			"href": "/favicon.png"
		}
	],
	[
		"link",
		{
			"key": "author",
			"rel": "author",
			"href": "https://packdigital.com"
		}
	],
	[
		"link",
		{
			"key": "canonical",
			"rel": "canonical",
			"href": "https://backpack-storefront.myshopify.com"
		}
	],
	[
		"meta",
		{
			"key": "default-generator",
			"name": "generator",
			"content": "Backpack Storefront"
		}
	],
	[
		"meta",
		{
			"key": "default-all-search-engines-crawling",
			"name": "robots",
			"content": "index,follow"
		}
	],
	[
		"meta",
		{
			"key": "default-google-engine-crawling",
			"name": "googlebot",
			"content": "index,follow"
		}
	],
	[
		"meta",
		{
			"key": "default-subject",
			"name": "subject",
			"content": "PackDigital backpack storefront"
		}
	]
].map(meta => React.createElement(...meta))
}
</Head>
);

export default HeadMetas;
```

### Example Libs.jsx

```js
/*
	This component is auto-generated by 🎒 Backpack.
	Any changes made will be overwritten in the next yarn build or dev.
	Please define your custom head configuration at backpack.head.js
*/
import React from 'react'
import Head from 'next/head'

const Libs = () => (
<Head>
	{[
	[
		"script",
		{
			"type": "text/javascript",
			"key": "gtm-dataLayer-js",
			"id": "gtm-dataLayer-js",
			"dangerouslySetInnerHTML": {
				"__html": "\n              window.dataLayer = [];\n              console.log('GTM dataLayer instantiated.');\n            "
			}
		}
	],
	[
		"script",
		{
			"type": "text/javascript",
			"key": "gtm-script-js",
			"id": "gtm-script-js",
			"dangerouslySetInnerHTML": {
				"__html": "\n                  console.warn('GTM script not initialized. Please provide a GTM_CONTAINER_ID');\n                "
			}
		}
	]
]	.map(lib => React.createElement(...lib))
}
</Head>
);

export default Libs;
```

### Example Preconnects.jsx
```js
/*
	This component is auto-generated by 🎒 Backpack.
	Any changes made will be overwritten in the next yarn build or dev.
	Please define your custom head configuration at backpack.head.js
*/
import React from 'react'
import Head from 'next/head'

const HeadPreconnects = () => (
<Head>
	{[
	[
		"link",
		{
			"key": "https://cdn.shopify.com/-prefetch",
			"rel": "dns-prefetch",
			"href": "https://cdn.shopify.com/"
		}
	],
	[
		"link",
		{
			"key": "https://cdn.shopify.com/-preconnect",
			"rel": "preconnect",
			"href": "https://cdn.shopify.com/",
			"crossOrigin": "anonymous"
		}
	],
	[
		"link",
		{
			"key": "https://monorail-edge.shopifysvc.com/-prefetch",
			"rel": "dns-prefetch",
			"href": "https://monorail-edge.shopifysvc.com/"
		}
	],
	[
		"link",
		{
			"key": "https://monorail-edge.shopifysvc.com/-preconnect",
			"rel": "preconnect",
			"href": "https://monorail-edge.shopifysvc.com/",
			"crossOrigin": "anonymous"
		}
	],
	[
		"link",
		{
			"key": "https://www.googletagmanager.com/-prefetch",
			"rel": "dns-prefetch",
			"href": "https://www.googletagmanager.com/"
		}
	],
	[
		"link",
		{
			"key": "https://www.googletagmanager.com/-preconnect",
			"rel": "preconnect",
			"href": "https://www.googletagmanager.com/",
			"crossOrigin": "anonymous"
		}
	],
	[
		"link",
		{
			"key": "https://googleads.g.doubleclick.net/-prefetch",
			"rel": "dns-prefetch",
			"href": "https://googleads.g.doubleclick.net/"
		}
	],
	[
		"link",
		{
			"key": "https://googleads.g.doubleclick.net/-preconnect",
			"rel": "preconnect",
			"href": "https://googleads.g.doubleclick.net/",
			"crossOrigin": "anonymous"
		}
	],
	[
		"link",
		{
			"key": "https://www.googleadservices.com/-prefetch",
			"rel": "dns-prefetch",
			"href": "https://www.googleadservices.com/"
		}
	],
	[
		"link",
		{
			"key": "https://www.googleadservices.com/-preconnect",
			"rel": "preconnect",
			"href": "https://www.googleadservices.com/",
			"crossOrigin": "anonymous"
		}
	],
	[
		"link",
		{
			"key": "https://www.google-analytics.com/-prefetch",
			"rel": "dns-prefetch",
			"href": "https://www.google-analytics.com/"
		}
	],
	[
		"link",
		{
			"key": "https://www.google-analytics.com/-preconnect",
			"rel": "preconnect",
			"href": "https://www.google-analytics.com/",
			"crossOrigin": "anonymous"
		}
	]
  ...
].map(preconnect => React.createElement(...preconnect))
}
</Head>
);

export default HeadPreconnects;
```