modified likes page

app/likes/page.tsx

@@ -1,3 +1,35 @@
-export default function Page() {
+import projectsData from '@/data/likesData'
-  return <div>ayoooooooooooooooo</div>
+import Card from '@/components/Card'
+import { genPageMetadata } from 'app/seo'
+
+export const metadata = genPageMetadata({ title: 'Likes' })
+
+export default function Likes() {
+  return (
+    <>
+      <div className="divide-y divide-gray-200 dark:divide-gray-700">
+        <div className="space-y-2 pb-8 pt-6 md:space-y-5">
+          <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
+            Likes
+          </h1>
+          <p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
+            These things are pretty cool, check 'em out.
+          </p>
+        </div>
+        <div className="container py-12">
+          <div className="-m-4 flex flex-wrap">
+            {projectsData.map((d) => (
+              <Card
+                key={d.title}
+                title={d.title}
+                description={d.description}
+                imgSrc={d.imgSrc}
+                href={d.href}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  )
 }

css/prism.css

@@ -80,7 +80,7 @@
 }
 
 .token.boolean {
-  color: rgb(255, 88, 116);
+  color: rgb(138, 21, 40);
 }
 
 .token.number {

data/headerNavLinks.ts

@@ -1,9 +1,7 @@
 const headerNavLinks = [
   { href: '/', title: 'Home' },
   { href: '/blog', title: 'Blog' },
-  { href: 'https://git.jonb.io/', title: 'Code' },
+  // { href: 'https://git.jonb.io/', title: 'Code' },
-  { href: 'https://up.jonb.io/status/default', title: 'Status' },
-  { href: 'https://castlemine-map.jonb.io/', title: 'Castlemine Map' },
   { href: '/likes', title: 'Likes' },
   { href: '/tags', title: 'Tags' },
   { href: '/projects', title: 'Projects' },

data/likesData.ts

@@ -0,0 +1,29 @@
+interface Likes {
+  title: string
+  description: string
+  href?: string
+  imgSrc?: string
+}
+
+const likesData: Likes[] = [
+  {
+    title: 'Gitea',
+    description: `My git server. Where all of the development happens.`,
+    href: 'https://git.jonb.io/',
+    imgSrc: 'https://s3.jonb.io/cdn/likes/gitea.jpeg',
+  },
+  {
+    title: 'Castlemine Map',
+    description: `Minecraft map for the castlemine.jonb.io server.`,
+    href: 'https://castlemine-map.jonb.io/',
+    imgSrc: 'https://s3.jonb.io/cdn/likes/minecraft.jpeg',
+  },
+  {
+    title: 'Uptime Kuma',
+    description: `App that monitors the kingdom.`,
+    href: 'https://up.jonb.io/status/default',
+    imgSrc: 'https://s3.jonb.io/cdn/likes/uptime-kuma.jpeg',
+  },
+]
+
+export default likesData

next.config.js

@@ -10,7 +10,7 @@ const ContentSecurityPolicy = `
   script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app analytics.umami.is;
   style-src 'self' 'unsafe-inline';
   img-src * blob: data:;
-  media-src *.s3.amazonaws.com;
+  media-src s3.jonb.io*;
   connect-src *;
   font-src 'self';
   frame-src giscus.app
@@ -77,6 +77,12 @@ module.exports = () => {
           protocol: 'https',
           hostname: 'picsum.photos',
         },
+        {
+          protocol: 'https',
+          hostname: 's3.jonb.io',
+          port: '',
+          pathname: '/cdn/**',
+        },
       ],
       unoptimized,
     },

tailwind.config.js

@@ -25,7 +25,7 @@ module.exports = {
         sans: ['var(--font-space-grotesk)', ...fontFamily.sans],
       },
       colors: {
-        primary: colors.pink,
+        primary: colors.cyan,
         gray: colors.gray,
       },
       zIndex: {