(meta) Redirects

Important things have been moved.

astroredirectsgetStaticPathsdefine-vars
Published 2022-02-15
Table of Contents
    HTML
   Nuance

This approach uses client-side redirects by using a

<meta http-equiv="refresh" content="0;url=new-url" />

tag in the document head

The content portion of the meta-tag is made up of two parts. The first part (a number) specifies the amount of seconds the browser should wait before applying the redirect. The second part specifies the new url to push the user to.

Managing your Redirects

I have placed my redirect data into the following JSON file:

/*  /public/data/redirects.json  */
{
  "entries": [
    {
      "from": "page-moved",
      "to": "/blog/redirects#managing-your-redirects",
      "seconds": 1
    },
    {
      "from": "test-redirect",
      "to": "/blog/redirects#managing-your-redirects",
      "seconds": 5
    },
    ...
  ]
}

It’s a list of objects with properties from, to, and seconds.

seconds is used to allow some time for the client-redirect to occur, and we will see a count-down implementation later on.

The meta tag allows for specifying a value in seconds that the browser will wait before actually applying the redirect.

Try it out! /test-redirect You should return to this section after 5 seconds.

The other test redir /page-moved. This one will get you back here in 1 second.

Creating a catch-all rule in Astro

I have created astro page […redirs].astro in /src/pages

I placed my redirects.json file in the /public/data folder.

And the contents of my page are:

/*  /src/pages/[...redirs].astro  */
---
import redirects from './../../public/data/redirects.json';

export async function getStaticPaths() {
    let ary = [];
    redirects.entries.forEach((entry) => {
        ary.push({
            params: { redirs: entry.from },
            props: { to: entry.to, seconds: entry.seconds }
        });
    });
    return ary;
}

let seconds = Astro.props.seconds || 0;
let to = Astro.props.to;
let content = `${seconds};url=${to}`;

---
<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="refresh" content={content} />
  <style>
   * {font-family:arial;} 
   .msg {margin:20px auto;max-width:400px;border-radius:10px;background:#cdf;padding:20px;text-align:center;}
  </style>
 </head>
 <body>
  <div class="msg">
   Redirecting in <span id="time-left">{seconds}</span>...
   <br/><br/>&gt; <small>{to}</small>
  </div>
  <script type="text/javascript" define:vars={{seconds}}>
   function update() {
    seconds -= 1;
    document.getElementById('time-left').innerText = seconds;
   }
   setInterval(update, 1000);
  </script>
 </body>
</html>

Front-matter

The front-matter section imports the JSON data, and is used in the getStaticPaths() function to generate a page per redirect entry.

The static paths contain the following props:

HTML

The html section contains:

Minimal version

Here is a minimal no whistles version for 0 second redirects:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="refresh" content={content} />
 </head>
</html>

Nuance

During development in Astro, the catch-all rule will take over any 404s.
The expected behavior will work on a built site.

Better approach

Use server-side redirects when you can.

Bad Rep

Here is some more information I collected while researching

Back to Post List
xml json | gen w/ Astro |
ok!