Add enhanced talks page

docusaurus.config.ts

@@ -50,6 +50,24 @@ const config: Config = {
 
   staticDirectories: ["static", "images"],
 
+  plugins: [
+    () => ({
+      name: "yaml-loader-plugin",
+      configureWebpack() {
+        return {
+          module: {
+            rules: [
+              {
+                test: /\.ya?ml$/,
+                use: "yaml-loader",
+              },
+            ],
+          },
+        };
+      },
+    }),
+  ],
+
   presets: [
     [
       "classic",
@@ -98,6 +116,7 @@ const config: Config = {
           label: "Docs",
         },
         { to: "/libraries", label: "Libraries", position: "left" },
+        { to: "/talks", label: "Talks", position: 'left'},
         { to: "/blog", label: "Blog", position: "left" },
         {
           "aria-label": "Discourse Forum",

package.json

@@ -29,7 +29,8 @@
     "@docusaurus/module-type-aliases": "3.7.0",
     "@docusaurus/tsconfig": "3.7.0",
     "@docusaurus/types": "3.7.0",
-    "typescript": "~5.6.2"
+    "typescript": "~5.6.2",
+    "yaml-loader": "^0.9.0"
   },
   "browserslist": {
     "production": [

src/pages/talks.mdx

@@ -0,0 +1,122 @@
+---
+title: Talks
+slug: talks
+hide_table_of_contents: true
+---
+
+import authors from '@site/blog/authors.yml';
+
+export const TalkPost = ({ title, date, duration, videoId, authorId, conference, tag }) => {
+  const author = authors[authorId];
+
+  // Safety check: if authorId is wrong, show error or fallback
+  if (!author) {
+    return <div className="alert alert--danger">Author ID "{authorId}" not found in authors.yml</div>;
+  }
+
+  const githubLink = author.socials?.github ? `https://github.com/${author.socials.github}` : null;
+
+  return (
+    <article className="margin-bottom--xl">
+      <header>
+        <h2 style={{ marginBottom: '0.5rem', fontSize: '2rem' }}>
+          <a href="#" style={{ textDecoration: 'none' }}>{title}</a>
+        </h2>
+
+        {/* METADATA ROW: Date, Duration, Conference, and Tag */}
+        <div className="margin-bottom--md" style={{ color: 'var(--ifm-color-content-secondary)', fontSize: '0.9rem', display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' }}>
+          <span><time>{date}</time> · {duration}</span>
+
+          {conference && (
+            <>
+              <span>·</span>
+              <span style={{ fontWeight: '600', color: 'var(--ifm-color-primary)' }}>{conference}</span>
+            </>
+          )}
+
+          {tag && (
+            <span className="badge badge--secondary" style={{ marginLeft: '4px' }}>
+              {tag}
+            </span>
+          )}
+        </div>
+
+        {/* AUTHOR ROW (Populated from YAML) */}
+        <div className="avatar margin-bottom--lg">
+          <a
+            className="avatar__photo-link avatar__photo avatar__photo--lg"
+            href={author.url}
+            target="_blank"
+          >
+            <img
+              alt={author.name}
+              src={author.image_url}
+            />
+          </a>
+          <div className="avatar__intro">
+            <div className="avatar__name">
+              <a href={author.url} target="_blank" rel="noopener noreferrer">
+                {author.name}
+              </a>
+            </div>
+            <small className="avatar__subtitle">
+              {author.title}
+            </small>
+
+            {/* Social Icons */}
+            <div style={{ display: 'flex', gap: '8px', marginTop: '4px' }}>
+              {githubLink && (
+                <a href={githubLink} target="_blank" style={{color: 'inherit'}} title="GitHub">
+                  <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
+                </a>
+              )}
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* VIDEO SECTION */}
+      <div style={{
+        position: 'relative',
+        paddingBottom: '56.25%',
+        height: 0,
+        overflow: 'hidden',
+        borderRadius: '8px',
+        marginBottom: '1rem',
+        backgroundColor: '#000',
+        border: '1px solid var(--ifm-color-emphasis-200)'
+      }}>
+        <iframe
+          src={`https://www.youtube.com/embed/${videoId}`}
+          style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 0}}
+          allowFullScreen
+          title={title}
+        />
+      </div>
+
+      <hr className="margin-vert--xl" />
+    </article>
+  );
+};
+
+# Talks
+
+<TalkPost
+  title="The Beman Project: Bringing C++ Standard Libraries to the Next Level"
+  date="October 24, 2024"
+  duration="70 min watch"
+  videoId="f4JinCpcQOg"
+  authorId="camio"
+  conference="CppCon 2024"
+  tag="Standard Library"
+/>
+
+<TalkPost
+  title="How to Use the Sender/Receiver Framework in C++ to Create a Simple HTTP Server"
+  date="September 15, 2024"
+  duration="60 min watch"
+  videoId="Nnwanj5Ocrw"
+  authorId="dietmarkuehl"
+  conference="CppCon 2024"
+  tag="Concurrency"
+/>