Here are some quick guides and hints to accomplish various things in Motif.

How do I upload an image?

Simply drag and drop it into the text editor, and it will be uploaded to the Motif CDN. Images uploaded via Motif will automatically be optimized so that they are served faster on your live website.

How do I embed a tweet?

The mdx-embed package works great for this:

import { Tweet } from "mdx-embed"

<Tweet tweetLink="michaelfester/status/1526983526436032512" />

How do I add a PDF viewer to my page?

The standard <object> will do the job:

<object
    data="insert-pdf-url-here"
    className="border rounded h-[800px] w-[600px]"
    type="application/pdf">
  <div>No PDF viewer installed.</div>
</object>

Note however that the PDF will not load inside the in-app preview. But it will be loaded on the live website.

How do I setup a redirect?

You can setup client-side redirection as follows. Say you want to redirect /old-blog/post-1 to /blog/post-1. This can be done by adding the following code to the /old-blog/post-1 page (MDX):

import { useEffect } from "react"

export const Redirect = () => {
  useEffect(() => {
    {/* Only perform the redirect on the published site (no need in the preview) */}
    if (window.location.origin?.startsWith('https://yourdomain.com')) {
      window.location.replace("https://yourdomain.com/blog/post-1");
    }
  }, [])
  
  return <></>
}

<Redirect />

We do plan to support server-side redirects in the future.