Add a Makeswift example (#38018)

docs/advanced-features/preview-mode.md

@@ -25,6 +25,7 @@ description: Next.js has the preview mode for statically generated pages. You ca
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-kontent">Kontent Example</a> (<a href="https://next-blog-kontent.vercel.app//">Demo</a>)</li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-umbraco-heartcore">Umbraco Heartcore Example</a> (<a href="https://next-blog-umbraco-heartcore.vercel.app/">Demo</a>)</li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-plasmic">Plasmic Example</a> (<a href="https://nextjs-plasmic-example.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-makeswift">Makeswift Example</a> (<a href="https://nextjs-makeswift-example.vercel.app/">Demo</a>)</li>
   </ul>
 </details>
 

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

@@ -0,0 +1,2 @@
+MAKESWIFT_API_HOST=https://api.makeswift.com
+MAKESWIFT_SITE_API_KEY=

examples/cms-makeswift/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

examples/cms-makeswift/README.md

@@ -0,0 +1,74 @@
+# 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 the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?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/)
+
+## 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
+   # or
+   yarn create next-app --example cms-makeswift cms-makeswift-app
+   # or
+   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-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/cms-makeswift/next.config.js

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    domains: ['s.mkswft.com'],
+  },
+}
+
+module.exports = 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.0.21",
+    "next": "latest",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "17.0.41",
+    "@types/react": "18.0.12",
+    "typescript": "4.7.3"
+  }
+}

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

@@ -0,0 +1,7 @@
+import '../lib/makeswift/register-components'
+
+export {
+  getStaticPaths,
+  getStaticProps,
+  Page as default,
+} from '@makeswift/runtime/next'

examples/cms-makeswift/pages/_document.ts

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

examples/cms-makeswift/pages/makeswift.ts

@@ -0,0 +1,3 @@
+import '../lib/makeswift/register-components'
+
+export { getServerSideProps, Page as default } from '@makeswift/runtime/next'

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": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}