-
Notifications
You must be signed in to change notification settings - Fork 27.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
195 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
MAKESWIFT_API_HOST=https://api.makeswift.com | ||
MAKESWIFT_SITE_API_KEY= |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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! |
16 changes: 16 additions & 0 deletions
16
examples/cms-makeswift/lib/makeswift/register-components.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 }), | ||
}, | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
/** @type {import('next').NextConfig} */ | ||
const nextConfig = { | ||
reactStrictMode: true, | ||
images: { | ||
domains: ['s.mkswft.com'], | ||
}, | ||
} | ||
|
||
module.exports = nextConfig |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import '../lib/makeswift/register-components' | ||
|
||
export { | ||
getStaticPaths, | ||
getStaticProps, | ||
Page as default, | ||
} from '@makeswift/runtime/next' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { Document as default } from '@makeswift/runtime/next' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import '../lib/makeswift/register-components' | ||
|
||
export { getServerSideProps, Page as default } from '@makeswift/runtime/next' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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"] | ||
} |