Add image support to content block

.github/workflows/build.yml

@@ -19,8 +19,8 @@ jobs:
 
       - name: Source environment variables
         run: |
-          sudo cp /srv/portfolio/.env ./
-          sed -i 's/^PORT=.*/PORT=3300/' .env
+          sudo cp /srv/unforeseen-travels/.env ./
+          sed -i 's/^PORT=.*/PORT=3400/' .env
           source .env
 
       - name: Install pnpm

.github/workflows/release.yml

@@ -27,21 +27,21 @@ jobs:
 
       - name: Source environment variables
         run: |
-          sudo cp /srv/portfolio/.env ./
-          sed -i 's/^PORT=.*/PORT=3300/' .env
+          sudo cp /srv/unforeseen-travels/.env ./
+          sed -i 's/^PORT=.*/PORT=3400/' .env
           source .env
 
       - name: Install pnpm
         run: sudo npm install -g pnpm
 
       - name: Stop the production server
-        run: sudo systemctl stop portfolio || echo "Failed to stop the server, continuing..."
+        run: sudo systemctl stop unforeseen-travels || echo "Failed to stop the server, continuing..."
 
       - name: Steal ownership of production server directory
-        run: sudo chown -R gh-runner:gh-runner /srv/portfolio
+        run: sudo chown -R gh-runner:gh-runner /srv/unforeseen-travels
 
       - name: Link existing node modules
-        run: sudo ln -s /srv/portfolio/node_modules /home/gh-runner/actions-runner/_work/portfolio/portfolio/
+        run: sudo ln -s /srv/unforeseen-travels/node_modules /home/gh-runner/actions-runner/_work/unforeseen-travels/unforeseen-travels/
 
       - name: Install dependencies
         run: pnpm install
@@ -52,21 +52,21 @@ jobs:
       - name: Publish Executable
         if: success()
         run: |
-          sudo find /srv/portfolio/ -mindepth 1 \
-            ! -path '/srv/portfolio/media*' \
-            ! -path '/srv/portfolio/node_modules*' \
-            ! -name '/srv/portfolio/.git*' \
+          sudo find /srv/unforeseen-travels/ -mindepth 1 \
+            ! -path '/srv/unforeseen-travels/media*' \
+            ! -path '/srv/unforeseen-travels/node_modules*' \
+            ! -name '/srv/unforeseen-travels/.git*' \
             ! -name '.env' \
             ! -name 'log' \
             ! -name 'tmp' -exec rm -rf {} +
 
           sudo rsync -av --exclude 'node_modules' --exclude 'media' --exclude '.env' --exclude '.git' \
-            --exclude 'log' --exclude 'tmp' /home/gh-runner/actions-runner/_work/portfolio/portfolio/ /srv/portfolio/
+            --exclude 'log' --exclude 'tmp' /home/gh-runner/actions-runner/_work/unforeseen-travels/unforeseen-travels/ /srv/unforeseen-travels/
 
       - name: Install deps in prod after copy to be safe
         if: success()
         run: |
-          cd /srv/portfolio
+          cd /srv/unforeseen-travels
           pnpm install
 
       - name: Handle failure
@@ -76,10 +76,10 @@ jobs:
       - name: Restore permissions in production directory
         if: always()
         run: |
-          sudo chown -R www-data:www-data /srv/portfolio/
-          sudo chmod -R 755 /srv/portfolio/
+          sudo chown -R www-data:www-data /srv/unforeseen-travels/
+          sudo chmod -R 755 /srv/unforeseen-travels/
           sudo chown -R gh-runner:gh-runner /home/gh-runner/
 
       - name: Start production server
         if: always()
-        run: sudo systemctl start portfolio
+        run: sudo systemctl start unforeseen-travels

README.md

@@ -1,15 +1,7 @@
-# Portfolio Site
+# Unforeseen Travels
 
-This is my personal portfolio site built with Payload CMS (version 2 via 'npx-create-payload-app@latest', updating to 3 beta soon). The site showcases my work and skills, featuring custom blocks for enhanced interactivity and visual appeal.
+More info coming soon...
 
 ## Key Features
-
-- **Custom Babylon.js 3D Model Viewer Block**: A fully customizable 3D model viewer built using Babylon.js, allowing dynamic interaction with 3D models directly on the portfolio pages.
 
 - **IconRow Block**: A versatile block for displaying a row of icons, ideal for highlighting key technologies, tools, or skillsets in a visually appealing manner.
-
-## Technologies Used
-
-- **Payload CMS**: A headless CMS used to manage content efficiently, currently running on version 2 with plans to upgrade to version 3 beta.
-- **Babylon.js**: A powerful 3D engine for creating the interactive 3D model viewer.
-- **Custom Blocks**: Tailored blocks like the Babylon 3D Model Viewer and IconRow, designed to enhance the functionality and aesthetics of the site.

csp.js

@@ -12,7 +12,7 @@ const policies = {
   ],
   'font-src': ["'self'"],
   'frame-src': ["'self'"],
-  'connect-src': ["'self'", 'https://maps.googleapis.com', 'http://localhost:33000'],
+  'connect-src': ["'self'", 'https://maps.googleapis.com', 'http://localhost:34000'],
 }
 
 module.exports = Object.entries(policies)

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "portfolio",
+  "name": "unforeseentravels",
   "description": "Website template for Payload",
   "version": "1.0.0",
   "main": "dist/server.js",

