Reproduction from Wix

.gitignore

@@ -34,3 +34,4 @@ yarn-error.log*
 .vercel
 
 /.tmp
+/.envrc

Makefile

@@ -0,0 +1,16 @@
+SHELL = /bin/bash
+
+default:
+
+dev:
+	yarn dev
+
+build:
+	yarn build
+
+start:
+	yarn start
+
+# 1024x1024 area
+# resize:
+# 	mogrify -resize '1048576@>' -format jpg -quality 60 *.*

jsconfig.json

@@ -5,6 +5,12 @@
       "@/*": [
         "src/*"
       ]
-    },
+    }
   },
+  "exclude": [
+    ".next",
+    ".tmp",
+    "node_modules",
+    "out"
+  ]
 }

netlify.toml

@@ -0,0 +1,6 @@
+[build]
+  command = "make build"
+  publish = "out"
+
+[[plugins]]
+  package = "@netlify/plugin-nextjs"

next.config.js

@@ -1,14 +1,21 @@
 // https://nextjs.org/docs/api-reference/next.config.js/introduction
 
+const withPlugins = require('next-compose-plugins')
+const withYaml = require('next-plugin-yaml')
 const withImages = require('next-images')
 
-module.exports = withImages({
+let nextConfig = {
   // https://nextjs.org/docs/api-reference/next.config.js/basepath
   basePath: process.env.BASE_PATH || '',
 
   // https://nextjs.org/docs/basic-features/image-optimization
   images: {
     loader: 'cloudinary',
-    path: 'https://res.cloudinary.com/rnatulsa/image/upload/'
+    path: '/images/_loader/'
   },
-})
+}
+
+module.exports = withPlugins([
+  withImages,
+  withYaml,
+], nextConfig)

package.json

@@ -8,12 +8,19 @@
     "start": "next start"
   },
   "dependencies": {
+    "@netlify/plugin-nextjs": "^3.0.3",
     "autoprefixer": "^10.2.4",
+    "classnames": "^2.2.6",
+    "gray-matter": "^4.0.2",
     "next": "10.0.6",
+    "next-compose-plugins": "^2.2.1",
     "next-images": "^1.7.0",
+    "next-plugin-yaml": "^1.0.1",
     "postcss": "^8.2.4",
     "react": "17.0.1",
     "react-dom": "17.0.1",
+    "remark": "^13.0.0",
+    "remark-html": "^13.0.1",
     "tailwindcss": "^2.0.2"
   }
 }

