2.0.0-rc.11

docs/app/[[...mdxPath]]/page.tsx

@@ -14,7 +14,13 @@ export async function generateMetadata(props): Promise<Metadata> {
 		title: metadata.title,
 		description: metadata.description,
 		openGraph: {
-			images: `https://ort.pyke.io/og/${hash(`/${params.mdxPath?.join('/') ?? ''}`)}.png`,
+			images: [
+				{
+					url: `https://ort.pyke.io/og/${hash(`/${params.mdxPath?.join('/') ?? ''}`)}.png`,
+					width: 1200,
+					height: 630
+				}
+			],
 			description: metadata.description ?? undefined
 		}
 	};

docs/app/globals.css

@@ -36,6 +36,10 @@ a[href="https://opencollective.com/pyke-osai"] {
 	color: #fff !important;
 }
 
+.nextra-sidebar-footer {
+	background-color: transparent;
+}
+
 .dark a[href="https://opencollective.com/pyke-osai"] {
 	color: #000 !important;
 }

docs/app/layout.tsx

@@ -1,6 +1,6 @@
 import { Theme } from '@radix-ui/themes';
 import type { Metadata } from 'next';
-import { Footer as NextraFooter, Layout, Navbar } from 'nextra-theme-docs';
+import { Layout, Navbar, Footer as NextraFooter } from 'nextra-theme-docs';
 import { Head } from 'nextra/components';
 import { getPageMap } from 'nextra/page-map';
 
@@ -8,6 +8,8 @@ import '@radix-ui/themes/styles.css';
 import 'nextra-theme-docs/style.css';
 import './globals.css';
 
+import FooterEmoji from '../components/FooterEmoji';
+
 export const metadata: Metadata = {
 	metadataBase: new URL('https://ort.pyke.io'),
 	title: {
@@ -43,12 +45,11 @@ export const metadata: Metadata = {
 };
 
 function Footer() {
-	const emojis = [ '💜', '🩷', '💜', '🩷', '💜', '🩷', '💜', '🩷', '☕', '👽', '🦀', '🌈', '🏳️‍⚧️' ];
 	return <NextraFooter style={{ paddingTop: '18px', paddingBottom: '18px' }}>
 		<div style={{ display: 'flex', flexDirection: 'column', width: '100%', alignItems: 'center', fontFamily: '"TASA Explorer"' }}>
 			<span style={{ fontSize: '32px', fontWeight: '800', color: '#f74c00' }}>ort</span>
 			<p style={{ fontWeight: '600' }}>
-				made with {emojis[Math.floor(Math.random() * emojis.length)]} by
+				made with <FooterEmoji /> by
 				<a target="_blank" href="https://pyke.io/">
 					<svg height='12' viewBox='0 0 21 10' style={{ display: 'inline', marginLeft: '5px', marginTop: '-4px' }}>
 						<rect width='10' height='10' fill='#00BDFF' />