feat(ui/portal,api/cms): create and render social links collection

apps/cms/README.md

@@ -1,8 +1,8 @@
-# blank
+# cuHacking 2025 Content Management System (CMS)
 
 blank
 
 ## Attributes
 
-- **Database**: mongodb
+- **Database**: PostgreSQL
 - **Storage Adapter**: localDisk

apps/cms/src/app/social-links/route.ts

@@ -0,0 +1,14 @@
+import configPromise from '@payload-config'
+import { getPayload } from 'payload'
+
+export const GET = async () => {
+  const payload = await getPayload({
+    config: configPromise,
+  })
+
+  const data = await payload.find({
+    collection: 'social-links',
+  })
+
+  return Response.json(data)
+}

apps/cms/src/collections/SocialLinks.ts

@@ -0,0 +1,93 @@
+import type { CollectionConfig } from 'payload';
+
+export const SocialLinks: CollectionConfig = {
+  slug: 'social-links',
+  labels: {
+    singular: 'Social Link',
+    plural: 'Social Links',
+  },
+  admin: {
+    useAsTitle: 'platform',
+  },
+  fields: [
+    {
+      name: 'platform',
+      type: 'select',
+      required: true,
+      label: 'Social Media Platform',
+      options: [
+        {
+          label: 'Website',
+          value: 'website',
+        },
+        {
+          label: 'Portal',
+          value: 'portal',
+        },
+        {
+          label: 'Design',
+          value: 'design',
+        },
+        {
+          label: 'Architecture',
+          value: 'architecture',
+        },
+        // {
+        //   label: 'Tooling',
+        //   value: 'tooling',
+        // },
+        {
+          value: 'ESLint',
+          label: 'eslint',
+        },
+        {
+          label: 'Discord',
+          value: 'discord',
+        },
+        {
+          label: 'Instagram',
+          value: 'instagram',
+        },
+        {
+          label: 'LinkedIn',
+          value: 'linkedin',
+        },
+        {
+          label: 'Linktree',
+          value: 'linktree',
+        },
+        {
+          label: 'Figma',
+          value: 'figma',
+        },
+        {
+          label: 'GitHub Project Board',
+          value: 'github-project',
+        },
+        {
+          label: 'GitHub Repository',
+          value: 'github-repo',
+        },
+      ],
+    },
+    {
+      name: 'url',
+      type: 'text',
+      required: true,
+      label: 'URL',
+      validate: (value) => {
+        try {
+          new URL(value);
+          return true;
+        } catch {
+          return 'Invalid URL format';
+        }
+      },
+    },
+    // {
+    //   name: 'icon',
+    //   type: 'upload', // Optional: Use an upload field for platform-specific icons
+    //   relationTo: 'media', // Replace with the slug of your media collection
+    // },
+  ],
+};

apps/cms/src/endpoints/seed/index.ts

@@ -0,0 +1,37 @@
+import type { Payload, PayloadRequest } from 'payload';
+import { links } from './social-links'
+
+export const seed = async ({
+  payload,
+  req,
+}: {
+  payload: Payload;
+  req: PayloadRequest;
+}): Promise<void> => {
+  payload.logger.info('Seeding social media links...');
+
+  // Clear existing entries in the `social-links` collection
+  payload.logger.info('— Clearing existing links...');
+  await payload.delete({
+    collection: 'social-links',
+    depth: 0,
+    where: {}, // Deletes all entries in the collection
+  });
+
+  // Seed new social media links
+  payload.logger.info('— Adding new links...');
+  await Promise.all(
+    links.map((link) =>
+      payload.create({
+        collection: 'social-links',
+        data: {
+          platform: link.label || link.text,
+          url: link.url,
+          description: link.text,
+        },
+      }),
+    ),
+  );
+
+  payload.logger.info('Social media links seeded successfully!');
+};

apps/cms/src/endpoints/seed/social-links.ts

@@ -0,0 +1,61 @@
+export const links = [
+  {
+    text: 'Website',
+    url: 'https://cuhacking.ca',
+  },
+  {
+    text: 'Portal',
+    url: 'https://portal.cuhacking.ca',
+  },
+  {
+    text: 'Design',
+    url: 'https://design-cuhacking.netlify.app',
+  },
+  {
+    text: 'Architecture',
+    url: 'https://arch-cuhacking.netlify.app/#/projects/all?groupByFolder=true',
+  },
+  {
+    text: 'Tooling',
+    url: '/contribution-guidelines/coding-standards/tooling',
+  },
+  {
+    text: 'ESLint',
+    url: 'https://eslint-cuhacking.netlify.app/rules',
+  },
+  {
+    text: 'Discord',
+    label: 'Discord Link',
+    url: 'https://discord.gg/h2cQqF9aZf',
+  },
+  {
+    text: 'Instagram',
+    label: 'Instagram Link',
+    url: 'https://www.instagram.com/cuhacking/',
+  },
+  {
+    text: 'LinkedIn',
+    label: 'LinkedIn Link',
+    url: 'https://www.linkedin.com/company/cuhacking/',
+  },
+  {
+    text: 'Linktree',
+    label: 'Linktree Link',
+    url: 'https://linktr.ee/cuhacking_',
+  },
+  {
+    text: 'Brand',
+    label: 'Brand Link',
+    url: 'https://www.figma.com/design/wc1JOWR48tBNkjcjwY3AzB/%E2%8C%A8%EF%B8%8F-cuHacking-Design-System?node-id=0-1&t=YTR1ET4Qw1wG1cjz-1',
+  },
+  {
+    text: 'Github Project Board',
+    label: 'GitHub Project Board Link',
+    url: 'https://github.com/orgs/cuhacking/projects/4',
+  },
+  {
+    text: 'Github Repository',
+    label: 'GitHub Repository Link',
+    url: 'https://github.com/cuhacking/2025',
+  },
+];

apps/cms/src/payload.config.ts

@@ -9,6 +9,7 @@ import sharp from 'sharp'
 
 import { Users } from './collections/Users'
 import { Media } from './collections/Media'
+import { SocialLinks } from './collections/SocialLinks'
 
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
@@ -20,7 +21,11 @@ export default buildConfig({
       baseDir: path.resolve(dirname),
     },
   },
-  collections: [Users, Media],
+  collections: [
+    Users,
+    Media,
+    SocialLinks,
+  ],
   editor: lexicalEditor(),
   secret: process.env.PAYLOAD_SECRET || '',
   typescript: {

apps/portal/app/routes/_index.tsx

@@ -1,7 +1,24 @@
+import { useLoaderData } from '@remix-run/react'
+
+export async function loader() {
+  const response = await fetch('http://localhost:3001/social-links')
+  const { docs } = await response.json()
+
+  const links = docs.map(link => link.platform || link.text)
+  return Response.json(links)
+}
+
 export default function Index() {
+  const links = useLoaderData()
+
   return (
-    <>
-      Hellooooo
-    </>
+    <div>
+      <h1>Social Links</h1>
+      <ul>
+        {links.map((text, index) => (
+          <li key={index}>{text}</li>
+        ))}
+      </ul>
+    </div>
   )
 }