src/components/banner.js

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import styles from '@/styles/banner.module.css'
+
+export default function Banner({ image, className, children, bgStyle = {} }) {
+  return (
+    <div className={classNames([styles.root, className])}>
+      <div className={styles.background} style={{
+        backgroundImage: `url(${image})`,
+        ...bgStyle
+      }}></div>
+
+      <div className={styles.content}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+Banner.propTypes = {
+  image: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  children: PropTypes.node,
+  backgroundStyle: PropTypes.object
+}

src/components/board-members.js

@@ -0,0 +1,32 @@
+import styles from '@/styles/board-members.module.css'
+
+import data from '@/data/board.yml'
+
+export function BoardMember({ name, title, pastTitle, image, ...props }) {
+  return (
+    <div {...props}>
+      <div className="; rounded-full overflow-hidden mx-auto" style={{
+        width: '179px',
+        height: '179px',
+        backgroundImage: `url(/images/board-members/${image})`,
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+      }} />
+      <div className={styles.name}>{name}</div>
+      <div className={styles.title}>{title}</div>
+      {pastTitle && <div className={styles.pastTitle}>{pastTitle}</div>}
+    </div>
+  )
+}
+
+export default function BoardMembers() {
+  return (
+    <div className="; text-center max-w-screen-lg mx-auto">
+      <h2 className={styles.header}><span>Meet the Board</span></h2>
+
+      <div className="; flex flex-wrap justify-center">
+        {data.members.map((member, key) => <BoardMember key={key} {...member} className="; text-center m-4" />)}
+      </div>
+    </div>
+  )
+}

src/components/divider.js

@@ -0,0 +1,8 @@
+export default function Divider() {
+  return (
+    <div className="; my-8 border-t-3 border-b border-wixColor13 mx-auto" style={{
+      height: '7px',
+      maxWidth: '300px'
+    }} />
+  )
+}

src/components/footer.js

@@ -0,0 +1,56 @@
+export default function Footer() {
+  return (
+    <footer className="; bg-wixColor15 text-wixColor13" style={{
+      fontSize: '12px',
+      lineHeight: '1.5em',
+    }}>
+      <div className="; md:container mx-auto md:flex md:justify-evenly p-4">
+        <div className="; mx-4">
+          <h6 className="; font-serif uppercase text-wixColor13 underline" style={{
+            fontSize: '18px',
+            letterSpacing: '0.2em',
+            textShadow: 'rgba(0, 0, 0, 0.298039) 0px 5px 0px',
+          }}>
+            About Us
+          </h6>
+
+          <p className="; my-4">
+            Renaissance Neighborhood Association (RNA) is a group of residents who volunteer their time to promote a
+            united community by organizing events and by sharing information that affects our neighborhood.
+          </p>
+        </div>
+
+        <div className="; mx-4">
+          <h6 className="; font-serif uppercase text-wixColor13 underline" style={{
+            fontSize: '18px',
+            letterSpacing: '0.2em',
+            textShadow: 'rgba(0, 0, 0, 0.298039) 0px 5px 0px',
+          }}>
+            Address
+          </h6>
+
+          <p className="; whitespace-pre my-4">
+            Renaissance Neighborhood Association{'\n'}
+            P.O. Box 4362{'\n'}
+            Tulsa, OK 74159
+          </p>
+
+          <p className="; whitespace-pre my-4">
+            For website trouble, email:{'\n'}
+            [email protected]
+          </p>
+        </div>
+
+        <div className="; mx-4">
+          <h6 className="; font-serif uppercase text-wixColor13 underline whitespace-nowrap" style={{
+            fontSize: '18px',
+            letterSpacing: '0.2em',
+            textShadow: 'rgba(0, 0, 0, 0.298039) 0px 5px 0px',
+          }}>
+            Join Our Email List
+          </h6>
+        </div>
+      </div>
+    </footer>
+  )
+}

src/components/gallery.js

@@ -0,0 +1,129 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from '@/styles/gallery.module.css'
+import classNames from 'classnames'
+import Link from 'next/link'
+
+const DEFAULT_SPEED = 5 * 1_000 // 5 seconds
+
+export function GalleryImage({ image, key, visible = true, size = 'cover' }) {
+  return (
+    <div
+      key={key}
+      className={`${styles.galleryImage} ${visible ? styles.galleryImageVisible : ''}`.trim()}
+      style={{ backgroundImage: `url(${image})`, backgroundSize: size }}
+    />
+  )
+}
+GalleryImage.propTypes = {
+  image: PropTypes.string.isRequired,
+  key: PropTypes.any.isRequired,
+  visible: PropTypes.bool,
+  size: PropTypes.oneOf(['contain', 'cover'])
+}
+
+export function GalleryText({ children }) {
+  return (
+    <div className={styles.galleryText}>
+      {children}
+    </div>
+  )
+}
+GalleryText.propTypes = {
+  children: PropTypes.node
+}
+
+export function GalleryButton({ href, text }) {
+  return (
+    <Link href={href}>
+      <a className={styles.galleryButton}>
+        <span>{text} »</span>
+      </a>
+    </Link>
+  )
+}
+GalleryButton.propTypes = {
+  href: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+}
+
+export function GalleryButtons({ children }) {
+  return (
+    <div className={styles.galleryButtons}>
+      {children}
+    </div>
+  )
+}
+GalleryButtons.propTypes = {
+  children: PropTypes.node
+}
+
+const rotate = (images) => {
+  const imageShuffle = [...images]
+
+  if (imageShuffle[1].visible) {
+    const image = imageShuffle.shift()
+    image.visible = false
+    imageShuffle.push(image)
+  }
+
+  imageShuffle[1].visible = true
+
+  return imageShuffle
+}
+
+const init = ({ images, size = 'cover' }) => {
+  return images.map(
+    (image, index) => ({ image, key: index, size, visible: !index })
+  )
+}
+
+export function Gallery({
+  images,
+  children,
+  className = '',
+  size = 'cover',
+  speed = DEFAULT_SPEED,
+  ...props
+}) {
+  if (!images.length) {
+    return
+  }
+
+  const [galleryImages, rotateGalleryImages] = React.useReducer(
+    rotate,
+    init({images, size})
+  )
+
+  React.useEffect(() => {
+    if (images.length < 2) {
+      return
+    }
+
+    const interval = setInterval(() => {
+      rotateGalleryImages()
+    }, speed)
+
+    return () => clearInterval(interval)
+  }, [images])
+
+  return (
+    <div className={classNames([styles.gallery, className])} {...props}>
+      <div className={styles.galleryImages}>
+        {galleryImages.slice(0, 3).map(GalleryImage)}
+      </div>
+      <div className={styles.galleryOverlay}>
+        {children}
+      </div>
+    </div>
+  )
+}
+Gallery.propTypes = {
+  images: PropTypes.array.isRequired,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  size: PropTypes.string,
+  speed: PropTypes.number,
+}
+
+export default Gallery