src/admin/css/admin.css

@@ -5,3 +5,11 @@ body {
 .nav {
   background: rgba(0, 0, 0, 0.8);
 }
+
+.nav nav a {
+  color: white;
+}
+
+.nav-group__toggle {
+  color: #c0c0c0
+}

src/app/(pages)/styleguide/content-block/page.tsx

@@ -29,6 +29,18 @@ export default async function ContentBlockPage() {
                   text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                 },
               ],
+              useImage: false,
+              inlineMedia: {
+                imageScale: 100,
+                borderRadius: 50,
+                media: {
+                  url: '/path/to/icon1.jpg',
+                  alt: 'Icon 1',
+                  id: 0,
+                  createdAt: new Date().toDateString(),
+                  updatedAt: new Date().toDateString(),
+                },
+              },
             },
           ]}
         />

src/app/_blocks/Content/index.module.scss

@@ -37,6 +37,12 @@
   }
 }
 
+.columnImageContainer {
+  overflow: hidden;
+  margin: 0 auto;
+  image-rendering: optimizeQuality;
+}
+
 .link {
   margin-top: var(--base);
 }

src/app/_blocks/Content/index.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { Page } from '../../../payload/payload-types'
 import { Gutter } from '../../_components/Gutter'
 import { CMSLink } from '../../_components/Link'
+import { Media } from '../../_components/Media'
 import RichText from '../../_components/RichText'
 
 import classes from './index.module.scss'
@@ -22,11 +23,28 @@ export const ContentBlock: React.FC<
         {columns &&
           columns.length > 0 &&
           columns.map((col, index) => {
-            const { enableLink, richText, link, size } = col
+            const { enableLink, richText, link, size, useImage, inlineMedia } = col
+
+            if (useImage && !inlineMedia) return <div>Improper image config...</div>
+
+            const { imageScale, borderRadius, media } = inlineMedia
 
             return (
               <div key={index} className={[classes.column, classes[`column--${size}`]].join(' ')}>
                 <RichText content={richText} />
+                {useImage && (
+                  <>
+                    <div
+                      className={classes.columnImageContainer}
+                      style={{
+                        width: `${imageScale}%`,
+                        borderRadius: `${borderRadius ?? 0}%`,
+                      }}
+                    >
+                      <Media resource={media} />
+                    </div>
+                  </>
+                )}
                 {enableLink && <CMSLink className={classes.link} {...link} />}
               </div>
             )

src/app/_graphql/blocks.ts

@@ -1,6 +1,6 @@
 import { CATEGORIES } from './categories'
 import { LINK_FIELDS } from './link'
-import { MEDIA } from './media'
+import { INLINE_MEDIA, MEDIA } from './media'
 import { META } from './meta'
 
 export const CALL_TO_ACTION = `
@@ -20,6 +20,8 @@ export const CONTENT = `
   invertBackground
   columns {
     size
+    useImage
+    ${INLINE_MEDIA}
     richText
     enableLink
     link ${LINK_FIELDS()}

src/app/_graphql/media.ts

@@ -10,3 +10,9 @@ caption
 export const MEDIA = `media {
   ${MEDIA_FIELDS}
 }`
+
+export const INLINE_MEDIA = `inlineMedia {
+imageScale
+borderRadius
+${MEDIA}
+}`

src/payload/blocks/Content/index.ts

@@ -1,5 +1,6 @@
 import type { Block, Field } from 'payload/types'
 
+import { inlineMedia } from '../../fields/inlineMedia'
 import { invertBackground } from '../../fields/invertBackground'
 import link from '../../fields/link'
 import richText from '../../fields/richText'
@@ -28,7 +29,24 @@ const columnFields: Field[] = [
       },
     ],
   },
-  richText(),
+  {
+    name: 'useImage',
+    type: 'checkbox',
+    defaultValue: false,
+  },
+  inlineMedia({
+    overrides: {
+      admin: {
+        condition: (_, siblingData) => siblingData?.useImage === true,
+      },
+    },
+  }),
+  richText({
+    admin: {
+      condition: (_, siblingData) => siblingData?.useImage === false,
+    },
+    required: false,
+  }),
   {
     name: 'enableLink',
     type: 'checkbox',

src/payload/fields/inlineMedia.ts

@@ -0,0 +1,36 @@
+import type { Field } from 'payload/types'
+
+import deepMerge from '../utilities/deepMerge'
+
+type InlineMediaType = (options?: { overrides?: Record<string, unknown> }) => Field
+
+export const inlineMedia: InlineMediaType = ({ overrides = {} } = {}) => {
+  const defaultField: Field = {
+    name: 'inlineMedia',
+    type: 'group',
+    admin: {
+      condition: (_, siblingData) => siblingData?.useImage === true,
+    },
+    fields: [
+      {
+        name: 'imageScale',
+        type: 'number',
+        required: false,
+      },
+      {
+        name: 'borderRadius',
+        type: 'number',
+        required: false,
+      },
+      {
+        name: 'media',
+        type: 'upload',
+        relationTo: 'media',
+        required: false,
+      },
+    ],
+  }
+
+  // Merge the default field with any overrides
+  return deepMerge(defaultField, overrides)
+}