Initial buildout of References components

.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",
@@ -46,7 +46,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "7.45.4",
-    "react-router-dom": "5.3.4"
+    "react-router-dom": "5.3.4",
+    "react-simple-star-rating": "^5.1.7"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.2.5",

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)/references/[slug]/page.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { draftMode } from 'next/headers'
+import { notFound } from 'next/navigation'
+
+import { Reference } from '../../../../payload/payload-types'
+import { fetchDoc } from '../../../_api/fetchDoc'
+import { fetchDocs } from '../../../_api/fetchDocs'
+import { ReferenceHero } from '../../../_heros/ReferenceHero'
+
+// Force this page to be dynamic so that Next.js does not cache it
+// See the note in '../../../[slug]/page.tsx' about this
+export const dynamic = 'force-dynamic'
+
+export default async function Reference({ params: { slug } }) {
+  const { isEnabled: isDraftMode } = draftMode()
+
+  let reference: Reference | null = null
+
+  try {
+    reference = await fetchDoc<Reference>({
+      collection: 'references',
+      slug,
+      draft: isDraftMode,
+    })
+  } catch (error) {
+    console.error(error) // eslint-disable-line no-console
+  }
+
+  if (!reference) {
+    notFound()
+  }
+
+  return (
+    <React.Fragment>
+      <ReferenceHero reference={reference} />
+    </React.Fragment>
+  )
+}
+
+export async function generateStaticParams() {
+  try {
+    const references = await fetchDocs<Reference>('references')
+    return references?.map(({ slug }) => slug)
+  } catch (error) {
+    return []
+  }
+}

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/(pages)/styleguide/references-block/page.tsx

@@ -0,0 +1,35 @@
+import React, { Fragment } from 'react'
+import { Metadata } from 'next'
+import Link from 'next/link'
+
+import { ReferencesBlock } from '../../../_blocks/References'
+import { Gutter } from '../../../_components/Gutter'
+import { VerticalPadding } from '../../../_components/VerticalPadding'
+import { mergeOpenGraph } from '../../../_utilities/mergeOpenGraph'
+
+export default async function ReferencesBlockPage() {
+  return (
+    <Fragment>
+      <Gutter>
+        <p>
+          <Link href="/styleguide">Styleguide</Link>
+          {' / '}
+          <span>References Block</span>
+        </p>
+        <h1>References Block</h1>
+      </Gutter>
+      <VerticalPadding bottom="large" top="none">
+        <ReferencesBlock blockType="referencesBlock" />
+      </VerticalPadding>
+    </Fragment>
+  )
+}
+
+export const metadata: Metadata = {
+  title: 'References Block',
+  description: 'Styleguide for the References Block',
+  openGraph: mergeOpenGraph({
+    title: 'References Block',
+    url: '/styleguide/references-block',
+  }),
+}

src/app/_api/fetchDoc.ts

@@ -4,6 +4,7 @@ import type { Config } from '../../payload/payload-types'
 import { PAGE } from '../_graphql/pages'
 import { POST } from '../_graphql/posts'
 import { PROJECT } from '../_graphql/projects'
+import { REFERENCE } from '../_graphql/references'
 import { GRAPHQL_API_URL } from './shared'
 import { payloadToken } from './token'
 
@@ -20,6 +21,10 @@ const queryMap = {
     query: PROJECT,
     key: 'Projects',
   },
+  references: {
+    query: REFERENCE,
+    key: 'References',
+  },
 }
 
 export const fetchDoc = async <T>(args: {

src/app/_api/fetchDocs.ts

@@ -4,6 +4,7 @@ import type { Config } from '../../payload/payload-types'
 import { PAGES } from '../_graphql/pages'
 import { POSTS } from '../_graphql/posts'
 import { PROJECTS } from '../_graphql/projects'
+import { REFERENCES } from '../_graphql/references'
 import { GRAPHQL_API_URL } from './shared'
 import { payloadToken } from './token'
 
@@ -20,6 +21,10 @@ const queryMap = {
     query: PROJECTS,
     key: 'Projects',
   },
+  references: {
+    query: REFERENCES,
+    key: 'References',
+  },
 }
 
 export const fetchDocs = async <T>(

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/_blocks/References/index.module.scss

@@ -0,0 +1,13 @@
+@import '../../_css/common';
+
+.archiveBlock {
+  position: relative;
+}
+
+.introContent {
+  margin-bottom: calc(var(--base) * 2);
+
+  @include mid-break {
+    margin-bottom: calc(var(--base) * 2);
+  }
+}