Add a TokioConf CFP announcement at the top of the website

Author: carllerche

components/announcement.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from "react";
+
+const Announcement: FC = () => (
+  <div className="tk-announcement">
+    <div className="tk-announcement-content">
+      <a href="/blog/2025-09-26-announcing-tokio-conf-cfp">
+        The TokioConf 2026 Call For Talk Proposals is now open
+      </a>
+    </div>
+  </div>
+);
+
+export default Announcement;

components/layout.tsx

@@ -2,6 +2,7 @@ import React, { FC, ReactNode } from "react";
 
 import Head from "next/head";
 import Navigation from "./nav";
+import Announcement from "./announcement";
 import { Roboto } from "next/font/google";
 
 const roboto = Roboto({
@@ -35,6 +36,7 @@ const Layout: FC<Props> = ({ title, blog, children }) => (
       <link rel="alternate" type="application/rss+xml" href="/blog/index.xml" />
     </Head>
     <main className={roboto.className}>
+      <Announcement />
       <Navigation blog={blog} />
       {children}
     </main>

styles/styles.scss

@@ -101,6 +101,27 @@ a:active {
   overscroll-behavior-y: none;
 }
 
+.tk-announcement {
+  width: 100%;
+  background-color: $magenta;
+  padding: 0.75rem 1rem;
+  text-align: center;
+
+  .tk-announcement-content {
+    a {
+      color: white;
+      font-weight: 500;
+      text-decoration: none;
+      display: block;
+
+      &:hover {
+        color: white;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
 .content {
   h1,
   h2,