From 81b1fb739fc797b57dd00a7579ffdb2e3a21d22d Mon Sep 17 00:00:00 2001 From: Gebov Date: Sat, 1 Oct 2022 16:26:37 +0300 Subject: [PATCH] chore(examples): Add 'Sitefinity CMS' Example (#39537) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This is an example of how to integrate [Sitefinity CMS ](https://www.progress.com/sitefinity-cms)with next.js Co-authored-by: Balázs Orbán --- examples/cms-sitefinity/.env.local.example | 2 + examples/cms-sitefinity/.gitignore | 36 +++++ examples/cms-sitefinity/README.md | 103 +++++++++++++ examples/cms-sitefinity/components/alert.tsx | 48 ++++++ examples/cms-sitefinity/components/avatar.tsx | 15 ++ .../cms-sitefinity/components/container.tsx | 9 ++ .../cms-sitefinity/components/cover-image.tsx | 33 +++++ .../components/date-formatter.tsx | 12 ++ examples/cms-sitefinity/components/footer.tsx | 32 ++++ examples/cms-sitefinity/components/header.tsx | 14 ++ .../cms-sitefinity/components/hero-post.tsx | 49 ++++++ examples/cms-sitefinity/components/intro.tsx | 23 +++ examples/cms-sitefinity/components/layout.tsx | 23 +++ .../components/markdown-styles.module.css | 18 +++ examples/cms-sitefinity/components/meta.tsx | 44 ++++++ .../components/more-stories.tsx | 31 ++++ .../cms-sitefinity/components/post-body.tsx | 18 +++ .../cms-sitefinity/components/post-header.tsx | 36 +++++ .../components/post-preview.tsx | 43 ++++++ .../cms-sitefinity/components/post-title.tsx | 15 ++ .../components/section-separator.tsx | 5 + examples/cms-sitefinity/interfaces/author.ts | 6 + examples/cms-sitefinity/interfaces/post.ts | 16 ++ examples/cms-sitefinity/lib/api.ts | 140 ++++++++++++++++++ examples/cms-sitefinity/lib/constants.ts | 4 + examples/cms-sitefinity/package.json | 24 +++ examples/cms-sitefinity/pages/_app.tsx | 6 + examples/cms-sitefinity/pages/index.tsx | 49 ++++++ .../cms-sitefinity/pages/posts/[...slug].tsx | 85 +++++++++++ examples/cms-sitefinity/postcss.config.js | 8 + .../public/favicon/android-chrome-192x192.png | Bin 0 -> 4795 bytes .../public/favicon/android-chrome-512x512.png | Bin 0 -> 14640 bytes .../public/favicon/apple-touch-icon.png | Bin 0 -> 1327 bytes .../public/favicon/browserconfig.xml | 9 ++ .../public/favicon/favicon-16x16.png | Bin 0 -> 595 bytes .../public/favicon/favicon-32x32.png | Bin 0 -> 880 bytes .../cms-sitefinity/public/favicon/favicon.ico | Bin 0 -> 15086 bytes .../public/favicon/mstile-150x150.png | Bin 0 -> 3567 bytes .../public/favicon/safari-pinned-tab.svg | 33 +++++ .../public/favicon/site.webmanifest | 19 +++ .../sitefinity/SitefinityExport.zip | Bin 0 -> 10998 bytes examples/cms-sitefinity/styles/index.css | 3 + examples/cms-sitefinity/tailwind.config.js | 34 +++++ examples/cms-sitefinity/tsconfig.json | 20 +++ 44 files changed, 1065 insertions(+) create mode 100644 examples/cms-sitefinity/.env.local.example create mode 100644 examples/cms-sitefinity/.gitignore create mode 100644 examples/cms-sitefinity/README.md create mode 100644 examples/cms-sitefinity/components/alert.tsx create mode 100644 examples/cms-sitefinity/components/avatar.tsx create mode 100644 examples/cms-sitefinity/components/container.tsx create mode 100644 examples/cms-sitefinity/components/cover-image.tsx create mode 100644 examples/cms-sitefinity/components/date-formatter.tsx create mode 100644 examples/cms-sitefinity/components/footer.tsx create mode 100644 examples/cms-sitefinity/components/header.tsx create mode 100644 examples/cms-sitefinity/components/hero-post.tsx create mode 100644 examples/cms-sitefinity/components/intro.tsx create mode 100644 examples/cms-sitefinity/components/layout.tsx create mode 100644 examples/cms-sitefinity/components/markdown-styles.module.css create mode 100644 examples/cms-sitefinity/components/meta.tsx create mode 100644 examples/cms-sitefinity/components/more-stories.tsx create mode 100644 examples/cms-sitefinity/components/post-body.tsx create mode 100644 examples/cms-sitefinity/components/post-header.tsx create mode 100644 examples/cms-sitefinity/components/post-preview.tsx create mode 100644 examples/cms-sitefinity/components/post-title.tsx create mode 100644 examples/cms-sitefinity/components/section-separator.tsx create mode 100644 examples/cms-sitefinity/interfaces/author.ts create mode 100644 examples/cms-sitefinity/interfaces/post.ts create mode 100644 examples/cms-sitefinity/lib/api.ts create mode 100644 examples/cms-sitefinity/lib/constants.ts create mode 100644 examples/cms-sitefinity/package.json create mode 100644 examples/cms-sitefinity/pages/_app.tsx create mode 100644 examples/cms-sitefinity/pages/index.tsx create mode 100644 examples/cms-sitefinity/pages/posts/[...slug].tsx create mode 100644 examples/cms-sitefinity/postcss.config.js create mode 100644 examples/cms-sitefinity/public/favicon/android-chrome-192x192.png create mode 100644 examples/cms-sitefinity/public/favicon/android-chrome-512x512.png create mode 100644 examples/cms-sitefinity/public/favicon/apple-touch-icon.png create mode 100644 examples/cms-sitefinity/public/favicon/browserconfig.xml create mode 100644 examples/cms-sitefinity/public/favicon/favicon-16x16.png create mode 100644 examples/cms-sitefinity/public/favicon/favicon-32x32.png create mode 100644 examples/cms-sitefinity/public/favicon/favicon.ico create mode 100644 examples/cms-sitefinity/public/favicon/mstile-150x150.png create mode 100644 examples/cms-sitefinity/public/favicon/safari-pinned-tab.svg create mode 100644 examples/cms-sitefinity/public/favicon/site.webmanifest create mode 100644 examples/cms-sitefinity/sitefinity/SitefinityExport.zip create mode 100644 examples/cms-sitefinity/styles/index.css create mode 100644 examples/cms-sitefinity/tailwind.config.js create mode 100644 examples/cms-sitefinity/tsconfig.json diff --git a/examples/cms-sitefinity/.env.local.example b/examples/cms-sitefinity/.env.local.example new file mode 100644 index 0000000000000..bc91dbf222f84 --- /dev/null +++ b/examples/cms-sitefinity/.env.local.example @@ -0,0 +1,2 @@ +SF_API_URL= +SF_URL= diff --git a/examples/cms-sitefinity/.gitignore b/examples/cms-sitefinity/.gitignore new file mode 100644 index 0000000000000..c87c9b392c020 --- /dev/null +++ b/examples/cms-sitefinity/.gitignore @@ -0,0 +1,36 @@ +# 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 + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/examples/cms-sitefinity/README.md b/examples/cms-sitefinity/README.md new file mode 100644 index 0000000000000..9d0333d9fb9dd --- /dev/null +++ b/examples/cms-sitefinity/README.md @@ -0,0 +1,103 @@ +# A statically generated blog example using Next.js and Sitefinity CMS + +This is the existing [cms-sitefinity](https://github.com/vercel/next.js/tree/canary/examples/cms-sitefinity) plus TypeScript. +This example showcases [Next.js's Static Generation feature](https://nextjs.org/docs/basic-features/pages) using Sitefinity CMS as the data source. + +## Demo + +[https://next-cms-sitefinity.vercel.app/](https://next-cms-sitefinity.vercel.app/) + +## Deploy your own + +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/cms-sitefinity) + +[![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-sitefinity&project-name=cms-sitefinity&repository-name=cms-sitefinity) + +### Related examples + +- [WordPress](/examples/cms-wordpress) +- [DatoCMS](/examples/cms-datocms) +- [Sanity](/examples/cms-sanity) +- [TakeShape](/examples/cms-takeshape) +- [Prismic](/examples/cms-prismic) +- [Contentful](/examples/cms-contentful) +- [Strapi](/examples/cms-strapi) +- [Agility CMS](/examples/cms-agilitycms) +- [Cosmic](/examples/cms-cosmic) +- [ButterCMS](/examples/cms-buttercms) +- [Storyblok](/examples/cms-storyblok) +- [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent) +- [Umbraco Heartcore](/examples/cms-umbraco-heartcore) +- [Builder.io](/examples/cms-builder-io) +- [TinaCMS](/examples/cms-tina/) + +## How to use + +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-sitefinity cms-sitefinity-app +``` + +```bash +yarn create next-app --example cms-sitefinity cms-sitefinity-app +``` + +```bash +pnpm create next-app --example cms-sitefinity cms-sitefinity-app +``` + +## Configuration + +### Step 1. Setup the CMS locally (version >=14.27922) + +First, [install](https://www.progress.com/documentation/sitefinity-cms/install-sitefinity) and run the CMS Locally. + +### Step 2. Import the ready to use dynamic module 'Posts' + +For the purpose of this demo a ready to use dynamic module was build containing two types - 'Post' and 'Author'. + +In order to install it: + +1. Open the CMS Administration under (/Sitefinity) +2. Open the Export/Import screen under (/Sitefinity/Administration/Packaging) +3. Click on Import Zip file and import the file from the [sitefinity folder](./sitefinity/SitefinityExport.zip) + +### Step 3. Enable the web service + +By default the web services are not allowed for anonymous users, so the yhave to be enabled. + +Go to /sitefinity/Administration/WebServices and edit the 'Default' web service to allow it to be accessible by 'Everyone' + +### Step 4. Install the GraphQL package + +1. Add the [Sitefinity CMS nugget source](https://www.progress.com/documentation/sitefinity-cms/sitefinity-cms-nuget-packages-repository) +2. Install the [Progress.Sitefinity.GraphQL](https://nuget.sitefinity.com/#/package/Progress.Sitefinity.GraphQL) package (enable prerelease filter). + +### Step 5. Set up environment variables + +Copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git): + +```bash +cp .env.local.example .env.local +``` + +Then set each variable on `.env.local` + +- `SF_API_URL` - This is the url of the 'Default' web service that we configured earlier. E.g. http://locahost/api/default/ +- `SF_URL` - This is the URL of the CMS itself. E.g. http://localhost/ + +### Step 6. Run Next.js in development mode + +```bash +npm install +npm run dev + +# or + +yarn +yarn dev +``` + +Your blog should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions). diff --git a/examples/cms-sitefinity/components/alert.tsx b/examples/cms-sitefinity/components/alert.tsx new file mode 100644 index 0000000000000..067672f380826 --- /dev/null +++ b/examples/cms-sitefinity/components/alert.tsx @@ -0,0 +1,48 @@ +import Container from './container' +import cn from 'classnames' +import { EXAMPLE_PATH } from '../lib/constants' + +type Props = { + preview?: boolean +} + +const Alert = ({ preview }: Props) => { + return ( +
+ +
+ {preview ? ( + <> + This page is a preview.{' '} + + Click here + {' '} + to exit preview mode. + + ) : ( + <> + The source code for this blog is{' '} + + available on GitHub + + . + + )} +
+ +
+ ) +} + +export default Alert diff --git a/examples/cms-sitefinity/components/avatar.tsx b/examples/cms-sitefinity/components/avatar.tsx new file mode 100644 index 0000000000000..920d385162244 --- /dev/null +++ b/examples/cms-sitefinity/components/avatar.tsx @@ -0,0 +1,15 @@ +type Props = { + name: string + picture: string +} + +const Avatar = ({ name, picture }: Props) => { + return ( +
+ {name} +
{name}
+
+ ) +} + +export default Avatar diff --git a/examples/cms-sitefinity/components/container.tsx b/examples/cms-sitefinity/components/container.tsx new file mode 100644 index 0000000000000..1a1f68714480c --- /dev/null +++ b/examples/cms-sitefinity/components/container.tsx @@ -0,0 +1,9 @@ +type Props = { + children?: React.ReactNode +} + +const Container = ({ children }: Props) => { + return
{children}
+} + +export default Container diff --git a/examples/cms-sitefinity/components/cover-image.tsx b/examples/cms-sitefinity/components/cover-image.tsx new file mode 100644 index 0000000000000..1541fddb6b964 --- /dev/null +++ b/examples/cms-sitefinity/components/cover-image.tsx @@ -0,0 +1,33 @@ +import cn from 'classnames' +import Link from 'next/link' + +type Props = { + title: string + src: string + slug?: string +} + +const CoverImage = ({ title, src, slug }: Props) => { + const image = ( + {`Cover + ) + return ( +
+ {slug ? ( + + {image} + + ) : ( + image + )} +
+ ) +} + +export default CoverImage diff --git a/examples/cms-sitefinity/components/date-formatter.tsx b/examples/cms-sitefinity/components/date-formatter.tsx new file mode 100644 index 0000000000000..e827be5e9c84d --- /dev/null +++ b/examples/cms-sitefinity/components/date-formatter.tsx @@ -0,0 +1,12 @@ +import { parseISO, format } from 'date-fns' + +type Props = { + dateString: string +} + +const DateFormatter = ({ dateString }: Props) => { + const date = parseISO(dateString) + return +} + +export default DateFormatter diff --git a/examples/cms-sitefinity/components/footer.tsx b/examples/cms-sitefinity/components/footer.tsx new file mode 100644 index 0000000000000..d2bcba33363b6 --- /dev/null +++ b/examples/cms-sitefinity/components/footer.tsx @@ -0,0 +1,32 @@ +import Container from './container' +import { EXAMPLE_PATH } from '../lib/constants' + +const Footer = () => { + return ( + + ) +} + +export default Footer diff --git a/examples/cms-sitefinity/components/header.tsx b/examples/cms-sitefinity/components/header.tsx new file mode 100644 index 0000000000000..4b516c600c985 --- /dev/null +++ b/examples/cms-sitefinity/components/header.tsx @@ -0,0 +1,14 @@ +import Link from 'next/link' + +const Header = () => { + return ( +

+ + Blog + + . +

+ ) +} + +export default Header diff --git a/examples/cms-sitefinity/components/hero-post.tsx b/examples/cms-sitefinity/components/hero-post.tsx new file mode 100644 index 0000000000000..ac628526c1924 --- /dev/null +++ b/examples/cms-sitefinity/components/hero-post.tsx @@ -0,0 +1,49 @@ +import Avatar from './avatar' +import DateFormatter from './date-formatter' +import CoverImage from './cover-image' +import Link from 'next/link' +import type Author from '../interfaces/author' + +type Props = { + title: string + coverImage: string + date: string + excerpt: string + author: Author + slug: string +} + +const HeroPost = ({ + title, + coverImage, + date, + excerpt, + author, + slug, +}: Props) => { + return ( +
+
+ +
+
+
+

+ + {title} + +

+
+ +
+
+
+

{excerpt}

+ +
+
+
+ ) +} + +export default HeroPost diff --git a/examples/cms-sitefinity/components/intro.tsx b/examples/cms-sitefinity/components/intro.tsx new file mode 100644 index 0000000000000..d41e6fb1b994d --- /dev/null +++ b/examples/cms-sitefinity/components/intro.tsx @@ -0,0 +1,23 @@ +import { CMS_NAME } from '../lib/constants' + +const Intro = () => { + return ( +
+

+ Blog. +

+

+ A statically generated blog example using{' '} + + Next.js + {' '} + and {CMS_NAME}. +

+
+ ) +} + +export default Intro diff --git a/examples/cms-sitefinity/components/layout.tsx b/examples/cms-sitefinity/components/layout.tsx new file mode 100644 index 0000000000000..9cd23e56e1499 --- /dev/null +++ b/examples/cms-sitefinity/components/layout.tsx @@ -0,0 +1,23 @@ +import Alert from './alert' +import Footer from './footer' +import Meta from './meta' + +type Props = { + preview?: boolean + children: React.ReactNode +} + +const Layout = ({ preview, children }: Props) => { + return ( + <> + +
+ +
{children}
+
+