Initial commit

Created from https://vercel.com/new
2023-08-09 21:34:23 +00:00 · 2023-08-09 21:34:23 +00:00 · 0721b7dc8f
commit 0721b7dc8f
66 changed files with 2858 additions and 0 deletions
--- a/.env.example
+++ b/.env.example
@ -0,0 +1,7 @@
+NEXT_PUBLIC_DRUPAL_BASE_URL=http://localhost:8080
+NEXT_IMAGE_DOMAIN=localhost
+DRUPAL_CLIENT_ID=52ce1a10-bf5c-4c81-8edf-eea3af95da84
+DRUPAL_CLIENT_SECRET=SA9AGbHnx6pOamaAus2f9LG9XudHFjKs
+DRUPAL_SITE_ID=example_marketing
+DRUPAL_PREVIEW_SECRET=secret
+DRUPAL_FRONT_PAGE=/home
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,41 @@
+# 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/
+.next
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+/certificates/*
+
+cypress/screenshots
+cypress/videos
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -0,0 +1,531 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [1.5.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.4.4...example-marketing@1.5.0) (2022-12-06)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+## [1.4.4](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.4.3...example-marketing@1.4.4) (2022-12-06)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+## [1.4.3](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.4.2...example-marketing@1.4.3) (2022-09-07)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+## [1.4.2](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.4.1...example-marketing@1.4.2) (2022-08-09)
+
+
+### Bug Fixes
+
+* Warning title element received an array with more than 1 element ([910ca41](https://github.com/chapter-three/next-drupal/commit/910ca41ca230e5948fbe9d880bed04232d004306))
+
+
+
+
+
+## [1.4.1](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.4.0...example-marketing@1.4.1) (2022-07-29)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+# [1.4.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.4.0-rc.0...example-marketing@1.4.0) (2022-06-14)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+# [1.4.0-rc.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.3.3-rc.1...example-marketing@1.4.0-rc.0) (2022-06-14)
+
+
+### Features
+
+* rename Experimental_DrupalClient to DrupalClient ([fc549ec](https://github.com/chapter-three/next-drupal/commit/fc549ecab94a5a1e67f38b4e951351365adbb1f5))
+
+
+
+
+
+## [1.3.3-rc.1](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.3.3-rc.0...example-marketing@1.3.3-rc.1) (2022-06-10)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+## [1.3.3-rc.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.3.3-alpha.0...example-marketing@1.3.3-rc.0) (2022-06-06)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+## [1.3.3-alpha.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.3.2...example-marketing@1.3.3-alpha.0) (2022-06-02)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+## [1.3.2](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.3.1...example-marketing@1.3.2) (2022-05-02)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+## [1.3.1](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.3.0...example-marketing@1.3.1) (2022-04-25)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+# [1.3.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.3.0-rc.0...example-marketing@1.3.0) (2022-04-19)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+# [1.3.0-rc.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.3.0-alpha.0...example-marketing@1.3.0-rc.0) (2022-04-19)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+# [1.3.0-alpha.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.2.2...example-marketing@1.3.0-alpha.0) (2022-04-18)
+
+
+### Bug Fixes
+
+* **example-marketing:** update slug ([cd6f9cc](https://github.com/chapter-three/next-drupal/commit/cd6f9ccdb783f95bc95d5dc7a551edcd5b2601b2))
+* update examples ([c00cafb](https://github.com/chapter-three/next-drupal/commit/c00cafbf3c667265fd6f0478164808664f778433))
+
+
+### Features
+
+* add example-cache ([2b29d66](https://github.com/chapter-three/next-drupal/commit/2b29d66c8cddb66a331e3b588da8140a4e4ba61e))
+* **next-drupal:** rename DrupalClient to Experimental_DrupalClient ([0d5cf2f](https://github.com/chapter-three/next-drupal/commit/0d5cf2f44b503a2d8e61eee19146fd5b797356ab))
+
+
+### Reverts
+
+* Revert "chore: revert example-marketing" ([88a9505](https://github.com/chapter-three/next-drupal/commit/88a950508617e3e94a2b6504bb0ea95d7574c3b9))
+
+
+
+
+
+## [1.2.2](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.2.1...example-marketing@1.2.2) (2022-04-11)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+## [1.2.1](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.2.0...example-marketing@1.2.1) (2022-03-28)
+
+
+### Bug Fixes
+
+* **example-blog:** switch to manual revalidation ([933ca86](https://github.com/chapter-three/next-drupal/commit/933ca86d47a35dc3bf2a120466f1fec197ca8b61))
+* **example-marketing:** turn off revalidate for pages ([22e8bf1](https://github.com/chapter-three/next-drupal/commit/22e8bf1f333e08aa6f13b6038e362bf826133acb))
+
+
+
+
+
+# [1.2.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.1.1...example-marketing@1.2.0) (2022-02-24)
+
+
+### Bug Fixes
+
+* **example-marketing:** add next-transpile-modules ([b574e30](https://github.com/chapter-three/next-drupal/commit/b574e3077ee90d742b9ec49713597bb4b8d8005e))
+* **example-marketing:** add tailwindcss forms ([e9b583f](https://github.com/chapter-three/next-drupal/commit/e9b583f645e2a8aa9a5bf70cc132fc31b2ebb6b3))
+* **example-marketing:** debug code for translatePath in getStaticProps ([c14b690](https://github.com/chapter-three/next-drupal/commit/c14b690fdc3bd2b1125ba080f0343293426f9e6b))
+* **example-marketing:** remove next-transpile-modules ([5b248c2](https://github.com/chapter-three/next-drupal/commit/5b248c2e4d44c9e2acf363743904e4078c5ec610))
+* **example-marketing:** remove tailwind forms ([630fc24](https://github.com/chapter-three/next-drupal/commit/630fc24e126560f1dccc6f495079e895fa4f70ca))
+* **example-marketing:** switch to next/link ([b39da07](https://github.com/chapter-three/next-drupal/commit/b39da077b2bb4c6cbbbd51a533aa7d061842c532))
+* **example-marketing:** update meta component ([4d4e99b](https://github.com/chapter-three/next-drupal/commit/4d4e99b7c9206bc05117ac10868c12e696f53dae))
+* **example-marketing:** update tailwindcss ([943d7f1](https://github.com/chapter-three/next-drupal/commit/943d7f1c9a37418125053e897b67b070065479c4))
+* **example-marketing:** use local version for next-drupal ([8903fc9](https://github.com/chapter-three/next-drupal/commit/8903fc9e79d29c0e4a87acd7357229c5fe1bc61b))
+* update gitignore ([0e05896](https://github.com/chapter-three/next-drupal/commit/0e05896f06a6a48bf82db4830c085e6f9c5e7b84))
+
+
+### Features
+
+* **example-marketing:** add revalidate api ([bf402b1](https://github.com/chapter-three/next-drupal/commit/bf402b1a8ae4937cb91cd636c1256161da7d612e))
+* bump all examples to next 12.1.0 ([00b15f2](https://github.com/chapter-three/next-drupal/commit/00b15f2b308a0a9fcb298789a9ca712f4efa7eff))
+* **example-marketing:** add meta og image ([116e29f](https://github.com/chapter-three/next-drupal/commit/116e29f3171b40b274435f1ac064567770ed8f32))
+
+
+
+
+
+## [1.1.1](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.1.0...example-marketing@1.1.1) (2022-01-17)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+# [1.1.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.0.1...example-marketing@1.1.0) (2022-01-12)
+
+
+### Features
+
+* **example-marketing:** handle redirects ([ba12711](https://github.com/chapter-three/next-drupal/commit/ba1271155ebb6dda80dac77e29683b07021c8e73))
+
+
+
+
+
+## [1.0.1](https://github.com/chapter-three/next-drupal/compare/example-marketing@1.0.0...example-marketing@1.0.1) (2021-12-21)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+# [1.0.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.17.0...example-marketing@1.0.0) (2021-12-03)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+# [0.17.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.16.0...example-marketing@0.17.0) (2021-11-24)
+
+
+### Bug Fixes
+
+* update .env files ([8c3207b](https://github.com/chapter-three/next-drupal/commit/8c3207b79bc641b605c11cec3fd556d0f71f1e72))
+* update page for marketing ([e527b36](https://github.com/chapter-three/next-drupal/commit/e527b360da861d3c69ca9a01954e851231b3ac51))
+
+
+### Features
+
+* **drupal:** update example modules ([3f2b578](https://github.com/chapter-three/next-drupal/commit/3f2b57822226e587e590fdcc5f760cae0b11d97f))
+
+
+
+
+
+# [0.16.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.16.0-alpha.0...example-marketing@0.16.0) (2021-11-01)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+# [0.16.0-alpha.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.15.2...example-marketing@0.16.0-alpha.0) (2021-11-01)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+## [0.15.2](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.15.1...example-marketing@0.15.2) (2021-10-14)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+## [0.15.1](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.15.0...example-marketing@0.15.1) (2021-10-14)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+# [0.15.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.14.0...example-marketing@0.15.0) (2021-10-13)
+
+
+### Bug Fixes
+
+* rename repo links ([48d52dd](https://github.com/chapter-three/next-drupal/commit/48d52dde79f69396ef706d152c03670117b6a480))
+
+
+### Features
+
+* **example-marketing:** add drupal jsonapi params example ([e663466](https://github.com/chapter-three/next-drupal/commit/e6634662139c614b36fb76370020298f9f89352a))
+
+
+
+
+
+# [0.14.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.13.2...example-marketing@0.14.0) (2021-08-11)
+
+
+### Features
+
+* **example-marketing:** implement route sync ([b49e531](https://github.com/chapter-three/next-drupal/commit/b49e5314692a037b6e420167609dfec216551b77))
+
+
+
+
+
+## [0.13.2](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.13.1...example-marketing@0.13.2) (2021-08-07)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+## [0.13.1](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.13.0...example-marketing@0.13.1) (2021-06-22)
+
+
+### Bug Fixes
+
+* **example-marketing:** add missing dependency ([7a182f6](https://github.com/chapter-three/next-drupal/commit/7a182f68f0cf86b03977009c07660e886c9635eb))
+* **example-marketing:** use fallback blocking ([be5a2d3](https://github.com/chapter-three/next-drupal/commit/be5a2d32764d1c510ffb335cb5076cc927c65e0e))
+
+
+
+
+
+# [0.13.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.12.0...example-marketing@0.13.0) (2021-06-16)
+
+
+### Features
+
+* update to nextjs 11 ([1e46e44](https://github.com/chapter-three/next-drupal/commit/1e46e44ab5eb9d961e95dcc87d51282178f02bb2))
+
+
+
+
+
+# [0.12.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.11.0...example-marketing@0.12.0) (2021-06-16)
+
+
+### Features
+
+* **example-marketing:** add pagination to view ([feb6543](https://github.com/chapter-three/next-drupal/commit/feb6543be9a201f02b7afee38a3fed5c170de85b))
+
+
+
+
+
+# [0.11.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.10.0...example-marketing@0.11.0) (2021-06-15)
+
+
+### Bug Fixes
+
+* **example-marketing:** remove unused locale ([412e39d](https://github.com/chapter-three/next-drupal/commit/412e39d7ce9103f845fafaff8172c1e07bddb442))
+
+
+### Features
+
+* **example-marketing:** add properties view ([2b2804f](https://github.com/chapter-three/next-drupal/commit/2b2804f835a375bdc5076cbd4148604c964dbd06))
+
+
+
+
+
+# [0.10.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.9.2...example-marketing@0.10.0) (2021-06-14)
+
+
+### Features
+
+* **example-marketing:** update site to work with latest next-drupal ([9f27e7a](https://github.com/chapter-three/next-drupal/commit/9f27e7ae2b9c775ba4fe7d99fdfa0b8240a3dd90))
+
+
+
+
+
+## [0.9.2](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.9.1...example-marketing@0.9.2) (2021-06-13)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+## [0.9.1](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.9.0...example-marketing@0.9.1) (2021-06-13)
+
+
+### Bug Fixes
+
+* update sites to handle unpublished entities ([93dd678](https://github.com/chapter-three/next-drupal/commit/93dd6786caff73398dd291c84b41d45c5bc50645))
+
+
+
+
+
+# [0.9.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.8.0...example-marketing@0.9.0) (2021-06-13)
+
+
+### Bug Fixes
+
+* update marketing site ([08863e6](https://github.com/chapter-three/next-drupal/commit/08863e6e8ab273799f1b1fcab793fdf51ad1d04b))
+* update preview ([f01ca6b](https://github.com/chapter-three/next-drupal/commit/f01ca6b9f68ac92c587b11c6e05f1145a57e8995))
+
+
+### Features
+
+* add support for basic page to example-marketing ([f9c5d1b](https://github.com/chapter-three/next-drupal/commit/f9c5d1b81697c59bc15b0372700fa2e979de9a00))
+
+
+
+
+
+# [0.8.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.7.0...example-marketing@0.8.0) (2021-06-11)
+
+
+### Features
+
+* update all sites ([ca9b2e9](https://github.com/chapter-three/next-drupal/commit/ca9b2e964c5a7fe591602465f2c2516eb4a54a1b))
+
+
+
+
+
+# [0.7.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.6.0...example-marketing@0.7.0) (2021-06-10)
+
+
+### Features
+
+* **examples:** update examples to use the new menu hook ([f9169e3](https://github.com/chapter-three/next-drupal/commit/f9169e34ab76584db855f1a69df027024156afff))
+
+
+
+
+
+# [0.6.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.5.0...example-marketing@0.6.0) (2021-05-17)
+
+
+### Features
+
+* add getEntityByPath ([072ead7](https://github.com/chapter-three/next-drupal/commit/072ead7ecc3b7f158e4b81e03d17f0bf1a5b511c))
+
+
+
+
+
+# [0.5.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.4.1...example-marketing@0.5.0) (2021-05-17)
+
+
+### Features
+
+* deserialize entities by default ([8b53ae2](https://github.com/chapter-three/next-drupal/commit/8b53ae222717b8983568194373be04903944a032))
+
+
+
+
+
+## [0.4.1](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.4.0...example-marketing@0.4.1) (2021-05-07)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+# [0.4.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.3.0...example-marketing@0.4.0) (2021-05-07)
+
+
+### Features
+
+* add a no-preview example ([db48c6e](https://github.com/chapter-three/next-drupal/commit/db48c6e90ae5100eafb25d3b5688b5ef8131c477))
+
+
+
+
+
+# [0.3.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.2.1...example-marketing@0.3.0) (2021-04-29)
+
+
+### Bug Fixes
+
+* update .env.example ([467047b](https://github.com/chapter-three/next-drupal/commit/467047b010f54394c52760b9db960b06ee48db61))
+
+
+### Features
+
+* **www:** update to reflexjs 2.0.0-alpha-5 ([3b28c84](https://github.com/chapter-three/next-drupal/commit/3b28c84e9b7eefd4892aaf22dea0dd2512091b93))
+* update examples to reflexjs 2.0.0-alpha-4 ([49816ee](https://github.com/chapter-three/next-drupal/commit/49816ee6ba0f669d45cee6930b449547200ce1c7))
+
+
+
+
+
+## [0.2.1](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.2.0...example-marketing@0.2.1) (2021-02-02)
+
+**Note:** Version bump only for package example-marketing
+
+
+
+
+
+# [0.2.0](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.1.1...example-marketing@0.2.0) (2021-02-01)
+
+
+### Bug Fixes
+
+* make image domain configurable via env ([9b66159](https://github.com/chapter-three/next-drupal/commit/9b66159561a5e0bf17b4e73c4cde318e06fe938d))
+* update examples ([e70ed45](https://github.com/chapter-three/next-drupal/commit/e70ed459294cb8945f42d04cf7bd20a54ab9fe77))
+
+
+### Features
+
+* implement filter by entity reference ([eeade94](https://github.com/chapter-three/next-drupal/commit/eeade9485caaff587735d5d8211a86a88ca8847f))
+
+
+
+
+
+## [0.1.1](https://github.com/chapter-three/next-drupal/compare/example-marketing@0.1.0...example-marketing@0.1.1) (2021-02-01)
+
+
+### Bug Fixes
+
+* update example sites ([33143d0](https://github.com/chapter-three/next-drupal/commit/33143d0d5229be6424c41ace2ad846c0d85447d9))
+
+
+
+
+
+# 0.1.0 (2021-01-31)
+
+
+### Features
+
+* add marketing site ([8462d7c](https://github.com/chapter-three/next-drupal/commit/8462d7cfcf623a9e8ca03456ebed0bb6ab838e11))
--- a/README.md
+++ b/README.md
@ -0,0 +1,11 @@
+# example-marketing
+
+An example marketing site built using Drupal + JSON:API.
+
+Pages are built from the Landing page node type and paragraphs sourced from `/drupal`.
+
+See https://demo.next-drupal.org
+
+## License
+
+Licensed under the [MIT license](https://github.com/chapter-three/next-drupal/blob/master/LICENSE).
--- a/components/footer.tsx
+++ b/components/footer.tsx
@ -0,0 +1,31 @@
+import Link from "next/link"
+import { DrupalMenuLinkContent } from "next-drupal"
+
+interface FooterProps {
+  links: DrupalMenuLinkContent[]
+}
+
+export function Footer({ links }: FooterProps) {
+  return (
+    <footer className="border-t">
+      <div className="container px-6 py-12 mx-auto">
+        <div className="flex flex-col items-center justify-between text-sm md:flex-row">
+          <p className="mb-6 md:mb-0">
+            © {new Date().getFullYear()} Next.js + Drupal
+          </p>
+          {links?.length ? (
+            <ul className="flex gap-4">
+              {links.map((link) => (
+                <li key={link.id}>
+                  <Link href={link.url} passHref>
+                    <a>{link.title}</a>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </div>
+      </div>
+    </footer>
+  )
+}
--- a/components/form-item.tsx
+++ b/components/form-item.tsx
@ -0,0 +1,16 @@
+interface FormItemProps {
+  label: string
+  name: string
+  children?: React.ReactNode
+}
+
+export function FormItem({ label, name, children, ...props }: FormItemProps) {
+  return (
+    <div className="grid gap-2" {...props}>
+      <label className="text-sm font-semibold uppercase" htmlFor={name}>
+        {label}
+      </label>
+      {children}
+    </div>
+  )
+}
--- a/components/formatted-text.tsx
+++ b/components/formatted-text.tsx
@ -0,0 +1,64 @@
+import Image from "next/image"
+import { HTMLReactParserOptions, domToReact } from "html-react-parser"
+import { Element } from "domhandler/lib/node"
+import parse from "html-react-parser"
+
+import { isRelative } from "lib/utils/is-relative"
+import Link from "next/link"
+
+const options: HTMLReactParserOptions = {
+  replace: (domNode) => {
+    if (domNode instanceof Element) {
+      if (domNode.name === "img") {
+        const { src, alt, width = "100px", height = "100px" } = domNode.attribs
+
+        if (isRelative(src)) {
+          return (
+            <Image
+              src={`${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/${src}`}
+              width={`${width}px`}
+              height={`${height}px`}
+              alt={alt}
+              layout="intrinsic"
+              objectFit="cover"
+            />
+          )
+        }
+      }
+
+      if (domNode.name === "a") {
+        const { href, class: className } = domNode.attribs
+
+        if (href && isRelative(href)) {
+          return (
+            <Link href={href} passHref>
+              <a className={className}>{domToReact(domNode.children)}</a>
+            </Link>
+          )
+        }
+      }
+
+      if (domNode.name === "input") {
+        if (domNode.attribs.value === "") {
+          delete domNode.attribs.value
+        }
+
+        return domNode
+      }
+    }
+  },
+}
+
+interface FormattedTextProps extends React.HTMLAttributes<HTMLDivElement> {
+  format?: string
+  processed: string
+  value?: string
+}
+
+export function FormattedText({ processed, ...props }: FormattedTextProps) {
+  return (
+    <div data-cy="node--body" {...props}>
+      {parse(processed, options)}
+    </div>
+  )
+}
--- a/components/layout.tsx
+++ b/components/layout.tsx
@ -0,0 +1,23 @@
+import * as React from "react"
+import { DrupalMenuLinkContent } from "next-drupal"
+
+import { Navbar } from "components/navbar"
+import { Footer } from "components/footer"
+
+export interface LayoutProps {
+  menus: {
+    main: DrupalMenuLinkContent[]
+    footer: DrupalMenuLinkContent[]
+  }
+  children?: React.ReactNode
+}
+
+export function Layout({ menus, children }: LayoutProps) {
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Navbar links={menus.main} />
+      <main className="flex-1">{children}</main>
+      <Footer links={menus.footer} />
+    </div>
+  )
+}
--- a/components/link.tsx
+++ b/components/link.tsx
@ -0,0 +1,38 @@
+import * as React from "react"
+import NextLink from "next/link"
+import type { LinkProps as NextLinkProps } from "next/link"
+import { useRouter } from "next/router"
+
+import { isRelative } from "lib/utils/is-relative"
+
+interface LinkProps extends NextLinkProps {
+  href: string
+  children?: React.ReactElement
+}
+
+export function Link({ href, passHref, as, children, ...props }: LinkProps) {
+  const router = useRouter()
+
+  if (!href) {
+    return null
+  }
+
+  // Use Next Link for internal links, and <a> for others.
+  if (isRelative(href)) {
+    // Disable prefetching in preview mode.
+    // We do this here inside of inline `prefetch={!router.isPreview}`
+    // because `prefetch={true}` is not allowed.
+    // See https://nextjs.org/docs/messages/prefetch-true-deprecated
+    const linkProps = router.isPreview ? { prefetch: false, ...props } : props
+
+    return (
+      <NextLink as={as} href={href} passHref={passHref} {...linkProps}>
+        {children}
+      </NextLink>
+    )
+  }
+
+  return React.cloneElement(children, {
+    href,
+  })
+}
--- a/components/links.tsx
+++ b/components/links.tsx
@ -0,0 +1,33 @@
+import classNames from "classnames"
+import Link from "next/link"
+
+export interface LinksProps {
+  links: {
+    title: string
+    uri: string
+    options?: []
+  }[]
+}
+
+export function Links({ links }: LinksProps) {
+  if (!links.length) return null
+
+  return (
+    <div className="grid gap-4 mt-6 sm:grid-cols-2">
+      {links.map((link, index) => (
+        <Link href={link.uri} key={index} passHref>
+          <a
+            className={classNames(
+              "px-6 py-3 text-lg transition-colors rounded-md ",
+              index === 0
+                ? "bg-blue-600 text-white hover:bg-blue-700"
+                : "bg-gray-100 hover:bg-gray-200 text-black"
+            )}
+          >
+            {link.title}
+          </a>
+        </Link>
+      ))}
+    </div>
+  )
+}
--- a/components/locale-switcher.tsx
+++ b/components/locale-switcher.tsx
@ -0,0 +1,25 @@
+import classNames from "classnames"
+import Link from "next/link"
+import { useRouter } from "next/router"
+
+export function LocaleSwitcher() {
+  const { locales, asPath, locale: currentLocale } = useRouter()
+
+  return (
+    <div className="flex">
+      {locales.map((locale) => (
+        <Link href={asPath} key={locale} locale={locale} passHref>
+          <a
+            data-cy={`local-switcher-${locale}`}
+            className={classNames(
+              "flex items-center justify-center p-2 uppercase",
+              locale === currentLocale ? "text-black" : "text-gray-500"
+            )}
+          >
+            {locale}
+          </a>
+        </Link>
+      ))}
+    </div>
+  )
+}
--- a/components/media--image.tsx
+++ b/components/media--image.tsx
@ -0,0 +1,34 @@
+import Image, { ImageProps } from "next/image"
+
+import { absoluteURL } from "lib/utils/absolute-url"
+import { MediaProps } from "components/media"
+
+interface MediaImageProps extends MediaProps, Partial<ImageProps> {}
+
+export function MediaImage({
+  media,
+  layout = "responsive",
+  objectFit,
+  width,
+  height,
+  ...props
+}: MediaImageProps) {
+  const image = media?.field_media_image
+
+  if (!image) {
+    return null
+  }
+
+  return (
+    <Image
+      src={absoluteURL(image.uri.url)}
+      layout={layout}
+      objectFit={objectFit}
+      width={width || image.resourceIdObjMeta.width}
+      height={height || image.resourceIdObjMeta.height}
+      alt={image.resourceIdObjMeta.alt || "Image"}
+      title={image.resourceIdObjMeta.title}
+      {...props}
+    />
+  )
+}
--- a/components/media.tsx
+++ b/components/media.tsx
@ -0,0 +1,25 @@
+import { DrupalMedia } from "next-drupal"
+
+import { MediaImage } from "components/media--image"
+
+const mediaTypes = {
+  "media--image": MediaImage,
+}
+
+export interface MediaProps {
+  media: DrupalMedia
+}
+
+export function Media({ media, ...props }: MediaProps) {
+  if (!media) {
+    return null
+  }
+
+  const Component = mediaTypes[media.type]
+
+  if (!Component) {
+    return null
+  }
+
+  return <Component media={media} {...props} />
+}
--- a/components/meta.tsx
+++ b/components/meta.tsx
@ -0,0 +1,53 @@
+import Head from "next/head"
+import { useRouter } from "next/router"
+import { DrupalMetatag } from "types/drupal"
+
+interface MetaProps {
+  title?: string
+  path?: string
+  tags?: DrupalMetatag[]
+}
+
+export function Meta({ title, tags }: MetaProps) {
+  const router = useRouter()
+
+  return (
+    <Head>
+      <link
+        rel="canonical"
+        href={`${process.env.NEXT_PUBLIC_BASE_URL}${
+          router.asPath !== "/" ? router.asPath : ""
+        }`}
+      />
+      {tags?.length ? (
+        tags.map((tag, index) => {
+          if (tag.attributes.rel === "canonical") {
+            return null
+          }
+
+          if (tag.attributes.name === "title") {
+            return (
+              <title key={tag.attributes.name}>{tag.attributes.content}</title>
+            )
+          }
+          const Tag = tag.tag as keyof JSX.IntrinsicElements
+          return <Tag key={index} {...tag.attributes}></Tag>
+        })
+      ) : (
+        <>
+          <title>{`${title} | Next.js for Drupal`}</title>
+          <meta
+            name="description"
+            content="A Next.js blog powered by a Drupal backend."
+          />
+          <meta
+            property="og:image"
+            content={`${process.env.NEXT_PUBLIC_BASE_URL}/images/meta.jpg`}
+          />
+          <meta property="og:image:width" content="800" />
+          <meta property="og:image:height" content="600" />
+        </>
+      )}
+    </Head>
+  )
+}
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@ -0,0 +1,64 @@
+import React from "react"
+import { useRouter } from "next/router"
+import { DrupalMenuLinkContent } from "next-drupal"
+import classNames from "classnames"
+
+import { LocaleSwitcher } from "components/locale-switcher"
+import Link from "next/link"
+
+interface NavbarProps {
+  links: DrupalMenuLinkContent[]
+}
+
+export function Navbar({ links, ...props }: NavbarProps) {
+  const { locale } = useRouter()
+
+  return (
+    <header
+      className="static top-0 z-50 flex-shrink-0 py-4 bg-white md:sticky"
+      {...props}
+    >
+      <div className="container flex flex-col items-start justify-between px-6 mx-auto md:flex-row md:items-center">
+        <Link href="/" locale={locale} passHref>
+          <a className="text-lg font-bold">Marketing</a>
+        </Link>
+        {links ? <Menu items={links} /> : null}
+        <div className="absolute flex justify-end md:static top-2 right-4">
+          <LocaleSwitcher />
+        </div>
+      </div>
+    </header>
+  )
+}
+
+function Menu({ items }: { items: DrupalMenuLinkContent[] }) {
+  return (
+    <ul
+      className="grid grid-flow-col gap-4 mx-auto mt-6 md:mt-0 auto-cols-auto md:auto-rows-auto md:gap-8 lg:gap-12"
+      data-cy="navbar-menu"
+    >
+      {items.map((item) => (
+        <MenuLink link={item} key={item.id} />
+      ))}
+    </ul>
+  )
+}
+
+function MenuLink({ link }: { link: DrupalMenuLinkContent }) {
+  const { asPath } = useRouter()
+
+  return (
+    <li>
+      <Link href={link.url} passHref>
+        <a
+          className={classNames(
+            "py-4 hover:underline text-sm md:text-base",
+            link.url === asPath ? "font-semibold" : "font-normal"
+          )}
+        >
+          {link.title}
+        </a>
+      </Link>
+    </li>
+  )
+}
--- a/components/node--article.tsx
+++ b/components/node--article.tsx
@ -0,0 +1,108 @@
+import Link from "next/link"
+import Image from "next/image"
+
+import { formatDate } from "lib/utils/format-date"
+import { absoluteURL } from "lib/utils/absolute-url"
+import { FormattedText } from "components/formatted-text"
+import { NodeProps } from "components/node"
+
+export function NodeArticle({ node, viewMode, ...props }: NodeProps) {
+  if (viewMode === "teaser") {
+    return <NodeArticleTeaser node={node} {...props} />
+  }
+
+  if (viewMode === "full") {
+    return <NodeArticleFull node={node} {...props} />
+  }
+
+  return null
+}
+
+export function NodeArticleFull({ node, ...props }) {
+  return (
+    <article data-cy="node--article" {...props}>
+      <div className="container max-w-3xl px-6 mx-auto my-10 md:my-18">
+        <h1 className="mb-4 text-2xl font-bold md:text-3xl lg:text-5xl">
+          {node.title}
+        </h1>
+        <div className="prose">
+          <div data-cy="node--meta" className="text-gray-600">
+            {node.uid?.field_name ? (
+              <span>
+                Posted by <strong>{node.uid?.field_name}</strong>
+              </span>
+            ) : null}
+            <span> - {formatDate(node.created)}</span>
+          </div>
+          {node.body?.summary ? <p>{node.body.summary}</p> : null}
+          {node.field_image?.uri && (
+            <Image
+              src={absoluteURL(node.field_image.uri.url)}
+              width={1200}
+              height={600}
+              layout="intrinsic"
+              objectFit="cover"
+              className="rounded-lg"
+            />
+          )}
+          {node.body?.processed && (
+            <FormattedText processed={node.body.processed} />
+          )}
+        </div>
+      </div>
+    </article>
+  )
+}
+
+export function NodeArticleTeaser({ node, ...props }) {
+  return (
+    <article data-cy="node--article" {...props}>
+      {node.field_image?.uri && (
+        <div>
+          <Image
+            src={absoluteURL(node.field_image.uri.url)}
+            width={800}
+            height={450}
+            layout="intrinsic"
+            objectFit="cover"
+            className="rounded-lg"
+          />
+        </div>
+      )}
+      <h2 className="my-4 text-2xl font-semibold md:text-3xl">
+        <Link href={node.path?.alias} passHref>
+          <a className="hover:text-blue-500">{node.title}</a>
+        </Link>
+      </h2>
+      <div data-cy="node--meta" className="text-gray-600">
+        {node.uid?.field_name ? (
+          <span>
+            Posted by <strong>{node.uid?.field_name}</strong>
+          </span>
+        ) : null}
+        <span> - {formatDate(node.created)}</span>
+      </div>
+      {node.body?.summary ? (
+        <p className="mt-4 leading-relaxed text-gray-600">
+          {node.body.summary}
+        </p>
+      ) : null}
+      <Link href={node.path.alias} passHref>
+        <a className="flex items-center mt-4 text-sm hover:text-blue-500">
+          Read more
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="w-4 h-4 ml-2"
+          >
+            <path d="M5 12h14M12 5l7 7-7 7" />
+          </svg>
+        </a>
+      </Link>
+    </article>
+  )
+}
--- a/components/node--landing-page.tsx
+++ b/components/node--landing-page.tsx
@ -0,0 +1,20 @@
+import { DrupalNode } from "next-drupal"
+
+import { Paragraph } from "components/paragraph"
+
+interface NodeLandingPage {
+  node: DrupalNode
+  viewMode?: string
+}
+
+export function NodeLandingPage({ node }: NodeLandingPage) {
+  if (!node.field_sections?.length) return null
+
+  return node.field_sections.map((paragraph) => {
+    if (paragraph.type === "paragraph--from_library") {
+      paragraph = paragraph.field_reusable_paragraph.paragraphs
+    }
+
+    return <Paragraph key={paragraph.id} paragraph={paragraph} />
+  })
+}
--- a/components/node--page.tsx
+++ b/components/node--page.tsx
@ -0,0 +1,17 @@
+import { FormattedText } from "components/formatted-text"
+import { NodeProps } from "components/node"
+
+export function NodePage({ node, ...props }: NodeProps) {
+  delete props.viewMode
+
+  return (
+    <div className="container max-w-3xl px-6 pt-10 mx-auto md:pt-20" {...props}>
+      <h1 className="mb-4 text-2xl font-bold md:text-3xl lg:text-5xl">
+        {node.title}
+      </h1>
+      <div className="prose">
+        {node.body && <FormattedText processed={node.body.processed} />}
+      </div>
+    </div>
+  )
+}
--- a/components/node--property.tsx
+++ b/components/node--property.tsx
@ -0,0 +1,127 @@
+import Image from "next/image"
+
+import { NodeProps } from "components/node"
+
+export function NodeProperty({ node, viewMode, ...props }: NodeProps) {
+  if (viewMode === "list") {
+    return <NodePropertyList node={node} {...props} />
+  }
+
+  return <NodePropertyGrid node={node} {...props} />
+}
+
+export function NodePropertyGrid({ node }) {
+  const thumbnail = node.field_images?.[0].field_media_image
+
+  return (
+    <article
+      className="relative overflow-hidden bg-white border rounded-md"
+      data-cy="node--property"
+    >
+      {node.field_status ? (
+        <p className="absolute z-10 px-2 py-1 text-sm text-white bg-black rounded-md top-2 right-2">
+          {node.field_status === "rent" ? "For Rent" : "For Sale"}
+        </p>
+      ) : null}
+      {thumbnail && (
+        <Image
+          src={`${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}${thumbnail.uri.url}`}
+          width={360}
+          height={240}
+          layout="responsive"
+          objectFit="cover"
+        />
+      )}
+      <div className="p-6">
+        <div className="flex items-center justify-between mb-2">
+          <p className="text-gray-500">{node.field_location.name}</p>
+          {node.field_size && (
+            <p className="flex items-center">
+              {node.field_size}
+              <span className="ml-1 text-gray-500">sqft</span>
+            </p>
+          )}
+        </div>
+        <h4 className="text-lg font-semibold">{node.title}</h4>
+        {node.field_teaser && (
+          <p className="hidden mt-2 lg:block">{node.field_teaser}</p>
+        )}
+        <hr className="my-4" />
+        <div className="flex items-center justify-between">
+          <div className="flex items-center">
+            {node.field_beds && (
+              <p className="flex items-center">
+                {node.field_beds}
+                <span className="ml-1 text-gray-500">beds</span>
+              </p>
+            )}
+            {node.field_baths && (
+              <p className="flex items-center ml-4">
+                {node.field_baths}
+                <span className="ml-1 text-gray-500">baths</span>
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </article>
+  )
+}
+
+export function NodePropertyList({ node }) {
+  const thumbnail = node.field_images?.[0].field_media_image
+
+  return (
+    <article className="relative overflow-hidden bg-white border rounded-md">
+      {node.field_status ? (
+        <p className="absolute z-10 px-2 py-1 text-sm text-white bg-black rounded-md top-8 left-8">
+          {node.field_status === "rent" ? "For Rent" : "For Sale"}
+        </p>
+      ) : null}
+      <div className="grid items-start grid-cols-3 p-6">
+        {thumbnail && (
+          <Image
+            src={`${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}${thumbnail.uri.url}`}
+            width={310}
+            height={310}
+            layout="responsive"
+            objectFit="cover"
+            className="rounded-lg"
+          />
+        )}
+        <div className="col-span-2 px-6">
+          <div className="items-center justify-between hidden mb-2 md:flex">
+            <p className="text-gray-500">{node.field_location.name}</p>
+            {node.field_size && (
+              <p className="flex items-center">
+                {node.field_size}
+                <span className="ml-1 text-gray-500">sqft</span>
+              </p>
+            )}
+          </div>
+          <h4 className="text-lg font-semibold">{node.title}</h4>
+          {node.field_teaser && (
+            <p className="hidden mt-2 md:block">{node.field_teaser}</p>
+          )}
+          <hr className="my-4" />
+          <div className="flex items-center justify-between">
+            <div className="flex items-center">
+              {node.field_beds && (
+                <p className="flex items-center">
+                  {node.field_beds}
+                  <span className="ml-1 text-gray-500">beds</span>
+                </p>
+              )}
+              {node.field_baths && (
+                <p className="flex items-center ml-4">
+                  {node.field_baths}
+                  <span className="ml-1 text-gray-500">baths</span>
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+  )
+}
--- a/components/node.tsx
+++ b/components/node.tsx
@ -0,0 +1,32 @@
+import { DrupalNode } from "next-drupal"
+
+import { NodePage } from "components/node--page"
+import { NodeArticle } from "components/node--article"
+import { NodeLandingPage } from "components/node--landing-page"
+import { NodeProperty } from "components/node--property"
+
+const nodeTypes = {
+  "node--page": NodePage,
+  "node--article": NodeArticle,
+  "node--landing_page": NodeLandingPage,
+  "node--property_listing": NodeProperty,
+}
+
+export interface NodeProps {
+  node: DrupalNode
+  viewMode?: string
+}
+
+export function Node({ node, viewMode = "full", ...props }: NodeProps) {
+  if (!node) {
+    return null
+  }
+
+  const Component = nodeTypes[node.type]
+
+  if (!Component) {
+    return null
+  }
+
+  return <Component node={node} viewMode={viewMode} {...props} />
+}
--- a/components/pager.tsx
+++ b/components/pager.tsx
@ -0,0 +1,80 @@
+import classNames from "classnames"
+
+import { usePagination, usePaginationProps } from "hooks/use-pagination"
+import Link from "next/link"
+
+export interface PagerProps extends React.HTMLAttributes<HTMLElement> {
+  current: number
+  total: number
+  href: usePaginationProps["href"]
+}
+
+export function Pager({ current, total, href, ...props }: PagerProps) {
+  const items = usePagination({
+    current,
+    total,
+    href,
+  })
+
+  return (
+    <nav role="navigation" aria-labelledby="pagination-heading" {...props}>
+      <h4 className="sr-only">Pagination</h4>
+      <ul className="flex items-center justify-center w-auto">
+        {items.map((link, index) => (
+          <li key={index}>
+            {link.type === "previous" && (
+              <Link href={link.href as string}>
+                <a className="flex items-center justify-center w-12 h-12 hover:text-blue-500">
+                  <span className="sr-only">Previous page</span>
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="w-4 h-4"
+                  >
+                    <path d="M19 12H5M12 19l-7-7 7-7" />
+                  </svg>
+                </a>
+              </Link>
+            )}
+            {link.type === "page" && (
+              <Link href={link.href as string} passHref>
+                <a
+                  className={classNames(
+                    "flex items-center justify-center w-12 h-12 hover:text-blue-500",
+                    {
+                      "text-gray-500": link.isCurrent,
+                    }
+                  )}
+                >
+                  {link.display}
+                </a>
+              </Link>
+            )}
+            {link.type === "next" && (
+              <Link href={link.href as string}>
+                <a className="flex items-center justify-center w-12 h-12 hover:text-blue-500">
+                  <span className="sr-only">Next page</span>
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="w-4 h-4"
+                  >
+                    <path d="M5 12h14M12 5l7 7-7 7" />
+                  </svg>
+                </a>
+              </Link>
+            )}
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
--- a/components/paragraph--cards.tsx
+++ b/components/paragraph--cards.tsx
@ -0,0 +1,38 @@
+import { ParagraphProps } from "components/paragraph"
+import { SectionHeader } from "components/section-header"
+import { FormattedText } from "components/formatted-text"
+import { Section } from "components/section"
+
+export function ParagraphCards({ paragraph, ...props }: ParagraphProps) {
+  return (
+    <Section
+      backgroundColor={
+        paragraph.field_background_color === "muted" && "bg-gray-50"
+      }
+      {...props}
+    >
+      <SectionHeader
+        heading={paragraph.field_heading}
+        text={paragraph.field_text?.processed}
+        links={paragraph.field_links}
+      />
+      <div className="container px-6 mx-auto">
+        {paragraph.field_items?.length && (
+          <div className="grid justify-center gap-20 pt-20 lg:grid-cols-3">
+            {paragraph.field_items.map((card) => (
+              <div key={card.id} className="max-w-sm text-center lg:max-w-none">
+                <h3 className="text-2xl font-bold">{card.field_heading}</h3>
+                {card.field_text?.processed && (
+                  <FormattedText
+                    processed={card.field_text?.processed}
+                    className="pt-2 text-lg"
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </Section>
+  )
+}
--- a/components/paragraph--faq.tsx
+++ b/components/paragraph--faq.tsx
@ -0,0 +1,41 @@
+import { ParagraphProps } from "components/paragraph"
+import { Section } from "components/section"
+import { SectionHeader } from "components/section-header"
+import { FormattedText } from "./formatted-text"
+
+export function ParagraphFAQ({ paragraph, ...props }: ParagraphProps) {
+  return (
+    <Section
+      data-cy="paragraph-faq"
+      backgroundColor={
+        paragraph.field_background_color === "muted" && "bg-gray-50"
+      }
+      {...props}
+    >
+      <SectionHeader
+        heading={paragraph.field_heading}
+        text={paragraph.field_text?.processed}
+        links={paragraph.field_links}
+      />
+      <div className="container px-6 mx-auto">
+        {paragraph.field_items && (
+          <div className="grid gap-8 pt-10 md:py-20 md:gap-12 lg:gap-20 md:grid-cols-2">
+            {paragraph.field_items.map((card) => (
+              <div key={card.id}>
+                <h3 className="text-xl font-semibold md:text-2xl">
+                  {card.field_heading}
+                </h3>
+                {card.field_text?.processed && (
+                  <FormattedText
+                    processed={card.field_text.processed}
+                    className="mt-2 leading-relaxed"
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </Section>
+  )
+}
--- a/components/paragraph--feature.tsx
+++ b/components/paragraph--feature.tsx
@ -0,0 +1,60 @@
+import Image from "next/image"
+import classNames from "classnames"
+
+import { absoluteURL } from "lib/utils/absolute-url"
+import { Links } from "components/links"
+import { FormattedText } from "components/formatted-text"
+import { ParagraphProps } from "components/paragraph"
+import { Section } from "components/section"
+
+export function ParagraphFeature({ paragraph, ...props }: ParagraphProps) {
+  return (
+    <Section
+      data-cy="paragraph-feature"
+      backgroundColor={
+        paragraph.field_background_color === "muted" && "bg-gray-50"
+      }
+      {...props}
+    >
+      <div className="container px-6 mx-auto">
+        <div className="grid items-center gap-8 md:grid-flow-col-dense md:grid-cols-2 md:gap-12">
+          {paragraph.field_media?.field_media_image && (
+            <div
+              className={classNames(
+                paragraph.field_media_position === "left"
+                  ? "md:col-start-1"
+                  : "md:col-start-2"
+              )}
+            >
+              <Image
+                src={absoluteURL(
+                  paragraph.field_media.field_media_image.uri.url
+                )}
+                alt={
+                  paragraph.field_media.field_media_image.resourceIdObjMeta.alt
+                }
+                width={500}
+                height={300}
+                layout="responsive"
+                objectFit="cover"
+                className="rounded-lg"
+              />
+            </div>
+          )}
+          <div className="flex flex-col items-center text-center md:items-start md:text-left">
+            {paragraph.field_heading && (
+              <h2 className="text-3xl font-black sm:text-4xl lg:text-5xl">
+                {paragraph.field_heading}
+              </h2>
+            )}
+            <FormattedText
+              className="max-w-md mt-4 text-lg font-light leading-relaxed text-gray-500 sm:text-xl lg:text-2xl"
+              processed={paragraph.field_text.processed}
+            />
+            {paragraph.field_link && <Links links={[paragraph.field_link]} />}
+          </div>
+        </div>
+      </div>
+    </Section>
+  )
+}
--- a/components/paragraph--hero.tsx
+++ b/components/paragraph--hero.tsx
@ -0,0 +1,38 @@
+import classNames from "classnames"
+
+import { ParagraphProps } from "components/paragraph"
+import { MediaImage } from "components/media--image"
+import { SectionHeader } from "components/section-header"
+
+export function ParagraphHero({ paragraph, ...props }: ParagraphProps) {
+  return (
+    <section
+      data-cy="paragraph-hero"
+      className={classNames(
+        "pt-8 md:pt-12 lg:pt-20",
+        paragraph.field_media?.field_media_image
+          ? "pb-0 md:pb-0 border-b"
+          : "pb-8 md:pb-12 lg:pb-20"
+      )}
+      {...props}
+    >
+      <SectionHeader
+        level={1}
+        heading={paragraph.field_heading}
+        text={paragraph.field_text?.processed}
+        links={paragraph.field_links}
+      />
+      <div className="container px-6 mx-auto">
+        {paragraph.field_media && (
+          <div className="w-full h-40 mt-6 overflow-hidden sm:rounded-t-xl md:mt-12 lg:mt-20 md:h-56 lg:h-80">
+            <MediaImage
+              media={paragraph.field_media}
+              objectFit="cover"
+              priority
+            />
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
--- a/components/paragraph--view.tsx
+++ b/components/paragraph--view.tsx
@ -0,0 +1,9 @@
+import { ViewPropertiesListing } from "components/view--properties_listing"
+
+export function ParagraphView({ paragraph, ...props }) {
+  if (paragraph.field_view.name === "properties--listing") {
+    return <ViewPropertiesListing view={paragraph.field_view} {...props} />
+  }
+
+  return null
+}
--- a/components/paragraph.tsx
+++ b/components/paragraph.tsx
@ -0,0 +1,33 @@
+import { DrupalParagraph } from "next-drupal"
+
+import { ParagraphCards } from "components/paragraph--cards"
+import { ParagraphFAQ } from "components/paragraph--faq"
+import { ParagraphFeature } from "components/paragraph--feature"
+import { ParagraphHero } from "components/paragraph--hero"
+import { ParagraphView } from "components/paragraph--view"
+
+const paragraphTypes = {
+  "paragraph--cards": ParagraphCards,
+  "paragraph--faq": ParagraphFAQ,
+  "paragraph--feature": ParagraphFeature,
+  "paragraph--hero": ParagraphHero,
+  "paragraph--view": ParagraphView,
+}
+
+export interface ParagraphProps {
+  paragraph: DrupalParagraph
+}
+
+export function Paragraph({ paragraph, ...props }: ParagraphProps) {
+  if (!paragraph) {
+    return null
+  }
+
+  const Component = paragraphTypes[paragraph.type]
+
+  if (!Component) {
+    return null
+  }
+
+  return <Component paragraph={paragraph} {...props} />
+}
--- a/components/section-header.tsx
+++ b/components/section-header.tsx
@ -0,0 +1,35 @@
+import { LinksProps, Links } from "components/links"
+import { FormattedText } from "components/formatted-text"
+
+interface SectionHeaderProps {
+  level?: number
+  heading: string
+  text: string
+  links?: LinksProps["links"]
+}
+
+export function SectionHeader({
+  level = 2,
+  heading,
+  text,
+  links,
+  ...props
+}: SectionHeaderProps) {
+  const HeadingLevel = `h${level}` as keyof JSX.IntrinsicElements
+  return (
+    <div className="container px-6 mx-auto text-center" {...props}>
+      {heading && (
+        <HeadingLevel className="text-3xl font-black sm:text-4xl md:text-5xl lg:text-6xl">
+          {heading}
+        </HeadingLevel>
+      )}
+      {text && (
+        <FormattedText
+          className="max-w-xl mx-auto mt-2 text-lg font-light leading-tight text-gray-500 sm:text-xl md:text-2xl"
+          processed={text}
+        />
+      )}
+      {links?.length ? <Links links={links} /> : null}
+    </div>
+  )
+}
--- a/components/section.tsx
+++ b/components/section.tsx
@ -0,0 +1,17 @@
+import classNames from "classnames"
+
+interface SectionProps extends React.HTMLAttributes<HTMLElement> {
+  backgroundColor?: string
+  children?: React.ReactNode
+}
+
+export function Section({ backgroundColor, children, ...props }: SectionProps) {
+  return (
+    <section
+      className={classNames("py-8 md:py-12 lg:py-20", backgroundColor)}
+      {...props}
+    >
+      {children}
+    </section>
+  )
+}
--- a/components/view--properties_listing.tsx
+++ b/components/view--properties_listing.tsx
@ -0,0 +1,290 @@
+import React from "react"
+import { useQuery, useQueryClient } from "@tanstack/react-query"
+import { useForm } from "react-hook-form"
+import { deserialize } from "next-drupal"
+import classNames from "classnames"
+
+import { FormItem } from "components/form-item"
+import { Section } from "components/section"
+import { Node } from "components/node"
+
+const filters = { location: "All", status: "All", beds: "1", baths: "1" }
+
+async function fetchView(url, params) {
+  const _url = new URL(url)
+  _url.search = new URLSearchParams(params).toString()
+
+  const result = await fetch(_url.toString())
+
+  if (!result.ok) {
+    throw new Error(result.statusText)
+  }
+
+  const data = await result.json()
+
+  return {
+    results: deserialize(data),
+    meta: data.meta,
+    links: data.links,
+  }
+}
+
+export function ViewPropertiesListing({ view: initialView, ...props }) {
+  const [page, setPage] = React.useState(0)
+  const queryClient = useQueryClient()
+  const [display, setDisplay] = React.useState<"grid" | "list">("grid")
+  const { register, handleSubmit, getValues, formState, reset } = useForm({
+    defaultValues: filters,
+  })
+  const [locations, setLocations] = React.useState([])
+  const {
+    data: view,
+    isLoading,
+    isPreviousData,
+  } = useQuery(
+    [initialView.name, page],
+    async () => {
+      // Build params from form values.
+      const values = getValues()
+      const params = {
+        page: page + "",
+        include: "field_location,field_images.field_media_image",
+      }
+      for (const filter of Object.keys(filters)) {
+        if (values[filter]) {
+          params[`views-filter[${filter}]`] = values[filter]
+        }
+      }
+
+      return fetchView(initialView.links.self.href.split("?")[0], params)
+    },
+    {
+      initialData: initialView,
+      keepPreviousData: true,
+    }
+  )
+
+  // Build locations dropdown from view results.
+  React.useEffect(() => {
+    const allLocations: {
+      name: string
+      id: string
+    }[] = view.results.map((result) => ({
+      name: result.field_location.name,
+      id: result.field_location.drupal_internal__tid,
+    }))
+
+    setLocations(
+      Array.from(new Map(allLocations.map((item) => [item.id, item])).values())
+    )
+  }, [])
+
+  async function submitForm() {
+    setPage(0)
+    await queryClient.invalidateQueries(view.name)
+  }
+
+  async function resetForm() {
+    reset()
+    submitForm()
+  }
+
+  return (
+    <Section backgroundColor="bg-gray-50" {...props}>
+      <div className="container items-start gap-10 px-6 mx-auto md:grid md:grid-cols-3">
+        <div className="p-6 mb-10 bg-white rounded-lg">
+          <div className="flex items-center justify-between">
+            <h4 className="text-xl font-bold">Find your place</h4>
+          </div>
+          <hr className="my-6" />
+          <form onSubmit={handleSubmit(submitForm)}>
+            <div className="grid gap-8 auto-rows-auto">
+              <FormItem name="location" label="Locations">
+                <select
+                  id="location"
+                  name="location"
+                  className="border border-gray-300 rounded-md appearance-none"
+                  {...register("location")}
+                >
+                  <option value="All">Select Location</option>
+                  {locations.map((location) => (
+                    <option key={location.id} value={location.id}>
+                      {location.name}
+                    </option>
+                  ))}
+                </select>
+              </FormItem>
+              <FormItem name="status" label="Status">
+                <select
+                  id="status"
+                  name="status"
+                  className="border border-gray-300 rounded-md appearance-none"
+                  {...register("status")}
+                >
+                  <option value="All">Select Status</option>
+                  <option value="sale">For Sale</option>
+                  <option value="rent">For Rent</option>
+                </select>
+              </FormItem>
+              <div className="grid grid-cols-2 gap-4">
+                <FormItem name="beds" label="Min Beds">
+                  <select
+                    id="beds"
+                    name="beds"
+                    className="border border-gray-300 rounded-md appearance-none"
+                    {...register("beds")}
+                  >
+                    {[1, 2, 3, 4].map((value) => (
+                      <option value={value} key={value}>
+                        {value}
+                      </option>
+                    ))}
+                  </select>
+                </FormItem>
+                <FormItem name="baths" label="Min Baths">
+                  <select
+                    id="baths"
+                    name="baths"
+                    className="border border-gray-300 rounded-md appearance-none"
+                    {...register("baths")}
+                  >
+                    {[1, 2, 3, 4].map((value) => (
+                      <option value={value} key={value}>
+                        {value}
+                      </option>
+                    ))}
+                  </select>
+                </FormItem>
+              </div>
+            </div>
+            <hr className="my-6" />
+            <div className="grid items-center justify-between grid-cols-2 gap-4">
+              <button
+                className="flex items-center justify-center px-4 py-2 text-white transition-colors bg-blue-600 rounded-md hover:bg-blue-700"
+                data-cy="submit"
+              >
+                Search
+              </button>
+              <button
+                className={classNames(
+                  "flex items-center justify-center px-4 py-2 text-black transition-colors bg-gray-100 rounded-md hover:bg-gray-200",
+                  {
+                    hidden: !formState.isSubmitted,
+                  }
+                )}
+                type="button"
+                onClick={() => resetForm()}
+              >
+                Reset
+              </button>
+            </div>
+          </form>
+        </div>
+        <div className="col-span-2">
+          {view.results.length ? (
+            <>
+              <div className="flex items-center justify-between px-2 pb-4">
+                <h3 className="text-lg" data-cy="view--results">
+                  Found {view.meta?.count} properties.
+                </h3>
+                <div className="grid grid-cols-2 gap-2">
+                  <button
+                    type="button"
+                    className={classNames(
+                      "border h-8 w-8 flex items-center justify-center bg-white rounded-md",
+                      {
+                        "opacity-50": display === "grid",
+                      }
+                    )}
+                    onClick={() => setDisplay("grid")}
+                    aria-label="grid"
+                  >
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      className="w-5 h-5"
+                    >
+                      <path d="M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z" />
+                    </svg>
+                  </button>
+                  <button
+                    type="button"
+                    className={classNames(
+                      "border h-8 w-8 flex items-center justify-center bg-white rounded-md",
+                      {
+                        "opacity-50": display === "list",
+                      }
+                    )}
+                    onClick={() => setDisplay("list")}
+                    aria-label="list"
+                  >
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      className="w-5 h-5"
+                    >
+                      <path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div
+                className={classNames("grid grid-flow-row gap-10", {
+                  "md:grid-cols-2": display === "grid",
+                  "opacity-50": isLoading,
+                })}
+              >
+                {view.results.map((node) => (
+                  <Node key={node.id} viewMode={display} node={node} />
+                ))}
+              </div>
+              <hr className="my-10" />
+              <div className="flex items-center justify-between">
+                <button
+                  className={classNames(
+                    "flex items-center bg-black justify-center px-4 py-2 transition-colors  rounded-md ",
+                    page == 0
+                      ? "bg-gray-100 hover:bg-gray-200 text-black opacity-50"
+                      : "bg-black text-white"
+                  )}
+                  data-cy="pager-previous"
+                  onClick={() => setPage((old) => Math.max(old - 1, 0))}
+                  disabled={page === 0}
+                >
+                  Previous
+                </button>
+                <button
+                  className={classNames(
+                    "flex items-center bg-black justify-center px-4 py-2 transition-colors  rounded-md ",
+                    isPreviousData || !view?.links.next
+                      ? "bg-gray-100 hover:bg-gray-200 text-black opacity-50"
+                      : "bg-black text-white"
+                  )}
+                  data-cy="pager-next"
+                  onClick={() => {
+                    if (!isPreviousData && view.links.next) {
+                      setPage((old) => old + 1)
+                    }
+                  }}
+                  disabled={isPreviousData || !view?.links.next}
+                >
+                  Next
+                </button>
+              </div>
+            </>
+          ) : (
+            <p className="py-20 text-center">No properties found.</p>
+          )}
+        </div>
+      </div>
+    </Section>
+  )
+}
--- a/cypress.json
+++ b/cypress.json
@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:3001"
+}
--- a/cypress/fixtures/example.json
+++ b/cypress/fixtures/example.json
@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
--- a/cypress/integration/about.spec.tsx
+++ b/cypress/integration/about.spec.tsx
@ -0,0 +1,14 @@
+/// <reference types="cypress"/>
+
+context("About", () => {
+  beforeEach(() => {
+    cy.visit("/about")
+  })
+
+  it("should convert inline images to Next.js images", () => {
+    cy.get("img[data-nimg='intrinsic']")
+    cy.get("figcaption").contains("This is the caption")
+  })
+})
+
+export {}
--- a/cypress/integration/blog.spec.tsx
+++ b/cypress/integration/blog.spec.tsx
@ -0,0 +1,66 @@
+/// <reference types="cypress"/>
+
+context("Blog", () => {
+  beforeEach(() => {
+    cy.visit("/blog")
+  })
+
+  it("should render articles", () => {
+    cy.get("h1").contains("Latest Articles.")
+    cy.get("[data-cy=node--article]").should("have.length.gt", 1)
+
+    cy.get("[data-cy=node--article] h2").contains(
+      "Dynamic Routing and Static Generation"
+    )
+    cy.get("[data-cy=node--article] [data-cy=node--meta]").contains(
+      "Posted by Arshad"
+    )
+    cy.get("[data-cy=node--article] [data-cy=node--meta]").contains(
+      "June 13, 2021"
+    )
+  })
+})
+
+context("Translation", () => {
+  beforeEach(() => {
+    cy.visit("/es/blog")
+  })
+
+  it("should render articles", () => {
+    cy.get("h1").contains("Últimas Publicaciones.")
+    cy.get("[data-cy=node--article]").should("have.length.gt", 1)
+
+    cy.get("[data-cy=node--article] h2").contains(
+      "Enrutamiento dinámico y Generación Estática"
+    )
+    cy.get("[data-cy=node--article] [data-cy=node--meta]").contains(
+      "Posted by Arshad"
+    )
+    cy.get("[data-cy=node--article] [data-cy=node--meta]").contains(
+      "June 14, 2021"
+    )
+  })
+})
+
+context("Blog node", () => {
+  beforeEach(() => {
+    cy.visit("/blog/learn-how-pre-render-pages-using-static-generation-nextjs")
+  })
+
+  it("should render article node", () => {
+    cy.get("h1").contains(
+      "Learn How to Pre-render Pages Using Static Generation with Next.js"
+    )
+    cy.get("[data-cy=node--article] [data-cy=node--body]").should(
+      "not.be.empty"
+    )
+    cy.get("[data-cy=node--article] [data-cy=node--meta]").contains(
+      "Posted by Arshad"
+    )
+    cy.get("[data-cy=node--article] [data-cy=node--meta]").contains(
+      "June 13, 2021"
+    )
+  })
+})
+
+export {}
--- a/cypress/integration/home.spec.tsx
+++ b/cypress/integration/home.spec.tsx
@ -0,0 +1,63 @@
+/// <reference types="cypress"/>
+
+context("Home", () => {
+  beforeEach(() => {
+    cy.visit("")
+  })
+
+  it("should render paragraphs", () => {
+    cy.get("[data-cy=paragraph-hero] h1").contains("Build Something Amazing")
+    cy.get("[data-cy=paragraph-hero] p").contains(
+      "Must today firm from bag. Investment try cold a when capital. Everything wait person service."
+    )
+    cy.get("[data-cy=paragraph-hero] [alt=Hero]").should("be.visible")
+
+    cy.get("[data-cy=paragraph-feature] h2").contains("Marketing Strategy")
+    cy.get("[data-cy=paragraph-feature] img[alt=Feature]").should("be.visible")
+
+    cy.get("[data-cy=paragraph-faq] h2").contains("Frequently Asked Questions")
+    cy.get("[data-cy=paragraph-faq] h3").contains(
+      "Move weight here just either attorney?"
+    )
+  })
+
+  it("should render menu items", () => {
+    cy.get("[data-cy=navbar-menu] a").contains("Home")
+    cy.get("[data-cy=navbar-menu] a").contains("Blog")
+    cy.get("[data-cy=navbar-menu] a").contains("Properties")
+    cy.get("[data-cy=navbar-menu] a").contains("About")
+    cy.get("[data-cy=navbar-menu] a").contains("GitHub")
+  })
+})
+
+context("Translation", () => {
+  beforeEach(() => {
+    cy.visit("/es")
+  })
+
+  it("should render paragraphs", () => {
+    cy.get("[data-cy=paragraph-hero] h1").contains("Construye Algo Asombroso")
+    cy.get("[data-cy=paragraph-hero] p").contains(
+      "Dicta laboriosam magnam possimus ad. Ratione rem nihil nostrum dolore reiciendis enim."
+    )
+    cy.get("[data-cy=paragraph-hero] img[alt=Hero]").should("be.visible")
+
+    cy.get("[data-cy=paragraph-feature] h2").contains("Marketing Strategy")
+    cy.get("[data-cy=paragraph-feature] img[alt=Feature]").should("be.visible")
+
+    cy.get("[data-cy=paragraph-faq] h2").contains("Frequently Asked Questions")
+    cy.get("[data-cy=paragraph-faq] h3").contains(
+      "Move weight here just either attorney?"
+    )
+  })
+
+  it("should render menu items localized", () => {
+    cy.get("[data-cy=navbar-menu] a").contains("Inicio")
+    cy.get("[data-cy=navbar-menu] a").contains("Blog")
+    cy.get("[data-cy=navbar-menu] a").contains("Propiedades")
+    cy.get("[data-cy=navbar-menu] a").contains("Acerca")
+    cy.get("[data-cy=navbar-menu] a").contains("GitHub")
+  })
+})
+
+export {}
--- a/cypress/integration/locale.spec.tsx
+++ b/cypress/integration/locale.spec.tsx
@ -0,0 +1,19 @@
+/// <reference types="cypress"/>
+
+context("Home", () => {
+  beforeEach(() => {
+    cy.visit("")
+  })
+
+  it("should switch locale when clicking on the locale switcher", () => {
+    cy.get("[data-cy=local-switcher-en]").contains("en")
+    cy.get("[data-cy=local-switcher-es]").contains("es")
+
+    cy.get("[data-cy=paragraph-hero] h1").contains("Build Something Amazing")
+    cy.get("[data-cy=local-switcher-es]").click()
+    cy.url().should("include", "/es")
+    cy.get("[data-cy=paragraph-hero] h1").contains("Construye Algo Asombroso")
+  })
+})
+
+export {}
--- a/cypress/integration/properties.spec.tsx
+++ b/cypress/integration/properties.spec.tsx
@ -0,0 +1,32 @@
+/// <reference types="cypress"/>
+
+context("Properties", () => {
+  beforeEach(() => {
+    cy.visit("/properties")
+  })
+
+  it("should render view with meta and pager", () => {
+    cy.get("[data-cy=view--results]").contains("Found 12 properties.")
+    cy.get("[data-cy=node--property]").should("have.length", 4)
+    cy.get("[data-cy=node--property]")
+      .find("h4")
+      .contains("484 Robert Crest Apt. 875")
+    cy.get("[data-cy=pager-next]").should("not.be.disabled")
+    cy.get("[data-cy=pager-previous]").should("be.disabled")
+
+    cy.get("[data-cy=pager-next]").click()
+    cy.get("[data-cy=node--property]").should("have.length", 4)
+    cy.get("[data-cy=pager-next]").should("not.be.disabled")
+    cy.get("[data-cy=pager-previous]").should("not.be.disabled")
+  })
+
+  it("should allow view to be filtered", () => {
+    cy.get("select[name='location']").select("San Francisco, CA")
+    cy.get("select[name='status']").select("For Sale")
+    cy.get("select[name='beds']").select("4")
+    cy.get("[data-cy=submit]").contains("Search").click()
+    cy.get("[data-cy=node--property]").should("have.length", 1)
+  })
+})
+
+export {}
--- a/cypress/plugins/index.js
+++ b/cypress/plugins/index.js
@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
--- a/cypress/support/index.js
+++ b/cypress/support/index.js
@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
--- a/hooks/use-pagination.tsx
+++ b/hooks/use-pagination.tsx
@ -0,0 +1,83 @@
+import * as React from "react"
+import { LinkProps } from "next/link"
+
+type PagerItemType = "page" | "previous" | "next"
+
+export interface PagerItem {
+  type: PagerItemType
+  page: number
+  display: string
+  href: LinkProps["href"]
+  isCurrent?: boolean
+}
+
+export interface usePaginationProps {
+  total: number
+  current: number
+  href: (page: PagerItem["page"]) => LinkProps["href"]
+  show?: number
+}
+
+export const usePagination = ({
+  total,
+  current,
+  href,
+  show = 9,
+}: usePaginationProps): PagerItem[] => {
+  return React.useMemo<PagerItem[]>((): PagerItem[] => {
+    const pagerMiddle = Math.ceil(show / 2)
+    const pagerCurrent = current + 1
+    let pagerFirst = pagerCurrent - pagerMiddle + 1
+    let pagerLast = pagerCurrent + show - pagerMiddle
+
+    show = total < show ? total : show
+
+    // Adjust start end end based on position.
+    if (pagerLast > total) {
+      pagerFirst = pagerFirst + (total - pagerLast)
+      pagerLast = total
+    }
+
+    if (pagerFirst <= 0) {
+      pagerFirst = 1
+      pagerLast = pagerLast + (1 - pagerFirst)
+    }
+
+    const items: PagerItem[] = []
+
+    if (current !== 0) {
+      items.push({
+        type: "previous",
+        display: "Previous",
+        page: current - 1,
+        href: href(current - 1),
+      })
+    }
+
+    items.push(
+      ...Array.from(Array(show).keys()).map(
+        (pageNumber: number): PagerItem | null => {
+          const page = pageNumber + pagerFirst - 1
+          return {
+            type: "page",
+            page,
+            display: `${page + 1}`,
+            isCurrent: page === current,
+            href: href(page),
+          }
+        }
+      )
+    )
+
+    if (current !== total - 1) {
+      items.push({
+        type: "next",
+        display: "Next",
+        page: current + 1,
+        href: href(current + 1),
+      })
+    }
+
+    return items
+  }, [total, current])
+}
--- a/lib/drupal.ts
+++ b/lib/drupal.ts
@ -0,0 +1,13 @@
+import { DrupalClient } from "next-drupal"
+
+export const drupal = new DrupalClient(
+  process.env.NEXT_PUBLIC_DRUPAL_BASE_URL,
+  {
+    frontPage: "/home",
+    previewSecret: "secret",
+    auth: {
+      clientId: process.env.DRUPAL_CLIENT_ID,
+      clientSecret: process.env.DRUPAL_CLIENT_SECRET,
+    },
+  }
+)
--- a/lib/get-menus.ts
+++ b/lib/get-menus.ts
@ -0,0 +1,22 @@
+import { GetStaticPropsContext } from "next"
+import { DrupalMenuLinkContent } from "next-drupal"
+import { drupal } from "lib/drupal"
+
+export async function getMenus(context: GetStaticPropsContext): Promise<{
+  main: DrupalMenuLinkContent[]
+  footer: DrupalMenuLinkContent[]
+}> {
+  const { tree: main } = await drupal.getMenu("main", {
+    locale: context.locale,
+    defaultLocale: context.defaultLocale,
+  })
+  const { tree: footer } = await drupal.getMenu("footer", {
+    locale: context.locale,
+    defaultLocale: context.defaultLocale,
+  })
+
+  return {
+    main,
+    footer,
+  }
+}
--- a/lib/get-params.ts
+++ b/lib/get-params.ts
@ -0,0 +1,39 @@
+import { DrupalJsonApiParams } from "drupal-jsonapi-params"
+
+export function getParams(resourceType: string) {
+  const apiParams = new DrupalJsonApiParams().addFilter(
+    "field_site.meta.drupal_internal__target_id",
+    process.env.DRUPAL_SITE_ID
+  )
+
+  if (resourceType === "node--landing_page") {
+    apiParams
+      .addInclude([
+        "field_sections",
+        "field_sections.field_media.field_media_image",
+        "field_sections.field_items",
+        "field_sections.field_reusable_paragraph.paragraphs.field_items",
+      ])
+      .addFields("node--landing_page", [
+        "title",
+        "field_sections",
+        "path",
+        "status",
+      ])
+  }
+
+  if (resourceType === "node--article") {
+    apiParams.addInclude(["field_image", "uid"])
+    apiParams.addFields(resourceType, [
+      "title",
+      "body",
+      "uid",
+      "created",
+      "field_image",
+      "status",
+      "metatag",
+    ])
+  }
+
+  return apiParams.getQueryObject()
+}
--- a/lib/utils/absolute-url.ts
+++ b/lib/utils/absolute-url.ts
@ -0,0 +1,3 @@
+export function absoluteURL(uri: string) {
+  return `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}${uri}`
+}
--- a/lib/utils/format-date.ts
+++ b/lib/utils/format-date.ts
@ -0,0 +1,8 @@
+export function formatDate(input: string): string {
+  const date = new Date(input)
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  })
+}
--- a/lib/utils/is-relative.ts
+++ b/lib/utils/is-relative.ts
@ -0,0 +1,3 @@
+export function isRelative(url: string) {
+  return !new RegExp("^(?:[a-z]+:)?//", "i").test(url)
+}
--- a/next-env.d.ts
+++ b/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.
--- a/next.config.js
+++ b/next.config.js
@ -0,0 +1,28 @@
+module.exports = {
+  swcMinify: true,
+  i18n: {
+    locales: ["en", "es"],
+    defaultLocale: "en",
+  },
+  images: {
+    domains: [process.env.NEXT_IMAGE_DOMAIN],
+  },
+  async rewrites() {
+    return [
+      {
+        source: "/blog",
+        destination: "/blog/page/0",
+      },
+      {
+        source: "/es",
+        destination: "/es/home",
+        locale: false,
+      },
+      {
+        source: "/en/principal",
+        destination: "/",
+        locale: false,
+      },
+    ]
+  },
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,40 @@
+{
+  "name": "example-marketing",
+  "version": "1.5.0",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "dev": "next dev -p 3001",
+    "build": "next build",
+    "preview": "next build && next start -p 3001",
+    "lint": "next lint",
+    "cy:open": "cypress open",
+    "cy:run": "cypress run",
+    "test:e2e": "start-server-and-test 'yarn preview' http://localhost:3001 cy:open",
+    "test:e2e:ci": "start-server-and-test 'yarn preview' http://localhost:3001 cy:run"
+  },
+  "dependencies": {
+    "@tailwindcss/forms": "^0.4.0",
+    "@tailwindcss/typography": "^0.5.1",
+    "@tanstack/react-query": "^4.0.10",
+    "classnames": "^2.3.1",
+    "drupal-jsonapi-params": "^1.2.2",
+    "html-react-parser": "^1.2.7",
+    "next": "^12.2.3",
+    "next-drupal": "^1.6.0",
+    "nprogress": "^0.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-hook-form": "^7.8.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@types/node": "^17.0.21",
+    "@types/react": "^17.0.0",
+    "autoprefixer": "^10.4.2",
+    "eslint-config-next": "^12.0.10",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^3.0.15",
+    "typescript": "^4.5.5"
+  }
+}
--- a/pages/[[...slug]].tsx
+++ b/pages/[[...slug]].tsx
@ -0,0 +1,112 @@
+import * as React from "react"
+import {
+  GetStaticPathsContext,
+  GetStaticPathsResult,
+  GetStaticPropsContext,
+  GetStaticPropsResult,
+} from "next"
+import Head from "next/head"
+import { useRouter } from "next/router"
+import { DrupalNode } from "next-drupal"
+
+import { drupal } from "lib/drupal"
+import { getMenus } from "lib/get-menus"
+import { absoluteURL } from "lib/utils/absolute-url"
+import { getParams } from "lib/get-params"
+import { Node } from "components/node"
+import { Layout, LayoutProps } from "components/layout"
+import { Meta } from "components/meta"
+
+const RESOURCE_TYPES = ["node--page", "node--landing_page", "node--article"]
+
+interface NodePageProps extends LayoutProps {
+  node: DrupalNode
+}
+
+export default function NodePage({ node, menus }: NodePageProps) {
+  const router = useRouter()
+
+  return (
+    <Layout menus={menus}>
+      <Meta title={node.title} tags={node.metatag} path={node.path?.alias} />
+      <Head>
+        {node.content_translations?.map((translation, index) =>
+          translation.langcode !== router.locale ? (
+            <link
+              key={index}
+              rel="alternate"
+              hrefLang={translation.langcode}
+              href={absoluteURL(translation.path)}
+            />
+          ) : null
+        )}
+      </Head>
+      <Node node={node} />
+    </Layout>
+  )
+}
+
+export async function getStaticPaths(
+  context: GetStaticPathsContext
+): Promise<GetStaticPathsResult> {
+  return {
+    paths: await drupal.getStaticPathsFromContext(RESOURCE_TYPES, context, {
+      params: {
+        filter: {
+          "field_site.meta.drupal_internal__target_id":
+            process.env.DRUPAL_SITE_ID,
+        },
+      },
+    }),
+    fallback: "blocking",
+  }
+}
+
+export async function getStaticProps(
+  context: GetStaticPropsContext
+): Promise<GetStaticPropsResult<NodePageProps>> {
+  const path = await drupal.translatePathFromContext(context)
+
+  if (!path || !RESOURCE_TYPES.includes(path.jsonapi.resourceName)) {
+    return {
+      notFound: true,
+    }
+  }
+
+  const type = path.jsonapi.resourceName
+
+  const node = await drupal.getResourceFromContext<DrupalNode>(path, context, {
+    params: getParams(type),
+  })
+
+  if (!node || (!context.preview && node?.status === false)) {
+    return {
+      notFound: true,
+    }
+  }
+
+  // Load initial view data.
+  if (type === "node--landing_page") {
+    for (const section of node.field_sections) {
+      if (section.type === "paragraph--view" && section.field_view) {
+        const view = await drupal.getView(section.field_view, {
+          params: {
+            include: "field_location,field_images.field_media_image",
+          },
+        })
+
+        section.field_view = {
+          name: section.field_view,
+          ...view,
+        }
+      }
+    }
+  }
+
+  return {
+    props: {
+      node,
+      menus: await getMenus(context),
+    },
+  }
+}
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -0,0 +1,31 @@
+import * as React from "react"
+import Router from "next/router"
+import { QueryClient, QueryClientProvider, Hydrate } from "@tanstack/react-query"
+import NProgress from "nprogress"
+import { syncDrupalPreviewRoutes } from "next-drupal"
+import "nprogress/nprogress.css"
+
+import "styles/globals.css"
+
+NProgress.configure({ showSpinner: false })
+
+Router.events.on("routeChangeStart", function (path) {
+  syncDrupalPreviewRoutes(path)
+  NProgress.start()
+})
+Router.events.on("routeChangeComplete", () => NProgress.done())
+Router.events.on("routeChangeError", () => NProgress.done())
+
+export default function App({ Component, pageProps }) {
+  const queryClientRef = React.useRef<QueryClient>()
+  if (!queryClientRef.current) {
+    queryClientRef.current = new QueryClient()
+  }
+  return (
+    <QueryClientProvider client={queryClientRef.current}>
+      <Hydrate state={pageProps.dehydratedState}>
+        <Component {...pageProps} />
+      </Hydrate>
+    </QueryClientProvider>
+  )
+}
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@ -0,0 +1,17 @@
+import NextDocument, { Html, Main, NextScript, Head } from "next/document"
+
+export default class Document extends NextDocument {
+  render() {
+    return (
+      <Html lang="en" dir="ltr">
+        <Head>
+          <meta charSet="utf-8" />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
--- a/pages/api/exit-preview.ts
+++ b/pages/api/exit-preview.ts
@ -0,0 +1,8 @@
+import { NextApiResponse } from "next"
+
+export default async function exit(_, response: NextApiResponse) {
+  response.clearPreviewData()
+
+  response.writeHead(307, { Location: "/" })
+  response.end()
+}
--- a/pages/api/preview.ts
+++ b/pages/api/preview.ts
@ -0,0 +1,5 @@
+import { drupal } from "lib/drupal"
+
+export default async function (request, response) {
+  return drupal.preview(request, response)
+}
--- a/pages/api/revalidate.ts
+++ b/pages/api/revalidate.ts
@ -0,0 +1,34 @@
+import { NextApiRequest, NextApiResponse } from "next"
+
+export default async function handler(
+  request: NextApiRequest,
+  response: NextApiResponse
+) {
+  let slug = request.query.slug as string
+  const secret = request.query.secret as string
+
+  // Validate secret.
+  if (secret !== process.env.DRUPAL_PREVIEW_SECRET) {
+    return response.status(401).json({ message: "Invalid secret." })
+  }
+
+  // Validate slug.
+  if (!slug) {
+    return response.status(400).json({ message: "Invalid slug." })
+  }
+
+  // Fix for home slug.
+  if (slug === process.env.DRUPAL_FRONT_PAGE) {
+    slug = "/"
+  }
+
+  try {
+    await response.revalidate(slug)
+
+    return response.json({})
+  } catch (error) {
+    return response.status(404).json({
+      message: error.message,
+    })
+  }
+}
--- a/pages/blog/page/[page].tsx
+++ b/pages/blog/page/[page].tsx
@ -0,0 +1,126 @@
+import * as React from "react"
+import { GetStaticPathsResult, GetStaticPropsResult } from "next"
+import { useRouter } from "next/router"
+import { DrupalNode, JsonApiResponse } from "next-drupal"
+import { DrupalJsonApiParams } from "drupal-jsonapi-params"
+
+import { drupal } from "lib/drupal"
+import { getMenus } from "lib/get-menus"
+import { Layout, LayoutProps } from "components/layout"
+import { Pager, PagerProps } from "components/pager"
+import { Node } from "components/node"
+import { Meta } from "components/meta"
+
+export const NUMBER_OF_POSTS_PER_PAGE = 2
+
+export interface BlogPageProps extends LayoutProps {
+  page: Pick<PagerProps, "current" | "total">
+  nodes: DrupalNode[]
+}
+
+export default function BlogPage({ nodes, menus, page }: BlogPageProps) {
+  const { locale } = useRouter()
+  const title = locale === "en" ? "Latest Articles." : "Últimas Publicaciones."
+
+  return (
+    <Layout menus={menus}>
+      <Meta title={title} />
+      <div className="container max-w-6xl px-6 pt-10 mx-auto md:py-20">
+        <h1 className="mb-10 text-3xl font-black sm:text-4xl md:text-5xl lg:text-6xl">
+          {title}
+        </h1>
+        {nodes.length ? (
+          <div className="grid gap-20 md:grid-cols-2">
+            {nodes.map((article) => (
+              <Node viewMode="teaser" key={article.id} node={article} />
+            ))}
+          </div>
+        ) : (
+          <p className="py-6">No posts found</p>
+        )}
+        {page ? (
+          <Pager
+            current={page.current}
+            total={page.total}
+            href={(page) => (page === 0 ? `/blog` : `/blog/page/${page}`)}
+            className="py-8 mt-8"
+          />
+        ) : null}
+      </div>
+    </Layout>
+  )
+}
+
+export async function getStaticPaths(): Promise<GetStaticPathsResult> {
+  // Use SSG for the first pages, then fallback to SSR for other pages.
+  const paths = Array(5)
+    .fill(0)
+    .map((_, page) => ({
+      params: {
+        page: `${page + 1}`,
+      },
+    }))
+
+  return {
+    paths,
+    fallback: "blocking",
+  }
+}
+
+export async function getStaticProps(
+  context
+): Promise<GetStaticPropsResult<BlogPageProps>> {
+  const current = parseInt(context.params.page)
+
+  const params = new DrupalJsonApiParams()
+    .addFilter(
+      "field_site.meta.drupal_internal__target_id",
+      process.env.DRUPAL_SITE_ID
+    )
+    .addInclude(["uid", "field_image"])
+    .addFields("node--article", [
+      "title",
+      "path",
+      "body",
+      "uid",
+      "created",
+      "field_image",
+    ])
+    .addFields("user--user", ["field_name"])
+    .addFilter("status", "1")
+    .addSort("created", "DESC")
+
+  const result = await drupal.getResourceCollectionFromContext<JsonApiResponse>(
+    "node--article",
+    context,
+    {
+      deserialize: false,
+      params: {
+        ...params.getQueryObject(),
+        page: {
+          limit: NUMBER_OF_POSTS_PER_PAGE,
+          offset: context.params.page ? NUMBER_OF_POSTS_PER_PAGE * current : 0,
+        },
+      },
+    }
+  )
+
+  if (!result.data?.length) {
+    return {
+      notFound: true,
+    }
+  }
+
+  const nodes = drupal.deserialize(result) as DrupalNode[]
+
+  return {
+    props: {
+      nodes,
+      page: {
+        current,
+        total: Math.ceil(result.meta.count / NUMBER_OF_POSTS_PER_PAGE),
+      },
+      menus: await getMenus(context),
+    },
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/meta.jpg
+++ b/public/meta.jpg
--- a/public/robots.txt
+++ b/public/robots.txt
@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
--- a/styles/globals.css
+++ b/styles/globals.css
@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,14 @@
+module.exports = {
+  mode: "jit",
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "paths": {
+      "@/components/*": ["src/components/*"],
+      "@/nodes/*": ["src/nodes/*"],
+      "@/paragraphs/*": ["src/paragraphs/*"],
+      "@/views/*": ["src/views/*"],
+      "@utils/*": ["src/utils/*"],
+      "@/config": ["src/config"]
+    },
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
--- a/types/.gitkeep
+++ b/types/.gitkeep
--- a/types/drupal.d.ts
+++ b/types/drupal.d.ts
@ -0,0 +1,17 @@
+interface NodeProperty {
+  id: string
+  title: string
+  field_location: {
+    name: string
+    drupal_internal__tid: string
+  }
+}
+
+export interface DrupalMetatag {
+  tag: string
+  attributes: {
+    content: string
+    name?: string
+    rel?: string
+  }
+}