Easy-to-edit Legal Pages (Privacy Policy, Terms of Service, etc.)

Almost every website, app or service needs at least a Privacy Policy and Terms of Service.

But what if you dont really want to mess around with HTML, to style it correctly and mess with deployment? That's where SwiftyLaunch for Web shines.

In order to create a "Legal Page" for your website, all you have to do is to paste the necessary information in the Markdown Format. And your website will automatically interpret it and render it in a beautiful way.

Go to src/app/legal/privacy-policy.mdx and src/app/legal/terms-of-service.mdx and paste your information there.

If you have a server running, go to localhost:3000/legal/privacy-policy and localhost:3000/legal/terms-of-service and see the result.

On save, MDX (opens in a new tab) will automatically convert the written Markdown into HTML and render it on the website.

To style the way the "outer shell" of the legal pages looks like, you can go to src/app/legal/layout.tsx and change the styles to your liking.

export default function LegalLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="section-container mt-4 mb-8 lg:mt-8 lg:mb-16 w-full ">
      <main className="bg-white rounded-3xl shadow-lg p-6 md:p-8 border border-quaternary">
        {children}
      </main>
    </div>
  );
}

To style, how the markdown content should be interpreted, go to mdx-components.tsx and change the styles to your liking.

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    // How the h1 should be interpreted (text with single # in markdown)
    h1: ({ children }) => (
      <Linkable className="text-3xl md:text-5xl font-bold">
        <h1 className="capitalize">{children}</h1>
      </Linkable>
    ),
    // ...
  };
}