first commit

examples/cms-makeswift/.env.local.example

@@ -0,0 +1 @@
+MAKESWIFT_SITE_API_KEY=

examples/cms-makeswift/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/cms-makeswift/README.md

@@ -0,0 +1,107 @@
+# A statically generated landing page with Next.js and Makeswift
+
+This example showcases how you can use [Makeswift](https://www.makeswift.com/) to visually build statically generated pages in Next.js.
+
+## Deploy your own
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-makeswift&project-name=cms-makeswift&repository-name=cms-makeswift)
+
+## Demo
+
+### [https://nextjs-makeswift-example.vercel.app/](https://nextjs-makeswift-example.vercel.app/)
+
+### Related examples
+
+- [AgilityCMS](/examples/cms-agilitycms)
+- [Builder.io](/examples/cms-builder-io)
+- [ButterCMS](/examples/cms-buttercms)
+- [Contentful](/examples/cms-contentful)
+- [Cosmic](/examples/cms-cosmic)
+- [DatoCMS](/examples/cms-datocms)
+- [DotCMS](/examples/cms-dotcms)
+- [Drupal](/examples/cms-drupal)
+- [Enterspeed](/examples/cms-enterspeed)
+- [Ghost](/examples/cms-ghost)
+- [GraphCMS](/examples/cms-graphcms)
+- [Kontent.ai](/examples/cms-kontent-ai)
+- [MakeSwift](/examples/cms-makeswift)
+- [Payload](/examples/cms-payload)
+- [Plasmic](/examples/cms-plasmic)
+- [Prepr](/examples/cms-prepr)
+- [Prismic](/examples/cms-prismic)
+- [Sanity](/examples/cms-sanity)
+- [Sitecore XM Cloud](/examples/cms-sitecore-xmcloud)
+- [Sitefinity](/examples/cms-sitefinity)
+- [Storyblok](/examples/cms-storyblok)
+- [TakeShape](/examples/cms-takeshape)
+- [Tina](/examples/cms-tina)
+- [Umbraco](/examples/cms-umbraco)
+- [Umbraco heartcore](/examples/cms-umbraco-heartcore)
+- [Webiny](/examples/cms-webiny)
+- [WordPress](/examples/cms-wordpress)
+- [Blog Starter](/examples/blog-starter)
+
+## How to use
+
+1. Download the example:
+
+   Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+
+   ```bash
+   npx create-next-app --example cms-makeswift cms-makeswift-app
+   ```
+
+   ```bash
+   yarn create next-app --example cms-makeswift cms-makeswift-app
+   ```
+
+   ```bash
+   pnpm create next-app --example cms-makeswift cms-makeswift-app
+   ```
+
+2. Install dependencies:
+
+   ```bash
+   yarn install
+   # or
+   npm install
+   # or
+   pnpm install
+   ```
+
+3. Rename the `.env.local.example` file to `.env.local` and include your Makeswift site's API key:
+
+   ```diff
+   -- MAKESWIFT_API_HOST=
+   -- MAKESWIFT_SITE_API_KEY=
+   ++ MAKESWIFT_API_HOST=https://api.makeswift.com
+   ++ MAKESWIFT_SITE_API_KEY=<YOUR_MAKESWIFT_SITE_API_KEY>
+   ```
+
+4. Run the local dev script:
+
+   ```bash
+   yarn dev
+   # or
+   npm run dev
+   ```
+
+   Your host should be up and running on http://localhost:3000.
+
+5. Finally, go to your Makeswift site settings and add http://localhost:3000/makeswift as the host URL and you're all set!
+
+## Deploy it
+
+When you're ready to go live, deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). All you'll need to do is update your host inside of Makeswift to your Vercel deployment.
+
+## Next steps
+
+With Makeswift, you can give your marketing team custom building blocks to create high quality Next.js pages.
+
+To learn more about Makeswift, take a look at the following resources:
+
+- [Makeswift Website](https://www.makeswift.com/)
+- [Makeswift Documentation](https://www.makeswift.com/docs/)
+- [Makeswift Discord Community](https://discord.gg/dGNdF3Uzfz)
+
+You can check out [the Makeswift GitHub repository](https://github.com/makeswift/makeswift) - your feedback and contributions are welcome!

examples/cms-makeswift/lib/makeswift/register-components.tsx

@@ -0,0 +1,16 @@
+import { Style } from "@makeswift/runtime/controls";
+import { ReactRuntime } from "@makeswift/runtime/react";
+
+// Register your components here!
+
+function HelloWorld(props: { className?: string }) {
+  return <p {...props}>Hello, world!</p>;
+}
+
+ReactRuntime.registerComponent(HelloWorld, {
+  type: "hello-world",
+  label: "Hello, world!",
+  props: {
+    className: Style({ properties: Style.All }),
+  },
+});

examples/cms-makeswift/next.config.js

@@ -0,0 +1,8 @@
+const withMakeswift = require("@makeswift/runtime/next/plugin")();
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = withMakeswift(nextConfig);

examples/cms-makeswift/package.json

@@ -0,0 +1,19 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@makeswift/runtime": "0.10.13",
+    "next": "latest",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "17.0.41",
+    "@types/react": "18.2.8",
+    "typescript": "4.7.3"
+  }
+}

examples/cms-makeswift/pages/[[...path]].tsx

@@ -0,0 +1,51 @@
+import "../lib/makeswift/register-components";
+
+import { Makeswift } from "@makeswift/runtime/next";
+import {
+  GetStaticPathsResult,
+  GetStaticPropsContext,
+  GetStaticPropsResult,
+} from "next";
+
+import {
+  Page as MakeswiftPage,
+  PageProps as MakeswiftPageProps,
+} from "@makeswift/runtime/next";
+
+type ParsedUrlQuery = { path?: string[] };
+
+export async function getStaticPaths(): Promise<
+  GetStaticPathsResult<ParsedUrlQuery>
+> {
+  const makeswift = new Makeswift(process.env.MAKESWIFT_SITE_API_KEY!);
+  const pages = await makeswift.getPages();
+
+  return {
+    paths: pages.map((page) => ({
+      params: {
+        path: page.path.split("/").filter((segment) => segment !== ""),
+      },
+    })),
+    fallback: "blocking",
+  };
+}
+
+type Props = MakeswiftPageProps;
+
+export async function getStaticProps(
+  ctx: GetStaticPropsContext<ParsedUrlQuery>,
+): Promise<GetStaticPropsResult<Props>> {
+  const makeswift = new Makeswift(process.env.MAKESWIFT_SITE_API_KEY!);
+  const path = "/" + (ctx.params?.path ?? []).join("/");
+  const snapshot = await makeswift.getPageSnapshot(path, {
+    preview: ctx.preview,
+  });
+
+  if (snapshot == null) return { notFound: true };
+
+  return { props: { snapshot } };
+}
+
+export default function Page({ snapshot }: Props) {
+  return <MakeswiftPage snapshot={snapshot} />;
+}

examples/cms-makeswift/pages/_document.ts

@@ -0,0 +1 @@
+export { Document as default } from "@makeswift/runtime/next";

examples/cms-makeswift/pages/api/makeswift/[...makeswift].ts

@@ -0,0 +1,3 @@
+import { MakeswiftApiHandler } from "@makeswift/runtime/next";
+
+export default MakeswiftApiHandler(process.env.MAKESWIFT_SITE_API_KEY!);

examples/cms-makeswift/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}