Arguments
-
stringrequiredThe API key for the Makeswift site.
-
objectrequiredOptions for site version and locale.
Show child attributes
ReactRuntimerequiredAn instance of ReactRuntime() => FontFamily[]This function is called when the builder requests the list of fonts available for the site. The function should return an array ofFontFamilyobjects.Thetype FontFamily { family: string variants: { weight: string style: "normal" | "italic" src?: string }[] }srcfield is used to preview the font in the builder. Thesrcfield can be either a relative or absolute URL. If thesrcfield is omitted, the font is still selectable but uses a fallback font in the builder.object
Examples
App Router
src/app/api/makeswift/[...makeswift]/route.ts
import { MakeswiftApiHandler } from "@makeswift/runtime/next/server";
import { strict } from "assert";
import { runtime } from "@/makeswift/runtime";
// make custom components' data available for introspection
import "@/makeswift/components";
strict(
process.env.MAKESWIFT_SITE_API_KEY,
"MAKESWIFT_SITE_API_KEY is required"
);
const handler = MakeswiftApiHandler(process.env.MAKESWIFT_SITE_API_KEY, {
runtime,
});
export { handler as GET, handler as POST };
Pages router
src/pages/api/makeswift/[...makeswift].ts
import { MakeswiftApiHandler } from "@makeswift/runtime/next/server";
import { strict } from "assert";
import { runtime } from "@/makeswift/runtime";
// make custom components' data available for introspection
import "@/makeswift/components";
strict(
process.env.MAKESWIFT_SITE_API_KEY,
"MAKESWIFT_SITE_API_KEY is required"
);
export default MakeswiftApiHandler(process.env.MAKESWIFT_SITE_API_KEY, {
runtime,
});
Adding fonts
The following example adds Spline Sans and Spline Sans Mono fonts to the site usingnext/font and adds them to the MakeswiftApiHandler. Using a variable font reduces the number of font files requested.
import { MakeswiftApiHandler } from "@makeswift/runtime/next/server";
import { strict } from "assert";
import { runtime } from "@/makeswift/runtime";
strict(
process.env.MAKESWIFT_SITE_API_KEY,
"MAKESWIFT_SITE_API_KEY is required"
);
export default MakeswiftApiHandler(process.env.MAKESWIFT_SITE_API_KEY, {
runtime,
getFonts() {
return [
{
family: "Spline Sans",
variants: [
{
weight: "300",
style: "normal",
src: "/fonts/SplineSans-VariableFont.woff2",
},
{
weight: "400",
style: "normal",
src: "/fonts/SplineSans-VariableFont.woff2",
},
{
weight: "500",
style: "normal",
src: "/fonts/SplineSans-VariableFont.woff2",
},
],
},
{
family: "Spline Sans Mono",
variants: [
{
weight: "500",
style: "normal",
src: "/fonts/SplineSansMono-VariableFont.woff2",
},
],
},
];
},
});
import { AppProps } from "next/app";
import { Spline_Sans, Spline_Sans_Mono } from "next/font/google";
import clsx from "clsx";
import "../styles/globals.css";
const splineSans = Spline_Sans({
subsets: ["latin"],
variable: "--font-sans",
fallback: [
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
"Helvetica",
"Arial",
"sans-serif",
],
});
const splineSansMono = Spline_Sans_Mono({
subsets: ["latin"],
variable: "--font-mono",
fallback: ["Courier New"],
});
function MyApp({ Component, pageProps }: AppProps) {
return (
<main className={clsx(splineSans.variable, splineSansMono.variable)}>
<Component {...pageProps} />
</main>
);
}
export default MyApp;
Using onPublish event
import { MakeswiftApiHandler } from "@makeswift/runtime/next/server";
import { strict } from "assert";
import { runtime } from "@/makeswift/runtime";
strict(
process.env.MAKESWIFT_SITE_API_KEY,
"MAKESWIFT_SITE_API_KEY is required"
);
const handler = MakeswiftApiHandler(process.env.MAKESWIFT_SITE_API_KEY, {
runtime,
events: {
onPublish() {
console.log(`Published content`);
},
},
});
export { handler as GET, handler as POST };