swup / head-plugin Goto Github PK

View Code? Open in Web Editor NEW

4.0 4.0 10.0 1.21 MB

A swup plugin for updating the contents of the head tag 🐶

Home Page: https://swup.js.org/plugins/head-plugin

License: MIT License

TypeScript 100.00%

animation head metadata page-transitions plugin seo swup

head-plugin's Introduction

swup 4 is released 🎉 Check out the release notes and upgrade guide.

Swup

Versatile and extensible page transition library for server-rendered websites.

Features • Demos • Plugins • Themes • Documentation • Discussions

Overview

Swup adds page transitions to server-rendered websites. It manages the complete page load lifecycle and smoothly animates between the current and next page. In addition, it offers many other quality-of-life improvements like caching, smart preloading, native browser history and enhanced accessibility.

Make your site feel like a snappy single-page app — without any of the complexity.

Features

✏️ Works out of the box with minimal markup
✨ Auto-detects CSS transitions & animations for perfect timing
🔗 Updates URLs and preserves native browser history
🏓 Manages the scroll position between pages and anchor links
🚀 Uses a cache to speed up subsequent page loads
📡 Offers hooks to customize and extend the page load lifecycle
🔌 Has a powerful plugin system and many official and third-party plugins
🎨 Provides ready-to-go themes to get started quickly

Demos

Explore our interactive demos to see swup in action.

Documentation

Visit our official documentation to learn more.

Plugins

Swup is small by design. Extended features can be added via plugins:

Display a progress bar while loading
Enable smooth scrolling between visits
Update meta tags and stylesheets after page loads
Add support for preloading pages in the background
Improve accessibility for screen readers
Perform your animations in JS instead of CSS transitions
Animate form submissions
Get help in debug mode

Check out the list of official plugins and third-party integrations.

Themes

Get started quickly with one of three official themes: fade, slide, and overlay.

Examples

Take a look at the interactive demos and sites using swup for more examples.

Having trouble?

If you're having trouble implementing swup, check out the Common Issues section of the docs, look at closed issues or create a new discussion.

Want to Contribute?

We're looking for maintainers! 👀

Become a sponsor on Open Collective or support development through GitHub sponsors.

This project is tested with BrowserStack.

head-plugin's People

Contributors

Stargazers

Watchers

Forkers

lilarest aerni mjorritsma graphandweb okamca anton25360 marcobeni thedavidthomas jamesmschofield egaicebergwebdesign

head-plugin's Issues

noscript tags prevent head contents from updating

Description of the issue

I want to add GA, Linkedin & Facebook Pixels tracking scripts in the head of my pages, it makes the styles disappears when I change the page, but not my JS from Astro. It also log replicated GA / FB / Linkedin tracking instance.

I tried to use the scripts-plugin with optin enabled but it doesn't solve the issue.

Is there something I'm doing wrong ? What should I do to make it work ?
I know there is a GA Plugin, but since I have also FB pixel & Linkedin Tracking I'd like a solution that can be replicable to these 2 other scripts.

How to reproduce the issue

It's the head of my astro project :

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!-- Meta Pixel Code -->
		<script>
			!function(f,b,e,v,n,t,s)
			{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
			n.callMethod.apply(n,arguments):n.queue.push(arguments)};
			if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
			n.queue=[];t=b.createElement(e);t.async=!0;
			t.src=v;s=b.getElementsByTagName(e)[0];
			s.parentNode.insertBefore(t,s)}(window, document,'script',
			'https://connect.facebook.net/en_US/fbevents.js');
			fbq('init', 'blablabla');
			fbq('track', 'PageView');
		</script>
		<noscript><img height="1" width="1" style="display:none"
		src="https://www.facebook.com/tr?id=blablabla&ev=PageView&noscript=1"
		/></noscript>
		<!-- End Meta Pixel Code -->

		<!-- Google tag (gtag.js) -->
		<script async src="https://www.googletagmanager.com/gtag/js?id=G-blablabla"></script>
		<script>
			window.dataLayer = window.dataLayer || [];
			function gtag(){dataLayer.push(arguments);}
			gtag('js', new Date());

			gtag('config', 'G-blablabla');
		</script>

		<script type="text/javascript">
			_linkedin_partner_id = "blablabla";
			window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
			window._linkedin_data_partner_ids.push(_linkedin_partner_id);
		</script>
		<script type="text/javascript">
		(function(l) {
			if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])};
			window.lintrk.q=[]}
			var s = document.getElementsByTagName("script")[0];
			var b = document.createElement("script");
			b.type = "text/javascript";b.async = true;
			b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
			s.parentNode.insertBefore(b, s);})(window.lintrk);
		</script>
		<noscript>
			<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=balblalba&fmt=gif" />
		</noscript>
		<SEO seo={props.seo} />
	</head>

Context and environment

    swup({
      theme: "overlay",
      containers: ['#transitionnable'],
      animationSelector: 'transition-',
      smoothScrolling: true,
      debug: process.env.WP_ENV === "development",
      preload: false,
      globalInstance: true,
      plugins: [new SwupScriptsPlugin({
        body: false,
        optin: true
      })]
    })

Safe to use this plugin?

I've been running into the common issue with <link rel="canonical" href="..." /> in the head. In the docs you mention that this plugin is "rather experimental". What exactly do you mean by this? Is it safe to use in production?

Also, does this plugin exchange the whole <head>? Can't we just change the canonical meta tags? Would that make this plugin "safer"?

Is it possible to prevent content to be reloaded ?

Like the SwupScriptsPlugin with the 'data-swup-ignore-script' attribute in scripts tags, is it possible to insert specific attributes into link tags to prevent them to be reloaded ?

Refresh head before swup containers ?

Hi,
When I use the head plugin the CSS is broken a few moment after the transition, and it's fix when the CSS file is load.

it's posible to refrech the head before swup containers ?

Thanks, and sorry for my bad english.

Make removal of tags optional

Some third-party libraries inject style tags into the head, Google Maps among others. Since those style tags aren't present on the next page, SwupHeadPlugin will remove them, breaking maps on subsequent pages.

Could the removal of tags in the head be optional? So it would still merge new tags, but not delete the old ones. Not sure if that's complicated or easy to do with the current implementation.

For what it's worth, that's exactly what turbolinks is doing and it seems to be working for most users: Styles get left in head?

Swup gets stuck when replacing head

I want to replace canonical and hreflang links on each page, so I installed this plugin normally:

import SwupHeadPlugin from '@swup/head-plugin';
const swup = Swup(plugins: [new SwupHeadPlugin()]);

However, once it is installed and I navigate from the starting page to a new page, swup gets stuck on swup-enabled is-changing to-my-new-page is-rendering, and the page layout "breaks" (no css applied, scripts seem to work). No console errors.

The head is correctly replaced at first, however once it is stuck and layout "broken", neither content nor head are replaced anymore.

What could be the issue here? It can't have to do with another "transition" class (as was the case in another issue.) Thanks a lot for any help!

On first page click, page stutters

Included the HeadPlugin,
when i first open a link in a page it feels stuck (even with preload)