@backpackjs/head

v1.2.3

Published

a year ago

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

Downloads

142

0High
0Medium
0Low

@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 projectsrc/head/index.jsx` component which is included in the 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 - and tags for all js and css third-party defined in the configuration

Example Fonts.jsx

/*
	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

/*
	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

/*
	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

/*
	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;

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@backpackjs/head

React components generated:

Example Fonts.jsx

Example Metas.jsx

Example Libs.jsx

Example Preconnects.jsx