improve navigation (#58)

why:
- author pills were not linking to author pages, 
- content cards were linking to content on their entirety thus rendering
buttons unclicable,
- highlights were not linking to content;
how:
- refactored Author pill to conditionally render based on number of
authors;
- added links to elements;
- adress category styling on hub highlights, solving #45

src/app/(pages)/[slug]/page.tsx

@@ -2,9 +2,13 @@ import { fetchAllContentByType, fetchGlobals } from "@/app/_utilities/contentFet
 import HubContentGrid from "@/app/_blocks/HubContentGrid";
 import HubHead from "@/app/_blocks/HubHead";
 import SearchBar from "@/app/_components/SearchBar";
+import { Header } from "@/app/_components/Header";
+import { Metadata } from "next";
+
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+
 
-export const dynamic = 'force-dynamic'
-export const revalidate = 0
 export default async function Page() {
 
   const content = {
@@ -20,6 +24,7 @@ export default async function Page() {
   return (
 
     <div>
+      <Header />
 
       <HubHead highlights={highlights} />
 
@@ -31,7 +36,25 @@ export default async function Page() {
       <HubContentGrid content={content} />
 
     </div>
-
-
   );
 }
+
+export function generateMetadata(): Metadata {
+  return {
+    title: 'Styleguide Page',
+    description: 'A guide to various styles in our application.',
+    openGraph: {
+      title: 'Styleguide Open Graph Title',
+      description: 'This is the Open Graph description for the Styleguide page.',
+      url: 'https://example.com/styleguide',
+      images: [
+        {
+          url: 'https://example.com/og-image.jpg',
+          width: 800,
+          height: 600,
+          alt: 'Og Image Alt Text',
+        },
+      ],
+    },
+  };
+}

src/app/(pages)/authors/[slug]/page.tsx

@@ -5,18 +5,27 @@ import AuthorSummary from '../../../_components/AuthorSummary'
 import BackButton from '../../../_components/BackButton'
 import styles from './styles.module.css'
 
+import { Header } from "../../../_components/Header";
 import { fetchContentBySlug } from "@/app/_utilities/contentFetchers";
 import { Author } from "@/payload-types";
+import { Metadata } from "next";
 
 export const dynamic = 'force-dynamic'
 
+const headerStyle = {
+  '--dynamic-background': 'var(--sub-purple-50)',
+  '--dynamic-color': 'var(--dark-rock-800)',
+  '--dynamic-width': 'calc(100% - 40px)',
+}
+
 export default async function ContributorPage({ params: paramsPromise }) {
   const { slug } = await paramsPromise
   const author = await fetchContentBySlug({ slug: slug, type: 'authors' })
   const contentFromAuthor = await fetchContentFromAuthor(author)
 
   return (
     <div>
+      <Header style={headerStyle}/>
       <div className={styles.container}>
         <BackButton className={styles.backButton} />
         <AuthorSummary author={author} />
@@ -27,3 +36,16 @@ export default async function ContributorPage({ params: paramsPromise }) {
     </div>
   )
 }
+
+export async function generateMetadata({ params: paramsPromise}): Promise<Metadata> {
+  const { slug } = await paramsPromise
+  const author = await fetchContentBySlug({
+    slug: slug,
+    type: "authors",
+  })
+
+  return {
+    // @ts-ignore
+    title: `Subvisual | ${author.name}`
+  }
+}

src/app/(pages)/blogposts/[slug]/page.tsx

@@ -13,6 +13,14 @@ import styles from "./styles.module.css";
 
 import { fetchContentBySlug } from "@/app/_utilities/contentFetchers";
 import { Blogpost } from "@/payload-types";
+import { Header } from "@/app/_components/Header";
+import { Metadata } from "next";
+
+const headerStyle = {
+  '--dynamic-background': 'var(--sub-purple-400)',
+  '--dynamic-color': 'var(--soft-white-100)',
+  '--dynamic-width': 'calc(100% - 40px)',
+}
 
 export default async function BlogpostPage({ params: paramsPromise }) {
   const { slug } = await paramsPromise;
@@ -23,8 +31,11 @@ export default async function BlogpostPage({ params: paramsPromise }) {
     depth: 3,
   });
 
+
+
   return (
     <div>
+      <Header style={headerStyle}/>
       <div className={styles.headContainer}>
         <BackButton className={styles.backButton} color={"var(--soft-white-100)"} />
         <PostSummary post={blogpost} />
@@ -54,3 +65,16 @@ export default async function BlogpostPage({ params: paramsPromise }) {
     </div>
   );
 }
+
+export async function generateMetadata({ params: paramsPromise}): Promise<Metadata> {
+  const { slug } = await paramsPromise
+  const blogpost = await fetchContentBySlug({
+    slug: slug,
+    type: "blogposts",
+  })
+
+  return {
+    // @ts-ignore
+    title: `Subvisual | ${blogpost.title}`
+  }
+}

src/app/(pages)/layout.tsx

@@ -11,11 +11,11 @@ export default async function RootLayout({ children }: { children: React.ReactNo
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
-        <link rel="icon" href="/favicon.ico" sizes="32x32" />
-        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+        <link rel="icon" href="https://cdn.prod.website-files.com/60fec5603634b635fcde315a/616efcb7df44b813d76f2e1e_favicon.png" sizes="32x32" />
+        <link rel="icon" href="https://raw.githubusercontent.com/subvisual/content-sub/refs/heads/main/public/media/sublogo.png" type="image/svg+xml" />
       </head>
       <body>
-        <Header />
+        {/*<Header />*/}
         {children}
         <Footer />
       </body>
@@ -25,9 +25,5 @@ export default async function RootLayout({ children }: { children: React.ReactNo
 
 export const metadata: Metadata = {
   metadataBase: new URL(process.env.NEXT_PUBLIC_SERVER_URL || 'https://payloadcms.com'),
-  twitter: {
-    card: 'summary_large_image',
-    creator: '@payloadcms',
-  },
   openGraph: mergeOpenGraph(),
 }

src/app/(pages)/page.tsx

@@ -1,6 +1,13 @@
 import PageTemplate from './[slug]/page'
+import { Metadata } from "next";
 
 export const dynamic = 'auto'
 export const revalidate = 10
 
 export default PageTemplate
+
+export function generateMetadata() : Metadata {
+  return {
+    title: 'Subvisual Content Hub Home'
+  }
+}

src/app/(pages)/podcasts/[slug]/page.tsx

@@ -5,11 +5,18 @@ import EpisodeContent from '../../../_blocks/EpisodeContent'
 import EpisodeHead from '../../../_blocks/EpisodeHead'
 import { RelatedContent } from '../../../_blocks/RelatedContent'
 import { Subscribe } from '../../../_blocks/Subscribe'
-
+import { Header } from '@/app/_components/Header'
 import { fetchContentBySlug } from "@/app/_utilities/contentFetchers";
+import { Metadata } from "next";
 
 export const dynamic = 'force-dynamic'
 
+const headerStyle = {
+  '--dynamic-background': 'var(--sub-purple-400)',
+  '--dynamic-color': 'var(--soft-white-100)',
+  '--dynamic-width': 'calc(100% - 40px)',
+}
+
 export default async function PodcastEpisodesPage({params: paramsPromise}) {
   const { slug } = await paramsPromise
 
@@ -23,12 +30,25 @@ export default async function PodcastEpisodesPage({params: paramsPromise}) {
 
   return (
     <div>
-
-
+      <Header style={headerStyle} />
       <EpisodeHead episode={episode} />
       <EpisodeContent episode={episode} />
       <RelatedContent content={episode} />
       <Subscribe />
     </div>
   )
 }
+
+export async function generateMetadata({ params: paramsPromise}): Promise<Metadata> {
+  const { slug } = await paramsPromise
+  const podcast = await fetchContentBySlug({
+    slug: slug,
+    type: "podcasts",
+  })
+
+  return {
+    // @ts-ignore
+    title: `Subvisual | ${podcast.title}`,
+
+  }
+}

src/app/(payload)/layout.tsx

@@ -1,21 +1,26 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import configPromise from '@payload-config'
-import '@payloadcms/next/css'
-import { RootLayout } from '@payloadcms/next/layouts'
-import React from 'react'
+import configPromise from "@payload-config";
+import "@payloadcms/next/css";
+import { RootLayout } from "@payloadcms/next/layouts";
+import React from "react";
 
-import './custom.scss'
-import { importMap } from './admin/importMap'
+import "./custom.scss";
+import { importMap } from "./admin/importMap";
 
 type Args = {
   children: React.ReactNode
 }
 
 const Layout = ({ children }: Args) => (
-  <RootLayout importMap={importMap} config={configPromise}>
-    {children}
-  </RootLayout>
-)
+  <>
+    <head>
+      <link rel="icon" href="https://cdn.prod.website-files.com/60fec5603634b635fcde315a/616efcb7df44b813d76f2e1e_favicon.png" sizes="32x32" />
+      <link rel="icon" href="https://raw.githubusercontent.com/subvisual/content-sub/refs/heads/main/public/media/sublogo.png" type="image/svg+xml" />
+    </head>
+    <RootLayout importMap={importMap} config={configPromise}>
+      {children}
+    </RootLayout></>
+);
 
-export default Layout
+export default Layout;

src/app/_blocks/BlogpostContent/index.tsx

@@ -8,11 +8,15 @@ export default function BlogpostContent({ blogpost }) {
   const { summary, featuredImage } = blogpost;
   return (
     <div className={styles.container}>
-      <div className={styles.featuredImage}>
-        {featuredImage && <FeaturedImage src={featuredImage.url} />}
+      {featuredImage && (
+        <div className={styles.featuredImage}>
+         <FeaturedImage src={featuredImage.url} />
       </div>
+        )}
       <div className={styles.summary}>{summary}</div>
-      <RichText content={blogpost.content} />
+      <div className={styles.content}>
+        <RichText content={blogpost.content} />
+      </div>
     </div>
   );
 }

src/app/_blocks/BlogpostContent/styles.module.css

@@ -5,7 +5,7 @@
 
 .featuredImage {
   position: relative;
-  width: 80%px;
+  width: 80%;
   height: 340px;
   margin: auto;
   border-radius: 45px;
@@ -26,3 +26,38 @@
   overflow-wrap: break-word;
 }
 
+.content h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5 {
+  font-size: var(--size-26);
+  margin-bottom: 20px;
+}
+
+.content p{
+  margin-bottom: 20px;
+}
+
+.content a {
+  color: var(--sub-purple-800);
+  font-weight: bold;
+}
+
+.content code {
+  background-color: var(--soft-white-100);
+  font-weight: bold;
+}
+
+@media (min-width: 1024px) {
+
+  .content h1,
+  .content h2,
+  .content h3,
+  .content h4,
+  .content h5 {
+    font-size: var(--size-28);
+  }
+
+
+}

src/app/_blocks/EpisodeContent/Contributors/index.tsx

@@ -1,12 +1,15 @@
-import AuthorPill from '@/app/_components/AuthorPill'
+import { AuthorPill } from "@/app/_components/AuthorPill";
 
 export default function Contributors({ className, authors }) {
   return (
     <div className={className}>
-      <p className={'outline'}>CONTRIBUTORS</p>
+      <p className={"outline"}>CONTRIBUTORS</p>
       {authors.map((author, i) => (
-        <AuthorPill large={true} author={author} key={i} />
+        <div>
+          {/* Author has to be passed as an Array for compatibility reasons */}
+          <AuthorPill authors={[author]} />
+        </div>
       ))}
     </div>
-  )
+  );
 }

src/app/_blocks/EpisodeContent/index.tsx

@@ -6,7 +6,7 @@ import styles from './styles.module.css'
 import Contributors from '@/app/_blocks/EpisodeContent/Contributors'
 import ListenOn from '@/app/_blocks/EpisodeContent/ListenOn'
 import RSSFeed from '@/app/_blocks/EpisodeContent/RSSFeed'
-import AuthorPill from '@/app/_components/AuthorPill'
+
 import Categories from '@/app/_components/Categories'
 import Share from '@/app/_components/Share'