Add decap (#1652)

* initial implementation of decap

* improve configuration

* contentlayer experiment

* setup oauth flow via github for decap

* remove contentlayer files

* sort out paths and add back md dir for pages

* add page as a document type

* setup site url so that it points to our temporary Vercel deployment URL https://toiletmap-git-ob-decap-public-convenience-ltd.vercel.app/

* setup frontmatter and collection for mdx pages

* add blog posts to config

* first draft of blog setup

* create posts index page

* show a no posts available message to our users

* contentlayer -> content-collections

* improving styles for the blog pages

* Delete Blog Post “hello”

* Create Blog Post “test-post”

* decap changes

* remove .content-collections

* fix the build

* remove configuration for individual pages

* fix header styling, remove pages fully from content collections

* change decap config to refer to prod

.gitignore

@@ -18,6 +18,7 @@ build
 
 # OSX
 .DS_Store
+
 # IDE
 .idea
 
@@ -27,6 +28,7 @@ build
 .next
 .loos
 out
+certificates
 
 # Storybook build
 storybook-static
@@ -41,7 +43,13 @@ cypress/downloads
 tsconfig.tsbuildinfo
 
 # Prisma
-
 generated
 
+# DecapCMS
+out/
+
+# Content Collections
+.content-collections
+
+# Next TLS --experimental-https
 certificates

.storybook/main.js

@@ -32,6 +32,10 @@ module.exports = {
         alias: {
           ...config.resolve.alias,
           src: path.resolve(__dirname, '../src'),
+          // 'contentlayer/generated': path.resolve(
+          //   __dirname,
+          //   '../.contentlayer/generated',
+          // ),
         },
         fallback: {
           ...(config.resolve || {}).fallback,

content-collections.ts

@@ -0,0 +1,29 @@
+import { defineCollection, defineConfig } from '@content-collections/core';
+import { compileMarkdown } from '@content-collections/markdown';
+
+const posts = defineCollection({
+  name: 'posts',
+  directory: 'content/posts',
+  include: '**/*.md',
+  schema: (z) => ({
+    title: z.string(),
+    date: z.string(),
+    author: z.string(),
+    profileSocialUrl: z.string().optional(),
+    profilePictureUrl: z.string().optional(),
+  }),
+  transform: async (document, context) => {
+    // @ts-expect-error -- TODO: fix this
+    const html = await compileMarkdown(context, document);
+    return {
+      ...document,
+      slug: document._meta.fileName.split('.')[0],
+      url: `/posts/${document._meta.fileName.split('.')[0]}`,
+      html,
+    };
+  },
+});
+
+export default defineConfig({
+  collections: [posts],
+});

next.config.js

@@ -3,6 +3,12 @@
  **/
 const moduleExports = {
   reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      { hostname: 'avatars.githubusercontent.com' },
+      { hostname: 'rca-media2.rca.ac.uk' },
+    ],
+  },
   transpilePackages: [
     '@react-leaflet/core',
     'react-leaflet',
@@ -51,5 +57,8 @@ const moduleExports = {
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { withPlausibleProxy } = require('next-plausible');
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { withContentCollections } = require('@content-collections/next');
+
 // eslint-disable-next-line functional/immutable-data
-module.exports = withPlausibleProxy()(moduleExports);
+module.exports = withContentCollections(withPlausibleProxy()(moduleExports));

package.json

@@ -84,7 +84,7 @@
     "leaflet.markercluster": "^1.5.3",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.52.0",
-    "next": "^14.2.13",
+    "next": "^14.2.15",
     "next-plausible": "^3.12.2",
     "ngeohash": "^0.6.3",
     "prop-types": "^15.8.1",
@@ -98,14 +98,18 @@
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-typescript": "^7.24.7",
+    "@content-collections/core": "^0.7.2",
+    "@content-collections/markdown": "^0.1.2",
+    "@content-collections/mdx": "^0.1.6",
+    "@content-collections/next": "^0.2.3",
     "@emotion/babel-preset-css-prop": "^11.12.0",
     "@faker-js/faker": "^7.6.0",
-    "@graphql-codegen/cli": "^5.0.2",
+    "@graphql-codegen/cli": "^5.0.3",
     "@graphql-codegen/import-types-preset": "^3.0.0",
-    "@graphql-codegen/typescript": "^4.0.9",
-    "@graphql-codegen/typescript-operations": "^4.2.3",
+    "@graphql-codegen/typescript": "^4.1.0",
+    "@graphql-codegen/typescript-operations": "^4.3.0",
     "@graphql-codegen/typescript-react-apollo": "^4.3.2",
-    "@graphql-codegen/typescript-resolvers": "^4.2.1",
+    "@graphql-codegen/typescript-resolvers": "^4.3.0",
     "@graphql-eslint/eslint-plugin": "^3.20.1",
     "@jest/globals": "^29.7.0",
     "@mapbox/geojson-area": "^0.2.2",
@@ -127,12 +131,12 @@
     "@types/jest": "^29.5.13",
     "@types/leaflet": "^1.9.12",
     "@types/leaflet.markercluster": "^1.5.4",
-    "@types/lodash": "^4.17.9",
+    "@types/lodash": "^4.17.10",
     "@types/mapbox": "^1.6.45",
     "@types/mapbox__geojson-area": "^0.2.6",
-    "@types/ngeohash": "^0.6.4",
+    "@types/ngeohash": "^0.6.8",
     "@types/node": "20.14.8",
-    "@types/react": "^18.3.8",
+    "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "@types/styled-system": "^5.1.22",
     "@typescript-eslint/eslint-plugin": "^5.59.1",
@@ -164,20 +168,20 @@
     "postcss-loader": "^7.3.3",
     "prettier": "^3.3.3",
     "prisma": "^5.19.1",
-    "protomaps-leaflet": "3.1.2",
+    "protomaps-leaflet": "4.0.1",
     "require-from-string": "^2.0.2",
     "start-server-and-test": "^2.0.8",
     "storybook": "7.6.17",
     "storybook-addon-apollo-client": "^5.0.0",
     "style-loader": "^3.3.4",
-    "supabase": "^1.192.5",
+    "supabase": "^1.203.0",
     "topojson-server": "^3.0.1",
     "topojson-simplify": "^3.0.3",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.6.2",
     "wait-on": "^7.2.0",
-    "webpack": "^5.94.0"
+    "webpack": "^5.95.0"
   },
   "packageManager": "pnpm@8.6.3",
   "pnpm": {